欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-22 17:00:12
Babel 转码器Babel可以将ES6代码转化为ES5代码安装Babel:$ npm install --save-dev @babel/core配置文件.babelrc放在项目的根目录下,该文件用来设置转码规则和插件,格式如下:{"parents": [],"plugins": []}presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。# 最新转码规则$ npm install --save-dev @babel/preset-env#....

Babel 转码器

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


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

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

    presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
    记录Education全栈项目过程中遇到的知识点(更新中)

    # 最新转码规则
    $ 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
    

    转码结果输出到标准输出:
    记录Education全栈项目过程中遇到的知识点(更新中)
    整个目录转码:
    记录Education全栈项目过程中遇到的知识点(更新中)
    记录Education全栈项目过程中遇到的知识点(更新中)


  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
    记录Education全栈项目过程中遇到的知识点(更新中)
  2. 新建配置文件.babelrc
    记录Education全栈项目过程中遇到的知识点(更新中)
  3. babel-register 的使用
    安装:
    记录Education全栈项目过程中遇到的知识点(更新中)
    傀儡文件:
    记录Education全栈项目过程中遇到的知识点(更新中)
  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

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

  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一下
    记录Education全栈项目过程中遇到的知识点(更新中)


ES6的导出和获取

  1. 导出:
    记录Education全栈项目过程中遇到的知识点(更新中)
    记录Education全栈项目过程中遇到的知识点(更新中)
    记录Education全栈项目过程中遇到的知识点(更新中)

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



ejs模板引擎

  1. 安装
    记录Education全栈项目过程中遇到的知识点(更新中)
    记录Education全栈项目过程中遇到的知识点(更新中)

下载和使用nodemon

  • 下载(这个是项目依赖的命令)记录Education全栈项目过程中遇到的知识点(更新中)
  • 将nodemon配置到scripts中
    记录Education全栈项目过程中遇到的知识点(更新中)

Nunjucks模板引擎

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

  • 这个配置必须写
    记录Education全栈项目过程中遇到的知识点(更新中)

  • 小贴士:如何删除不要的模块
    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表单提交
    记录Education全栈项目过程中遇到的知识点(更新中)
  • 具体使用:
    判断是post还是get请求,如果是post请求,填写Body
    记录Education全栈项目过程中遇到的知识点(更新中)
    记录Education全栈项目过程中遇到的知识点(更新中)
  • 记住数据库里的id是_id
    记录Education全栈项目过程中遇到的知识点(更新中)

跨域进行交互(get)

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

    <link rel = "stylesheet" href = "http"//128.0.0.1:3000/">
    
    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>
      <script src = "http://127.0.0.1:3000/?callback=getData"></script>
      
      app.js
      const express = require('express');
      const { Script } = require('vm');
      
      const app = express();
      
      app.get('/', (req, res, next) => {
          console.log("收到客户端请求了:${req.url}");
          var data = JSON.stringify({
              foo:'bar',
              list:[1, 2, 3]
          });
          res.end('${req.query.callback}(${data})');
      })
      
      app.listen(3000, () => {
          console.log('running')
      })
      

    • 实现自动新建script标签
      jsonp({
          url:'http://127.0.0.1:3000',
          data:'',
          success:function(data){
              console.log(data)
          }
      })
      
      //实现自动新建script标签,调用success函数后将script标签删除
      //<script src = "http://127.0.0.1:3000/?callback=getData"></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.writeres.end 只能接受字符串和二进制数据两种类型
  • 这两种写法的意思是一样的
    res.sendJson = function(obj) {
    res.end(JSON.stringify(obj))
    }
    
    res.sendJson(req.body);
    
    //和这个方法是一样的
    res.json(req.body)
    
  • res.render() 是渲染页面用的,得先配置模板引擎之后才可以使用

MongoDB的使用

mongodbd的使用

  • 这个大概了解以下就可以,有简化版mongoose
    Mongoose
  • 写在最后的处理错误的路由
    记录Education全栈项目过程中遇到的知识点(更新中)
  • 示例:
    记录Education全栈项目过程中遇到的知识点(更新中)
    记录Education全栈项目过程中遇到的知识点(更新中)

Mongoose的使用

  • 注意后面这两个参数,不写就会发出警告
    mongoose.connect('mongodb://localhost/edu', { useNewUrlParser: true, useUnifiedTopology: true });
    

路径问题

  • 如果写成这样,是相对于当前的URL的(在这里就是相对于advert的)
    记录Education全栈项目过程中遇到的知识点(更新中)
    记录Education全栈项目过程中遇到的知识点(更新中)
    记录Education全栈项目过程中遇到的知识点(更新中)
  • 加上/以后就是绝对的,不受URL路径的影响
    记录Education全栈项目过程中遇到的知识点(更新中)

有文件的表单(formidable)

  • 安装formidable

  • 帮助文档:
    记录Education全栈项目过程中遇到的知识点(更新中)

  • 首先在表单上加上enctype = "multipart/form-data"
    记录Education全栈项目过程中遇到的知识点(更新中)

  • 模板:

    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;
            }
    
            //...
        })
    })
    

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

本文地址:https://blog.csdn.net/AnitaSun/article/details/112503041

相关标签: Node.js js