【项目实战】nodejs 实战-图书管理系统_nodejs图书管理系统

作者：我家小花儿 | 2024-02-20 06:37:11

踩

nodejs图书管理系统

用了几天时间走了一趟沐风ol的实战教程，很感谢Up主，因为我怕学了忘，所以记录下来，以便后来进行观看记录，这几天，我彻底明白了前后端如何分离操作，如何连接数据库操作，如何在前台渲染数据，如何区分后台渲染和前台渲染。接下来，我还要把这个应用到我毕设上面，用Vue框架实现的工程和Node.js融合，最后，再次感谢Up主的实战视频。

第一步：新建js文件先安装这两个指令

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

第二步：渲染data数据，并展示出来

// node.js
// 模板引擎整合

const express = require('express');

const path = require('path');

const template = require('art-template');

const app = express();

//设置模板的路径

app.set('views',path.join(__dirname,'views'));

//设置模板引擎

app.set('view engine','art');

//使express兼容art-template模板引擎

app.engine('art',require('express-art-template'));

app.get('/list',(req,res)=>{
    let data = {
        title:'水果',
        list:['apple','orange','banana']
    }
    res.render('list',data);
});

app.listen(3000,()=>{
    console.log('runing....');
});
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

list.art

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>模板</title>
  </head>
  <body>
        <div>{
  {title}}</div>
        <div>
        <ul>
            {
  {each list}}
            <li>{
  {$value}}</li>
            {
  {/each}}
        </ul>
        </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

第三步：实现json数据的业务模块、路由模块设置、以及json数据的渲染

// index.js


//图书馆管理系统入口文件

const express = require('express');
const router = require('./router.js');//第一步
const path = require('path');
const template = require('art-template');
const bodyParser = require('body-parser');
const app = express();

//设置模板的路径

app.set('views',path.join(__dirname,'views'));

//设置模板引擎

app.set('view engine','art');

//使express兼容art-template模板引擎

app.engine('art',require('express-art-template'));

//处理请求参数
//挂在参数处理中间件（post)
app.use(bodyParser.urlencoded({extended:false}));
//处理json格式的参数
app.use(bodyParser.json());


//启动服务器功能
//配置路由
app.use(router);//第二步
//监听端口
app.listen(3000,()=>{
    console.log('running...');
})
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

// router.js

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

//路由处理
router.get('/',service.showIndex);

module.exports = router;
1
2
3
4
5
6
7
8
9

// service.js

// 业务模块

//加载所有数据
const data = require('./data.json');

//渲染主页面
exports.showIndex = (req,res)=>{
    res.render('index',{list:data});
}
1
2
3
4
5
6
7
8
9

index.art

  <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
17
18
19