一、下载并导入模块

在本案例中，我们需要将需要使用到”art-template body-parser express和express-art-remplate,这几个模块。
1.安装
**a.**进入到文件，打开powershell窗口，进行初始化：npm init -y。
执行完成后开始下载上面所要用的模块： npm install art-template express body-parser path xpress-atr-template --save
2.创建文件

• router
  创建router.js文件，在该文件内处理路由

• server
  业务逻辑层(增删改查)

• views
  index.art用于显示图书信息，以及提供跳转入口
  tjts.art 是一个表单，用于添加图书信息
  xgts.art 渲染数据，用于修改图书信息

• data.js 模拟后台数据

[{"id": "1","name": "水浒传","author": "施耐庵","category": "文学","desc": "108条好汉的故事"},{"id": "2","name": "西游记","author": "吴承恩","category": "文学","desc": "佛教和道教的斗争"},{"id": "3","name": "红楼梦","author": "曹雪芹","category": "文学","desc": "一个封建王朝的缩影"},{"id": "4","name": "三国演义","author": "罗贯中","category": "战争","desc": "三国鼎立,诸侯割据"}
]

index.js 入口文件

//静态文件托管
app.use(express.static('views'))//设置模板兼容
app.engine('art',require('express-art-template'))//设置模板引擎路径
app.set('views',path.join(__dirname,'views'))//设置模板引擎
app.set('view engine','art');//挂载参数处理的中间件
app.use(bobyParser.urlencoded({extended:false}));//处理json数据
app.use(bobyParser.json());//配置路由
app.use(router)//监听端口
app.listen(3000,()=>{console.log('...........')
})

二、路由模块router.js

module.exports 对象是由模块系统创建的。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。

const express=require('express');
const router =express.Router()        //加载路由
const service =require('../server/server') //调用server//c查询所有书记信息并返回 json数据
router.get('/',service.showInfo);//添加图书的路由处理
router.get('/tztj',service.tztj)//添加图书的功能
router.post('/tjts',service.tjts) //修改跳转
router.get('/xgtz',service.xgtz)//修改
router.post('/xg',service.xg)//删除
router.get('/sc',service.sc)//查询
router.post('/cx',service.cx)//导出模块
module.exports=router

三、业务处理

业务逻辑层主要是实现了对数据的增删改查。

• 主页面
  遍历所有数据，获取到相对应的数据

 {{each list}}<tr><td>{{$value.bh}}</td><td>{{$value.sm}}</td><td>{{$value.zz}}</td><td>{{$value.nd}}</td><td>{{$value.ms}}</td><td><a href="/xgtz?bh={{$value.bh}}">编辑</a><a href="/sc?bh={{$value.bh}}">删除</a></td></tr>{{/each}}

• 添加数据
  在点击添加图书按钮，跳转进入添加图书页面（/tztj）添加完成后将数据写到json数据中，并且显示在主页面（跳转出页面的地址为/tjts）；在添加图书时，实现图书编号的自动增长，需要获取到最大id,然后在最大id的基础上+1，使用 res.redirect(’/’)，直接返回主页面

• 修改数据
  点击修改时，进入到修改页面（/xgtz）,获取到所有图书编号，定义一个空对象，遍历所有图书，匹配编号相同的图书，并添加到空对象中，得到修改的图书，提交时写入到json数据里，返回主页面。

• 删除数据
  获取图书编号，遍历数据，匹配相同编号的图书，使用 data.splice(位置，删除几个)方法删除

• 查询数据
  获取图书名称，遍历所有数据 匹配相对应的图书名称

const data=require('../data.json')
const path=require('path')
const fs=require('fs')exports.showInfo=(req,res)=>{//res.render() 是express集成 art-remplate 模板进行渲染res.render('index',{list:data});  
}//跳转添加图书信息页面
exports.tztj=(req,res)=>{res.render('tjts',{}) 
}//实现图书编号自动增长  
let maxx= () =>{let arr = []data.forEach((item)=> {arr.push(item.bh)});//从数组中返回最大值return Math.max.apply(null,arr)
}
//添加图书
exports.tjts=(req,res)=>{// console.log(123)let info =req.bodylet book={};book.bh=maxx()+1;console.log(book.bh)for(let key in info){book[key]=info[key]}data.push(book);fs.writeFile(path.join(__dirname, '../data.json'),JSON.stringify(data), (err) => { if (err) {res.send('cupwu');} else {res.redirect('/')// res.send('chenggong');}})
}
//修改 跳转
exports.xgtz=(req,res)=>{console.log(123)let bh=req.query.bh;//console.log(bh);let datas={}data.forEach((itme)=>{if(bh==itme.bh){datas=itme}//console.log(datas)  })res.render('xgtz',datas);
}//修改图书
exports.xg=(req,res)=>{let xg=req.body//console.log(xg)data.forEach((item)=>{if(item.bh==xg.bh){for(let key in xg){item[key]=xg[key]}}})console.log(data)fs.writeFile(path.join(__dirname,'../data.json'),JSON.stringify(data),(err)=>{if(err){res.send('cuowu')}res.redirect('/')})
}
//删除
exports.sc=(req,res)=>{let bh=req.query.bh//console.log(bh)data.forEach((item,index)=>{if(bh==item.bh){data.splice(index,1)}})fs.writeFile(path.join(__dirname,'../data.json'),JSON.stringify(data),(err)=>{if(err){res.send('cuowu')}res.redirect('/')})
}//查询
exports.cx=(req,res)=>{let name=req.body.smconsole.log(name)let book=[];data.forEach((itme,index)=>{if(itme.sm.indexOf(name)>=0){book.push(itme)}})if(book.length==0){console.log('meiyou')}else{res.render('index',{list:book})}
}