- 初始化
packgage.json以及入口文件index.js
npm init -y
创建index.js
- www --- 静态资源根目录
css目录 ---style.css
js目录
img目录
- view --- 模板文件目录
addBook.html
editBook.html
index.html
//editBook.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加图书</title>
</head>
<body>
<div>
<div>编辑图书</div>
<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">
</form>
</div>
</body>
</html>
//addBook.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加图书</title>
</head>
<body>
<div>
<div>添加图书</div>
<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">
</form>
</div>
</body>
</html>
- 安装art-template
npm install art-template --save
- 创建服务器
- 引入静态资源模块，创建静态资源服务器
const http = require('http');
const sserver =require('./static-server.js');
http.createServer((req, res) => {
sserver.initStaticServer(req, res, __dirname, '/www');
}).listen(3000, () => {
console.log("running……");
})
- 添加首页 --- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<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>
<div class="top">图书管理系统 --- <a href="/toAdd">添加图书</a></div>
<div>
<table>
<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>
<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>
- 做路由处理
//index.js
const http = require("http");
const sserver = require("./static-server.js");
const template = require("art-template");
const querystring = require("querystring");
const url = require('url');
var dataList = [
{
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巨头的兴衰史'
}
];
// 计算数据列表中数据的最大值
let countMax = (data) => {
let arr = [];
data.forEach((e) => {
arr.push(e.id);
});
let max = Math.max.apply(null,arr);
return max;
}
http.createServer((req, res) => {
sserver.initStaticServer(req, res, __dirname, '/www');
if (req.url === "/") {
let html = template(__dirname + '/view/index', {list: dataList});
res.end(html);
}else if (req.url === "/toAdd") {
// 跳转到添加图书列表
let html = template(__dirname + '/view/addBook',{});
res.end(html);
}else if (req.url === "/addBook") {
// 保存表单提交的图书信息
// formdata表示post 表单提交的数据
let formdata = '';
req.on('data', (chunk) => {
formdata += chunk;
});
req.on('end', () => {
// 把表单数据解析成为对象形式
let obj = querystring.parse(formdata);
// 计算数据列表中id的最大值
obj.id = (countMax(dataList) +1) ;
dataList.push(obj);
});
// 数据添加成功之后，要跳转到主页
// 302表示http协议的状态码，用来重定向
// Location 属性指定了重定向的地址
res.writeHead(302, {
'location' : '/'
});
res.end();
}else if (req.url.startsWith('/toEdit')) {
// 跳转到编辑图书页面
let id = url.parse(req.url, true).query.id;
let book = null;
dataList.some((obj) => {
if (id == obj.id) {
book = obj;
return false;
}
});
let html = template(__dirname + '/view/editBook', book || {});
res.end(html);
}else if (req.url === '/editBook') {
// 保存编辑图书
let formdata = '';
req.on('data',(chunk) => {
formdata += chunk;
});
req.on('end',() => {
let obj = querystring.parse(formdata);
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;
}
});
// 数据添加成功之后，要跳转到主页
// 302表示http协议的状态码，用来重定向
// Location 属性指定了重定向的地址
res.writeHead(302, {
'location' : '/'
});
res.end();
});
}else if (req.url.startsWith('/deleteBook')) {
let id = url.parse(req.url, true).query.id;
dataList.some((item, i) => {
if (id == item.id) {
// 删除数据列表中的一条数据
dataList.splice(i,1);
return false;
}
});
res.writeHead(302, {
'location' : '/'
});
res.end();
}
}).listen(3000,() => {
console.log("我是谁……")
})
- 启动服务器
