ejs中引入模板
<script src="/third-libs/swiper.min.js"></script>
使用组件
<engine-h5-swiper :pageData="pageData" />
后端服务初始化项目工程目录上文已给出,也可以使用 koa-generator 脚手架工具生成
ejs-template 模板引擎配置app.js
//配置ejs-template 模板引擎
render(app, {
root: path.join(__dirname, 'views'),
layout: false,
viewExt: 'html',
cache: false,
debug: false
});
复制代码
koa-static静态资源服务
因为html2canvas需要图片允许跨域,所以在静态资源服务中所有资源请求设置'Access-Control-Allow-Origin':'*'
app.js
//配置静态web
app.use(koaStatic(__dirname '/public'), { gzip: true, setHeaders: function(res){
res.header( 'Access-Control-Allow-Origin', '*')
}});
复制代码
修改路由的注册方式,通过遍历routes文件夹读取文件
app.js
const fs = require('fs')
fs.readdirSync('./routes').forEach(route=> {
let api = require(`./routes/${route}`)
app.use(api.routes(), api.allowedMethods())
})
复制代码
添加jwt认证,同时过滤不需要认证的路由,如获取token
app.js
const jwt = require('koa-jwt')
app.use(jwt({ secret: 'yourstr' }).unless({
path: [
/^\/$/, /\/token/, /\/wechat/,
{ url: /\/papers/, methods: ['GET'] }
]
}));
复制代码
中间件实现统一接口返回数据格式,全局错误捕获并响应
middleware/formatresponse.js
module.exports = async (ctx, next) => {
await next().then(() => {
if (ctx.status === 200) {
ctx.body = {
message: '成功',
code: 200,
body: ctx.body,
status: true
}
} else if (ctx.status === 201) { // 201处理模板引擎渲染
} else {
ctx.body = {
message: ctx.body || '接口异常,请重试',
code: ctx.status,
body: '接口请求失败',
status: false
}
}
}).catch((err) => {
if (err.status === 401) {
ctx.status = 401;
ctx.body = {
code: 401,
status: false,
message: '登录过期,请重新登录'
}
} else {
throw err
}
})
}
复制代码
koa2-cors跨域处理
当接口发布到线上,前端通过ajax请求时,会报跨域的错误。koa2使用koa2-cors这个库非常方便的实现了跨域配置,使用起来也很简单
const cors = require('koa2-cors');
app.use(cors());
复制代码
连接数据库
我们使用mongodb数据库,在koa2中使用mongoose这个库来管理整个数据库的操作。
- 创建配置文件
根目录下新建config文件夹,新建mongo.js
// config/mongo.js
const mongoose = require('mongoose').set('debug', true);
const options = {
autoReconnect: true
}
// username 数据库用户名
// password 数据库密码
// localhost 数据库ip
// dbname 数据库名称
const url = 'mongodb://username:password@localhost:27017/dbname'
module.exports = {
connect: ()=> {
mongoose.connect(url,options)
let db = mongoose.connection
db.on('error', console.error.bind(console, '连接错误:'));
db.once('open', ()=> {
console.log('mongodb connect suucess');
})
}
}
复制代码
把mongodb配置信息放到config.json中统一管理
- 然后在app.js中引入
const mongoConf = require('./config/mongo');
mongoConf.connect();
复制代码
... 服务端具体接口实现就不详细介绍了,就是对页面的增删改查,和用户的登录注册难度不大
启动运行启动前端npm run dev-client
复制代码
启动服务端
npm run dev-server
复制代码
注意: 如果没有生成过引擎模板js文件的,需要先编辑引擎模板,否则预览页面加载页面引擎.js 404报错
编译engine.js模板引擎npm run lib:h5-swiper