记录Education全栈项目过程中遇到的知识点（更新中）

---

Babel 转码器

1. Babel可以将ES6代码转化为ES5代码
   安装Babel：$ npm install --save-dev @babel/core

   ---

2. 配置文件.babelrc
   放在项目的根目录下，该文件用来设置转码规则和插件，格式如下：

   {
   	"parents": [],
   	"plugins": []
   }
   

   presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
   

   # 最新转码规则
   $ npm install --save-dev @babel/preset-env
   
   # react 转码规则
   $ npm install --save-dev @babel/preset-react
   

   然后，将这些规则加入.babelrc

   {
   "presets": [
     //书写转码规则的后缀
     "@babel/env",
     "@babel/preset-react"
   ],
   "plugins": []
   }
   

   ---

3. 命令行转码 @babel/cli
$ npm install --save-dev @babel/cli

   # 转码结果输出到标准输出
   $ npx babel example.js
   
   # 转码结果写入一个文件
   # --out-file 或 -o 参数指定输出文件
   $ npx babel example.js --out-file compiled.js
   # 或者
   $ npx babel example.js -o compiled.js
   
   # 整个目录转码
   # --out-dir 或 -d 参数指定输出目录
   $ npx babel src --out-dir lib
   # 或者
   $ npx babel src -d lib
   
   # -s 参数生成source map文件
   $ npx babel src -d lib -s
   

   转码结果输出到标准输出：
   
   整个目录转码：
   
   

   ---

4. babel-node
   可以直接运行ES6代码和ES6脚本文件
   安装：$ npm install --save-dev @babel/node
   进入REPL环境（babel-node）

   $ npx babel-node
   > (x => x * 2)(1)
   2
   

   运行ES6脚本文件（es6.js）

   # es6.js 的代码
   # console.log((x => x * 2)(1));
   $ npx babel-node es6.js
   2
   

   ---

5. babel/register 模块
   改写了require命令，每当使用了require加载.js、.jsx、.es和.es6后缀名的文件，就会先用 Babel 进行转码。
   @babel/register只会对require命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。
   安装：$ npm install --save-dev @babel/register

   // index.js文件
   //使用时，必须首先加载 @babel/register
   require('@babel/register');
   require('./es6.js');
   

   使用：$ node index.js

---

---

dependencies（核心依赖包）和dev-dependcies（开发依赖包）的区别

1. –save 是把依赖项保存到dependencies中
   –save-dev 是把依赖项保存到dev-dependcies中
2. 如果要上线部署，dependencies是必须依赖的，dependcies 没有必要依赖。
3. 使用 npm install --production可以只安装dependcies

---

---

Babel 转码器和依赖包在项目中的使用

1. 安装es2015
   
2. 新建配置文件.babelrc
   
3. babel-register 的使用
   安装：
   
   傀儡文件：
   
4. babel-cli的使用
   全局安装：npm install -g babel-cli
   只要全局安装了babel-cli，则会在命令行多出一个命令：babel
   可以通过npm root -g查看全局包安装目录
   缺点：如果项目要运行，全局环境中必须有Babel，也就是说项目产生了对环境的依赖，另一方面，这样做也无法支持不同项目使用不同版本的Babel

   ---

   在项目中安装：npm install --save dev babel-cli

---

---

package.json中的scripts

1. “start”
   npm main.js 等同于 npm start
   执行npm start之前首先执行prestart，最后执行poststart
2. 其他
   babel src -d dist等同于npm run build（把需要编译的js文件放到src目录下就可以）
3. npm run dev就是开发环境，实时编译
   npm start就是生产环境，执行的是编译转码后的代码，前提是start之前得build一下
   

---

---

ES6的导出和获取

1. 导出：
   
   
   

2. 获取
   import {foo, f, num} from './config'
import * as config from './config'
import config from './config' //这种方式会去找被加载模块通过export default导出的成员
   export 和 export default可以共存

---

---

ejs模板引擎

1. 安装
   
   

---

下载和使用nodemon

• 下载(这个是项目依赖的命令)
• 将nodemon配置到scripts中
  

---

Nunjucks模板引擎

• 具体使用请查看帮助文档

• 这个配置必须写
  

• 小贴士：如何删除不要的模块
  npm uninstall --save ejs

  ---

  如何书写自己的body-parser

  • 书写body-parser.js文件

  import queryString from 'querystring'
  
  // 自己解析post表单请求体,不需要body-parser
  export default (req, res, next) => {
         
  
      // req.headers 可以拿到当前请求的请求报文头信息
      //意思是如果含有文件类型的content-type
      if (req.method.toLowerCase() === 'get' ||
          req.headers['content-type'].startsWith('multipart/form-data')) {
         
          //如果没有return,虽然调用了next,但还是会往下执行,会发生错误
          return next();
      }
  
      let data = '';
  
      req.on('data', chuck => {
         
          data += chuck;
      });
  
      req.on('end', () => {
         
          // 手动给req对象挂载一个body书写,值就是当前POST请求体对象
          req.body = queryString.parse(data);
          next();
      })
  };
  

