From a4cdcd099acfc9774dd80bd69feadd780f0ad893 Mon Sep 17 00:00:00 2001
From: zknu2015 <2536963991@qq.com>
Date: Fri, 25 Sep 2020 22:37:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8D=9A=E5=AE=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_posts/React\344\273\213\347\273\215.md"  |  20 ++
 ...ct\350\204\232\346\211\213\346\236\266.md" |  22 ++
 ...nt\347\273\204\344\273\266\345\272\223.md" |  78 +++++++
 source/_posts/cookie.md                       |  21 ++
 ...eate-react-app\347\273\223\346\236\204.md" |  80 ++++++++
 ...s6\346\250\241\345\235\227\345\214\226.md" |  26 +++
 .../expree \346\241\206\346\236\266.md"       |  26 +++
 ...56\347\224\237\346\210\220\345\231\250.md" |  31 +++
 .../_posts/git\344\275\277\347\224\250.md"    |  50 +++++
 ...50\345\256\214\346\225\264\347\211\210.md" | 184 +++++++++++++++++
 .../session\346\212\200\346\234\257.md"       |   9 +
 ...li\350\204\232\346\211\213\346\236\266.md" | 103 ++++++++++
 .../vue-router\346\246\202\345\277\265.md"    |  27 +++
 source/_posts/vuex.md                         |  46 +++++
 .../webpack\344\275\277\347\224\250.md"       | 190 ++++++++++++++++++
 .../websocket\344\275\277\347\224\250.md"     |  11 +
 .../\345\260\217\347\250\213\345\272\217.md"  | 126 ++++++++++++
 .../\346\225\260\346\215\256\345\272\223.md"  |  26 +++
 ...41\346\235\277\345\274\225\346\223\216.md" |  15 ++
 "source/_posts/\351\200\202\351\205\215.md"   |  32 +++
 .../\351\252\250\346\236\266\345\261\217.md"  |  42 ++++
 21 files changed, 1165 insertions(+)
 create mode 100644 "source/_posts/React\344\273\213\347\273\215.md"
 create mode 100644 "source/_posts/React\350\204\232\346\211\213\346\236\266.md"
 create mode 100644 "source/_posts/Vant\347\273\204\344\273\266\345\272\223.md"
 create mode 100644 source/_posts/cookie.md
 create mode 100644 "source/_posts/create-react-app\347\273\223\346\236\204.md"
 create mode 100644 "source/_posts/es6\346\250\241\345\235\227\345\214\226.md"
 create mode 100644 "source/_posts/expree \346\241\206\346\236\266.md"
 create mode 100644 "source/_posts/express\351\241\271\347\233\256\347\224\237\346\210\220\345\231\250.md"
 create mode 100644 "source/_posts/git\344\275\277\347\224\250.md"
 create mode 100644 "source/_posts/redux\347\232\204\344\275\277\347\224\250\345\256\214\346\225\264\347\211\210.md"
 create mode 100644 "source/_posts/session\346\212\200\346\234\257.md"
 create mode 100644 "source/_posts/vue-cli\350\204\232\346\211\213\346\236\266.md"
 create mode 100644 "source/_posts/vue-router\346\246\202\345\277\265.md"
 create mode 100644 source/_posts/vuex.md
 create mode 100644 "source/_posts/webpack\344\275\277\347\224\250.md"
 create mode 100644 "source/_posts/websocket\344\275\277\347\224\250.md"
 create mode 100644 "source/_posts/\345\260\217\347\250\213\345\272\217.md"
 create mode 100644 "source/_posts/\346\225\260\346\215\256\345\272\223.md"
 create mode 100644 "source/_posts/\346\250\241\346\235\277\345\274\225\346\223\216.md"
 create mode 100644 "source/_posts/\351\200\202\351\205\215.md"
 create mode 100644 "source/_posts/\351\252\250\346\236\266\345\261\217.md"

