const express = require('express');
const bodyParser = require('body-parser'); ---npm下载
const template = require('art-template'); ---npm下载
const router = require('./router.js'); ---导入路由规则
const app = express();
// 启动静态资源服务
app.use('/www',express.static('www'));
// 处理请求参数
app.use(bodyParser.urlencoded({extended:false}));
// 设置模板引擎
// 设置模板的渲染函数
// 第一个参数指的是文件扩展名
// 第二个参数callback 是模板引擎的主函数，接受文件路径、参数对象和回调函数作为其参数。
app.engine('.html',template.__express);
// 设置模板的路径,第一参数默认不变,第二个参数是路径
app.set('views','./view');
// 设置默认的模板引擎，第二个参数指明视图文件的后缀
app.set('view engine','html');
// 处理动态路由
app.use(router);
// 启动监听
app.listen(3000,() => {
console.log('running...');
});
const express = require('express');
const handler = require('./handler.js');
const router = express.Router();
// 跳转到主页面
router.get('/',handler.showIndex);
// 跳转到添加图书页面
router.get('/toAdd',handler.toAddBook);
// 保存表单提交的图书信息
router.post('/addBook',handler.addBook);
// 跳转到编辑图书页面
router.get('/toEdit',handler.toEditBook);
// 保存编辑图书的信息
router.post('/editBook',handler.editBook);
// 要删除的数据所对应的id
router.get('/deleteBook',handler.deleteBook);
module.exports = router;
// handler主要实现具体的业务逻辑
let dataList = require('./data.js');
const template = require('art-template');
const querystring = require('querystring');
const url = require('url');
// 计算数据列表中id的最大值
let countMax = (data) => {
let arr = [];
data.forEach((e) => {
arr.push(e.id);
});
let max = Math.max.apply(null, arr);
return max;
}
// 跳转到主页
exports.showIndex = (req, res) => {
res.render('index',{list:dataList});
}
// 跳转到添加图书页面(因为没有内容,所以是空对象)
exports.toAddBook = (req, res) => {
res.render('addBook',{});
}
// 保存添加图书信息
exports.addBook = (req, res) => {
// 把表单数据解析成为对象形式,为post
let obj = req.body;
// 计算数据列表中id的最大值
obj.id = (countMax(dataList) + 1);
dataList.push(obj);
// 数据添加成功之后，要跳转到主页
res.redirect('/');
}
// 跳转到编辑图书页面
exports.toEditBook = (req, res) => {
let id = req.query.id;
let book = null;
dataList.some((obj) => {
// 查询参数中id和数据列表中的id一致表示该条记录就是要编辑的数据
if (id == obj.id) {
book = obj;
return false;
}
});
// 根据id找到要编辑的数据后，把该数据渲染到编辑页面中
res.render('editBook',book);
}
// 保存编辑图书信息
exports.editBook = (req, res) => {
let obj = req.body;
dataList.some((item) => {
// 如果表单提交的数据和数据列表中的数据对应就修改该条记录
if (obj.id == item.id) {
item.name = obj.name;
item.author = obj.author;
item.category = obj.category;
item.desc = obj.desc;
return false;
}
});
// 数据修改完成后重新跳转到主页面
res.redirect('/');
}
// 删除图书
exports.deleteBook = (req, res) => {
let id = req.query.id;
dataList.some((item, i) => {
if (id == item.id) {
// 删除数据列表中的一条数据
dataList.splice(i, 1);
return false;
}
});
res.redirect('/');
}
// 假数据
module.exports = [{
id : 1,
name : '三国演义',
author : '罗贯中',
category : '文学',
desc : '一个杀伐纷争的年代'
},{
id : 2,
name : '水浒传',
author : '施耐庵',
category : '文学',
desc : '草寇就是草寇'
},{
id : 3,
name : '西游记',
author : '吴承恩',
category : '文学',
desc : '佛教与道教的斗争'
},{
id : 4,
name : '红楼梦',
author : '曹雪芹',
category : '文学',
desc : '一个封建王朝的缩影'
},{
id : 5,
name : '浪潮之巅',
author : '吴军',
category : '科普',
desc : 'IT巨头的兴衰史'
}];
- view(渲染模板下面的文件)
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
//以下是引入静态资源(www下面的css js img文件)
<link rel="stylesheet" type="text/css" href="/www/css/style.css">
<script type="text/javascript" src="/www/js/jquery.js"></script>
<script type="text/javascript" src="/www/js/index.js"></script>
</head>
<body>
//跳转到addBook.html页面
<div class="title">图书管理系统 --- <a href="/toAdd">添加图书</a></div>
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>作者</th>
<th>分类</th>
<th>描述</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody>
{{each list as item}}
<tr>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.author}}</td>
<td>{{item.category}}</td>
<td>{{item.desc}}</td>
//跳转editBook.html页面
<td><a href="/toEdit?id={{item.id}}">编辑</a></td>
<td><a href="/deleteBook?id={{item.id}}">删除</a></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加图书</title>
</head>
<body>
<div>
<div>添加图书</div>
//数据post,重新渲染主页面
<form action="/addBook" method="post">
名称：<input type="text" name="name"><br>
作者：<input type="text" name="author"><br>
分类：<input type="text" name="category"><br>
描述：<input type="text" name="desc"><br>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编辑图书</title>
</head>
<body>
<div>
<div>编辑图书</div>
//数据post,重新渲染主页面
<form action="/editBook" method="post">
<input type="hidden" name="id" value="{{id}}">
名称：<input type="text" name="name" value="{{name}}"><br>
作者：<input type="text" name="author" value="{{author}}"><br>
分类：<input type="text" name="category" value="{{category}}"><br>
描述：<input type="text" name="desc" value="{{desc}}"><br>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