• 导入到app.js文件中

  import bodyParser from './middlewares/body-parser';
  
  // 这句写在挂载路由容器之前
  
  //自己解析post表单
  app.use(bodyParser);
  

---

使用Postman

• 可以用来测试接口
• form-data 测试带文件的表单提交
  x-www-form-urlencoded测试不带文件的普通post表单提交
  
• 具体使用：
  判断是post还是get请求，如果是post请求，填写Body
  
  
• 记住数据库里的id是_id
  

---

跨域进行交互（get）

• link标签（浏览器会把它当作CSS来解析）

  const express = require('express');
  
  const app = express();
  
  app.get('/', (req, res, next) => {
         
      console.log("收到客户端请求了:${req.url}");
      res.end('body {background-color:red;}');
  })
  
  app.listen(3000, () => {
         
      console.log('running')
  })
  

  ---

• script标签

  • 实现跨域
    index.html

    <script>
    function getData(data){
              
        console.log(data);
    }
    script>
    
    function jsonp(option){
             
        //设置回调函数的名字,使用两次random函数,防止重复
        var callbackName = 'itcast_' + Math.random().toString().substr(2) + Math.random().toString().substr(2);
        !windows.callbacks ? window.callbacks = {
             } : 
        window[callbackName] = function(data){
             
            option.success(data);
            //在调用这个函数之后,移除script标签
            document.body.removeChild(script);
        }
    
        option.url = option.url + '?callback=' + callbackName;
        var script = document.createElement('script');
        script.src = option.url;
        document.body.appendChild(script);
    }
    

---

• res.write 和 res.end 只能接受字符串和二进制数据两种类型
• 这两种写法的意思是一样的

  res.sendJson = function(obj) {
         
  res.end(JSON.stringify(obj))
  }
  
  res.sendJson(req.body);
  
  //和这个方法是一样的
  res.json(req.body)
  

• res.render() 是渲染页面用的，得先配置模板引擎之后才可以使用

---

MongoDB的使用

mongodbd的使用

• 这个大概了解以下就可以，有简化版mongoose
  Mongoose
• 写在最后的处理错误的路由
  
• 示例：
  
  

---

Mongoose的使用

• 注意后面这两个参数，不写就会发出警告

  mongoose.connect('mongodb://localhost/edu', {
          useNewUrlParser: true, useUnifiedTopology: true });
  

---

路径问题

• 如果写成这样，是相对于当前的URL的（在这里就是相对于advert的）
  
  
  
• 加上/以后就是绝对的，不受URL路径的影响
  

---

有文件的表单（formidable）

• 安装formidable

• 帮助文档：
  

• 首先在表单上加上enctype = "multipart/form-data"
  

• 模板：

  app.post('/', (req, res, next) => {
         
      const form = new formidable.IncomingForm()
  
      //指定上传路径,就是你要将从表单提交来的文件放到哪儿
      form.uploadDir = './upload';
  
      //保持原来的扩展名,就是jpg啥子的
      form.keepExtensions = true;
  
      //err就是可能发生错误的错误对象
      //fields就是普通的表单字段
      //files就是文件内容数据信息
  
      form.parse(req, (err, fields, files) => {
         
          if(err){
         
              throw err;
          }
  
          //...
      })
  })
  

  

---

1. control + p可以在VSCode中进行搜索

2. 如果利用git上传的时候，不想上传某些文件，可以在文件夹下新建.gitignore文件，把不想文件的名字放进去
   

3. 分页查询

• 下载
  $ yarn add [email protected]

• 引入
  

  ***********************************************
  分页
  假设现在集合中有185条数据，每页展示20条数据
  1. 共分多少页：185(totalCount) / 20(pageSize) = 10(向上取整)
  2. 查看某一页的数据从哪到哪
   - 1         1             20 
   - 2         21            40
   - 3         41            60
   - n ((n - 1) * 20 + 1)   n * 20
  ************************************************
  Advert
  	.find()
  	.skip(3)
  	.limit(3)
  	.exec((err, result) => {
         
  		if (err){
         
  			throw err;
  		}
  		console.log(result);
      })
  ************************************************
  skip()是跳过几条数据
  limit()是查询几条数据
  

---

---

5. 如果同时使用两个模板引擎，要小心这两个模板引擎的语法会产生冲突