路由
koa-generator
是把路由放到了app.js
里面了,這里我單獨(dú)提出來(lái)建立router.js
柬帕,然后app.js
引入哟忍。
上面是我的項(xiàng)目目錄,后面慢慢解釋。
routes和api兩個(gè)文件夾陷寝,其實(shí)都算路由配置,只不過(guò)我把后端渲染的頁(yè)面數(shù)據(jù)和提供的接口數(shù)據(jù)分開(kāi)放了锅很,routes里面路由是渲染ejs模板,api里面的提供前后端分離的接口凤跑。
下面是
router.js
代碼
const Router = require('koa-router');
const router=new Router();
const index = require('./routes/index');
const users = require('./routes/users');
const api = require('./api/api');
router.use('/', index);//首頁(yè)
router.use('/api', api);//后端接口
router.use('/users', users);//渲染頁(yè)面 user
module.exports = router;
首頁(yè)渲染和api的路由放到前面爆安,需要ejs渲染的一級(jí)路由后面都列出來(lái)。
路由--頁(yè)面渲染
下面是routes/index.js
const router = require('koa-router')()
const userController = require('../controllers/user');
router.get('/', async (ctx, next) => {
let data = await userController.getUser();
await ctx.render('index', {
title: 'Hello Koa 2!',
data
})
})
這里是首頁(yè)渲染(直接把userController也拿過(guò)來(lái)了)仔引,路由文件里引入controllers里的文件扔仓,得到數(shù)據(jù)ctx.render
渲染模板即可。
下面是controllers/user.js
const userController={
getUser(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve({
name:'koa2',
list:[{
name:'11',age:1
},{
name:'22',age:2
},{
name:'33',age:3
},{
name:'44',age:4
}]
})
},1000)
})
}
}
module.exports=userController;
這里應(yīng)該是調(diào)用數(shù)據(jù)庫(kù)獲取真實(shí)數(shù)據(jù)咖耘,這里簡(jiǎn)單搞個(gè)異步翘簇,后面說(shuō)api的時(shí)候再說(shuō)數(shù)據(jù)庫(kù)連接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<%- include('layout') -%>
</head>
<body>
<% var aa = '這是一個(gè)ejs頁(yè)面' %>
<div>
<p><%= title %></p>
<span><%= data.name %></span>
<ul>
<% data.list.forEach((item)=>{ %>
<li><%= item.name %></li>
<% }) %>
</ul>
<%= aa %>
</div>
</body>
</html>
路由--api接口
這里參考了http://www.reibang.com/p/3e35db2c8d6c
首先是api入口文件api/api
const Router = require('koa-router');
const router = new Router();
const article = require('./article');
const user = require('./user');
router.use('/article', article);
router.use('/user', user);
module.exports = router.routes();
這里也是分模塊來(lái)搞,分為了article
和user
儿倒。
模塊article.js
const Router = require('koa-router');
const ArticleController = require('../controllers/article');
const router = new Router();
/**
* 文章接口
*/
//創(chuàng)建文章
router.post('/create',ArticleController.create);
//獲取文章列表
router.get('/list',ArticleController.list);
//獲取文章詳情
router.get('/detail/:id',ArticleController.detail);
module.exports = router.routes();
這里就是建立了幾個(gè)常用的接口版保,處理接口的Controller文件是單獨(dú)的,這里引入了controllers/article
夫否。
創(chuàng)建文章和文章詳情請(qǐng)參考http://www.reibang.com/p/3e35db2c8d6c
我再這基礎(chǔ)上添加了 -- 獲取文章列表
static async list(ctx){
// 查詢文章列表模型
let data = await ArticleModel.getArticleList(ctx.query);
ctx.response.status = 200;
ctx.body = {
code: 200,
msg: '查詢成功',
data
}
}
Model文件也是增加了一點(diǎn)
const Sequelize = require('sequelize');
const Op = Sequelize.Op;
// 引入數(shù)據(jù)表模型
const Article = require('../schema/article');
class ArticleModel {
/**
* 查詢文章列表
* @param query 查詢參數(shù) 文章標(biāo)題 模糊查詢 分頁(yè)數(shù)據(jù)
* @returns {Promise<Model>}
*/
static async getArticleList({title='',pageSize=10,pageIndex=1}){
return await Article.findAndCountAll({
limit:Number(pageSize),
offset:Number((pageIndex-1)*pageSize),
where:{
title:{
[Op.like]:'%'+title+'%'
}
}
});
}
}
module.exports = ArticleModel;
這里Model的實(shí)現(xiàn)方式與參考文章有差異彻犁,不過(guò)只是Sequelize
實(shí)現(xiàn)方式不一樣。參考文章用的import
導(dǎo)入的時(shí)候建立數(shù)據(jù)表,我是直接初始化好凰慈。
數(shù)據(jù)表文件schema/article
const Sequelize = require('sequelize');
// 引入sequelize對(duì)象
const sequelize = require('../config/db');
const Model = Sequelize.Model;
const DataTypes=Sequelize.DataTypes;
class Article extends Model {}
Article.init({
id: {
type: DataTypes.INTEGER,
primaryKey: true,
allowNull: true,
autoIncrement: true
},
//這里不再多寫其他的表結(jié)構(gòu)了汞幢,參考文章有
},{
sequelize,
modelName:'article',
freezeTableName: true,
});
module.exports = Article;
語(yǔ)法請(qǐng)參考Sequelize
,這里config/db
就是用Sequelize
來(lái)鏈接的數(shù)據(jù)庫(kù),我先用騰訊云的免費(fèi)的數(shù)據(jù)庫(kù)做了測(cè)試
const Sequelize = require('sequelize');
const sequelize = new Sequelize('test','root','*****',{
host:'cd-cdb-nyn9odic.sql.tencentcdb.com',
port:'62711',
dialect:'mysql',
pool:{
max: 5,
min: 0,
acquire: 30000,
idle: 10000
},
timezone: '+08:00' //東八時(shí)區(qū)
});
module.exports = sequelize;
終于接口算是搞完了,用ajax測(cè)試一下。
/api/article/list?title=%E6%A0%87%E9%A2%98&pageIndex=2&pageSize=10
如果是跨域訪問(wèn)微谓,使用koa-cors
中間件即可森篷,這里就不在贅述了。