diff --git "a/source/_posts/React\344\273\213\347\273\215.md" "b/source/_posts/React\344\273\213\347\273\215.md"
new file mode 100644
index 0000000..90a3ee1
--- /dev/null
+++ "b/source/_posts/React\344\273\213\347\273\215.md"
@@ -0,0 +1,20 @@
+---
+title: React
+date: 2020-07-13 01:57:07
+tags: react
+---
+
+# 简介
+
+ React 是 Facebook 团队开发的一款前端框架，初期应用在 instragem 网站上，后期开源供程序员使用，优势通过虚拟 DOM 进行真实 DOM 的渲染，在渲染真实 DOM 之前，在内存中，对虚拟 DOM 进行内容对比，发现哪些 DOM 发生了改变，哪些没有改变，从而只渲染改变的 DOM，从而提升页面真实 DOM 的渲染效率。
+ diff 算法：这个算法就是对比新旧虚拟 DOM 之前的不同之处，然后在虚拟 DOM 中操作变化了的 DOM，最终将完整的虚拟 DOM 渲染到真实 DOM。
+
+# 通过文件引入的形式来使用 React
+
+1. react.js 文件：React 中的核心库文件，提供了组件功能；
+2. react-dom.js 文件：React 中操作 DOM 的库文件，使用 React 必须包含这个库文件；
+3. babel.js 文件：代码转换，React 中使用 JSX 语法来封装模板的，因此浏览器不识别，需要转化成普通的 js 代码；
+
+# JSX 介绍
+
+ javascript XML，进行 html 和 js 混合编写的一种语法，类似于 ejs。
diff --git "a/source/_posts/React\350\204\232\346\211\213\346\236\266.md" "b/source/_posts/React\350\204\232\346\211\213\346\236\266.md"
new file mode 100644
index 0000000..ff4c844
--- /dev/null
+++ "b/source/_posts/React\350\204\232\346\211\213\346\236\266.md"
@@ -0,0 +1,22 @@
+---
+title: React 脚手架
+date: 2020-07-14 01:57:07
+tags: react
+---
+
+# 安装 create-react-app
+
+ npm install create-react-app -g
+
+# 简介
+
+1. 这个脚手架是基于 webpack 构建 React 项目，内置了一个开发服务器，默认端口是 3000，可以实现实时打包，自启动等功能
+2. 创建项目命令：create-react-app react-base
+3. 启动项目命令：npm run start 或者 npm start
+4. 打包项目命令：npm run build 或者 npm build
+
+# 如何修改 webpack 配置
+
+1. npm run eject 暴露 webpack 的配置文件，可以做一些修改
+2. 关闭自启动：/scripts/start.js，将 142 行 的 **openBrowser(urls.localUrlForBrowser);** 注释即可
+3. 修改端口：packge.json 文件中：**"start": "set PORT=5000 && node scripts/start.js"**，注意：**set PORT=5000 &&**一定要写在前面
diff --git "a/source/_posts/Vant\347\273\204\344\273\266\345\272\223.md" "b/source/_posts/Vant\347\273\204\344\273\266\345\272\223.md"
new file mode 100644
index 0000000..fca620c
--- /dev/null
+++ "b/source/_posts/Vant\347\273\204\344\273\266\345\272\223.md"
@@ -0,0 +1,78 @@
+---
+title: vant 安装
+date: 2020-08-15 09:57:07
+tags: vue
+---
+
+ npm install vant
+
+# vant 配置
+
+1. 安装 `npm i babel-plugin-import -D`
+2. 配置 `babel.config.js`
+
+```
+plugins: [
+  ['import', {
+    libraryName: 'vant',
+    libraryDirectory: 'es',
+    style: true
+  }, 'vant']
+]
+```
+
+# vant 使用
+
+1. 组件需要在 main.js 中 使用 Vue.use() 注册；
+
+```
+import { Button } from "vant";
+Vue.use(Button);
+```
+
+2. 有些组件不用 Vue.use() 注册，可以当成一个函数直接调用；
+
+# vue-awesome-swiper 轮播图插件(库)
+
+ 这个 插件是基于 swiper 插件封装的，因此，swiper 中的配置对于 vue-awesome-swiper 都是有效的。
+
+1. 安装 swiper 包
+
+    npm install swiper@4
+    注意：swiper6/5 目前对于 vue 的兼容性不是很好，不要安装最新的 swiper
+
+2. 安装 vue-awesome-swiper 包
+   注意：这个包可以是最新版本
+
+3. 配置插件
+
+```
+import VueAwesomeSwiper from "vue-awesome-swiper";
+import "swiper/dist/css/swiper.css";
+Vue.use(VueAwesomeSwiper);
+```
+
+4. 使用
+
+```
+<swiper :options="swiperOption">
+  <swiper-slide>I'm Slide 1</swiper-slide>
+  <swiper-slide>I'm Slide 2</swiper-slide>
+  <swiper-slide>I'm Slide 3</swiper-slide>
+  <!-- <div class="swiper-pagination" slot="pagination"></div> -->
+  <div class="swiper-scrollbar" slot="scrollbar"></div>
+</swiper>
+swiperOption: {
+  // 指示器为 pagination 小圆点
+  // pagination: {
+  //   el: ".swiper-pagination",
+  //   type: "fraction",
+  // },
+
+  // 指示器为 滚动条
+  scrollbar: {
+    el: ".swiper-scrollbar",
+    hide: true,
+  },
+},
+```
diff --git a/source/_posts/cookie.md b/source/_posts/cookie.md
new file mode 100644
index 0000000..21aa866
--- /dev/null
+++ b/source/_posts/cookie.md
@@ -0,0 +1,21 @@
+---
+title: Cookie 缓存技术
+date: 2020-09-12 03:57:07
+tags:
+---
+
+### 一、HTTP 协议
+
+- 因为 HTTP 协议是无状态协议，它无法去记录请求和请求之间的关系。比如登录: 我们在一个网站的登录页面登录成功，你访问其他页面时就不需要登录了。
+
+### 二、Cookie 就是用来解决 Http 协议的问题
+
+- Cookie 是一种能够让服务器在用户的浏览器上储存数据的技术。
+- 通过这个数据，服务器就可以验证这个用户有没有登录过。
+
+[Cookie 交互截图](cookie解决登录问题.png)
+
+### 三、总结
+
+- cookie 的值是存储在浏览器端的；
+- cookie 的值是从后端得到的；
diff --git "a/source/_posts/create-react-app\347\273\223\346\236\204.md" "b/source/_posts/create-react-app\347\273\223\346\236\204.md"
new file mode 100644
index 0000000..0e24a59
--- /dev/null
+++ "b/source/_posts/create-react-app\347\273\223\346\236\204.md"
@@ -0,0 +1,80 @@
+---
+title: create-react-app结构
+date: 2020-09-16 01:57:07
+tags:
+---
+
+# 项目结构
+
+ React 项目一个 js 就是一个组件，并且每个组件都搭配一个。css 文件，用于设置组件的样式，但是这个 .css 文件不是必须的。
+
+1. 项目的入口文件(类似于 vue 中的 main.js)
+    入口文件一般加载根组件。
+
+- index.js
+- index.css
+
+2. App.js：根组件
+3. 创建路由组件或子组件，需要自己手动创建文件夹。
+
+# React 配置 jsx 语法联想
+
+在 settings.json 文件中，添加一下代码：
+
+```
+"emmet.includeLanguages": {
+  "javascript": "javascriptreact"
+}
+```
+
+# 使用 PropTypes 进行类型检查
+
+> 注意：只检查 prop 值的类型
+
+# 渲染优化
+
+1. 父组件 state 数据变化，子组件不变，如果子组件实现了 getDerivedStateFromProps，那么要注意是否应该更新 state；子组件是否应该执行 render()；
+
+# 类名作用域
+
+> React 中不管你在哪一个 .css 中设置的样式，都是一个全局样式，对所有组件都生效，一般类名都会增加一个组件前缀，区分不同的标签。
+
+# 使用 less 解决类名作用域冲突问题
+
+1. 安装插件 Easy LESS：可以自动将 .less 文件转化成 .css 文件；
+
+# React 路由
+
+安装：npm install react-router-dom
+
+### 内置组件
+
+1. BrowserRouter: 类似于 vue 中的 history 模式，是通过历史记录的方式实现路由的切换
+
+```
+// 导入路由类
+import { BrowserRouter } from "react-router-dom";
+// 用组件BrowserRouter将 <App/> 包裹起来，表示用这个路由来控制整个组件的切换
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById("root")
+);
+```
+
+2. Route 路由
+
+- 路由的书写顺序：重定向和 404 一定要写在底部
+- 掌握路由的匹配顺序：自上而下，由外向内匹配(嵌套路由)
+- 掌握路由的严格模式和非严格模式：
+  - 严格模式：无法匹配二级路由，如果当前路由有二级路由，不要使用严格模式
+- 路由传参：动态参数、查询字符串
+- 路由组件和非路由组件：如何使用 history, match, location
+  - withRouter 高阶组件用法
+
+# 接口跨域
+
+1. package.json 文件中配置 **"proxy": "http://localhost:4000",**
+2. 下载代理包：http-proxy-middleware
+3. 修改 webpack 的源代码
diff --git "a/source/_posts/es6\346\250\241\345\235\227\345\214\226.md" "b/source/_posts/es6\346\250\241\345\235\227\345\214\226.md"
new file mode 100644
index 0000000..2e6472d
--- /dev/null
+++ "b/source/_posts/es6\346\250\241\345\235\227\345\214\226.md"
@@ -0,0 +1,26 @@
+---
+title: es6 模块化
+date: 2020-09-12 04:57:07
+tags:
+---
+
+- js 在出现初期，是没有模块化的概念的，只是单纯的作为一个脚本语言，实现一些简单的页面特效，操作 DOM 的功能，但是随着 js 的功能越来越完善，功能越来越多，js 代码的编写就变的非常难以维护，代码量大，不利于后期的管理，因此在 es6 的时候，才正式推出属于前端的模块化概念。
+
+- es6 之前，有一些第三方的库，request.js(AMD) 可以实现模块化。
+
+- nodejs 出现的时候，推出了模块化的标准(CMD)，通过 require 和 module.exports 实现模块的导入和导出，但是这种模块化的标准只能 Nodejs 使用，浏览器不能使用。
+
+- es6 模块化代码，浏览器不能够直接识别，需要通过工具转换之后，才能让浏览器识别这些代码。
+
+# 使用 webpack 帮助我们转换 ES6 的高级语法
+
+ webpack 是基于 Nodejs 开发的一款打包工具，所以必须先安装 NodeJS 环境。
+
+- webpack 的作用：1. 打包静态资源，如果不打包，浏览器就要挨个去请求加载 js 文件，css 文件，图片等，打包之后，webpack 帮你合并成一个 js 文件，一个 css 文件，这样一方面可以减少浏览器请求的次数，并且打包之后的文件经过压缩的文件，体积更小；2. 转换高级语法，比如 es6, es7, es8, es9 里面的高级语法，浏览器不识别。
+
+- 安装 webpack
+
+  - npm install webpack webpack-cli -g
+
+- 执行打包命令
+  - webpack ./main.js
diff --git "a/source/_posts/expree \346\241\206\346\236\266.md" "b/source/_posts/expree \346\241\206\346\236\266.md"
new file mode 100644
index 0000000..ad3976e
--- /dev/null
+++ "b/source/_posts/expree \346\241\206\346\236\266.md"	
@@ -0,0 +1,26 @@
+---
+title: expree 框架
+date: 2020-09-12 05:57:07
+tags:
+---
+
+# .md 是一个 MarkDown 文件，支持丰富的文本编辑功能
+
+#### 一、该项目是讲解 expree 框架的用法
+
+- \$ npm install express
+
+   因为 npm 这个包管理器，它连接的是国外的服务器，因此下载包的时候，特别慢，通过切换国内镜像实现第三方包的下载。
+
+- \$ npm install nrm -g
+   nrm 这个包，就是帮你收集国内的各个厂商的镜像地址，安装好这个 nrm 包以后，通过命令可以快速切换各个国内镜像的地址。
+
+ -g 命令全局安装，默认路径安装到 C:盘目录，以后不用重复安装了。如果没有加 -g，仅在当前项目安装，其他项目不能使用。
+
+- nrm 的常用命令
+   \$ nrm ls；列举所有镜像地址
+
+ \$ nrm use 镜像名称；切换镜像地址
+
+- 解决 vscode 不提示 NodeJS 代码的问题
+   \$ npm install @types/node (安装好之后，如果还不提示，重启 vscode)
diff --git "a/source/_posts/express\351\241\271\347\233\256\347\224\237\346\210\220\345\231\250.md" "b/source/_posts/express\351\241\271\347\233\256\347\224\237\346\210\220\345\231\250.md"
new file mode 100644
index 0000000..4e4c935
--- /dev/null
+++ "b/source/_posts/express\351\241\271\347\233\256\347\224\237\346\210\220\345\231\250.md"
@@ -0,0 +1,31 @@
+---
+title: express项目生成器
+date: 2020-09-12 06:57:07
+tags:
+---
+
+# 路由
+
+1. 路由使用的两种方式；
+2. 路由如何通过路径传参；
+
+# express 项目生成器
+
+- 快速搭建 express 项目的一个工具
+- \$ npm install express -g
+- \$ npm install express-generator -g
+- \$ express 项目名称 --view=ejs
+  - --view=ejs 指定使用什么作为模板引擎
+- 项目创建完成，需要先 npm install 安装 package.json 中的包
+- 启动项目：npm start(这是 package.json 中定义的)
+
+# 项目目录结构
+
+- bin/www(创建/启动服务) + app.js(配置服务) 组合 等价于 server.js 文件，启动服务，配置服务(静态目录，模板引擎，注册路由)
+- public 等价于 www 是静态目录
+- routes 存放的都是路由模块
+- views 存放模板文件的
+
+# 文件上传功能
+
+- \$ npm install multer express
diff --git "a/source/_posts/git\344\275\277\347\224\250.md" "b/source/_posts/git\344\275\277\347\224\250.md"
new file mode 100644
index 0000000..53ff49c
--- /dev/null
+++ "b/source/_posts/git\344\275\277\347\224\250.md"
@@ -0,0 +1,50 @@
+---
+title: git
+date: 2020-09-12 07:57:07
+tags:
+---
+
+# 本地仓库 和 远程仓库
+
+1. 本地仓库
+    你从远程仓库(码云) 中 clone 下来的项目中，有一个 .git 隐藏文件，这个文件会自动记录当前 clone 下来的项目内容有没有变动，只要有变动，就会被 .git 记录下来；
+    .git 还可以自动关联本地项目和远程仓库的项目；
+
+# 仓库的本地操作
+
+1. 只有 git push/pull 是在操作远程仓库，其余的命令 git status/log/commit/add 等，都是在操作本地仓库。
+2. 常用命令
+   git status: 查看本地仓库的状态；
+   git add .: 每次写完一个模块，都要先执行该命令，将修改的代码提交到暂存区，此时不会生成版本记录，版本号；
+   git commit -m "提交信息": 提交修改的代码到本地仓库，此时就会生成版本号，同时 .git 也会记录这个版本号，方便后期进行版本的回退；
+   git log: 用来查看当前仓库中，都有哪些 commit 提交；
+   git reset --hard 0739ae(版本号前几位): 切换 commit 版本；
+
+# 仓库的远程操作
+
+ 当本地仓库中的某一个模块完成了，本地也 commit 提交代码了，接下来将 该模块 的最新代码提交到远程仓库，只要本地仓库生成了新的提交 commit，记得 往远程仓库上推送，让远程仓库的代码和本地的提交实时保持同步。
+
+1. 推送命令
+    git push
+    git push git@gitee.com:gaohairui/poject.git
+    git push origin master
+
+# master 主分支
+
+ 作为写代码的程序员，平时写项目，不要直接在主分支 master 上修改代码，因为主分支 master 上的项目要保证是稳定的，最新的。
+
+### 普通程序员如何操作
+
+1. 先把远程项目克隆到本地(先配置 ssh，而且要成为项目的开发者)；
+2. 创建子分支，开始写自己的功能；
+    git checkout -b "分支名称" (创建并切换到当前分支)
+    git checkout "分支名称" (切换分支的命令)
+3. 子分支创建完毕，写代码，代码完成之后，需要 commit 提交，为当前的子分支，生成一条提交记录。此时主分支 master 是没有这个代码提交的；
+4. 将本地子分支同步到远程子分支
+    git push --set-upstream origin "子分支名称" (会自动在远程仓库上，创建一个子分支)
+5. 子分支是最新的代码了，此时，需要将本地的 master 和 远程的主分支 master 都更新为最新代码，需要将子分支的最新代码，合并到主分支 master 上。
+6. 先合并本地的子分支内容，到主分支，然后，再将本地的主分支，推送到远程主分支；
+    git checkout master;
+    git merge user;
+    本地的 master 是最新的
+    在 master 分支下，执行 git push
diff --git "a/source/_posts/redux\347\232\204\344\275\277\347\224\250\345\256\214\346\225\264\347\211\210.md" "b/source/_posts/redux\347\232\204\344\275\277\347\224\250\345\256\214\346\225\264\347\211\210.md"
new file mode 100644
index 0000000..656c36a
--- /dev/null
+++ "b/source/_posts/redux\347\232\204\344\275\277\347\224\250\345\256\214\346\225\264\347\211\210.md"
@@ -0,0 +1,184 @@
+---
+title: redux
+date: 2020-07-13 01:57:07
+tags: react
+---
+
+# 安装
+
+ npm install redux react-redux -S
+
+1. redux 这个包是在 action.js store.js reducer.js 中使用的；
+2. react-redux 这个包是在 react 的组件中使用的；
+
+# Redux 概念
+
+1. store 对象：这个 store 类似于 vuex 中的全局 new Vuex 对象，负责连接 action 和 reducer，是一个核心；
+2. action 对象：类似于 vuex 中的 mutation 和 action 的集合，它既支持同步操作数据，也支持异步操作数据，主要作用就是 通过 dispatch 提交 action，触发 修改 state 数据的行为；
+3. reducer 对象：类似于 vuex 中 state 属性，负责初始化 state 数据以及更新 state 数据；
+
+# Redux 用法
+
+1. 在 ./src/store.js 文件中创建 redux 的 store 对象，用于管理 action 和 reducer
+
+   ```
+   import { createStore } from "redux";
+
+   // 导入 reducer
+   import reducer from "./reducer";
+
+   // 在创建 store 对象的时候，要进行 state 的初始化操作，因此，createStore() 函数中必须要绑定 reducer，也就是让 reducer 和 store 产生关联，这样如果后期有 action 产生的时候，store 就会将这个 action 对象，转发给 reducer。
+   let store = createStore(reducer);
+
+   // 暴露这个store对象
+   export default store;
+   ```
+
+2. 由于 store 对象初始化的时候，要同时进行 state 的初始化，因此，在 ./src/reducer.js 文件中定义出来想要保存到 redux 中的 state。
+
+   ```
+    import { combineReducers } from "redux";
+
+    // name是一个 reducer 对象，age 也是一个 reducer 对象
+    function name(state = "", action) {
+      // 暂时用不到 修改state
+      return state;
+    }
+
+    function age(state = 0, action) {
+      return state;
+    }
+
+    // combineReducers() 可以将多个 reducer 对象合并成一个 reducer 对象，因为 createStore() 中只能设置一个 reducer
+    export default combineReducers({
+      name,
+      age,
+    });
+   ```
+
+3. 在 根组件 index.js 文件中，绑定 store，让组件和 redux 进行绑定。、
+
+   ```
+   // 让 redux 中的 store 对象 和 react 中的组件产生关联；
+   import { Provider } from "react-redux";
+   // 导入 创建好的 store 对象
+   import store from "./store/store";
+
+   ReactDOM.render(
+     <Provider store={store}>
+       <BrowserRouter>
+         <App />
+       </BrowserRouter>
+     </Provider>,
+     document.getElementById("root")
+   );
+   ```
+
+4. 可以在任何一个组件中，去使用 redux 中的数据了。
+
+   ```
+    import { connect } from "react-redux";
+    // connect()(Home) 该方法并不会修改原有组件 Home 的内容，仅仅是在 Home 组件的基础上包装上了 Redux 的内容
+    // connect(参数1，参数2)：这两个参数都是函数，并且connect在执行函数回调的时候，会传递两个参数进来，一个参数就是state，这个state内，存储的就是 reducer.js 中声明的 数据(name,age)。
+    export default connect(
+      (state) => {
+        return {
+          myName: state.name, // 相当于在当前 Home 组件中映射一个属性叫 myName，当前组件就可以使用 myName
+          myAge: state.age, // 相当于在当前 Home 组件中映射一个属性叫 myAge，当前组件就可以使用 myAge
+        };
+      },
+      (dispatch) => {
+        return {};
+      }
+    )(Home);
+   ```
+
+   **注意：组件中映射的 myName 和 myAge 属性，都被放在了 当前组件的 props 中。**
+
+5. 如何通过 派发 action ，修改 state 的数据
+
+   action.js 文件中定义 各种 action
+
+   ```
+    // 定义 修改name 的action
+    function setName(value) {
+      return {
+        type: "SET_NAME",
+        value,
+      };
+    }
+
+    // 定义 修改age 的action
+    function setAge() {
+      return {
+        type: "SET_AGE",
+      };
+    }
+
+    export { setName, setAge };
+   ```
+
+   在组件中映射 action 到当前组件
+
+   ```
+    (dispatch) => {
+      return {
+        // 目的：在当前组件中映射一个方法，方法名称是 customChangeName。
+        customChangeName(name) {
+          dispatch(setName(name)); // 派发action，交给 store，store 对象会将 这个 action，传递到 reducer 中进行全局匹配，看哪一个 reducer 能够匹配这个action
+        },
+      };
+   }
+   ```
+
+总结：用户 派发 action -> store 转发 action 到 reducer(不需要我们处理) -> reducer 根据 action 更新 state，并返回最新的 state -> store 将最新的 state 返回到组件的 props 中(不需要我们做) -> props 变化导致组件被渲染，更新页面。
+
+6. 异步 Action
+
+   - 安装包 npm install redux-thunk
+   - 修改 store.js 文件，让 store 能够使用这个 thunk 中间件处理异步请求
+
+   ```
+   import { createStore, applyMiddleware } from "redux";
+   import thunk from "redux-thunk"; // 一个处理异步 action 的包
+   // applyMiddleware(thunk)： 让 store 对象使用中间件 thunk 来处理 action
+   let store = createStore(reducer, applyMiddleware(thunk));
+   ```
+
+   - 在 action.js 中定义异步 action
+
+   ```
+    function saveUsers(list) {
+      return {
+        type: "SAVE_USERS",
+        list,
+      };
+    }
+
+    // 带有异步请求的 action：使用场景 多个组件都要向这个接口发请求，并且都要使用请求过来的数据。
+    function queryUsers() {
+      return (dispatch) => {
+        axios.get("http://localhost:4000/users").then((res) => {
+          // 请求成功的数据，要保存redux中
+          // 通过派发 action ，让 store 去找相应的 reducer。
+          dispatch(saveUsers(res.data));
+        });
+      };
+    }
+   ```
+
+   - 在组件中，映射 reducer 和 异步请求的 action
+
+   ```
+   (dispatch) => {
+    return {
+      // 目的：在当前组件中映射一个方法，方法名称是 customChangeName。
+      customChangeName(name) {
+        dispatch(setName(name)); // 派发action，交给 store，store 对象会将 这个 action，传递到 reducer 中进行全局匹配，看哪一个 reducer 能够匹配这个action
+      },
+      queryUsers() {
+        dispatch(queryUsers());
+      },
+    };
+   }
+   ```
diff --git "a/source/_posts/session\346\212\200\346\234\257.md" "b/source/_posts/session\346\212\200\346\234\257.md"
new file mode 100644
index 0000000..17aa179
--- /dev/null
+++ "b/source/_posts/session\346\212\200\346\234\257.md"
@@ -0,0 +1,9 @@
+---
+title: Session技术
+date: 2020-09-12 08:57:07
+tags:
+---
+
+- 它是另外一种用来记录用户状态的机制，Cookie 是由服务端生成，客户端存储。而 session 是由服务端生成，服务端存储。
+- 当浏览器访问服务器的时候，服务器会自动生成一个 session 对象，这个对象是以 { key: value } 形式来保存加密数据(用来证明你是否登录过)的，同时服务器会将这个 session 对象中的 key 返回给浏览器。以后浏览器只要发送请求，自动携带这个 key ，传给服务器，服务器对这个 key 进行验证。
+- \$ npm install express-session
diff --git "a/source/_posts/vue-cli\350\204\232\346\211\213\346\236\266.md" "b/source/_posts/vue-cli\350\204\232\346\211\213\346\236\266.md"
new file mode 100644
index 0000000..370fce4
--- /dev/null
+++ "b/source/_posts/vue-cli\350\204\232\346\211\213\346\236\266.md"
@@ -0,0 +1,103 @@
+---
+title: vue-cli 脚手架
+date: 2020-08-12 10:57:07
+tags: vue
+---
+
+# 脚手架的概念
+
+ 可以帮助我们快速搭建项目，启动服务，减少这些重复性的工作。并且脚手架中包含了项目中常用的包，比如：webpack(babel、loader)，项目更加规范化，维护起来更加方便。
+
+# 安装
+
+ \$ npm install @vue/cli -g
+
+- 安装完毕，通过 `vue -V` 检查脚手架是否可用。
+
+# 创建项目
+
+1. 命令
+   cd
+
+- \$ vue create "项目名称"
+
+  **注意：创建的时候，会让你选择一些配置项。**
+
+2. 项目目录结构
+
+- package.json
+  ```
+  "scripts": {
+    "serve": "vue-cli-service serve", // 类似于 webpack-dev-server，调试阶段实时打包编译，只不过代码都是放在内存中了。
+    "build": "vue-cli-service build" // 最终的项目构建使用build，类似之前的webpack，在当前项目下生成 dist 目录。
+  },
+  ```
+- src 目录
+
+   是项目的源代码文件，所有代码，组件/js/css 等都放在该目录下
+
+- main.js 文件
+
+   是整个项目的入口文件，项目启动就会加载该文件。当项目启动时，webpack 也会自动对该文件进行打包，放到内存中。
+
+- App.vue 文件
+
+   根组件的模板内容，项目启动之后，首先要加载的模板内容。.vue 是一个单文件组件，每个组件都有 `<template>，<script>，<style>` 三部分构成。
+
+- views 目录
+
+   用来保存项目当中的 **页面级** 组件，通过路由 router 来展示页面，称为页面级组件。
+
+- components 目录
+
+   局部组件放到该目录下，不需要通过路由 router 来展示的页面，称为局部组件。局部组件一般都是多个页面都需要用到的某一部分内容的组件。
+
+- assets 目录
+
+   是静态资源目录，可以保存图片，css 等静态资源文件；它的内容既可以在 js 中使用 import 模块化的方式导入使用，也可以在页面中使用 link, script src 等引入；
+
+- public 目录
+   是静态资源目录，可以保存图片，css 等静态资源文件；只能在页面中使用 link, script src 等引入；不能使用 import 导入。
+
+# 启动项目
+
+ \$ npm run serve / build
+
+# 问题
+
+1. vue-cli 3.0 版本之后，webpack 的配置文件 `webpack.config.js` 默认隐藏了，如果需要配置 webpack，可以在项目根目录下，创建一个 `vue.config.js` 文件，这个文件中配置和 webpack 的配置是兼容的，当启动项目的时候，`vue.config.js` 文件中的配置，会自动合并到 `webpack.config.js` 中去。
+2. 只要是修改了 `vue.config.js` 文件，必须重启服务才能生效。
+
+# 插件
+
+ 安装 vuter 插件
+
+# axios 发送请求的包
+
+ 这个包仅仅是发送请求的，体积更小，更加轻量，如果不需要操作 DOM，只是向接口发送请求，通常都会用这个包。如果项目中必须使用 jquery，那就不用装这个包了。
+
+1. 安装 `npm install axios -S`
+2. 因为各个组件都要使用，因此在 main.js 文件中导入这个包
+3. 全家桶(技术栈：vue+vue-router+axios+vuex+bootstrap)
+4. 配置
+
+   ```
+   import axios from "axios";
+   Vue.prototype.axios = axios;
+   ```
+
+# 安装 json-server 包
+
+ 在本地启动一个服务，专门返回 json 数据的。json 数据需要自己准备.
+
+1. `npm install json-server -g`
+2. 在一个 xxx.json 文件中，准备 json 数据
+3. 利用 `json-server` 打开 xxx.json 文件 `json-server xxx.json --port 3000 --host 192.168.5.252`
+4. 其他地方就可以访问这个接口 `http://localhost:3000/users`
+
+# 同步加载组件和异步加载组件
+
+- 同步加载：当项目启动的时候，所有的组件不管你用不用，webpack 都已经帮你加载并打包好了；
+- 异步加载：当项目启动的时候，所有的组件不是一块加载的，只加载项目启动之后要展示的组件，其他组件当你访问路由的时候，再实现加载；(懒加载)；
+
+- 同步组件在项目启动时，将所有同步组件的 js 代码都打包到了 app.js 中；而异步组件在项目启动时，并没有直接打包，而是访问路由要加载组件了，才实现打包，异步组件分开打包，可以自定义打包名称 `/* webpackChunkName: "about" */`，并且异步组件打包之后的内容会被缓存起来，防止每次访问路由都重复打包。
diff --git "a/source/_posts/vue-router\346\246\202\345\277\265.md" "b/source/_posts/vue-router\346\246\202\345\277\265.md"
new file mode 100644
index 0000000..50a6ae3
--- /dev/null
+++ "b/source/_posts/vue-router\346\246\202\345\277\265.md"
@@ -0,0 +1,27 @@
+---
+title: vue-router
+date: 2020-08-12 11:57:07
+tags: vue
+---
+
+# 什么是 vue-router
+
+ vue-router 就是一个前端的路由管理系统，负责监听路由，加载对应的组件。它是 vue 官方指定的路由管理系统，vue + vue-router + vuex (vue 全家桶的核心成员)。
+
+# 单页面应用
+
+ single-page application，简称 SPA。是 h5 之后非常流行的一种页面构建方式，整个应用只有一个 .html 文件，这个 .html 文件就是由各种组件组合而成的，传统的.html 单文件现在都变成了组件，login.html -> login.vue; regit.html -> regist.vue。由于整个网站只有一个大页面，要想实现不同组件的切换，就需要使用 vue-router 来加载不同组件。
+
+# url 构成
+
+- url 的构成：协议、域名、端口、路径、参数、哈希值(/user)
+- '#' 号后面跟的就是哈希值
+- http://www.baidu.com:443/upload/images/#/regist
+- url 中的哈希值原本是给浏览器使用的，最初是能够让浏览器根据 hash 值，实现页面的锚点定位。所以这个 hash 值，仅仅在浏览器端使用，这个 hash 值/user 是不会传递到后端的。
+
+# 前端路由和后端路由
+
+ **前端路由**：通过不断的切换 hash 值，而 url 地址(协议、域名、端口、路径)是不变的，从而实现页面的切换。前端路由跟后端一点关系都没有，完全就是在利用 hash 找组件。
+ **后端路由**：通过不断的切换 url 地址，从而实现页面的切换。
+
+- 总结：当页面的 url 地址发生变化(协议、域名、端口、路径)，页面就要发生跳转，因为你使用了不同 url 地址，浏览器就会向服务器发送请求，这是后端路由。如果 url 地址没有变化，只是 hash 发生变化，浏览器是不会发送新的请求的，浏览器会根据 hash 值找到对应的组件，加载组件内容，浏览器是不会重新加载页面的，这就是前端路由。
diff --git a/source/_posts/vuex.md b/source/_posts/vuex.md
new file mode 100644
index 0000000..e5d535a
--- /dev/null
+++ b/source/_posts/vuex.md
@@ -0,0 +1,46 @@
+---
+title: vuex
+date: 2020-08-12 12:57:07
+tags: vue
+---
+
+ 它主要是集中管理数据，类似于一个公共的存储空间，可以为各个组件提供数据支持。它主要是解决非父子组件传值，父子组件传值还是使用 props 和\$emit 方式，或者使用 v-model 模式。
+
+# 安装
+
+ npm install vuex -S
+
+# state 对象
+
+ 它就是用来保存数据的一个对象，原先数据是保存到组件的 data(){}中，现在放在公共存储空间 state 中。
+
+### 1. 方式一
+
+直接在模板中使用：{{this.$store.state}}
+
+### 2. 方式二
+
+使用 mapState
+
+# mutations 对象
+
+ mutations 它是真个 vuex 体系中，唯一能够修改数据的对象，组件修改数据交由 vuex 的 mutations 处理，主要是防止组件都直接修改数据，造成 vuex 数据维护混乱。
+
+### 方式一
+
+this.\$store.commit("changeAge", { type, name: 1 });
+
+### 方式二
+
+使用 mapMutation
+
+# actions 和 mutations 的区别
+
+ actions 可以执行异步操作，然后再修改数据；mutations 是同步修改数据；
+
+1. 从开发工具上来看：mutation 是同步修改数据，浏览器插件 Vue 是可以实时捕获 state 中数据的最新状态；而 action 是异步修改数据，如果使用 mutation 来异步操作数据，就会造成 浏览器插件 Vue 是不可以实时捕获 state 中数据的最新状态；影响调试。但是从页面的数据变化上来看，使用 action 和 mutation 是没有影响的，页面中的数据，都会自动更新。
+2. 从任务的角度来看：如果两个任务之间有先后顺序，mutation 也不能异步操作数据。
+
+# getters
+
+ 可以实现对 state 中的元素数据进行加工处理，返回一个新的数据，通过 getters 处理数据，其他组件直接可以使用 mapGetters 将 getters 中生成新属性，映射到组件的 计算属性 中，组件不需要自己再单独处理了。
diff --git "a/source/_posts/webpack\344\275\277\347\224\250.md" "b/source/_posts/webpack\344\275\277\347\224\250.md"
new file mode 100644
index 0000000..aec37ec
--- /dev/null
+++ "b/source/_posts/webpack\344\275\277\347\224\250.md"
@@ -0,0 +1,190 @@
+---
+title: webpack
+date: 2020-09-12 13:57:07
+tags:
+---
+
+# 一、02-wp-base 项目配置
+
+1. 新建 index.html 和 main.js
+2. 使用命令 **\$`npm init -y`** 进行项目的初始化
+3. 安装 **\$`npm install jquery`**这个包
+
+# 二、通过 webpack 的配置文件实现打包
+
+1. `webpack.config.js`配置文件，文件名称不能修改，是固定的
+2. 配置文件的内容：
+
+```
+const path = require("path");
+
+// 通过 Node 的语法向外暴露一个打包配置对象
+module.exports = {
+  // entry入口文件，表示要打包哪个文件
+  entry: "./src/main.js",
+  // output是输出目录，打包好的文件放在哪。
+  output: {
+    filename: "bundle.js",
+    // __dirname 获取项目根目录，此配置会在根目录下生成一个 dist 目录
+    path: path.resolve(__dirname, "dist"),
+  },
+};
+```
+
+3. 直接使用命令 `webpack` 执行打包过程，webpack 会自动找到这个配置文件。
+
+# 三、使用 webpack-dev-server 工具
+
+ 该工具可以和 webpack 工具结合使用，目的就是实现实时打包，不用重复打包，提高开发效率。这个工具和 webpack 是两个工具，它只不过是对原生的 webpack 封装，启动一个本地服务，时刻监听代码是否发生修改，只要修改，该工具会自动编译。
+
+- dependencies 和 devDependencies 区别
+- dependencies 是生产环境(项目的正式运行环境)中仍然要使用的包，比如 jquery, bootstrap
+- devDependencies 是开发环境中才使用(调试，方便)，生产环境不使用的包，比如：webpack，webpack-cli，webpack-dev-server。
+- 使用 `npm install jquery -S/npm install jquery` 直接保存到生产依赖中；
+- 使用 `npm install jquery -D` 直接保存到开发依赖中；
+
+1. 在当前项目目录下执行安装 **\$`npm install webpack-dev-server -D`**
+2. 在 `package.json` 中配置一条启动服务的命令
+
+```
+"scripts": {
+  "test": "echo \"Error: no test specified\" && exit 1",
+  --contentBase src这个配置就是指定这个服务要加载的静态目录的名称
+  "dev": "webpack-dev-server --contentBase src"
+},
+```
+
+3. 在当前项目目录下执行安装 **\$`npm install webpack webpack-cli -D`** 因为 webpack-dev-server 这个工具需要依赖 webpack，因此他们三个要装在一起
+4. 可以通过 `http://localhost:8080` 访问页面了
+5. 因为 webpack-dev-server 这个工具 是实时打包，实时编译，为了提高编译的速度，它默认将打包好的文件，放在了计算机的内存中，这样的话读写速度更快。所以 `index.html` 中就不能再引入本地的 `bundle.js` 文件了。因为该工具默认是去内存中查找 `bundle.js`
+6. 继续配置启动命令，当启动服务的时候，自动打开浏览器(--open)，并指定端口(--port 3000)，然后重启服务
+
+```
+"dev": "webpack-dev-server --contentBase src --open --port 3000"
+```
+
+### 注意：webpack-dev-server 在内存中生成的文件，只是帮我们快速调试，开发方便。如果所有代码已经调试完毕，再通过 webpack 手动打包 文件 到 项目目录下。
+
+# 四、使用插件 html-webpack-plugin
+
+ 由于 `index.html` 是在本地磁盘中，而 `bundle.js` 是在内存中存储的，因为我们需要时刻注意 `index.html` 引入 js 的路径问题。所以，这个插件可以帮助我们把 `index.html` 也在内存中生成一份，和 内存中的 `bundle.js` 放在一起。
+
+1. 在当前项目目录下执行安装 **\$`npm install html-webpack-plugin -D`**
+2. 在 `webpack.config.js` 文件中配置这个插件:
+
+```
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+plugins: [
+  new HtmlWebpackPlugin({
+    template: path.resolve(__dirname, "src/index.html"), // 指定这个插件要拷贝的模板是哪一个文件
+    filename: "index.html", // 指定内存中的模板名称叫什么
+  }),
+],
+```
+
+3. 接下来，可以去修改 `index.html` 和 `main.js` 了，只要一修改，webpack-dev-server 就会自动编译打包 两个文件到内存中
+
+# 五、使用 loader 处理 css 文件
+
+ 因为 webpack 默认只能打包 js 文件，其他的文件，比如 css, less, scss, 图片文件等都需要通过 loader 处理。
+
+1. 在当前项目目录下执行安装 **\$`npm install css-loader style-loader -D`**
+2. 修改 `webpack.config.js`文件：
+
+```
+module: {
+  // module 属性是用来配置所有的第三方loader加载器的属性。
+  rules: [
+    {
+      // test就是检测文件类型是否是css文件，如果是就是用use这些loader处理文件
+      test: /\.css$/,
+      use: ["style-loader", "css-loader"],
+    },
+  ],
+},
+```
+
+# 六、使用 loader 处理 less 文件
+
+1. 在当前项目目录下执行安装 **\$`npm install --save-dev less-loader less`**
+2. 修改 `webpack.config.js`文件：
+
+```
+module: {
+  // module 属性是用来配置所有的第三方loader加载器的属性。
+  rules: [
+    {
+      test: /\.less$/,
+      // 因为 less 语法最终也会被转化为 css，因此也需要使用 "style-loader"和"css-loader"
+      use: ["style-loader", "css-loader", "less-loader"],
+    },
+  ],
+},
+```
+
+# 七、使用 loader 处理 sass/scss 文件
+
+1. 在当前项目目录下执行安装 **\$`npm install sass-loader node-sass -D`**
+2. 修改 `webpack.config.js`文件：
+
+```
+module: {
+  // module 属性是用来配置所有的第三方loader加载器的属性。
+  rules: [
+    {
+      test: /\.scss$/,
+      use: [{
+          loader: "style-loader" // 将 JS 字符串生成为 style 节点
+      }, {
+          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
+      }, {
+          loader: "sass-loader" // 将 Sass 编译成 CSS
+      }]
+    }
+  ],
+},
+```
+
+# 八、使用 loader 处理 图片 文件
+
+1. 在当前项目目录下执行安装 **\$`npm install url-loader file-loader -D`**
+2. 修改 `webpack.config.js`文件：
+
+```
+module: {
+  // module 属性是用来配置所有的第三方loader加载器的属性。
+  rules: [
+    {
+      test: /\.(png|jpg|gif)$/,
+      use: [ "url-loader" ],
+    },
+  ],
+},
+```
+
+# 九、使用 babel-loader 处理 js 高级语法
+
+ webpack 已经可以处理一部分 js 中的高级语法，转换成低级语法，让浏览器识别，但是仍然有一部分 js 的高级语法需要借助于 loader 加载器处理
+
+1. 安装 `npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D`
+2. 安装 `npm install @babel/runtime` 到生产依赖
+
+3. @babel/core 内部包含了转换代码的 API 函数，@babel/preset-env 它是指定了语法转换规则，@babel/plugin-transform-runtime 减少编译后的代码体积
+
+4. 修改 `webpack.config.js` 配置文件：
+
+```
+{
+  test: /\.js$/,
+  // exclude: 排除 node_modules，这里面的js文件不需要处理
+  exclude: /(node_modules|bower_components)/,
+  use: {
+    loader: "babel-loader",
+    options: {
+      // preset-env 这里 env 是一种语法转换规则，preset就是预设的意思。
+      presets: ["@babel/preset-env"],
+      plugins: ["@babel/transform-runtime", @babel/plugin-proposal-class-properties],
+    },
+  },
+},
+```
diff --git "a/source/_posts/websocket\344\275\277\347\224\250.md" "b/source/_posts/websocket\344\275\277\347\224\250.md"
new file mode 100644
index 0000000..31f0b03
--- /dev/null
+++ "b/source/_posts/websocket\344\275\277\347\224\250.md"
@@ -0,0 +1,11 @@
+---
+title: 搭建 NodeJS 后端服务
+date: 2020-09-12 14:57:07
+tags:
+---
+
+1. 创建后端 NodeJS 根目录 wechat；
+2. 在 wechat 根目录中，执行 npm init -y 命令；
+3. 在 wechat 根目录中，安装 npm install express ws；
+   - ws 是一个第三方库，帮助我们操作 webSocket 的一个库。
+4. 通过 node xxx.js 启用这个 node 服务，并启用 websocket 服务。
diff --git "a/source/_posts/\345\260\217\347\250\213\345\272\217.md" "b/source/_posts/\345\260\217\347\250\213\345\272\217.md"
new file mode 100644
index 0000000..7d7df34
--- /dev/null
+++ "b/source/_posts/\345\260\217\347\250\213\345\272\217.md"
@@ -0,0 +1,126 @@
+---
+title: 微信小程序
+date: 2020-09-19 01:57:07
+tags:
+---
+
+# 一、全局配置和页面配置
+
+ 页面配置的优先级比全局配置的优先级高。
+
+### 全局配置
+
+1. 导航条背景色、字体颜色、文本
+
+```
+"navigationBarBackgroundColor": "#00b26a",
+"navigationBarTitleText": "小程序配置",
+"navigationBarTextStyle": "white"
+```
+
+2. 下拉刷新
+
+```
+"backgroundTextStyle": "dark",
+"backgroundColor": "#3387ff",
+```
+
+3. tabBar 的配置
+
+```
+"tabBar": {
+  "backgroundColor": "#00b26a", // 背景色
+  "color": "#fcfcfc", // 默认文字颜色
+  "selectedColor": "#3387ff", // 被选中的文字颜色
+  "list": [
+    {
+      "text": "首页",
+      "pagePath": "pages/index/index"
+    },
+    {
+      "text": "设置",
+      "pagePath": "pages/settings/setting"
+    },
+    {
+      "text": "我的",
+      "pagePath": "pages/mine/mine"
+    }
+  ]
+},
+```
+
+### 页面配置
+
+ 和 app.json 配置的属性一致。
+
+# 二、数据的渲染
+
+1. wx:if 和 hidden 的区别
+2. wx:for-index 和 wx:for-item 的使用
+3. 全局数据 globalData 和 私有数据 data 的使用
+
+# 三、事件绑定及传参
+
+ pages/event/event
+
+1. bindtap 或 bind:tap，不传参数
+2. bindtap 或 bind:tap，传参数，自定义属性 data-\*传参数，接收时使用 e.currentTarget.dataset
+3. bindinput 输入框事件，e.detail.value 接受数据
+
+# 四、css 样式的设置
+
+1. rpx 适配单位，适配原理
+2. 全局样式 app.wxss 和 局部样式 \*.wxss 的优先级，局部会覆盖全局
+3. 选择器有固定要求，不支持 \* 通配符选择器
+
+# 五、路由切换页面
+
+ pages/settings/settings
+
+1. 组件中使用 <navigator> 组件，点击即可实现跳转，就像 a 标签一样；
+2. js 中也可以跳转页面，方便实现 js 内部的逻辑跳转；
+
+# 六、wxs 文件的使用
+
+ 作用：可以在模板文件 wxml 中，实时调用一些函数，并得到最新结果，类似于 computed 计算属性。pages/calc/calc。
+
+1. 新建 calc.wxs 文件，并向外暴露属性或方法；
+2. 在模板文件中通过 <wxs></wxs> 组件引入 .wxs 文件；
+3. 在组件中使用 模块 暴露的属性或方法；
+
+# 七、动态设置 class 类名及 style 样式
+
+ pages/classAndStyle/classAndStyle
+
+1. class 是可以直接渲染数组的；
+
+# 一、动态绑定 style 样式
+
+1. 模板中只能写样式字符串，不能直接加载对象；
+
+# 二、生命周期函数
+
+1. 私有数据 data 中，声明页面模板中需要展示的数据，设置 data 中的数据时，使用 this.setData({})，因为 setData 可以渲染页面模板；
+2. 私有数据，不需要在页面上显示的数据，比如定时器变量 timer，那这种私有数据，可以设置在 data:{} 同级的位置；
+
+# 三、网络请求、下拉刷新、上拉加载更多
+
+1. 页面配置 下拉刷新，上拉加载；
+2. 封装异步请求 Promise 到工具包 utils 中；
+
+# 四、图片 API 实现图片的上传
+
+1. image 组件默认宽度 320px、高度 240px
+2. wx.chooseImage()
+
+# 五、动画 API 实现元素的动画效果
+
+1. 过渡 transition；
+2. CSS 帧动画 @keyframe；
+3. 小程序的动画 API：如何实现重复动画；
+
+# 六、富文本组件 rich-text
+
+# 七、按钮的开放能力 open-type
+
+# 八、自定义自组件
diff --git "a/source/_posts/\346\225\260\346\215\256\345\272\223.md" "b/source/_posts/\346\225\260\346\215\256\345\272\223.md"
new file mode 100644
index 0000000..edc0168
--- /dev/null
+++ "b/source/_posts/\346\225\260\346\215\256\345\272\223.md"
@@ -0,0 +1,26 @@
+---
+title: 数据库
+date: 2020-09-12 02:57:07
+tags: 数据库
+---
+
+数据库是一种专门用于数据的存储、查询、修改、删除的程序，负责向其他应用程序提供数据服务。数据库就相当于一个容器，它的内部会创建很多表，数据就存储在表中。
+
+- 数据库 -> 很多表 -> 很多数据
+
+### 一、数据库分类
+
+1. 关系型数据库(mysql, sqlserver, oracle)：关系网
+
+   - 存储数据的类型只能是基本数据类型：String Number Boolean
+   - 不能直接存储复杂数据类型：Array Object
+      关系型数据库是通过建立多个表，来表达数据和数据之间的联系
+
+2. 非关系型数据库(mongodb, redis)：靠自己
+
+   - 存储任意数据类型
+   - mongodb 又称为文档型数据库
+
+3. 安装数据库模块
+
+- \$ npm install mongoose
diff --git "a/source/_posts/\346\250\241\346\235\277\345\274\225\346\223\216.md" "b/source/_posts/\346\250\241\346\235\277\345\274\225\346\223\216.md"
new file mode 100644
index 0000000..5b2c8ba
--- /dev/null
+++ "b/source/_posts/\346\250\241\346\235\277\345\274\225\346\223\216.md"
@@ -0,0 +1,15 @@
+---
+title: 模板引擎
+date: 2020-09-12 01:57:07
+tags:
+---
+
+- 作用：就是在 .html 文件里面，写 js 代码。因为后端可能会返回一些数据，这些数据需要在 .html 文件中显示出来。
+
+#### 安装模板引擎包
+
+- \$ npm install ejs
+
+  - ejs: 它是以 js 作为模板语言，在 .html 中 使用 <% %> 嵌入 js 代码。
+
+- 项目下多了一个文件夹 views，这个目录就是用来放 模板文件的
diff --git "a/source/_posts/\351\200\202\351\205\215.md" "b/source/_posts/\351\200\202\351\205\215.md"
new file mode 100644
index 0000000..bea0e30
--- /dev/null
+++ "b/source/_posts/\351\200\202\351\205\215.md"
@@ -0,0 +1,32 @@
+---
+title: 适配
+date: 2020-09-13 01:57:07
+tags:
+---
+
+# 适配方案
+
+1. 100% 单位，以父元素为参照物；
+2. 使用弹性布局 + 100%/vh/vw；
+3. 使用 vh/vw；
+4. rpx 适配单位；
+5. rem 适配单位；
+
+# rem 适配
+
+ 它是以 根元素 html 的 font-size 作为 rem 单位换算的依据。
+
+# 设计稿 单位
+
+1. UI 设计师给你的设计稿手机尺寸，都是按照手机分辨率标注的，我们拿到设计稿之后，需要将 分辨率/2 就是浏览器中手机模拟器的 css 像素单位。
+2. 比如：给你设计稿是 750(iphone6) ，这里的 750 不是我们 css 中的 px 单位，需要 750/2 = 375px ，此时 375px 才是 css 像素单位。
+
+# 注意：非手机端/pad 端 打开页面时的适配情况
+
+# 安装插件
+
+ cssrem 插件
+
+1. 该插件需要配置默认的 font-size 的大小
+2. 写样式的时候，只需要写你想要的 px，该插件直接转换成 rem 单位
+3. 修改 插件的 root font size 配置以后，重启 vscode
diff --git "a/source/_posts/\351\252\250\346\236\266\345\261\217.md" "b/source/_posts/\351\252\250\346\236\266\345\261\217.md"
new file mode 100644
index 0000000..0c163a1
--- /dev/null
+++ "b/source/_posts/\351\252\250\346\236\266\345\261\217.md"
@@ -0,0 +1,42 @@
+---
+title: 骨架屏
+date: 2020-09-13 01:57:07
+tags: 小程序
+---
+
+# 概念
+
+ 解决移动端(小程序)的首次加载时的白屏问题，也可以称为首屏优化方案。
+
+# 何时用？
+
+1. 首页
+2. 其他页面
+3. 页面中某一部分使用
+
+# 如何设置骨架屏
+
+1. 可以自己写样式，写标签。
+2. 使用一些第三方库。(a. 库使用量多不多；b. 最近的提交时间；)
+3. 让 UI 切骨架屏的图。(最直接)
+
+# 微信小程序中配置骨架屏
+
+1. 手动实现，将骨架屏页面单独封装成子组件来使用；
+2. 借助于 vant-weapp 小程序 UI 框架实现骨架屏；
+   在小程序中配置 vant-weapp：
+   a. 在 小程序 根目录，执行 npm init -y 命令，初始化包文件 package.json;
+   b. npm i @vant/weapp -S --production
+   c. 勾选 "详情 - 本地设置 - 使用 npm 模块"
+   d. 使用 微信开发者工具 构建 npm 包，"工具 - 构建 npm"
+   e. 将 "app.json" 中的 "style:v2" 删除
+   f. {
+   "usingComponents": {
+   "van-button": "@vant/weapp/button/index"
+   },
+   }
+   注意：项目构建时，不要放在中文路径中。
+3. 利用 "微信开发者工具" 自带的生成骨架屏的功能，为某一个页面自动生成骨架屏。
+   a. 等 当前页面 所有的数据 加载完毕之后，在生成骨架屏代码；
+   b. 骨架屏仅包括页面首屏中的可见区域，对于横向滚动的 swiper 等容器，超出屏幕的子元素将被忽略；
+   c. 请勿修改自动生成的骨架屏的代码，当效果不理想时，建议调整相关配置，这样当页面变更时，仍可自动生成；
-- 
GitLab