1. 初始化​

alembic init alembic

开始之前，线想一下你想了解什么

1. GCP有哪几种证书
2. 证书有没有有效期
3. 哪个证书最有用
4. 需要花钱吗

下定决心还是再学一遍JS等前端知识

• 前端技术
  • HTML：简单易学，掌握常用的标签即可
  • CSS：CSS属性规则较多，多做练习和项目
  • JavaScript：上手容易，但是精通很难 学会它只需要几分钟，掌握它需要很多年

1.1 认识编程语言​

1.1.1 编程语言定义​

• 计算机语言

  • HTML是一种标记语言，CSS是一种样式语言，属于计算机语言
  • JS adds life to a web page!

• JavaScript准确的说一门编程语言

  • 编程语言(英语:programming language)，是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧用来向计算机发出指令，一种能够让程序员准确地定义计算机所需要使用数据的计算机语言，并精确地定义在不同情况下所应当采取的行动。

• 编程语言具备的特点

  • 数据和数据结构
  • 指令以及流程控制
  • 引用机制和重用机制
  • 设计哲学

1.1.2 常见的编程语言​

• 比如LISP，现在仍然非常有用

  • 《黑客与画家》，人工智能

• 早期的语言，更接近机器的思维方式

• 近代更接近于人类的思维方式

1.2 编程语言发展历史​

1.2.1 阶段一：机器语言​

• 计算机的存储单元只有0和1两种状态，因此一串代码要让计算机“读懂”，这串代码只能由数字0和1组成。

• 像这种由数字0和1按照一定的规律组成的代码就叫机器码，也叫二进制编码

• -定长度的机器码组成了机器指令，用这些机器指令所编写的程序就称为机器语言

• 优点

  • 代码能被计算机直接识别，不需要经过编译解析直接对硬件产生作用
  • 程序的执行效率非常高

• 缺点

  • 程序全是些0和1的指令代码，可读性差，还容易出错
  • 不易编写(目前没有人这样开发);

1.2.2 阶段二：汇编语言​

• 为了解决机器语言的缺陷，人们发明了另外一种语言--汇编语言,

• 这种语言用符号来代替冗长的、难以记忆的0、1代码,(mov/push指令，经过汇编器，汇编代码再进一步转成0101)

• 优点

  • 像机器语言一样，可以直接访问、控制计算机的各种硬件设备
  • 占用内存少，执行速度快;

• 缺点

  • 第一，不同的机器有不同的汇编语言语法和编译器，代码缺乏可移植性 也就是说，一个程序只能在一种机器上运行，换到其他机器上可能就不能运行;
  • 第二，符号非常多、难记 即使是完成简单的功能也需要大量的汇编语言代码，很容易产生BUG，难于调试，

• 应用场景

  • 操作系统内核，驱动程序，单片机程序

1.2.3 阶段三：高级语言​

• 好的编程语言应该是什么?自然语言

• 而高级语言,就是接近自然语言,更符合人类的思维方式

• 跟和人交流的方式很相似,但是大多数编程语言都是国外发明的,因为都是接近于英文的交流方式

• 优点

  • 简单、易用、易于理解，语法和结构类似于普通英文
  • 远离对硬件的直接操作，使得一般人经过学习之后都可以编程，而不用熟悉硬件知识，
  • -个程序还可以在不同的机器上运行，具有可移植性;

• 缺点

  • 程序不能直接被计算机识别需要经编译器翻译成二进制指令后，才能运行到计算机上，
  • 种类繁多:JavaScript、c语言、C++、C#、Java、Objective-C、Python等,

1.3 JavaScript的历史​

1.3.1 认识JavaScript​

• 维基百科对JavaScript的定义:

  • JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言
  • JavaScript是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程序设计，指令式编程，以及函数式编程;

• 上面的定义中,我们会发现很多关键词:

  • 解释型语言?原型?头等函数?多范式?面向对象程序设计？指令式编程？函数式编程?
  • 这些改变往挂会让人不知所云，需要我们完全掌握JavaScript再来回头看，每一个词语描述的都非常准确;

• 现在只需要知道，通俗的说法:

  • JavaScript是一门高级编程语言,是前端开发的重要组成部分!

