Kevin's blog
zhihuanwang
2023-09-25
目录

附件02-Node.js图书管理系统开发流程

# 一、项目初始化

# 1、创建mybook文件夹

# 2、创建入口文件index.js

# 3、初始化项目生成package.json

npm init -y
1

# 4、安装依赖


npm install express art-template express-art-template body-parser --save
1
2

# 5、编辑入口文件 index.js

# 1）定义依赖


/**
图书管理系统入口文件
*/
const express = require('express');
const router = require('./router.js');
1
2
3
4
5
6

# 2）创建app对象


const app = express();
1
2

# 3）启动服务器，配置路由


// 启动服务器功能
// 配置路由
app.use(router);
1
2
3
4

# 4）监听端口


// 监听端口
app.listen(3000,()=>{
    console.log('running...');
});
1
2
3
4
5

# 6、创建路由文件router.js


/*
    路由模块
*/
const express = require('express');
const router = express.Router();

// 路由处理
// 渲染主页
router.get('/',(req,res)=>{
    console.log('主页');
    res.send('主页');
});

// 添加图书(跳转到添加图书的页面)
router.get('/addBook',(req,res)=>{
    console.log('添加图书');
    res.send('添加图书');
});

// 编辑图书(跳转到编辑图书信息页面)
router.get('/editBook',(req,res)=>{
    console.log('编辑图书');
    res.send('编辑图书');
});

module.exports = router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 7、测试

# 1）启动服务


node .
1
2

# 2）访问定义的路由

http://localhost:3000

http://localhost:3000/addBook

http://localhost:3000/editBook

# 二、添加模板引擎

# 1、引入模板引擎

# 1）定义依赖

在index.js中添加依赖


const template = require('art-template');
const path = require('path');
1
2
3

# 2）设置模板引擎

在index.js中添加


// 设置模板的路径
app.set('views',path.join(__dirname,'views'));
// 设置模板引擎
app.set('view engine','art');
// 使express兼容art-template模板引擎
app.engine('art', require('express-art-template'));
1
2
3
4
5
6
7

# 2、创建模板文件

# 1）创建views文件夹

# 2）创建文件views/index.art


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
</head>
<body>
    
    <div>图书管理系统<a href="/addBook">添加图书</a></div>
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>作者</th>
                    <th>分类</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>西游记</td>
                    <td>吴承恩</td>
                    <td>文学</td>
                    <td>佛教与道教的斗争</td>
                    <td><a href="#">修改</a>|<a href="#">删除</a></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>西游记</td>
                    <td>吴承恩</td>
                    <td>文学</td>
                    <td>佛教与道教的斗争</td>
                    <td><a href="#">修改</a>|<a href="#">删除</a></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>西游记</td>
                    <td>吴承恩</td>
                    <td>文学</td>
                    <td>佛教与道教的斗争</td>
                    <td><a href="#">修改</a>|<a href="#">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

# 3）创建文件views/addBook.art


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统-添加图书</title>
</head>
<body>
    <div>添加图书</div>
    <form action="/saveBook" 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 4）创建文件views/editBook.art


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统-修改图书</title>
</head>
<body>
    <div>修改图书</div>
    <form action="/updateBook" method="post">
        <input type="hidden" name="id" >
        名称：<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 3、调用模板

修改router.js


// 路由处理
// 渲染主页
router.get('/',(req,res)=>{
    ...
    res.render('index');
});

// 添加图书(跳转到添加图书的页面)
router.get('/addBook',(req,res)=>{
    ...
    res.render('addBook');
});

