node.js实现图书增删改查

爱被打了一巴掌 2021-11-18 00:58 431阅读 0赞

## 实现图书的增删改查 ##

**1.分析**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4OTMzMQ_size_16_color_FFFFFF_t_70]  
**2.文件**

1.  生成json文件包

F:\others\XAMPP\htdocs\Epr\mybook>npm init -y
    Wrote to F:\others\XAMPP\htdocs\Epr\mybook\package.json:
    
    {
      "name": "mybook",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

1.  安装依赖包

F:\others\XAMPP\htdocs\Epr\mybook>cnpm install express art-template body-parser --save

1.  安装模板引擎express-art-template

F:\others\XAMPP\htdocs\Epr\mybook>express art-template

1.  添加文件  
    ![在这里插入图片描述][20190731151844986.png]
2.  在views文件添加index.art文件：  
    views文件新建：editBook.art，addBook.art

<div class="title">图书管理<a href="#">添加图书</a></div>
    		<div class="content">
    			<table>
    				<thead>
    					<tr>
    						<th>编号</th>
    	                    <th>名称</th>
    	                    <th>作者</th>
    	                    <th>分类</th>
    	                    <th>描述</th>
    	                    <th>操作</th>
    					</tr>
    				</thead>
    					 <tbody>
    	              		  {
       {each list}}
    	               			 <tr>
    			                    <td>{
       {$value.id}}</td>
    			                    <td>{
       {$value.name}}</td>
    			                    <td>{
       {$value.author}}</td>
    			                    <td>{
       {$value.category}}</td>
    			                    <td>{
       {$value.desc}}</td>
    			                    <td><a href="/toEditBook?id={
       {$value.id}}">修改</a>|<a href="/deleteBook?id={
       {$value.id}}">删除</a></td>
    			                </tr>
    	                	{
       {/each}}
    	                
    	            </tbody>
    			</table>
    		</div>

addBook添加图书

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>添加图书</title>
    	</head>
    	<body>
    		<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" value="提交">
    	    </form>
    	</body>
    </html>

editBook修改图书

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>修改图书</title>
    </head>
    <body>
        <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" value="提交">
        </form>
    </body>
    </html>

1.  新建文件夹public：在里面建立style.css

.title {
    			        text-align: center;
    			        background-color: lightgreen;
    			        height: 50px;
    			        line-height: 50px;
    			        font-size: 24px;
    			    }
    			    .title>a{
    			    	padding-left: 30px;
    			    }
    			    .content {
    			        background-color: lightblue;
    			    }
    			    .content table {
    			        width: 100%;
    			        text-align: center;
    			        border-right: 1px solid orange;
    			        border-bottom: 1px solid orange;
    			    }
    			    .content td,th {
    			        border-left: 1px solid orange;
    			        border-top: 1px solid orange;
    			        height: 40px;
    			        line-height: 40px;
    			    }

1.  js文件  
    index.js

/*
     图书管理入口文件：
     * */
    
    const express = require('express');
    const template = require('art-template');
    const bodyParser = require('body-parser');
    const router = require('./router.js');
    const path = require('path');
    const app = express();
    
    
    //启动静态资源服务
    app.use('/www', express.static('public'));
    
    //1先使用中间件
    //设置模板引擎
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'art');
    //使用express兼容art-template模板引擎
    app.engine('art', require('express-art-template'));
    
    //3处理请求参数
    //3.1
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());
    
    //2启动服务器
    //2.1配置路由
    app.use(router);//app.use() requires a middleware function在router.js导出模块
    //2.2监听窗口
    app.listen(8079, '127.0.0.1', () => {
    	console.log('running');
    })

router.js

//路由模块
    const express = require('express');
    const router = express.Router();
    const service =require('./service.js');
    
    //1.加载模块service.js
    router.get('/', service.showIndex);
    
    
    //2.添加图书,跳转到添加图书页面。
    router.get('/toAddBook', service.toAddBook);
    
    //3.添加图示：提交表单
    router.post('/addBook', service.addBook);
    
    //4.跳转到编辑图书信息页面
    router.get('/toEditBook', service.toEditBook);
    //5.编辑图书信息提交表单
    router.post('/editBook', service.editBook);
    //6.删除图书信息
    // 删除图书信息
    router.get('/deleteBook', service.deleteBook);
    
    
    //导出:模块
    module.exports = router;

service.js

//业务模块:
    
    const data = require('./data.json');
    const path = require('path');
    const fs = require('fs');
    
    //3.1自动生成图书编号（自增）
    let maxBookCode = ()=> {
    	let arr = [];
    	data.forEach((item) => {
    		arr.push(item.id);
    	});
    	return Math.max.apply(null, arr);
    }
    
    let writeDataToFile = (res)=>{
    	//把存好的数据写入文件
    	fs.writeFile(path.join(__dirname, 'data.json'), JSON.stringify(data, null, 4), (err) => {
    		if(err){
    			res.send('server error');
    		}
    		//写入成功后跳转到主页面。
    		res.redirect('/');
    	});
    }
    
    
    //1.:渲染主页面导出
    exports.showIndex = (req, res) => {
    	res.render('index', {list: data});//index模板名称
    }
    
    //2.跳转到添加图书页面
    exports.toAddBook = (req, res) => {
    	res.render('addBook', {});
    }
    
    //3.添加图书，保存数据
    exports.addBook = (req, res) => {
    	//获取表单数据
    	let info = req.body;
    	//把表单数据存放
    	let book = {};
    	for(let key in info){
    		book[key] = info[key];
    	}
    	book.id = maxBookCode() + 1;
    	//把图书信息放到book中
    	data.push(book);
    	//把存好的数据写入文件
    	writeDataToFile(res);
    }
    
    //4.跳转到编辑页面
    exports.toEditBook = (req, res) => {
    	let id = req.query.id;
    	let book = null;
    	data.forEach((item) => {
    		if(id == item.id){
    			book = item;
    			return;//跳出循环
    		}
    	});
    	res.render('editBook', book);
    }
    
    //5.编辑图书，信息数据更新，
    exports.editBook = (req, res) => {
    	let info = req.body;//获取表单数据。编辑的数据
    	//遍历所有数据
    	data.forEach((item) => {
    		//判断是不是自己编辑的那条数据
    		if(info.id == item.id){
    			//把信息更新
    			for(let key in info){
    				item[key] = info[key];//把旧的信息用新的覆盖
    			}
    			return;
    		}
    	});
    	writeDataToFile(res);
    }
    
    //6.删除图书信息
    exports.deleteBook = (req, res) => {
    	//获取id
    	console.log(req.query.body);
    	let id = req.query.id;
    	
    	data.forEach((item, index) => {
    		if(id == item.id){
    			//删除数组的一项数据
    //			console.log(item.id);
    			data.splice(index, 1);//splice() 方法用于添加或删除数组中的元素。
    			maxBookCode();
    		}
    		return;
    	});
    	writeDataToFile(res);
    }

最后实现图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4OTMzMQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20190731230942852.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4OTMzMQ_size_16_color_FFFFFF_t_70]: /images/20211116/d37049b8c20843f5bd8dd64356230b13.png
[20190731151844986.png]: /images/20211116/b208d42d47c949e79bb15308ab952090.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4OTMzMQ_size_16_color_FFFFFF_t_70 1]: /images/20211116/6349c6f82a4f4867b1a37ec68a88dfcf.png
[20190731230942852.png]: /images/20211116/74bd86138a2a4ac392b06ce81a9f766a.png