• HTML和CSS也是前端开发的重要组成部分，而JavaScript是前端开发的灵魂

1.3.2 JavaScript的起源​

• 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版口

  • 这是历史上第一个比较成熟的网络浏览器，轰动一时。
  • 但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。
  • 网景公司急需一种网页脚本语言，使得浏览器可以与网页互动，

• 网景公司当时想要选择一种语言来嵌入到浏览器中:

  • 采用现有的语言，比如Perl、Python、Tel、Scheme等等,允许它们直接嵌入网页;
  • 1995年网景公司招募了程序员Brendan Eich，希望将Scheme语言作为网页脚本语言的可能性;

• 就在这时，发生了另外一件大事:1995年Sun公司将0ak语改名为Java，正式向市场推出;

  • Java推出之后立马在市场上引起了轰动，Java当初有一个口号:"write once run anywhere"
  • 网景公司动了心，决定与Sun公司结成联盟，希望将Java嵌入到网页中来运行;
  • Brendan Eich本人非常热衷于Scheme，但是管理层那个时候有点倾向于Java，希望可以简化Java来适应网页脚本的需求

• 但是Brendan Eich对此并不感兴趣，他用10天时间设计出来了JavaScript;

  • 最初这门语言的名字是Mocha(摩卡)
  • 在Navigator2.0 beta版本更名为LiveScript,
  • 在Navigator2.0 beta 3版本正式重命名为JavaScript，当时是为了给这门语言搭上Java这个热词;

• 当然10天设计出来语言足够说明Brendan Eich是天才，但是这门语言当时更像是一个多种语言的大杂烩:

  • 借鉴c语言的基本语法;
  • 借鉴Java语言的数据类型和内存管理;
  • 借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位;
  • 借鉴Self语言，使用基于原型(prototype)的继承机制。

• Brendan Eich曾经这样描述过JavaScript:

  • 与其说我爱Javascript，不如说我恨它，它是C语言和Self语言一夜情的产物口
  • 十八世纪英国文学家约翰逊博士说得好:"它的优秀之处并非原创，它的原创之处并不优秀 (the part that is good is not original, and the part that is original is not good.)

• 微软公司于1995年首次推出InternetExplorer， 从而引发了与Netscape的浏览器大战。

  • 微软对Netscape Navigator解释器进行了逆向工程,以与处于市场领导地位的网景产品同台竞争; 创建寸JScript，
  • 这个时候对于开发者来说是一场噩耗:因为需要针对不同的浏览器进行不同的适配; 1996年11月，网景正式向ECMA(欧洲计算机制造商协会)提交语言标准。
  • 1997年6月，ECMA以JavaScript语言为基础制定了ECMAScript标准规范ECMA-262口 ECMA-262是一份标准，定义了ECMAScript;
  • JavaScript成为了ECMAScript最著名的实现之除此之外，ActionScript和JScript也都是ECMAScript规范的实现语言;

1.4 JavaScript的分类​

1.4.1 JavaScript的组成​

• ECMAScript是JavaScript的标准，描述了该语言的语法和基本对象。

  • JavaScript是ECMAScript的语言层面的实现;
  • 因为除了语言规范之外，JavaScript还需要对页面和浏览器进行各种操作
  • 除了基本实现之外，还包括DOM操作和BOM操作;

• JavaScript的组成

  • ECMAScript 定义语言规范
  • DOM 用于操作文档的API
  • BOM 用于操作浏览器的API

• 目前我们会针对性的学习ECMAScript，也就是语言层面的内容，特别是ES5之前的语法

1.5 JavaScript运行引擎​

1.5.1 JavaScript由谁来运行​

• 我们经常会说:不同的浏览器有不同的内核组成

  • Gecko:早期被Netscape和Mozila Firefox浏览器浏览器使用
  • Trident:微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink
  • Webkit:苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用;
  • Blink:是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等;
  • 等等.

• 事实上，我们经常说的浏览器内核指的是浏览器的排版引擎:

  • 排版引擎(layout engine)，也称为浏览器引擎(browserengine)
  • 页面渲染引擎(rendering engine)或样版引擎

• JavaScript代码由谁来执行？

  • JavaScript引擎

