Express 一个简单示例实现增删改查

[TOC]

### 实现一个增删改查的案例
#### 案例依赖库安装
```Shell
## 安装 express
npm install express --save
## 安装 art-template
npm install atr-template --save
## 安装 兼容Express的模板中间键
npm install --save express-atr-template
```
#### 案例代码目录

```js
📋app.js  //服务逻辑
📂node_modules  //依赖库
📂art
  📋addPer.art  //添加模板
  📋perList.art  //展示模板
📂css
  📋style.css  //样式
📂data
  📋per.json  //读取存储信息的文件
📂route
  📋routeApp.js  //路由
📂service
  📋common.js  //公共函数
  📋service.js  //业务处理
```

#### 服务入口 app.js
web服务设置，挂载中间件，设置路由以及模板引擎

```js
const express = require('express')
const app = express();
// const atrTemplate = require("art-template")
const path = require("path")
const expressArt = require("express-art-template")
const router = require("../Express/route/routeApp.js")
//挂载参数中间件
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use("/css", express.static("css"))
//设置模板路径
app.set("views", path.join(__dirname, "art"))
//设置模板引擎（设置模板文件后缀）
app.set("view engine", "art")
//绑定模板引擎，让Express可以兼容art-template模板
app.engine("art", expressArt)
//引入路由规则
app.use(router)
let server = app.listen("3000", 'localhost', () => {
    console.log(server.address().address + server.address().port + "：服务已启动")
})
```

#### 人员列表 perList.atr
以列表的形式展示人员信息的页面，
```html
<!DOCTYPE html>
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <link rel="stylesheet" href="/css/style.css" />
</hred>
<div id="app">
    {{each list data index}}
    <ul>
        <li>
            <div class="listItem">
                编号：{{data.id}}
            </div>
            <div class="listItem">
                姓名：{{data.username}}
            </div>
        </li>
        <li>
            <div class="listItem">
                性别：{{data.usersex}}
            </div>
            <div class="listItem">
                职位：{{data.userposition}}
            </div>
        </li>
        <li>
            <div class="listItem">
                地址：{{data.useradrr}}
            </div>
        </li>
        <li>
            <div class="listItem"><a href="/addPer?id={{data.id}}">修改</a></div>
            <div class="listItem"><a href="javascript:ajaxJsonSub({{data.id}})">删除</a></div>
        </li>
    </ul>
    {{/each}}
    <div class="btn" onclick="window.location.href='/addPer'">添加</div>
</div>
<script type="text/javascript">
    function ajaxJsonSub(id) {
        let url = "/delPer"
        let data = { id: id }
        let xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                if (xmlHttp.responseText == "ok") {
                    alert("删除成功！")
                    window.location.reload()
                } else {
                    alert("删除失败！")
                }
            }
        }
        xmlHttp.open("POST", url, true)
        xmlHttp.setRequestHeader("Content-type", "application/json;charset=utf8")
        let json = JSON.stringify(data)
        xmlHttp.send(json)
    }
</script>
</html>
```

#### 编辑模板文件 addPer.art
添加和修改人员信息页面
```html
<!DOCTYPE html>
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <link rel="stylesheet" href="/css/style.css" />
</hred>
<div id="app">
    <form action="/subPer" method="post" enctype="application/x-www-form-urlencoded">
        <input type="hidden" name="id" value="{{id}}" />
        <ul>
            <li>
                <div class="form-text">姓名：<br /><input type="text" class="form-input" name="username"
                        value="{{username}}" /></div>
            </li>
            <li>
                <div class="form-text">性别：<br /><input type="text" class="form-input" name="usersex"
                        value="{{usersex}}" />
                </div>
            </li>
            <li>
                <div class="form-text">职位：<br /><input type="text" class="form-input" name="userposition"
                        value="{{userposition}}" /></div>
            </li>
            <li>
                <div class="form-text">地址：<br /><input type="text" class="form-input" name="useradrr"
                        value="{{useradrr}}" /></div>
            </li>
        </ul>
        <div class="form-btn"><input type="submit" value="提交" /></div>
    </form>
</div>
</html>
```

#### 路由文件 routeApp.js
```js
const express = require('express')
const service = require('../service/service.js')
const route = express.Router()
route.get('/', service.perList)
route.get('/perList', service.perList)
route.get('/addPer', service.addPer)
route.post('/subPer', service.subPer)
route.post('/delPer', service.delPer)
route.use((req, res) => {
    res.send(404, "未找到正确的页面")
})
module.exports = route
```

