node js（模块）

• koa-router模块

  • 和koa-route模块一样，也是koa的一个中间，用来处理路由

  • 下载

    • cnpm i koa-router -S
      

  • 使用

    • const Koa = require('koa');
      const Router = require('koa-router');
      const app = new Koa();
      const router = new Router();
      const main = ctx => {
        ctx.body = 'Hello Koa';
      }
      router.get('/', main);
      // 注册并使用routers启动路由
      app.use(router.routes())
      // 自动丰富response相应头，当未设置响应状态的时候自动设置，在所有路由中间件最后设置，也可以设置具体某一个路由，例如：router.get('/index', router.allowedMethods());这相当于当访问/index时才设置
      .use(router.allowedMethods())
      .listen(3000);
      

    • 参数处理

    • const Koa = require('koa');
      const Router = require('koa-router');
      const app = new Koa();
      const router = new Router();
      // 单个参数
      const main = ctx => {
        // http://127.0.0.1:3000/123
        console.log(ctx.params); // {id: 123}
        ctx.body = 'Hello Koa';
      }
      // 多个参数
      //const main = ctx => {
        // http://127.0.0.1:3000/123/456
        //console.log(ctx.params); // {id: 123, uid: 456}
        //ctx.body = 'Hello Koa';
      //}
      router.get('/:id/:uid', main);
      // 注册并使用routers启动路由
      app.use(router.routes())
      .use(router.allowedMethods())
      .listen(3000);
      

    • 路由封装

      • 当项目庞大，路由非常多时，app.js就会变得特别臃肿

    • 例：index.js

    • const Router = require('koa-router');
      const router = new Router();
      router.get('/', (ctx, next) => {
        ctx.body = 'index';
        // next()函数，当执行next将会从这里主动把执行权交给下一个中间件
        next();
      });
      module.exports = router.routes();
      

    • 总路由配置文件router.js

    • const Router = require('koa-router');
      const router = new Router();
      const index = require('./routes/index.js');
      const about = require('./routes/about.js');
      router.use('/', index);
      router.use('/about', about);
      module.exports = router;
      

    • app.js

    • const router = require('./router.js');
      app.use(router.routes())
      .use(router.allowedMethods())
      .listen(3000);
      

• koa-bodyparser模块

  • 处理post请求的上下文注入到ctx.req.body中

  • const Koa = require('koa');
    const Router = require('koa-router');
    const app = new Koa();
    const router = new Router();
    const bodyParser = require('koa-bodyparser');
    app.use(bodyParser);
    router.post('/', ctx => {
      console.log(ctx.req.body)
    });
    app.use(router.routes());
    app.listen(3000);
    

• koa-views模块、ejs模块

  • koa-views处理模板

  • ejs模板引擎

  • const Koa = require('koa');
    const app = new Koa();
    const views = require('koa-views');
    const path = require('path');
    app.use(views(path(__dirname, 'views'), {
      extension: 'ejs'
    })
    app.use(ctx => {
        let title = 'hello ejs';
        ctx.render('index', {title})
    })      
    

  • views/index.ejs

• 请求头设置及说明

  • CORS

    • CORS是一个W3C标准，全称是"跨域资源共享(Cross-origin resource sharing)

    • const Koa = require('koa');
      const app = new Koa();
      router.get('/', ctx => {
        // 允许所有域请求
        ctx.set("Access-Control-Allow-Origin", "*");
        // 只允许来自http://localhost:8080的请求
        ctx.set("Access-Control-Allow-Origin", "http://localhost:8080");
        // 设置所允许的HTTP请求方法
        ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE");
        // 表明服务器支持的所有头信息字段.
        ctx.set("Access-Control-Allow-Headers", "x-requested-with, accept, origin, content-type");
        // Content-Type表示具体请求中的媒体类型信息
        ctx.set("Content-Type", "application/json;charset=utf-8");
        // 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。
        // 当设置成允许请求携带cookie时，需要保证"Access-Control-Allow-Origin"是服务器有的域名，而不能是"*";
        ctx.set("Access-Control-Allow-Credentials", true);
      });
      app.use(router.routes());
      app.listen(3000);
      

  • form表单

    • method

      • 请求方式，一般使用get和post

    • enctype

      • application/x-www-form-urlencoded
        • 对所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）
      • multipart/form-data
        • 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
      • text/plain
        • 空格转换为 "+" 加号，但不对特殊字符编码

    • action

      • 请求地址

    • name

      • 设置表单名称

    • novalidate

      • 阻止表单默认的验证规则，否则会与开发中的验证规则发生冲突，建议添加

    • 阻止表单默认跳转

      • ev.preventDefault(),但是同时会阻止表单的默认提交

      • 通过iframe阻止跳转，调用form的submit方法，可以达到提交数据并且不会跳转的目的

    • 获取form表单提交后，获取后端返回的数据

      • 常见的获取方式是通过jquery的ajaxForm，但是我们往往不会因为一个功能点而去增加项目的重量，这是不合理的，这里我们通过原生来实现这个功能,我们通过iframe阻止跳转是因为我们的form指向了我们的iframe，请求后端后，后端返回数据也就指向了我们的iframe

      • javascript

      • document.queryselect('#formData').onload = function() {
          let data = JSON.parse(this.contentWindow.document.body.innerText
        }