Express示例（01）：图书管理系统-无数据库

准备

模块

express
art-template
body-parser
express-art-template

安装命令

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

系统

功能

主页面
增加
修改
删除
无数据库(使用JSON文件)

目录结构

mybook
 |-node_modules
 |-views
    |-index.art
    |-addBook.art
    |-editBook.art
 |-public
    |-style.css
 |-index.js
 |-router.js
 |-service.js
 |-data.json 
 |-package.json

实现

创建index.js
创建package.json

npm init -y

安装第三方

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

index.js

/*
    图书管理系统-入口文件
 */

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


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

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


//处理请求参数
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());

//启动服务器
//配置路由
app.use(router);
//监听端口
app.listen(3000,()=>{
    console.log("服务启动……");
});

创建目录
./views
./public
路由：./router.js

/*
    路由模块
 */

const express = require('express');
const router = express.Router();
const service = require('./service');

//渲染登录
router.get('/',service.showIndex);

//打开新增页面
router.get('/toAddBook',service.toAddBook);

//新增图书
router.post('/addBook',service.addBook);

//打开编辑页面
router.get('/toEditBook',service.toEditBook);

//提交编辑
router.post('/editBook',service.editBook);

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

module.exports = router;

业务处理：./service.js

/*
    业务模块
 */

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

//获取编号
let maxBookId = ()=>{
    let arr = [];
    data.forEach((item)=>{
        arr.push(item.id);
    });
    return Math.max.apply(null,arr);
}


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

//打开新增页面
exports.toAddBook = (req,res)=>{
    res.render('addBook',{});
}

//新增页面
exports.addBook = (req,res)=>{
    //获取页面内容
    let info = req.body;
    //json
    let book = {}
    //赋值信息
    for(let key in info){
        book[key]=info[key];
    }

    //获取编号
    book.id = maxBookId() + 1;

    //添加到data
    data.push(book);

    //写入文件
    fs.writeFile(path.join(__dirname,'data.json'),JSON.stringify(data,null,4),(err)=>{
        if(err){
            res.render('server error');
        }

        //路由重新定位，跳转到主页面
        res.redirect('/');
    });
}

//跳转到编辑页面
exports.toEditBook = (req,res)=>{
    //获取参数:get，直接获取
    let id = req.query.id;
    //定义临时
    let book = null;
    //查找数据
    data.forEach((item)=>{
       if(item.id == id){
           book = item;
           return;
       }
    });

    res.render('editBook',book);
}

//更新数据
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;
       }
    });

    //写入文件
    fs.writeFile(path.join(__dirname,'data.json'),JSON.stringify(data,null,4),(err)=>{
        if(err){
            res.render('server error');
        }

        //路由重新定位，跳转到主页面
        res.redirect('/');
    });
}

exports.deleteBook = (req,res)=>{
    //获取id
    let id = req.query.id;

    //删除数据
    data.forEach((item,index)=>{
        if(id == item.id) {
            data.splice(index, 1);
            return;
        }
    });

    //写入文件
    fs.writeFile(path.join(__dirname,'data.json'),JSON.stringify(data,null,4),(err)=>{
        if(err){
            res.render('server error');
        }

        //路由重新定位，跳转到主页面
        res.redirect('/');
    });
}

./views/index.art

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图书管理系统</title>
    <link rel="stylesheet" type="text/css" href="/www/style.css"></link>
</head>
<body>
<div class="title">
    图书管理系统<a href="/toAddBook">新增图书</a>
</div>
<div class="content">
    <table cellspacing="0" cellpadding="0">
        <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 list}}
        </tbody>
    </table>
</div>
</body>
</html>

./public/style.css

.title{
    text-align: center;
    background-color: #abef98;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
}
.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;
}

./views/addBook.art

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增图书</title>
</head>
<body>
<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>
</body>
</html>

./views/editBook.art

<!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">
</form>
</body>
</html>

./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": "一个封建王朝的缩影"
    }
]

posted @ 2020-10-21 16:40 mrtransition 阅读(199) 评论(0) 收藏举报

刷新页面返回顶部

请仰望星空，而不是俯视脚下

Express示例（01）：图书管理系统-无数据库

准备

系统

公告