① nodejs

1 模块化

1.1 框架

框架	规范	区别	定义与引入
require.js	AMD	前端+异步	define + require()
sea.js	CMD	前端+异步
nodejs	CommonJS	后端+同步	module.exports + require()
ECMAScript2015	ESModule	前端+同步

  let jq = require(['jquery'], _ => {});
  console.log(jq); // undefined
  let http = require('http');
  console.log(http);

1.2 CommonJS 规范模块分类

1.2.1 内置模块：NodeJS 内部模块

• 引入方式：require(模块名))

1.2.2 自定义模块

• 定义：module.exports
• 引用：require(相对路径)

1.2.3 第三方模块

• 安装 npm

1.2.4 文件模块

• 一般指 json 文件

2 客户端与服务器

• 前端 JS = ECMAScript + BOM + DOM

• 后端 JS = ECMAScript + I/O

2.1 一个请求的细节

• 请求 request

• 响应 response

  • Content-Type

2.2 静态资源服务器

• http 创建一个服务器

• url 处理请求地址

• path 处理文件地址

• fs 文件处理

2.2.1 http

1. http/https 短连接（请求服务器并返回后，与服务器就断开连接）

2. webSocket 长连接（与服务器连接后不会断开）

• 服务器主动

• 无跨域限制

• 在不支持 webSocket 的浏览器上如何实现

  • 轮询：定时器（嵌套 setTimeout ）

  setTimeout(function show() {
    console.log(666)
    setTimeout(show, 5000)
  }, 5000)

2.2.2 文件的操作: fs 模块

• fs.readFile()/fs.readFileSync()

• fs.writeFile()/fs.writeFileSync()

• fs.appendFile()/fs.appendFileSync()

• 全局变量

  • __dirname 当前文件所在的目录地址

  • __filename 当前文件所在地址

1. 大文件的读取与写入：分多次完成文件的读写操作

• stream 文件流：文件的液体状态

• 读取流（以流的方式读取文件内容）

  • fs.createReadStream(filepath)

• 写入流

• 管道流

    gulp.task('compileSass',()=>{
        gulp.src('./src/sass/home.scss')   //返回一个读取流
        .pipe(sass())
        .pipe(rename())
        .pipe(gulp.dist('./dist')) // gulp.dist()返回一个写入流
    })

3 第三方模块

3.1 安装：npm

• 全局安装：为了在命令行使用

• 项目安装：为了在代码中引用 require

3.2 express -- 中间件Middleware

1. 定义：在到达目的前进行操作

2. 使用：app.use(middleware)

3. 分类

• 内置中间

  • express.static()

  • express.json()

  • express.urlencoded()

  • express.Router()

• 自定义中间

  中间件是一个函数，格式为 function(request, response, next){}

  • request 请求对象，保存客户端信息

  • response 响应对象，保存服务端信息

  • next() 是否进入下一个中间件的方法

  app.use(express.static('./'))

4 接口编写(路由编写)

利用模块化思想实现接口与路由的编写

4.1 接口地址

• 商品
• 注册
• 登录

4.2 RESTful 规范接口

4.2.1 根据请求类型不同定义不同的接口

• get 查

• post 增

• patch/put 改

• delete 删

4.2.2 根据不同的地址实现不同的接口

• get /goods 所有商品

• post /goods 增加商品

• get /goods/:id 单个商品

• delete /goods/:id 删除商品

• patch/put /goods/:id 修改商品（patch部分修改，put完全修改）

4.3 接口测试工具

• postman

4.4 接收参数

• 动态路由：request.params

• url参数（?后面的参数）：req.query

• 请求体参数（post,patch）：req.body

必须借助第三方中间件来获取

5 路由模块化

• CommonJS：利用 commonJS 规范把路由分离到单独的文件中

• 中间件 express.Router()：利用中间件把所有模块组合成一个完成的应用

6 Promise 对象

6.1 状态

• Pending 初始状态

• Resolved 成功状态

• Rejected 失败状态

状态只能从 Pending 改成 Resolved 或从 Pending 改成 Rejected

6.2 应用场景

• 解决回调地狱

• 方法的封装

6.3 ES7的 async & await

让我们以同步的代码实现异步编程

• await 用于等待 Promise 对象的返回结果

  await 不能单独使用，必须放在 async 函数中

• async 是函数定义的关键字，利用 async 定义的函数会返回一个 Promise 对象

  async 函数中的返回值，就是 promise 状态为 Resolved 时的值

  function getData(url,callback) {
    let data;
    let xhr = new XMLHttpRequest();
    xhr.onload = () => {
      data = xhr.responseText;
      callback(data)
    }
    xhr.open('get',url,true);
    xhr.send();
    return data;
  }

  let data = getData('/goods/123');
  console.log(data);//undefined

  // 利用回调函数来获取异步请求的数据
  getData('/goods/10086', function(data) {
    console.log(data)
  });

  // 利用Promise改造
  function getData(url){
    return new Promise((resolve,reject) => {
      let data;
      let xhr = new XMLHttpRequest();
      xhr.onload = () => {
        data = xhr.responseText;
        resolve(data)
      }
      xhr.open('get',url,true);
      xhr.send();
    })
  }

  getData('/goods/10086').then(data => {
    console.log(data)
  })

  (async function() {
    let data = await getData('/goods/10086')
  })();

7 跨域解决方案

7.1 为什么会存在跨域: 安全性问题（一切的根源：js是一门客户端语言）

7.2 解决方案

7.2.1 jsonp -- json with padding

• 步骤

  1. 创建全局函数

  2. 利用 script 标签发起请求，并发送全局函数名

  3. 后端接收全局函数名，并返回函数执行的 js 代码，顺便出入数据

• 缺点

  • 只能 get 请求

  • 不是一个 ajax 请求

7.2.2 CORS -- Cross Origin Resource Sharing

• 一个真正的 ajax 跨域请求方案

• 操作步骤

  1. 设置响应头

  • Access-Control-Allow-Origin

  • Access-Control-Allow-Headers

  • Access-Control-Allow-Methods

  2. 处理复杂跨域中的 OPTIONS 请求

7.2.3 服务器代理

• 目标服务器有接口：代理 http-proxy-middleware

• 目标服务器没有接口：爬 request & cheerio

  • 会分析 html 结构

  • 会使用工具

8 页面渲染方式

8.1 客户端渲染（BSR）：前后端分离

8.1.1 后端：编写数据接口

8.1.2 前端：发起 ajax 请求，拿到数据后，遍历生成 html 结构

8.1.3 优点

• 与用户的交互感更强

• 用户体验更好

• 开发更灵活

8.1.4 请求过程

1. 输入地址，返回 index.html

2. 解析 html，发现 script

3. 请求服务器，返回 js 代码

4. 发起 ajax 请求，返回数据

5. 解析数据，生成 html 结构

8.2 服务端渲染（SSR）：前后端不分离

8.2.1 后端：生成 html 结构并响应到前端

8.2.2 优点

• SEO

• 速度更快

8.2.3 请求过程

1. 输入地址，返回 index.html

2. 由于所有的 html 结构已经在服务器生成完毕，浏览器解析 html 结构

9 数据库

• MySQL：关系型数据库，类似与表格

• MongoDB：非关系型数据库，类似于json

	数据库	表	数据记录
MySQL	database	table	row
MongoDB	database	collection	document

9.1 在 NodeJS 中使用 MongoDB

• 驱动(第三方模块)

  • mongodb

  • mongoose

• 统一返回前端的数据格式