1.5.2 认识JavaScript引擎​

• 为什么需要JavaScript引擎呢?
  • 我们前面说过，高级的编程语言都是需要转成最终的机器指令来执行的;
  • 事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的;
  • 但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行，
  • 所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行;

比较常见的JavaScript引擎有哪些呢?

• SpiderMonkey:第一款JavaScript引擎，由Brendan Eich开发(也就是JavaScript作者)
• Chakra:微软开发，用于IE浏览器
• JavaScriptCore: WebKit中的JavaScript引擎，Apple公司开发;
  • 手机端比较多，
  • IOS-> UIWebView
  • 小程序
• V8:Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出;
• 等等...

1.5.3 浏览器内核和JS引擎的关系​

• 这里我们先以WebKit为例，WebKit事实上由两部分组成的:

  • WebCore:负责HTML解析、布局、渲染等等相关的工作
  • JavaScriptCore:解析、执行JavaScript代码:

• 小程序中也是这样的划分

  • 在小程序中编写的JavaScript代码就是被JSCore执行的;

1.6 JavaScript应用场景​

1.6.1 著名的Atwood定律​

• Stack Overflow的创立者之一的 Jeff Atwood 在2007年提出了著名的 Atwood定律:
  • Any application that can be written in JavaScript, will eventually be written in JavaScript.
  • 任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现

1.6.2 JS应用越来越广泛​

2. JavaScript基础

3. 变量与数据类型

3.1 认识JavaScript变量​

3.2 变量的定义，规范等​

3.3 数据类型和typeof​

3.4 常见的数据类型​

3.5 数据类型的转换​

下定决心还是再学一遍JS等前端知识

1. JavaScript编写方式​

1.1 编写在HTML内部​

<a href="#" onclick="alert('百度一下')">百度-下</a>

<a href="alert('百度一下')">百度-下</a>

1.2 编写在Script元素内​

<a class="google" href="#">Google一下</a>

<script>
var google = document.querySelector(".google");
google.onclick = function() {
  alert("google");
}
</script>

1.3 独立的js文件​

• 通过script的src属性来引入外部文件
• bing.js

var bing = document.querySelector(".bing");
bing.onclick = function() {
  alert("bing");
}

• .html

<script src="./bing.js"></script>

2. noscript元素的使用​

<noscript>
您的浏览器不支持JavaScript
</noscript>

3. JavaScript注意事项​

注意一: script元素不能写成单标签 口在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签 口即不能写成; 注意二: 省略type属性 口 在以前的代码中，

<script>标签中会使用 type="text/javascript"口 现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言</script>

注意三: 加载顺序 口 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序;口 推荐将JavaScript代码和编写位置放在body子元素的最后一行 注意四: JavaScript代码严格区分大小写 口 HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写后续补充:script元素还有defer、async属性，我们后续再详细讲解

4. JavaScript交互方式​

4.1 JavaScript交互方式​

• JavaScript有如下和用户交互的手段

• 最常用的是console.log

• 交互方法

  • alert
    • 接受一个参数，弹窗查看
  • console.log
    • 接受多个参数，在浏览器控制台查看
  • document.write
    • 接受多个字符串，在浏览器页面查看
  • prompt
    • 接受一个参数，在浏览器接受用户输入

4.2 Chrome的调试工具​

• 使用Console来查看JavaScript的一些内容

• 补充

  • 1.如果在代码中出现了错误，那么可以在console中显示错误
  • 2.console中有个>标志，它表示控制台的命令行
    • 在命令行中我们可以直接编写JavaScript代码，按下enter会执行代码;
    • 如果希望编写多行代码，可以按下shift+enter来进行换行编写;
  • 3.在后续我们还会学习如何通过debug方式来调试、查看代码的执行流程

5. JavaScript语句和分号​

• 语句是向浏览器发出的指令，通常表达一个操作或者行为(Action)
  • 语句英文是Statements;
  • 比如我们前面编写的每一行代码都是一个语句，用于告知浏览器一条执行的命令

alert("Hello World");

• 通常每条语句的后面我们会添加一个分号，表示语句的结束:

  • 分号的英文是semicolon
  • 当存在换行符(line break)时，在大多数情况下可以省略分号
  • JavaScript 将换行符理解成"隐式"的分号
  • 这也被称之为自动插入分号(an automatic semicolon)

