简洁是智慧的灵魂,冗长是肤浅的藻饰 --《哈姆莱特》
书接上回koa2安装,在koas的项目中我们开启了服务,看见了hello,world。在后端的开发实际中,这些是不够的。不急,跟着文章走,不能保证你精通,但绝对够你入门。
本文收录于:js全栈工程师
理解:在我肤浅的开发之中。路由管理,大部分是接收不同的api请求,返回数据的。例如一个 api/user的请求,发送过来账号,md5加密后的密码,我们把路由带进来的参数与数据库比对,给出相应的返回。
- 安装路由管理插件
npm install koa-router -s
在webstom中的命令行中键入命令即可
- 编辑路由文件
后端的复杂,大抵就是不知道业务会拓展到什么状况,功能多么复杂。因此这里我们使用文件夹来管理。
目录是 ./router/index
const router = require('koa-router')(); //引入路由函数
router.get('/',async(ctx,next)=>{
"use strict";
ctx.redirect('/index')
})
// 路由中间,页面路由到/,就是端口号的时候,(网址),页面指引到/index
router.get('/index',async(ctx,next)=>{
"use strict";
let html = `
<h1>请你使用post来获取json</h1>
<form action="/api" method="post">
<input type="text" name="name" >
<input type="text" name="ages">
<button type="submit">提交</button>
</form>
`
ctx.body= html
})
//在index的路由的时候返回一段html,(实际开发中,不会这样做的) 页面是一个表单,模拟我们的前端或者移动
// 操作动作,(记住,这是动作。后面的redux中是很重要的一部分)提交数据到/api的路由中
router.post('/api',async(ctx, next) => {
let apps = ctx.request.body
console.log(ctx.request.body )
ctx.body = '111111'
})
//页面路由到api的时候,
// ctx.redirect.body及时之前提交表单的数据
// ctx.body就是页面的返回体,之前说过了,这里赋值是什么,就返回什么。
module.exports = router
//将页面暴露出去
还有app .js编辑
const Koa = require('koa') //koa2中间件依赖
const app = new Koa() //js的继承
const Router = require('koa-router') //路由依赖的中间间
// app.use( async ( ctx ) => {
// ctx.body = 'hello world'
// }) //koa2中间件,使用路由的(使用路由后,这里就不会在编辑代码了)
app.use(require('./router/index').routes())
app.listen(3000) //服务启动端口
console.log('启动成功') //日志打印
执行代码效果
点击提交后。
页面也能路由到api页面了。但是,我们要获取的是表单内提交的数据。而不是11111。(这里有个坑,自己爬....)还差一个插件,这就是kao2我认为的一个好处,按需使用。灵巧,便捷。
- koa-bodyparser 上下文解析插件
安装命令
npm install koa-bodyparser -s
app.js项目入口文件使用。
const Koa = require('koa') //koa2中间件依赖
const app = new Koa() //js的继承
const Router = require('koa-router') //路由依赖的中间间
const bodyParser = require('koa-bodyparser') //请求体,返回体解析类似json,text,图片等
// app.use( async ( ctx ) => {
// ctx.body = 'hello world'
// }) //koa2中间件,使用路由的(使用路由后,这里就不会在编辑代码了)
app.use(bodyParser()) //使用解析上下文插件
app.use(require('./router/index').routes())
app.listen(3000) //服务启动端口
console.log('启动成功') //日志打印
路由页面修改
const router = require('koa-router')(); //引入路由函数
router.get('/',async(ctx,next)=>{
"use strict";
ctx.redirect('/index')
})
// 路由中间间,页面路由到/,就是端口号的时候,(网址),页面指引到/index
router.get('/index',async(ctx,next)=>{
"use strict";
let html = `
<h1>请你使用post来获取json</h1>
<form action="/api" method="post">
<input type="text" name="name" >
<input type="text" name="ages">
<button type="submit">提交</button>
</form>
`
ctx.body= html
})
//在index的路由的时候返回一段html,(实际开发中,不会这样做的) 页面是一个表单,模拟我们的前端或者移动
// 操作动作,(记住,这是动作。后面的redux中是很重要的一部分)提交数据到/api的路由中
router.post('/api',async(ctx, next) => {
let apps = ctx.request.body
console.log(ctx.request.body )
ctx.body = apps
})
//页面路由到api的时候,
// ctx.redirect.body及时之前提交表单的数据
// ctx.body就是页面的返回体,之前说过了,这里赋值是什么,就返回什么。
module.exports = router
//将页面暴露出去
- 重启项目
这里输入数据,点击提交。
页面返回你输入的数据,即表示路由成功
还是那句话,或看官网api,对于学习koa回更好。
总结
在实际的开发中,后端只是返回不同的json,路由只是对应的返回数据。koa-bodyparser插件的作用来解析请求题的参数,json,图片,文件什么的。后期会有详细的讲解。这里了解一下就好。
是不是觉得后端也不难,那就对了,我们不要急,循序渐进的学习koa。
后端之中,数据库是很关键的一点。我更新慢,因为事多,(最近写小程序)。建议去看看数据库,mysql。我也有写了一篇,3000多字,关键我觉得垃圾。但以我的尿性,肯定是推翻重来的。
关注我,下章讲静态资源管理,彻彻底底的前后端分离开发。
我爱你,就像星星爱着月亮。感谢你们的点赞与关注