NodeJS Express模拟后台接口

时间过得真快，上一篇文章好像就在五个月前，真是转瞬即逝。
今天写一个NodeJs使用Express模拟后台接口的小demo。
话不多少了，直接开敲。
首先，我们要安装一些需要用到的模块。

// 加载express模块
const express = require('express');
// 创建express应用程序
const app = express();
// 加载cors模块（解决跨域）
const cors = require('cors');
// 端口号
const port = 3000;
// 解决跨域错误
app.use(cors());
// 解析json编码数据
app.use(express.json());

然后，我们可以写一个请求测试一下：
js：

// axios请求NodeJS http://要加 后面的3000
axios.get('http://127.0.0.1:3000/').then(({ data }) => {
    console.log(data);
})

nodejs：

// 第一个参数是路由
app.get('/', (req, res) => res.send('Hello Worle!'));
// 回调 这一句也不能落下，不然会报错
app.listen(port, () => console.log('运行在' + port + '端口'));

如果显示了，那就说明已经可以连通了，我们接下来试试增删改查四种方法。
我们弄简单些，直接在NodeJS中写入一个数组：

var list = [
    { id: 1, name: '张三', age: '18' },
    { id: 2, name: '李四', age: '20' },
    { id: 3, name: '王五', age: '50' },
]

js：

axios.get('http://127.0.0.1:3000/list').then(({ data }) => {
    console.log(data);
})

nodejs：

app.get('/list', (req, res) => res.send({ list }))

后面的路由一定要对上才行，这样我们就能过去到他返回的list值。

那么，我们把增删改也补上，先画个简单的HTML页面：

姓名：<input type="text" id='addName'>年龄：<input type="text" id='addAge'><button onclick="add()">添加</button><br>
ID：<input type="text" id='editUser'>姓名：<input type="text" id='editName'>年龄：<input type="text" id='editAge'><button onclick="edit()">修改</button><br>
ID：<input type="text" id='delUser'><button onclick="del()">删除</button>

nice啊，真是极简风格

js：

var userName;
var userAge;
var userID;
// 增
function add() {
    userName = document.getElementById('addName').value;
    userAge = document.getElementById('addAge').value;
    axios.post('http://127.0.0.1:3000/add', { name: userName, age: userAge }).then(({ data }) => {
        onsole.log(data);
    })
}
// 删
function del() {
    userID = document.getElementById('delUser').value;
    axios.post('http://127.0.0.1:3000/del', { id: userID }).then(({ data }) => {
        console.log(data);
    })
}
// 改
function edit() {
    userID = document.getElementById('editUser').value;
    userName = document.getElementById('editName').value;
    userAge = document.getElementById('editAge').value;
    axios.post('http://127.0.0.1:3000/edit', { id: userID, name: userName, age: userAge }).then(({ data }) => {
        console.log(data);
    })
}

nodejs：

// 为了让添加进来的数据方便删除修改，这只一个不会重复的值
var id = 3
app.post('/add', (req, res) => {
    id++
    // req.body获取到的就是传输过来的data值
    list.push({ id, ...req.body })
    res.send({ list })
})

app.post('/del', (req, res) => {
    for (let i = 0; i < list.length; i++) {
        if (list[i].id == req.body.id) {
        	// 根据传过来的ID删除数据
            list.splice(i, 1)
        }
    }
    res.send({ list })
})

app.post('/edit', (req, res) => {
    var num = 0
    for (let i = 0; i < list.length; i++) {
        if (list[i].id == req.body.id) {
            num = i
        }
    }
    // 判断是否传输过来的ID是否正确，若正确则根据ID替换穿过过来的值，否则提示报错
    if (num != 0) {
        list[num].name = req.body.name;
        list[num].age = req.body.age;
        res.send({ list })
    } else {
        res.send('ID输入错误！')
    }
})

下面就有效果了


不过这么用NodeJS写的话会有一个问题，就是当你每次关闭NodeJS再重新启动时，之前的数据会初始化。
好啦，本文结束。