• 推荐

  • 前期在对Javascript语法不熟悉的情况推荐添加分号
  • 后期对JavaScript语法熟练的情况下，任意!

6. JavaScript注释方式​

• 单行注释

  • // xxx

• 多行注释

  /*
  ...
  */
  

• 文档注释

  • 使用插件: jsDoc

  /**

  • 和某人打招呼的函数
  • @param {string} name 姓名
  • @param {number} age 年龄 function sayHello(name, age)

  sayHello("jie", 28) */

7. VSCode 插件和配置​

• 推荐一个VSCode的插件:(个人经常使用的)
  • ES7+ React/Redux/React-Native snippets
  • 这个插件是在react开发中会使用到的，但是我经常用到它里面的打印语句，

另外再推荐一个插件:

• Bracket Pair Colorizer2，但是该插件已经不再推荐使用了

  • 因为VSCode已经内置了该功能，我们可以直接通过VSCode的配置来达到插件的效果;
  • 如何配置呢？
    • 右上角打开设置 -> 出现配置文件,放到最下面的位置即可
    • 文件 -> 首选项 -> 设置 ->

  "editor.bracketPairColorization.enabled": true,
  editor.guides.bracketPairs":"active"
  
  

• 比如敲console.log(),

  • 可以直接打log，会出来console.log()
  • 另一种方式是，敲clg,使用的插件是react插件

8. 变量与数据类型​

8.1 认识JavaScript变量​

8.1.1 程序中的变量​

• 在我们平时开发中，使用最多的并不是固定的数据，而是会变换的数据:
  • 比如购物车商品的数量、价格的计算等等
  • 比如一首歌曲播放的时间、进度条、歌词的展示等等
  • 比如微信聊天中消息条数、时间、语音的长度、头像、名称等等;
  • 比如游戏中技能的冷却时间、血量、蓝量、buff时间、金币的数量等等;

8.1.2 变化数据的记录-变量​

• 如果我们希望记录某一个之后会变量的数据，在JavaScript中我们可以定义一个 变量

  • 一个变量，就是一个用于存放数值的容器
  • 这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据
  • 变量的独特之处在于它存放的数值是可以改变的；

• 我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子进行一个特性的名称。

  • 例如，变量 message 可以被想象成一个标有"message"的盒子，盒子里面的值为"Hello!"
  • 并且，这个盒子的值，我们想改变多少次，就可以改变多少次;

8.2 变量的定义，规范等​

8.2.1 变量的命名格式​

• 在JavaScript中如何命名一个变量呢?包含两部分:

  • 变量的声明:在JavaScript中声明一个变量使用var关键字(variable单词的缩写)(后续学习ES6还有let、const声明方式)
  • 变量的赋值:使用=给变量进行赋值;

• 也可以分开操作

  var name;
  name = "Jie";
  

• 同时声明多个变量

  var name, age, height;
  name = "Jie";
  age = 18;
  height = 188;
  

8.2.2 变量的命名规范​

• 变量命名规则:必须遵守 1.第一个字符必须是一个字母、下划线(_)或一个美元符号($) 2.其他字符可以是字母、下划线、美元符号或数字 3.不能使用关键字和保留字命名

• 什么是关键字，什么是保留字?

  • https://developer.mozilla.org/zh-CN/docs/web/javascript/reference/lexical_grammar

变量命名规范:建议遵守

• 多个单词使用驼峰标识
• 赋值 =两边都加上一个空格
• 一条语句结束后加上分号;也有很多人的习惯是不加!
• 变量应该做到见名知意

8.2.3 练习​

• 定义两个变量保存两个数字，对两个变量中的数字进行交换
  • 方法一：借助第三个变量
  • 方法二：不借助第三个变量

    num1 = num1 + num2
    num2 = num1 - num2
    num1 = num1 - num2
    

8.2.3 注意​

• 如果一个变量没被声明，就直接使用，会报错

• 如果一个变量声明了，但是没被赋值，默认值是 undefined

• 如果没有使用var声明变量也可以，但是不推荐，（事实上会被添加到window对象上）

