「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」
express是一个基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
目的
使用express+mysql+fetch实现简单的增删改查功能。
步骤
1.先在全局安装express脚手架 yarn global add express。
2.使用express创建项目express -e xxx。
3.先用Navicat创建一个简单的库和表,在这里推荐一下phpstudy,方便学习使用,我是使用phpstudy启动的mysql服务。
4.在bin目录下的www文件中打印一下端口方便访问，更改package.json中启动命令为 "start": "nodemon ./bin/www"，可以在全局安装nodemon,nodemon可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序。
5.项目创建好后先在根目录下创建一个db文件夹并编写mysql配置，须先安装mysql模块。
var mysql = require('mysql');
var con = mysql.createPool({
host: 'localhost',
user: 'test',
password: 'root111111',
database: 'testdb'
});
var query = (sql,options,callback)=>{
con.getConnection((err,conn)=>{
if(err){
callback(err,null,null);
}
else{
conn.query(sql,options,(err,results,fields)=>{
callback(err,results,fields);
})
conn.release();
}
})
}
module.exports = query;
6.在routes目录下创建users.js文件,引入db文件编写对应的接口
var express = require('express');
var router = express.Router();
let query = require("../db/index");
/* GET users listing. */
router.get('/list', function (req, res, next) {
query('SELECT * FROM userList', (err, data, field) => {
res.send({
code: 200,
data
})
})
});
router.get('/detail', function (req, res, next) {
let {
id
} = req.query
query(`SELECT * FROM userList WHERE id=${id}`, (err, data, field) => {
res.send({
code: 200,
data:data || [{}]
})
})
});
router.post('/save', function (req, res, next) {
let obj = req.body;
obj.id = obj.id - 0;
if(obj.id){
query(`UPDATE userList SET name='${obj.name}',sex='${obj.sex}',info='${obj.info}' WHERE id='${obj.id}'`, (err, data, field) => {
res.send({
code: 200,
data:''
})
})
}
else{
let str = `INSERT INTO userList (name,info,sex) VALUES('${obj.name}','${obj.info}','${obj.sex}')`;
query(str, (err, data, field) => {
res.send({
code: 200,
data:''
})
})
}
});
router.post('/del', function (req, res, next) {
let {id} = req.body;
query(`DELETE FROM userList WHERE id=${id}`, (err, data, field) => {
res.send({
code: 200,
data:''
})
})
});
module.exports = router;
7.在app.js引入users.js文件并配置 app.use('/api/users', usersRouter);
8.编写html页面，我是直接在public文件夹下创建的html,使用输入框和button实现增删改查功能，用fetch来请求数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache" content="no-cache">
<title>Document</title>
<style>
#input {
caret-color: #ffd476;
}
body {
/* filter: grayscale(1); */
}
p{
color: red;
}
td{
width: 100px;
border: 1px solid #ccc;
}
table{
border-collapse: collapse;
}
*{
outline: none;
}
</style>
</head>
<body>
<input id="input" type="text">
<button id="btn">查询</button>
<p class="detail"></p>
<div class="add-user">
<input class="ID" type="text" placeholder="id">
<input class="name" type="text" placeholder="姓名">
<input class="sex" type="text" placeholder="性别">
<input class="info" type="text" placeholder="信息">
<button class="save">添加</button>
</div>
<p></p>
<input class="del-id" type="text">
<button class="del-btn">删除</button>
<p></p>
<table class="table-list">
</table>
<script>
let input = document.querySelector("#input");
let detail = document.querySelector(".detail");
let ID = document.querySelector(".ID");
let name = document.querySelector(".name");
let sex = document.querySelector(".sex");
let info = document.querySelector(".info");
let save = document.querySelector(".save");
let del_id = document.querySelector(".del-id");
let del_btn = document.querySelector(".del-btn");
let list = document.querySelector(".table-list");
function getList(){
fetch('http://127.0.0.1:3000/api/users/list').then(res => {
res.json().then(res =>{
if(res.code == 200){
let str =
`<tr>
<td>ID</td>
<td>姓名</td>
<td>性别</td>
<td>信息</td>
</tr>`;
res.data.forEach(v =>{
str +=
`<tr>
<td>${v.id}</td>
<td>${v.name}</td>
<td>${v.sex}</td>
<td>${v.info}</td>
</tr>`
})
list.innerHTML = str;
}
})
})
}
getList();
btn.onclick = () => {
let id = input.value;
fetch(`http://127.0.0.1:3000/api/users/detail?id=${id}`).then(res =>{
res.json().then(res =>{
if(res.code == 200){
detail.innerHTML = JSON.stringify(res.data[0])
}
})
})
}
save.addEventListener('click',()=>{
let obj = {
id:ID.value,
name:name.value,
sex:sex.value,
info:info.value,
}
fetch(`http://127.0.0.1:3000/api/users/save`,{
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify(obj)
}).then(res =>{
res.json().then(res =>{
if(res.code == 200){
getList();
}
})
})
})
del_btn.addEventListener('click',()=>{
let obj = {
id:del_id.value
}
fetch(`http://127.0.0.1:3000/api/users/del`,{
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify(obj)
}).then(res =>{
res.json().then(res =>{
if(res.code == 200){
getList();
}
})
})
})
</script>
</body>
</html>
结语
这样就能实现一个简单的增删改查功能，功能比较入门是为了记录express的使用。
