koa2快速入门
在前篇的基础上继续操作
分离Router
安装koa-router模块
npm install koa-router -save
/website/testPro目录下创建router.js文件
const router = require('koa-router')();
module.exports = (app) => {
router.get('/',async(ctx,next) => {//根目录get请求
ctx.response.body = 'index page
';
});
router.get('/home',async(ctx,next) => {
console.log(ctx.request.query);
console.log(ctx.request.querystring);
ctx.response.body = `home page
`;
});
router.get('/home/:id/:name',async(ctx,next) => {//指定参数的get请求
console.log(ctx.params);
ctx.response.body = `home page /:id/:name
`;
});
app.use(router.routes()).use(router.allowedMethods());
}
在index.js中引入router.js，代码如下：
const koa = require('koa');
const app = new koa();
//引入router.js
const router = require('./router');
router(app);
app.listen(3000,() =>{
console.log('server is running at http://localhost:3000');
});
浏览器输入http://localhost:3000/home ，http://localhost:3000/home/1/tom 查看效果
分离controller
先安装koa-body模块，用于处理post提交
npm install koa-body -save
修改index.js文件，代码如下：
const koa = require('koa');
const app = new koa();
//用于处理post提交
const body = require('koa-body')();
app.use(body);
//引入router.js
const router = require('./router');
router(app);
app.listen(3000,() =>{
console.log('server is running at http://localhost:3000');
});
在/website/testPro目录下新增controller文件夹，再添加home.js文件，代码如下：
module.exports = {
index:async(ctx,next) => {
ctx.response.body = 'index page
';
},
home:async(ctx,next) => {
console.log(ctx.request.query);
console.log(ctx.request.querystring);
ctx.response.body = 'home page
';
},
login:async(ctx,next) => {
if(ctx.method === 'GET'){
ctx.response.body = ``;
}else{
let {username,password} = ctx.request.body;
if(username == 'admin' && password == '12345'){
ctx.response.body = 'login success';
}else{
ctx.response.body = 'login fail';
}
}
},
}
需要修改router.js文件，在文件中引入controller/home.js，并以home.js中的函数作为HTTP请求的响应函数，代码如下：
const router = require('koa-router')();
//引入
const HomeController = require('./controller/home');
module.exports = (app) => {
//只允许get
router.get('/',HomeController.index);
router.get('/home',HomeController.home);
//允许get和post
router.get('/user/login',HomeController.login);
router.post('/user/login',HomeController.login);
app.use(router.routes()).use(router.allowedMethods());
}
浏览器输入http://localhost:3000/user/login 查看效果
分离view
这里使用ejs模版
npm install koa-views --save
npm install ejs --save
修改/website/testPro/index.js，代码如下
const koa = require('koa');
const app = new koa();
//用于处理post提交
const body = require('koa-body')();
app.use(body);
//koa-views需要在路由引入之前引入
const views = require('koa-views');
//指定视图的文件夹为views，模版引擎使用ejs
app.use(views('views',{extension:'ejs'}));
//引入router.js
const router = require('./router');
router(app);
app.listen(3000,() =>{
console.log('server is running at http://localhost:3000');
});
需要注意的是koa-views要在路由引入之前引入
修改/website/testPro/controller/home.js的index方法，代码如下
index:async(ctx,next) => {
//ctx.response.body = 'index page
';
let title = 'index page by ejs';
await ctx.render('index',{title});
},
/website/testPro目录下添加views文件夹并创建index.ejs视图文件，代码如下：
<%= title %>
用浏览器打开http://localhost:3000/ 即可看到效果
处理静态资源
npm install koa-static --save
修改/website/testPro/index.js，代码如下
const koa = require('koa');
const app = new koa();
//用于处理post提交
const body = require('koa-body')();
app.use(body);
//koa-views需要在路由引入之前引入
const views = require('koa-views');
//指定视图的文件夹为views，模版引擎使用ejs
app.use(views('views',{extension:'ejs'}));
const static = require('koa-static');
//配置静态资源目录为web
app.use(static('web'));
//引入router.js
const router = require('./router');
router(app);
app.listen(3000,() =>{
console.log('server is running at http://localhost:3000');
});
/website/testPro目录下添加web文件夹并放置一张名为test.png的图片，修改index.ejs视图文件，代码如下：
<%= title %>
浏览器刷新http://localhost:3000/ 即可看到效果