8.3 数据类型和typeof​

8.3.1 JavaScript的数据类型​

• JavaScript 中的值都具有特定的类型。

  • 例如，字符串或数字。
  • 我们可以将值赋值给一个变量，那么这个变量就具备了特定的类型
  • 一个变量可以在前一刻是个字符串，下一刻就存储一个数字,
  • 允许这种操作的编程语言，例如JavaScript，被称为"动态类型"(dynamically typed)的编程语言;

• 在JavaScript 中有8种基本的数据类型(7 种原始类型和1种复杂类型)

  • Number
  • String
  • Boolean
  • Undefined
  • Null
  • Object
  • Bigint(后续了解)
  • Symbol(后续了解)

8.3.2 typeof操作符​

• 因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型

  • typeof 操作符就是为此而生的。

• 对一个值使用 typeof 操作符会返回下列字符串之一:

  • "undefined"表示值未定义;
  • "boolean"表示值为布尔值;
  • "string"表示值为字符串;
  • "number"表示值为数值;
  • "object"表示值为对象(而不是函数)或 null;
  • "function"表示值为函数;
  • "symbol"表示值为符号

• typeof()的用法:

  • 你可能还会遇到另一种语法:typeof(x)，它与 typeof x 相同
    • 类似 var result = (2+3)*4;, ()是将 2+3作为一个整体
  • typeof是一个操作符，并非是一个函数，()只是将后续的内容当做一个整体而已

8.4 常见的数据类型​

8.5 数据类型的转换​

下定决心还是再学一遍CSS等前端知识

1. 认识Flex布局和Flex布局的由来​

1.1 认识Flex box​

• Flexbox翻译为弹性盒子
  • 弹性盒子是一种用于按行或者按列布局元素的一维布局方法
  • 元素可以膨胀以填充额外的空间，收缩以适应更小的空间
  • 通畅我们使用Flexbox来进行布局的方案称之为flex布局（flex layout）
• flex布局是目前web开发中使用最多的布局方案
  • flex布局（Flexible布局，弹性布局）
  • 目前特别在移动端可以说已经完全普及
  • 在PC端也几乎已经完全普及和使用，只有非常少数的网站依然在用浮动来布局
• 为什么需要flex布局
  • 长久以来，CSS布局中唯一可靠且跨浏览器兼容的布局工具只有floats和positioning
  • 但是这两种方法本身存在很大的局限性，使用他们是无奈之举

1.2 原先布局存在的痛点​

• 举例
  • 比如在父内容里面垂直居中一个块内容
    • "44 years ago we put a man on the moon, but we still can't vertically center things in CSS." -- by Juozas Kaziukenas, 2013-07-21
  • 使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用
  • 使多列布局中的所有列采用相同的高度，即使他们包含的内容量不同

1.3 Flex布局的出现​

• 所以长久以来，大家非常期待一种真正可以用于对元素布局的方案：于是Flex布局出现了

  • "Nature and nature's laws lay hid in night; God said "Let Newton be" and was light." -- 牛顿的墓志铭

• 如果担心其兼容性问题

  • 可以在CanIuse查询具体的兼容性

2. 两个非常重要的概念​

• 开启了flex布局的元素叫 flex container
• flex container里面的直接子元素叫做 flex item

2.1 container​

• 设置display属性为flex或者inline-flex可以成为flex container
  • flex：flex container以block-level形式存在
  • inline-flex：flex container以inline-level形式存在

2.2 flex item​

• 当flex container中的子元素变成了flex item的时候，具备以下特点
  • flex item的布局将受flex container属性的设置来进行控制和布局
  • flex item不再严格区分块级元素和行内级元素
  • flex item默认情况下是包裹内容的，但是可以设置宽度和高度

3. Flex布局的模型，坐标轴，主轴和交叉轴​

• main axis
• cross axis

4. Flex相关的属性​

4.1 应用在flex container上的CSS属性​

4.1.1 flex-flow​

4.1.2 flex-direction​

• 决定main axis的方向
  • row 默认值
  • row-reverse
  • column
  • column-reverse

4.1.3 flex-wrap​

• nowrap: 默认，单行
• wrap: 多行
• wrap-reverse: 多行，对比wrap，cross start与 cross end相反

