前端攻城狮---node之图书管理系统

最新推荐文章于 2024-09-01 18:56:30 发布

csdn_gyh

最新推荐文章于 2024-09-01 18:56:30 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/gaoyouhuang/article/details/84991540

版权

前端攻城狮专栏收录该内容

44 篇文章 0 订阅

订阅专栏

图书管理系统采用单页面的后端渲染的方法，功能就是图书的增删查改。

什么是单页面？直白的说就是整个项目就一个html，所有的显示都在这一个html里面。

什么叫后端渲染？就是前段显示的内容有后台输出，也就是说后台会传一个完整的html的内容，让前段去渲染。

主要用到art-template模板 express框架以及node自带的一些模板。先来看看我们的首页

环境配置

首先我们先去配置第三方插件art-template、body-parser、express、express-art-template、mysql

/*
  图书管理入口文件
*/
const express = require("express");
const template = require("art-template");
const path = require("path");
const router = require("./router.js");
const bodyParser = require("body-parser");
const app = express();

//1.设置全局静态资源
app.use("/bookManager",express.static("public"));

//2.设置art-template模板引擎
app.set("views",path.join(__dirname,"views"));
// 设置模板引擎
app.set("view engine","art");
// 让express兼容art-template
app.engine("art",require("express-art-template"));

//3.配置body-parser
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());
//4.配置路由
app.use(router);
//5.配置端口号】
app.listen(3000,()=>{
    console.log("app is running");
});

上面进行了5个步骤。

配置全局静态资源

为什么我们要配置静态资源？好比说给设置一些本地资源，如css样式，js等，我们就可以通过去静态资源里拿，如http://localhost:3000/www/index.css，去获取到css文件

配置art-template

因为art-template有去适配express框架的版本，所以我们就按照官方demo上的去配置即可。先去设置模板位于哪个文件夹，再设置模板文件的后缀，最后设置负责解析模块的库。

配置body-parser

就是帮助我们去获取get，post等请求的参数

配置路由

为了提高代码的阅读性，我们将路径处理放置router.js的路由中

配置端口号

渲染主页面

当然第一步要做的就是渲染主页面，至于主页面的数据，我们先事先写死，将数据放在data.json里面，里面的数据要和数据库的表一直如下

{
    "success": true,
    "msg": "请求成功",
    "data": [{
        "name": "西游记",
        "author": "吴承恩",
        "classify": "classify1",
        "content": "content1",
        "id": 1
    }, {
        "name": "12312",
        "author": "12312aaa",
        "classify": "12312",
        "content": "123123123123",
        "id": "3"
    }],
    "_locals": {}
}

所以我们需要创建一张表，里面有5个属性id,name,author,category,description，数据库这一块咱们等回来讲解，先显示出表格。

// /  渲染主页 index.art
/*
   路由模块
*/
const express = require('express');
const router = express.Router();
const service = require("./service.js");

// 渲染主页
router.get('/',service.showIndex);

module.exports = router;

这就是我们router.js文件，"/"也就是localhost:3000，就是显示主界面，里面具体的逻辑我们又放到了service.js里面，我们来看看service.js

const express = require("express");
const fs = require("fs");
const path = require("path");
const http_data = require("./data/booklist.json");
const dbsql = require("./db/dbmanager");
//跳转到首页
exports.showMain = (req,res)=>{
    fs.readFile(path.join(__dirname,"data/booklist.json"),(err,data)=>{
        if(err)
        {
            res.send("error");
            return;
        }
        res.render('index',{"data":JSON.parse(data).data});
    })
}

res.render("name",data),前者是模板文件的名字，其实就是对应文件夹下view的index.art,第二个参数就是要传递的值，为什么是view文件夹？在index.js里我们进行了配置。接下来我们就去处理获得到的data数据，并去处理显示。

显示首页(index.art)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/bookManager/index.css">//注意点1
    <title>Document</title>
</head>
<body>
    <header>欢迎来到图书管理系统</header>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>作者</th>
                <th>分类</th>
                <th>概要</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        {{each data}}
            <tr>
                <td>{{$value.id}}</td>
                <td>{{$value.name}}</td>
                <td>{{$value.author}}</td>
                <td>{{$value.classify}}</td>
                <td>{{$value.content}}</td>
                <td><a href="/toedit?id={{$value.id}}">编辑</a> <a href="/todele?id={{$value.id}}">删除</a></td>
            </tr>
        {{/each}}
            
        </tbody>
    </table>
    <footer><a href="/addbook">添加</a></footer>