#### 业务处理文件 service.js

```js
const data = require("../data/per.json")
const path = require("path")
const fs = require("fs")
const common = require("../service/common.js")
//获取人员列表
exports.perList = function (req, res) {
    res.render("perList", { list: data })
}
//添加|修改人员
exports.addPer = function (req, res) {
    let id = req.query.id
    let info = {};
    if (id != undefined && id != null && parseInt(id) > 0) {
        data.forEach(item => {
            if (item.id == id) {
                info = item
            }
        })
    } else {
        info.id = 0;
        info.username = "";
        info.usersex = "";
        info.userposition = "";
        info.useradrr = "";
    }
    res.render("addPer", info)
}
//提交人员信息
exports.subPer = function (req, res) {
    //需要引入urlencoded解析
    const perData = req.body;
    if (perData != null) {
        if (perData != undefined && perData.id != null && parseInt(perData.id) > 0) {
            data.forEach(element => {
                if (element.id == perData.id) {
                    element = common.dataMap(element, perData)
                    return;
                }
            })
        } else {
            let info = {};
            info = perData
            info.id = common.getPerId(data);
            data.push(info)
        }
    }
    let dataFile = path.join(__dirname, "../data", "per.json")
    let json = JSON.stringify(data, null, 4)
    fs.writeFile(dataFile, json, "utf8", (err) => {
        if (err) {
            res.send("服务器错误！")
        }
    })
    res.redirect("/")
}
//删除人员信息
exports.delPer = function (req, res) {
    let id = req.body.id
    data.forEach((element,index ) => {
        if (element.id == id) {
            data.splice(index,1)
        }
    })
    let dataFile = path.join(__dirname, "../data", "per.json")
    let json = JSON.stringify(data, null, 4)
    fs.writeFile(dataFile, json, "utf8", (err) => {
        if (err) {
            res.send("服务器错误！")
        }
    })
    res.send("ok")
}
```

#### 公共调用文件 common.js

```js
//自增id
exports.getPerId = (pers) => {
    let ids = []
    pers.forEach(element => {
        ids.push(element.id)
    });
    //获取数组中最大的数
    let newId = Math.max.apply(null, ids) + 1;
    return newId
}
//对象赋值
exports.dataMap = (tagData, srcData) => {
    for (let key in srcData) {
        tagData[key] = srcData[key]
    }
    return tagData
}
```

#### 样式文件 style.css

```css
* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #efefef;
    padding: 0;
    margin: 0;
    font-family: 微软雅黑;
}

ul,
li,
ol {
    list-style: none;
    background-color: #fff;
    padding: 5px 0px;
    margin: 0 0 1px 0;
    width: 100%;
}

li {
    display: flex;
}

li>.listItem {
    flex-wrap: wrap;
    flex-direction: column;
    width: 50%;
    padding-left: 10px;
}

.listItem a {
    text-decoration: none;
    color: orange;
    text-align: center;
    display: block;
    width: calc(100% - 10px);
    border: 1px solid #efefef;
    line-height: 24px;
    font-size: 12px;
    border-radius: 5px;
}

.btn {
    background-color: #fff;
    font-family: 微软雅黑;
    text-align: center;
    width: 100%;
    height: 36px;
    line-height: 36px;
}

.form-text {
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0px 10px;
    width: calc(100% - 20px);
}

.form-btn {
    background-color: #fff;
    text-align: center;
    height: 40px;
}

.form-input {
    width: 100%;
    height: 35px;
    border: 1px solid #ddd;
    outline: none;
    text-indent: 0.5em;
    margin: 0px;
    margin-top: 3px;
    border-radius: 3px;
}

.form-btn input[type="submit"] {
    width: 100%;
    height: 100%;
    border: 0px;
    background-color: #fff;
}
```

#### 存储信息文件 per.json

```json
[
    {
        "id": 2,
        "username": "关羽",
        "usersex": "男",
        "userposition": "将",
        "useradrr": "蜀"
    },
    {
        "id": 5,
        "username": "赵子龙",
        "usersex": "男",
        "userposition": "羽翎将军",
        "useradrr": "蜀"
    },
    {
        "id": "6",
        "username": "张翼德",
        "usersex": "男",
        "userposition": "后将军",
        "useradrr": "汉中",
        "_locals": {}
    }
]
```