4.1.4 justify-content​

4.1.5 align-items​

4.1.6 align-content​

4.1.7 flex-flow​

• 是flex-direction和flex-wrap的简写属性
  • 顺序随便，并且都可以省略

4.1.8 justify-content​

• flex-start: 默认值，与main start 对其
• flex-end：与main end对其
• center 居中对其
• space-between:
  • flex items之间的距离相等
  • 与main start，main end两端对齐
• space-arount:
  • flex items之间的距离相等
  • flex items与main start，main end之间的距离是flex items之间距离的一半
• space-evenly:
  • flex items之间的距离相等
  • flex items与main start，main end之间的距离等于flex items之间距离

4.1.9 align-items​

• align-items 决定了flex items在cross axis上的对齐方式
  • normal: 在弹性布局中，效果和stretch一样
  • stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
  • flex-start: 与cross start对齐
  • flex-end：与cross end对齐
  • center: 居中对齐
  • baseline: 与基准线对齐

4.1.10 align-content​

• 决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
  • stretch 默认值：与align-items的stretch类似
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

4.2 应用在flex items 上的CSS属性​

4.2.1 flex-grow​

• 决定了flex items如何扩展（拉伸/成长）
  • 默认值是0，可以设置任意非负数字，
  • 当flex container在main axis方向上有剩余 size时，flex-grow属性才会有效
• 如果所有 flex items的flex-grow总和sum超过1，每个flex item扩展的size为
  • flex container 的剩余size * flex-grow / sum
• flex items扩展后的最终size不能超过max-width/max-height

4.2.2 flex-basis​

• 用来设置flex items在main axis方向上的base size
  • auto 默认值
  • 具体的宽度数值
• 决定flex items最终base size的因素，优先级从高到低
  • max-width,max-height,min-width,min-height
  • flex-basis
  • width,height
  • 内容本身的size

4.2.3 flex-shrink​

4.2.4 order​

• order越小，越排在前面
• 可以设置任意整数，默认值是0

4.2.5 align-self​

• 覆盖flex container设置的align-items
  • auto

4.2.6 flex​

-flex是flex-grow,flex-shrink,flex-basis的简写，可以指定1个，2个或者3个值

• 单值语法：值必须为以下其中之一 -一个无单位：会被当作flex-grow

  • 一个有效的宽度值：会被当作flex-basis的值
  • 关键字none，auto或者initial -双值语法
  • 第一个值必须为一个无单位数，并且会被当作flex-grow的值
  • 第二个必须为以下之一：
    • 一个无单位数：会被当作flex-shrink的值
    • 一个有效的宽度值：会被当作flex-basis的值

• 三值语法

  • 第一个必须无单位: flex-grow
  • 第二个必须无单位: flex-shrink
  • 第三个必须为一个有效的宽度值：flex-basis

• 添加span的个数是列数减2

创业并不一定是要租公寓楼，招员工，很多事儿都可以一个人搞定。

最重要的是自己先把流程跑通，后续如果可以扩大，再招人帮你分担更好。

下面分享我个人成立公司以及个体户前后需要做的事儿

如果你的公司没有专门的财务，会计，下面的分享可能对你非常有帮助

1. 公司篇​

1.1 注册​

1.2 xxx​

1.3 设立后需要定时处理的事儿​

1.3.1 工商​

每年6月30号之前去国家企业信用信息公示系统发布年报：https://scjg.hubei.gov.cn/hbgsxt/#/layout/login 否则会有工商处罚，一般是罚款，然后系统上会有记录，如果想消除的话得花钱弄

1.3.2 税务​

湖北地区（其他地区可能类似）：

1. 每个月15号之前登陆个人所得税扣缴端报税（遇上非工作日的话，一般会延后几天，但是建议每个月早点弄完）

2. 每个季度（1，4，7，10）前几天去做季度申报

以上除了你自己之外，没有其他员工都可以0申报，当然如果你自己确实走了对公账户，就得真实申报了。

2. 个体工商户篇​

2.1 申报​

2.2 xxx​

2.3 设立后需要定时处理的事儿​

1.3.1 工商​

1.3.2 税务​