// 编辑图书(跳转到编辑图书信息页面)
router.get('/editBook',(req,res)=>{
    ...
    res.render('editBook');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 三、处理数据

# 1、数据列表

# 1）创建json数据文件data.json


[
    {
        "id": "1",
        "name": "三国演义",
        "author": "罗贯中",
        "category": "文学",
        "desc": "一个杀伐纷争的年代"
    },
    {
        "id": "2",
        "name": "水浒传",
        "author": "施耐庵",
        "category": "文学",
        "desc": "108条好汉的故事"
    },
    {
        "id": "3",
        "name": "西游记",
        "author": "吴承恩",
        "category": "文学",
        "desc": "佛教与道教的斗争"
    },
    {
        "id": "4",
        "name": "红楼梦",
        "author": "曹雪芹",
        "category": "文学",
        "desc": "一个封建王朝的缩影"
    },
    {
        "name": "天龙八部",
        "author": "金庸",
        "category": "文学",
        "desc": "武侠小说",
        "id": 5
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 2）router中引用json


const data = require('./data.json');

// 路由处理
// 渲染主页
router.get('/',(req,res)=>{
    ...
    res.render('index', {list : data});
});
1
2
3
4
5
6
7
8
9

# 3）模板中显示数据


<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="#">修改</a>|
            <a href="#">删除</a>
        </td>
    </tr>
    {{/each}}
</tbody>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 4）重启服务测试

http://localhost:3000/

# 2、删除数据

# 1）修改index.art


<a href="/deleteBook?id={{$value.id}}">删除</a>
1
2

# 2）router中添加删除路由


// 删除图书
router.get('/deleteBook',(req,res)=>{
    console.log('删除图书');
    
    let id = req.query.id;
    data.forEach((item,index)=>{
        if(id == item.id){
            // 删除数组的一项数据
            data.splice(index,1);
        }
    });
    res.redirect('/');//页面跳转
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 3）测试

# 3、保存数据

# 1）index.js中定义依赖


const bodyParser = require('body-parser');
1
2

# 2）引入参数处理中间件

在index.js中启动服务的代码之前添加


//挂载参数处理中间件(处理post表单)
// create application/x-www-form-urlencoded parser
app.use(bodyParser.urlencoded({extended: false}));
1
2
3
4

# 3）router中添加保存路由和辅助方法


// 自动生成图书编号（自增）
let maxBookCode = ()=>{
    let arr = [];
    data.forEach((item)=>{
        arr.push(item.id);
    });
    return Math.max.apply(null,arr);
};

// 保存图书(提交表单)
router.post('/saveBook',(req,res)=>{
    console.log('添加图书(提交表单)');
    
    let info = req.body;
    console.log(info);
    let book = {};
    for(let key in info){
        book[key] = info[key];
    }
    book.id = maxBookCode() + 1;
    data.push(book);

    res.redirect('/');//页面跳转
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 4）测试

# 4、根据id查询数据

# 1）修改index.art


<a href="/editBook?id={{$value.id}}">修改</a>
1
2

# 2）router中修改编辑图书的路由


// 编辑图书(跳转到编辑图书信息页面)
router.get('/editBook',(req,res)=>{
    console.log('编辑图书');
    // res.send('编辑图书');
    let id = req.query.id;
    let book = {};
    data.forEach((item)=>{
        if(id == item.id){
            book = item;
        }
    });
    res.render('editBook',book);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 3）修改editBook.art页面


<form action="/updateBook" 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>
1
2
3
4
5
6
7
8
9

# 4）测试

# 5、更新数据

# 1）router中添加更新路由


// 编辑图书(提交表单)
router.post('/updateBook',(req,res)=>{
    console.log('编辑图书提交表单');

    let info = req.body;
    data.forEach((item)=>{
        if(info.id == item.id){
            for(let key in info){
                item[key] = info[key];
            }
        }
    });
    
    res.redirect('/');//页面跳转
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2）测试

#

# 四、创建服务层

# 1、数据列表

# 1）创建service.js文件

将对json数据的引入和辅助方法的定义从router.js中移植到service.js中


/*
    业务模块
*/
const data = require('./data.json');


// 自动生成图书编号（自增）
let maxBookCode = ()=>{
    let arr = [];
    data.forEach((item)=>{
        arr.push(item.id);
    });
    return Math.max.apply(null,arr);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2）在service中定义页面显示业务


// 渲染主页面
exports.showIndex = (req,res)=>{
    console.log('主页');
    res.render('index', {list : data});
};

// 添加图书
exports.addBook = (req,res)=>{
    console.log('添加图书');
    res.render('addBook');
};
1
2
3
4
5
6
7
8
9
10
11
12

# 3）router中引入service模块


const service = require('./service.js');
1
2

# 4）调用service模块中的方法

为了避免错误，先屏蔽其他的相关路由（除"/addBook"之外）


// 路由处理
// 渲染主页
router.get('/', service.showIndex);

// 添加图书(跳转到添加图书的页面)
router.get('/addBook', service.addBook);
1
2
3
4
5
6
7

# 2、编辑图书

# 1）在service中定义根据id查询指定图书的方法


// 编辑图书
exports.editBook = (req,res)=>{
    console.log('编辑图书');
    // res.send('编辑图书');
    let id = req.query.id;
    let book = {};
    data.forEach((item)=>{
        if(id == item.id){
            book = item;
        }
    });
    res.render('editBook',book);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2）修改router中的编辑图书的路由


// 编辑图书(跳转到编辑图书信息页面)
router.get('/editBook', service.editBook);
1
2
3

# 3、删除图书

# 1）在service中定义根据id删除指定图书的方法


// 删除图书
exports.deleteBook = (req,res)=>{
    console.log('删除图书');
    
    let id = req.query.id;
    data.forEach((item,index)=>{
        if(id == item.id){
            // 删除数组的一项数据
            data.splice(index,1);
        }
    });
    res.redirect('/');//页面跳转
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2）修改router中的删除图书的路由


// 删除图书
router.get('/deleteBook', service.deleteBook);
1
2
3

# 4、保存图书

# 1）在service中定义保存图书的方法


// 保存图书
exports.saveBook = (req,res)=>{
    console.log('添加图书(提交表单)');
    
    let info = req.body;
    console.log(info);
    let book = {};
    for(let key in info){
        book[key] = info[key];
    }
    book.id = maxBookCode() + 1;
    data.push(book);

    res.redirect('/');//页面跳转
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2）修改router中的保存图书的路由


// 保存图书(提交表单)
router.post('/saveBook', service.saveBook);
1
2
3

# 5、更新图书

# 1）在service中定义根据id更新指定图书的方法


// 编辑图书
exports.updateBook = (req,res)=>{
    console.log('编辑图书提交表单');

    let info = req.body;
    data.forEach((item)=>{
        if(info.id == item.id){
            for(let key in info){
                item[key] = info[key];
            }
        }
    });
    
    res.redirect('/');//页面跳转
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2）修改router中的更新图书的路由


// 编辑图书(提交表单)
router.post('/updateBook', service.updateBook);
1
2
3

# 五、将数据持久化到json文件中

# 1、修改service

# 1）添加文件相关依赖

在service.js中添加


const path = require('path');
const fs = require('fs');
1
2
3

# 2）将数据写入json

在service.js中添加writeDataToFile方法，


// 把内存数据写入文件
let writeDataToFile = (res) => {
    // (data,null,4)：保证数据存入的时候有换行缩进的格式
    fs.writeFile(path.join(__dirname,'data.json'),JSON.stringify(data,null,4),(err)=>{
        if(err){
            return false; // 文件写入失败
        }
        return true; // 文件写入成功
    });
};
1
2
3
4
5
6
7
8
9
10
11

# 3）调用写入文件的方法

在删除、保存、更新的业务方法中分别调用


writeDataToFile();
1
2

# 六、将数据持久化到MySQL数据中

# 1、初始化MySQL数据库和表

# 1）创建MySQL数据库 nodejs_book2）创建数据库表 book


CREATE TABLE `book` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255),
  `author` varchar(255),
  `category` varchar(255),
  `description` varchar(255),
  PRIMARY KEY (`id`)
);
1
2
3
4
5
6
7
8
9

# 2）执行MySQL脚本插入数据


insert into book (name,author,category,description) values ('三国演义','罗贯中','文学','一个杀伐纷争的年代');
insert into book (name,author,category,description) values ('水浒传','施耐庵','文学','108条好汉的故事');
insert into book (name,author,category,description) values ('西游记','吴承恩','文学','佛教与道教的斗争');
insert into book (name,author,category,description) values ('红楼梦','曹雪芹','文学','一个封建王朝的缩影');
insert into book (name,author,category,description) values ('天龙八部','金庸','文学','武侠小说');
1
2
3
4
5
6

# 2、引入mysql模块

# 1）安装模块


npm install mysql --save
1
2

# 2）创建db.config.js文件


//配置链接数据库参数
module.exports = {
    host : 'localhost',
    port : 3306,
    database : 'nodejs_book',
    user : 'root',
    password : '123456'
};
1
2
3
4
5
6
7
8
9

# 3）定义通用的db.js


/*
    定义数据库query函数
*/
var mysql = require('mysql');
var databaseConfig = require('./database.config');  //引入数据库配置模块中的数据

//向外暴露方法
module.exports = {
    base : (sql,params,callback) => {
         // 创建数据库连接
        const connection = mysql.createConnection(databaseConfig);  

        // 执行连接操作
        connection.connect(); 

        // 操作数据库(数据库操作也是异步的)
        connection.query(sql,params, function(error, results, fields) {
            if (error) throw error;
            callback(results);
        });

        // 关闭数据库
        connection.end();
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 3、修改service

# 1）在service中引用db模块


const db = require('./db.js');
1
2

# 2）主页列表


// 渲染主页面
exports.showIndex = (req,res)=>{
    console.log('主页');
    let sql = 'select * from book';
    db.base(sql,null,(result)=>{
        res.render('index',{list : result});
    });
};
1
2
3
4
5
6
7
8
9

# 3）编辑图书（根据id选择）


// 编辑图书
exports.editBook = (req,res)=>{
    console.log('编辑图书');
    // res.send('编辑图书');
    let id = req.query.id;
    let sql = 'select * from book where id=?';
    let data = [id];
    db.base(sql,data,(result)=>{
        res.render('editBook',result[0]);
    });
};
1
2
3
4
5
6
7
8
9
10
11
12

# 4）删除图书


// 删除图书
exports.deleteBook = (req,res)=>{
    console.log('删除图书');
    
    let id = req.query.id;
    let sql = 'delete from book where id=?';
    let data = [id];
    db.base(sql,data,(result)=>{
        if(result.affectedRows == 1){
            res.redirect('/');
        }
    });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 5）保存图书


exports.saveBook = (req,res)=>{
    console.log('添加图书(提交表单)');
    
    let info = req.body;
    let book = {};
    for(let key in info){
        book[key] = info[key];
    }
    let sql = 'insert into book set ?';
    db.base(sql,book,(result)=>{
        if(result.affectedRows == 1){
            res.redirect('/');
        }
    });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 6）更新图书


exports.updateBook = (req,res)=>{
    console.log('编辑图书提交表单');

    let info = req.body;
    let sql = 'update book set name=?,author=?,category=?,description=? where id=?';
    let data = [info.name,info.author,info.category,info.description,info.id];
    db.base(sql,data,(result)=>{
        if(result.affectedRows == 1){
            res.redirect('/');
        }
    });
};
1
2
3
4
5
6
7
8
9
10
11
12
13

# 静态资源服务

# 1、添加静态资源目录

# 2、启用静态资源服务

在index.js中添加


// 启动静态资源服务
app.use('/www',express.static('public'));
1
2
3

补充：

express中app.use和app.get的区别及解析

https://blog.csdn.net/wthfeng/article/details/53366169

编辑 (opens new window)
上次更新: 2024/06/15, 15:12:25
附件01-编码规范
后台系统前端项目创建

← 后台系统前端项目创建→

最近更新
01
04.Spring Boot 韩顺平
10-12
02
day14
08-29
03
day09
08-29
更多文章>
Theme by Vdoing | Copyright © 2019-2025 Evan Xu | MIT License