【轻松学vue】vue.js基础入门教程（十五）node.js实现增删改查

使用node.js实现后端数据库的增删改查（如对node.js感兴趣，可深入学习）

1） 创建一个文件夹nodeserver
2） 使用cmd进入文件夹nodeserver
3） npm install express
4） npm install mysql
5） 在此文件夹下创建server.js文件
6） 使用nvaicat创建数据库vue
7） 执行sql语句创建数据库表

CREATE TABLE `user` (
    `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '表id',
    `username` varchar(255) DEFAULT NULL COMMENT '姓名',
    `age` int(11) DEFAULT NULL COMMENT '年龄',
    `sex` varchar(255) DEFAULT NULL COMMENT '性别',
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

8） 在server中写入如下代码

//引入express框架
var express = require('express');
//创建express实例
var app = express();

//解析表单的插件
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
    extended: false
}));

//设置跨域访问
app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

//创建mysql数据库连接对象
var mysql = require('mysql');
var conn = mysql.createConnection({
    host: 'localhost', //数据库地址
    user: 'root', //账号
    password: 'root', //密码
    database: 'vue', //库名
    multipleStatements: true //允许执行多条语句
});


//查询出所有数据
app.get('/api/getuser', (req, res) => {
    var sqlStr = 'select * from user ';
    conn.query(sqlStr, (err, results) => {
        if (err) return res.json({
            err_code: 1,
            message: '查询出错',
            affextedRows: 0
        });
        res.json({
            err_code: 200,
            message: results,
            affextedRows: results.affextedRows
        })
    })
});

//根据用户id查询数据
app.get('/api/getuserbyid', (req, res) => {
    var id = req.query.id;
    console.log(req.query);
    var sqlStr = 'select * from user where id=?';
    conn.query(sqlStr, id, (err, results) => {
        if (err) return res.json({
            err_code: 1,
            message: '查询出错',
            affextedRows: 0
        });
        res.json({
            err_code: 200,
            message: results,
            affextedRows: results.affextedRows
        })
    })
});

//添加用户
app.post('/api/adduser', (req, res) => {
    var user = req.body;
    console.log(req.body);
    var sqlStr = 'insert into user set ?';
    conn.query(sqlStr, user, (err, results) => {
        if (err) return res.json({
            err_code: 1,
            message: err,
            affectedRows: 0
        });
        res.json({
            err_code: 200,
            message: '添加成功',
            affectedRows: results.affectedRows
        })
    })
});

//删除用户
app.get('/api/deluser',(req,res)=>{
    var id = req.query.id;
    var sqlStr = 'delete from user where id=?';
    conn.query(sqlStr,id,(err,results)=>{
        if(err) return res.json({
            err_code:1,
            message:err,
            affectedRows: 0
        });
        return  res.json({
            err_code: 200,
            message: '删除成功',
            affectedRows: results.affectedRows
        })
    })
});

//修改
app.post('/api/updateuser', (req, res) => {
    var user = req.body;
    var updateData = {
        username:user.username,
        age:user.age,
        sex:user.sex
    };
    var id = user.id;
    var sqlStr = 'update user set ? where id = ?';
    conn.query(sqlStr, [updateData,id], (err, results) => {
        if (err) return res.json({
            err_code: 1,
            message: err,
            affectedRows: 0
        });
        res.json({
            err_code: 200,
            message: '修改成功',
            affectedRows: results.affectedRows
        })
    })
});

app.listen(3000, () => {
    console.log('正在监听端口3000');
});

至此服务端内容准备完成，打开cmd进入刚刚我们创建的nodeserver文件夹使用命令：node server.js即可启动服务端监听程序。

下一节，我们体验一下vue.js的vue-resource模块对数据库的增删改查。

QQ：732005030
扫码加微信