</body>
</html>

首先我们来看看注意点1，这就是我们设置的全局静态资源好处，href="/bookManager/index.css"去加载我们的css文件，前面的localhost:3000可以省略。具体显示的部分，我们就使用art-template去显示，因为是一个列表所以我们循环显示。

这里需要注意的是我们因为什么传来的数据对象是data，所以我们从data里取，如果是传的是msgdata，那么就要从msgdata里取。再附上css样式

*{
    margin: 0;
    padding: 0;
}
header{
    font-size: 20px;
    font-weight: 700;
    color: black;
    text-align: center;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: skyblue;
}
table{
    margin-top: 10px;
    width: 100%;
    border-collapse: collapse;

}
tr,th,td{
    text-align: center;
    height: 40px;
    line-height: 40px;
    border: 1px solid green;
}
footer{
    margin-top: 10px;
    width: 100%;
}
footer>a{
    width: 100%;
    text-decoration:none;
    text-align: center;
    display: inline-block;
    line-height: 40px;
    height: 40px;
    background-color: black;
    color: white;
    font-size: 20px;
    font-weight: 700;
}

数据库连接

现在我们首页也利用假数据显示了，接下来我们让数据变真，连接本地的mysql数据库。

var mysql = require('mysql');

exports.sqlcontrol=(sql,data,callback)=>{
  var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : '123456',
    database : 'bookmanager'
  });
  
  connection.connect();
  
  connection.query(sql,data, function (error, results, fields) {
    if (error) throw error;
    callback(results);
  });
  
  connection.end();
}

我们主要是写了个sqlcontrol方法，需要传去三个参数，sql语句、数据、以及回调

接下来我们修改一个显示首页的方法

const dbsql = require("./db/dbmanager");//需要引入数据库模块
//跳转到首页
exports.showMain = (req,res)=>{
    let sql = "select * from book order by id";
    dbsql.sqlcontrol(sql,null,(resules)=>{
        console.log("showmain",resules);
        res.render('index',{"data":resules});
    })
}

接下来就是增删改部分，先附上路由部分

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

//首页
router.get("/",service.showMain);

//修改
router.get("/toedit",service.toedit);
router.post("/editfinish",service.editfinish);
//删除
router.get("/todele",service.todele);
//添加
router.get("/addbook",service.addbook);
router.post("/addbookfinish",service.addbookfinish);
module.exports = router;

附上逻辑部分

const express = require("express");
const fs = require("fs");
const path = require("path");
const http_data = require("./data/booklist.json");
const dbsql = require("./db/dbmanager");
//跳转到首页
exports.showMain = (req,res)=>{
    let sql = "select * from book order by id";
    dbsql.sqlcontrol(sql,null,(resules)=>{
        res.render('index',{"data":resules});
    })
}
//编辑界面
exports.toedit = (req,res)=>{
    let id = req.query.id;
    let sql = "select * from book where id=?";
    let data = [id];
    dbsql.sqlcontrol(sql,data,(resules)=>{
        res.render("edit",{"editdata":resules[0]})  
    })
}
//编辑完成
exports.editfinish = (req,res)=>{
       let sql = 'update book set name=?,author=?,classify=?,content=? where id =?';
       let data = [req.body.name,req.body.author,req.body.classify,req.body.content,req.body.id];
       dbsql.sqlcontrol(sql,data,(resules)=>{
        if(resules.affectedRows<=0){
            res.send("服务器异常");
            return ;
        }
        res.redirect("/");
       });
}
//删除
exports.todele = (req,res)=>{
    let id = req.query.id;
    let sql = "delete from book where id=?";
    let data = [id];
    dbsql.sqlcontrol(sql,data,(resules)=>{
        if(resules.affectedRows<=0){
            res.send("服务器异常");
            return ;
        }
        res.redirect("/");
    })
}
//跳转到添加界面
exports.addbook = (req,res)=>{
    res.render("addbook");
}
//添加完成按钮
exports.addbookfinish = (req,res)=>{
    let adddata = {};
    for(let key in req.body){
        adddata[key] = req.body[key];
    }
    let sql = "insert into book set ?";
    dbsql.sqlcontrol(sql,adddata,(resules)=>{
        if(resules.affectedRows<=0){
            res.send("服务器异常");
            return ;
        }
        res.redirect("/");
    })
}

这里主要有几个注意点