【老司機帶你飛】vue.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
掃碼加微信