• 每年去做一次额定

3. 个人篇​

1. 内家拳​

http://www.360doc.com/content/21/0121/03/73463356_958069511.shtml

第一名，《逝去的武林》，李仲轩口述，徐浩峰整理，南海出版公司；

第二名，《内家拳气轴论》，涂行健著，逸文武术文化有限公司；

第三名，《内家拳的正确打开方式》，刘杨著，北京科学技术出版社；

第四名，《痴博士习武 39 讲》，宋嘉宁编著，山西科学技术出版社；

第五名，《顶天立地的功夫——形意拳内功讲记》，马世琦著，中国文联出版社；

第六名，《王映海传戴氏心意拳精要》，王喜成主编，北京科学技术出版社；

第七名，《薛颠形意拳术讲义》；

第八名，《卢氏心意拳传习录》，余江编著，北京科学技术出版社；

第九名，《形意拳技击术》，尚济著，山西科学技术出版社；

第十名，《朱天才解读太极拳》，朱天才著，中原农民出版社。

武学内劲入门实操指导

• 证书管理列表，可以看到什么时候到期

https://console.cloud.google.com/security/ccm/list/lbCertificates?inv=1&invt=AbxLzQ&project=account-health-monitor-dev

1. 获取project id​

2. artifact​

Artifact Registry API

create repository ->

3. create service accounts​

pulumi stack​

dev, qa, prod

Dev 需要给qa, artifact repository, storage 的权限

Cloud Run Admin API

Database Migration API

Cloud SQL Admin API

Cloud Scheduler API

Compute Engine API

secret manager API

service-117025067244@serverless-robot-prod.iam.gserviceaccount.com for dev, artifact registory

Google Sheets API

Google Drive API

(base) jiexu:~/ $ gcloud services enable talent-marketplace-1o7yy5f215ahi.apigateway.talent-marketplace-qa-7ba7.cloud.goog [17:49:07]

gcloud api-gateway gateways update talent-marketplace-gateway \
  --api=talent-marketplace-gateway \
  --api-config=talent-marketplace-using-ahm-dev-v2 \
  --project=talent-marketplace-dev-558f



  # 创建新的 API 配置
gcloud api-gateway api-configs create v6-config-20250611-2 \
  --api=talent-marketplace-gateway \
  --openapi-spec=/Users/jiexu/coding/tw/talent/talent-marketplace-backend/api-gateway-v6.yaml \
  --project=talent-marketplace-dev-558f \
  --backend-auth-service-account=talent-marketplace@talent-marketplace-dev-558f.iam.gserviceaccount.com

# 更新网关
gcloud api-gateway gateways update talent-marketplace-gateway \
  --api=talent-marketplace-gateway \
  --api-config=v6-config-20250611-2 \
  --location=us-central1 \
  --project=talent-marketplace-dev-558f



curl -X GET https://talent-marketplace-gateway-ddahn5mv.uc.gateway.dev/app/user \
  -H "Origin: http://example.com" \
  -H "Access-Control-Request-Method: GET" \
  -H "Access-Control-Request-Headers: Authorization" \
--header 'authorization: Bearer eyJraWQiOiJ5V0RLMXZkVkFWVlBzc1EwNjJGaVduVkZFRGozVlNLRkZYNHZkb1RCLWxVIiwiYWxnIjoiUlMyNTYifQ.eyJ2ZXIiOjEsImp0aSI6IkFULnB4end3ZThNdUZXY0JNeXVWeTNYVUZvNEEyWkc1Zjh0ZnEyTVZnZ3hSWFUiLCJpc3MiOiJodHRwczovL2Rldi05MDE1NTQ1NS5va3RhLmNvbS9vYXV0aDIvZGVmYXVsdCIsImF1ZCI6ImFwaTovL2RlZmF1bHQiLCJpYXQiOjE3NDk2MjYwNTcsImV4cCI6MTc0OTY4MzY1NywiY2lkIjoiMG9hcDQ0ZmsxODJjTkk5ZFk1ZDciLCJ1aWQiOiIwMHVldWZ2cDdlT2Z6UWxLSDVkNyIsInNjcCI6WyJvcGVuaWQiLCJwcm9maWxlIiwiZW1haWwiXSwiYXV0aF90aW1lIjoxNzQ5NjI2MDUyLCJzdWIiOiJqaWUueHVAdGhvdWdodHdvcmtzLmNvbSIsImVtcCI6IjI4Nzc1In0.NUCQ9rHz4eIthNzRpiHw0oSeG90_A7fTsCgyWd4VFUuIFpCDQ-xh_REvLXrCw0BVhTRDsWi12yD9yDt_OHPrefsxLf7oIkfUGQl_hi_kRtsaDL3Qjp9CKQv9ZC4PGtT79ppDbFmTRZHd1anoPHfbTgIq37ftoLIygsS8u5v72yJAYliRZ0-e1IxeGyAFhHxoV8rCEn23KSZ0FEii-Ce7YSQUFi7wn-F9o-RLaXnG1HFVaB28UC5PlGeTyOSh7Jjg0I61ZJjNDpuk0oFua2TB4zBhUILklDrBkoYqznHOY1GIVqmS34ktMNftycP8k1Ql4iQl2VfOQwcEKYXneze62g' \
  -v

  

