-
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
- 空格转换为 "+" 加号,但不对特殊字符编码
- application/x-www-form-urlencoded
-
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 }
-
-
-
网友评论