（一）入口文件
const Koa = require('koa');
const app = new Koa;
const path = require('path');
const render = require('koa-art-template');
render(app,{
root:path.join(__dirname,'views'),
extname:'.html',
});
require('./controller')(app);
app.listen(8080,() => {
console.log('=====>>>','index running...');
})
（二）controller控制层
const router = require('koa-simple-router');
const model = require('../models');
let controller = (app) => {
app.use(router(_ => {
_.get('/', (ctx, next) => {
ctx.render('view')
})
_.get('/index1', async (ctx, next) => {
let data = await model.db()
ctx.render('index1',{data})
})
_.get('/index2', async (ctx, next) => {
let data = await model.db1()
ctx.render('index2',{data})
})
}))
}
module.exports = controller
（三）models模型层
let data = {
db: () => {
return Promise.resolve('假装这是从数据库获取的数据库');
},
db1: () => {
return Promise.resolve('哈哈哈');
}
}
module.exports = data;
（四）view视图层
index1.html和index2.html一样
<body>
<h1>{{data}}</h1>
</body>
（一）使用koa-simple-router路由
①npm install koa-simple-router
②在controller文件夹下创建index.js和indexControllers.js
③index.js并在其中导入官网用法
④indexControllers.js中创建类
class IndexController {
constructor(){}
index(){
return (ctx, next) => {
ctx.body = 'hello word'
}
}
}
module.exports = IndexController;
⑤是index.js中接收并优化代码
const router = require('koa-simple-router')
const IndexController = require('./indexControllers.js');
const indexController = new IndexController();
module.exports = (app) => {
app.use(router(_ => {
_.get('/', indexController.index())
}))
}
⑥在入门文件app.js中开启路由
/开启路由
require('./controllers')(app)
注： 在npm官网搜索需要的路由，并使用给的用法
（一）在assets下css中创建index.css和scripts中创建index.js
（二）安装npm install koa-static
const serve = require('koa-static');
app.use(serve(path.join(__dirname, 'assets')));
（三）在控制类IndexController中index()方法
return async function (ctx) {
await ctx.render('index');
}
（四）在index.html文件中引入对应的css和js
（五）在layout.html模板文件中引入vue，并在index.html中写
<div id="app">
<h2>${message}</h2>
<input type="text" v-model="message">
</div>
（六）在index.js中处理vue
注意：如果在Vue中没有设置delimiters:[’${’,’}’]的话，页面{{message}}会冲突
new Vue({
el:'#app',
data:{
message:'hello koa'
},
delimiters:['${','}']
})
（一）创建middlewares文件夹并创建index.js
const middlewares = {
error(app){
app.use(async(ctx,next) => {
try{
await next();
}catch(err){
console.log(err);
ctx.status = 500;
ctx.body = "程序员好像出错了,请与程序员小哥联系！！！"
}
})
app.use(async(ctx,next) => {
await next();
if(ctx.status != 404) return;
ctx.status = 404;
ctx.body = `<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"></script>`
})
}
}
module.exports = middlewares;
（二）在app.js中
require('./middlewares').error(app)
（一）在npm官网搜log4js并npm install log4js安装
（二）在入门文件app.js中
const log4js = require("log4js");
log4js.configure({
appenders: { cheese: { type: "file", filename: "logs/cheese.log" } },
categories: { default: { appenders: ["cheese"], level: "error" } }
});
const logger = log4js.getLogger("cheese");
（三）将logger传入错误处理中
（四）在错误处理文件index.js中
logger.error(err);
（一）使用lodash工具库–先安装npm i --save lodash
const _ = require('lodash');
const path = require('path');
let config = {
"staticDir":path.join(__dirname,'..','assets'),
"templatesDir":path.join(__dirname,'..','views')
}
if(process.env.NODE_ENV == 'development'){
let localPort = {
port:8080
};
_.assignIn(config,localPort);
}
if(process.env.NODE_ENV == 'production'){
let prodPort = {
port:80
};
_.assignIn(config,prodPort);
}
module.exports = config;
（二）在app.js中导入const config = require(’./config’)并修改相关
（三）但是仍然无法访问，原因是如法进入if中判断是否为开发或者生产模式，解决方法使用新的cross-env
cross-env这是一款运行跨平台设置和使用环境变量的脚本。
①npm install --save-dev cross-env
②修改package.json文件中
const router = require('koa-simple-router')
const controllers = require('./indexController');
const contro = new controllers();
let controller = (app) => {
app.use(router(_ => {
_.get('/',contro.index())
_.get('/index',contro.index())
_.get('/admin',contro.adminindex())
_.get('/addpage',contro.actionAddPage())
_.post('/add',contro.actionAdd())
_.get('/editpage',contro.actionEditpage())
_.post('/edit',contro.actionEdit())
_.get('/delete',contro.deleteEdit())
}))
}
module.exports = controller;
处理完后，将数据返回给controller，controller将数据返回给前端index.js进行渲染；
const path = require("path");
const fs = require("fs");
const db = require("./db_promise")
class SafeRequest{
constructor(){}
getData(){
return db.query("SELECT * FROM t_book");
}
async editData(opt) {
let result = {
code:0,
message:'',
data:[]
}
try{
let data = await db.query(`update t_book set name=?,author=?,category=?,description=? where id=? `,
[opt.name,opt.author,opt.category,opt.description,opt.id]);
if(data.affectedRows > 0){
result.message = '修改成功'
return Promise.resolve(result);
}else{
result.message = '修改失败';
result.code = 1;
return Promise.reject(result);
}
}catch(err){
result.message = '修改失败';
result.code = 1;
result.status = 500
return Promise.reject(result);
}
}
}
module.exports = SafeRequest;
$('.edit').on('click','a:eq(0)', function(e){
$('#myModal').modal('show');
let id = $(this).parent().siblings().eq(0).text();
$.ajax({
url:'/editpage?editid='+id,
type: 'get',
dataType: 'json',
success(msg){
console.log('msg =====>',msg);
$('#form').find('input[name=name]').val(msg.data.name);
$('#form').find('input[name=author]').val(msg.data.author);
$('#form').find('input[name=category]').val(msg.data.category);
$('#form').find('input[name=description]').val(msg.data.description);
$('#btn_submit').off('click').click(function(){
submitData('/edit',id);
})
},
error(err){
console.log('err =====>',err);
}
})
})
function submitData(url,id){
let data = $('#form').serialize();
data += id ? `&id=${id}` : '';
$.ajax({
url:url,
type: 'post',
dataType: 'json',
data: data,
success(msg){
console.log('msg =====>',msg);
if(msg.code === 0){
toastr.success('提交成功!');
getListBook();
}else{
toastr.error('提交失败!');
}
},
error(err){
console.log('err =====>',err);
toastr.error('提交失败!');
}
})
$('#myModal').modal('hide');
}