enabled API:
  to 
	Cloud SQL Admin API

	gateway:

	API Gateway API
		API Gateway enables you to provide secure access to your services.
	Service Control API
		Provides control plane functionality to managed services, such as logging, monitoring, and status checks
	Service Management API
		Service Management allows service producers to publish their services on Google Cloud Platform


AIzaSyBXsgeymgRacXS-zZYUv-01HSRUmzoyPVA



    "Aupro-cli": {
      "command": "/Users/jiexu/Downloads/aupro-cli-v0.0.8-darwin-arm64/aupro-cli",
      "args": ["serve"]
    }


 pandoc --citeproc \
--csl gb-t-7714-2015-numeric-bilingual-no-uppercase-no-url-doi.csl \
--bibliography ref.bib  --reference-doc=templates_refine.docx -s /Users/jiexu/coding/website/gin1995.top/blog/kehu/4-2025-05-15-AI车辆登船记录系统技术解决方案评估.md  -o output.docx

创建service account
	talent-marketplace@gits-ai-hackathon-team-6-4990.iam.gserviceaccount.com
创建postgres
	postgres

	DB_PASSWORD: postgres@dev
	DATABASE_URL: jdbc:postgresql://10.230.0.3/talent_matching_profiling	
secret manager
    	DATABASE_URL: jdbc:postgresql://34.56.253.170/talent_matching_profiling	
	DATABASE_PASSWORD
artifact image registery
	

psql "host=localhost port=1234 dbname=postgres user=postgres password=yJ4t>Iec&9/VPOKh sslmode=disable"

us-central1-docker.pkg.dev/gits-ai-hackathon-team-6-4990/talent-marketplace

gcloud auth configure-docker us-central1-docker.pkg.dev

docker build -t us-central1-docker.pkg.dev/talent-marketplace-dev-558f/talent-marketplace/backend:latest .

docker push us-central1-docker.pkg.dev/talent-marketplace-dev-558f/talent-marketplace/backend:latest

10.209.21.119


URL="https://storage.googleapis.com/cloud-sql-connectors/cloud-sql-proxy/v2.16.0"

curl "https://storage.googleapis.com/cloud-sql-connectors/cloud-sql-proxy/v2.16.0/cloud-sql-proxy.darwin.arm64" -o cloud-sql-proxy

chmod +x cloud-sql-proxy


./cloud-sql-proxy --address 0.0.0.0 --port 1236 talent-marketplace-dev-558f:us-central1:talent-marketplace


psql "host=localhost port=1236 dbname=postgres user=postgres password=postgres@dev sslmode=disable"

psql "host=34.42.230.11 port=5432 dbname=postgres user=postgres password=postgres@dev sslmode=disable"


pulumi login gs://talent-marketplace-backend-iac

https://yu-jack.github.io/2022/02/22/pulumi-tutor/

1. 快捷键​

1.1 命令行打开​

pycharm -->Tools-->Create Command-line Lanucher

echo 'export PATH="/Applications/PyCharm.app/Contents/MacOS:$PATH"' >> ~/.zshrc
source ~/.zshrc