node js（模块）

2019-08-13 本文已影响0人 Sun晨淏

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

<!DOCTYPE html>
<html>
    <head>
        <title><%= title%></title>
    </head>
</html>

请求头设置及说明

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 action="url" target="stop"></form>
  <iframe name="stop" style="display:none;"></iframe>
```
- 获取form表单提交后，获取后端返回的数据
  - 常见的获取方式是通过jquery的ajaxForm，但是我们往往不会因为一个功能点而去增加项目的重量，这是不合理的，这里我们通过原生来实现这个功能,我们通过iframe阻止跳转是因为我们的form指向了我们的iframe，请求后端后，后端返回数据也就指向了我们的iframe
  - ```
  <form action="url" target="stop"></form>
  <iframe name="stop" style="display:none;" id="formData"></iframe>
```
- javascript
- ```
document.queryselect('#formData').onload = function() {
  let data = JSON.parse(this.contentWindow.document.body.innerText
}
```

node js（模块）

猜你喜欢

热点阅读