用户管理demo全栈 node+express+react+antd

继上次全栈起步的过去许久，摸鱼的时间总是短暂的，让我们快乐的学习node全栈吧！

demo主要实现了用户的增删改查，后端用的是node+express.前端用的是react+antd

示意图

一. 先写后台

     1.先设计表 写好sql语句  数据库与表的设计就不展示了。

     2.新建sqlMap.js    db.js

const sqlMap = {
    //用户
    user: {
        list: 'select * from users;',
        detail: 'select * from users where id = ?',
        add: 'insert into  users (name,age,class) values (?,?,?);',
        delete: 'delete from users where id = ?',
        update: 'update users set name = ?, age = ?,class = ? where id = ?'
    },
    article: {
        list: 'select * from articles',
        add: 'insert into articles (title,autor,content,createtime) values (?,?,?,?)',
        delete: 'delete from articles where id= ?',
        detail: 'select content from articles where id =?'
    }
}
module.exports = sqlMap

module.exports = {
    mysql:{
        host: 'localhost',
        user: 'root',
        password: '123456',
        database: 'test_db'
    }
}

    3.写接口 api.js

const models = require('./db')
const express = require('express')
const router = express.Router()
const mysql = require('mysql')
const $sql = require('./sqlMap')
//连接数据库
const conn = mysql.createConnection(models.mysql)
conn.connect()

const jsonWrite = function (res,ret) {
    if (typeof ret === 'undefined'){
        res.json({
            code:'1',
            msg:'操作失败'
        })
    } else {
        console.log(ret)
        res.json({
            code:'0',
            result:ret
        })
    }
}
//列表接口
router.get('/list',(req, res) => {
    const sql = $sql.user.list;
    console.log('sql', sql)
    conn.query(sql,(err, result) => {
        if (err) {
            console.log(err)
        } else {
            res.header("Access-Control-Allow-Origin","*");
            jsonWrite(res,result)
            res.end('is over')
        }
    })
})
//用户详情接口
router.get('/detail',(req, res) => {
    const sql = $sql.user.detail;
    const params = req.query;
    console.log(params)
    console.log('sql', sql)
    conn.query(sql,[params.id],(err, result) => {
        if (err) {
            console.log(err)
        } else {
            res.header("Access-Control-Allow-Origin","*");
            jsonWrite(res,result)
            res.end('is over')
        }
    })
})
//新增用户接口
router.post('/addUser', (req,res) => {
    const sql = $sql.user.add;
    const params = req.body;
    console.log('sql',sql)
    console.log('params',params)
    conn.query(sql,[params.name,params.age,params.class], (err,result) => {
        if (err) {
            console.log(err)
        } else {
           res.json({
               code:'0',
               msg:'新增用户成功'
           })
        }
    })
})
// 编辑接口
router.post('/update', (req, res) => {
    const sql = $sql.user.update;
    const params = req.body;
    console.log('sql',sql)
    console.log('params',params)
    conn.query(sql,[params.name,params.age,params.class,params.id],(err,result) => {
        if(err){
            console.log(err)
        } else {
            res.json({
                code:'0',
                msg:'编辑成功'
            })
        }
    })
})
//删除接口
router.get('/delete',(req, res) => {
    const sql = $sql.user.delete;
    const params = req.query;
    console.log('sql',sql);
    console.log('params',params);
    conn.query(sql,[params.id],(err,result) => {
        if (err) {
            console.log(err)
        } else {
            res.json({
                code:'0',
                msg:'删除成功'
            })
        }
    })
})

module.exports = router

  4.编辑app.js

const express = require('express')
const userApi = require('./api')
const app = express()
const bodyParser = require('body-parser');
app.use(express.urlencoded());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Methods', '*');
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
});
app.use('/home', (req,res) => {
    res.send('这是首页')
});
app.use('/user', userApi);

app.listen(3003, async(req, res) => {
    console.log("服务启动成功！")
})

5.整个增删改查的接口就好了，可以用postman边写边自测。下面就是配合前端一起联调。

下期在写前端的联调

还是有几个注意的点：

1. body-parse在编辑器会被显示有错误，但是能用
2. post用的是req.body  get 用的req.query
3. 设置响应头信息的中间件