node.js配合express實現增刪改查vue+element+axios

後端：node.js配合express實現增刪改查 前端：vue+element+axios

1. 安裝 express npm install express --save
2. 安裝 mysql npm install mysql --save 要引入mysql的同時還須要req.body對錶單數據進行解析 因此還需引入body-parser，因此須要安裝
3. 安裝body-parser npm install body-parser --save
4. 開啓本地mysql

我使用的是XAMPP集成，在網上能夠直接下載 這個是下載地址： XAMPP

下載完成以後開啓mysql

如今開啓了mysql還不能管理 須要下載navicat for mysql來管理咱們的數據表

navicat for mysql下載地址 沒有註冊過的有免費試用期

下載好了navicat以後，進行本地鏈接

下面新建一個表，我新建的表名 叫 test 在test表裏面有四個字段，本身能夠寫上數據，方便一下子寫查詢接口

再新建一個表叫 discribe ，新建這個表是爲了多表查詢

下面就能夠寫接口了

---

新建一個文件叫作app.js

寫入下面內容

//  app.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'test',
    multipleStatements: true, //  容許執行多條語句
})


connection.connect(function() {
    console.log('連接成功')
});


app.use(bodyParser.urlencoded({
    extends: true
}));

//設置跨域訪問
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    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();
});

//配置服務端口 
var server = app.listen(3000, function() {
    const hostname = 'localhost';
    const port = 3000;
    console.log(`Server running at http://${hostname}:${port}/`);
})
複製代碼

執行文件

打開當前文件夾的控制檯，輸入 node app.js，能夠看到鏈接成功的字樣就表明能夠鏈接啦~~~

第一個查詢接口

使用的是mysql原生查詢

//  查詢
app.get('/getdata', (req, res) => {
    let sql = ` select t.id,t.name,t.age,t.school,d.discribe
                from test as t
                join discribe as d
                on t.id = d.id
    `;
    connection.query(sql, (err, results) => {
        if (err) return res.json({
            code: 100,
            data: '沒有內容'
        });
        res.json({
            code: 200,
            data: results
        });
    })
});
複製代碼

第一個插入接口

//  插入
app.post('/insertdata', (req, res) => {
    let params = [req.body.name, req.body.age, req.body.school] //  傳來的參數
    let params_t = [req.body.discribe] //  傳來的參數  
    let addsql = `insert into test(name,age,school) value (?,?,?)` //  插入語句，?表明插入的值，要插入到test表內容
    let addsql_t = `insert into discribe(discribe) value (?)` //  傳插入語句，?表明插入的值，要插入到discribe表中

    let test = new Promise((resolve, reject) => {
        connection.query(addsql, params, (err, result) => {
            err ? reject(`插入失敗`) : resolve(result)
        })
    })
    let discribe = new Promise((resolve, reject) => {
        connection.query(addsql_t, params_t, (err, result) => {
            err ? reject(`插入失敗`) : resolve(result)
        })
    })

    Promise.all([test, discribe]).then(result => {
        //  last_insert_id是獲取表中最後一條數據
        connection.query('select last_insert_id()', (err, results) => {
            res.json({
                code: 200,
                data: {
                    id: results[0]['last_insert_id()'],
                    name: req.body.name,
                    age: parseInt(req.body.age),
                    school: req.body.name,
                    discribe: req.body.discribe
                }
            });
        })
    }).catch(err => {
        res.json({
            code: 100,
            data: `插入數據有誤`
        })
    })
});
複製代碼

第一個刪除接口

//  刪除
app.post('/deletedata', (req, res) => {
    let [params, addsql, addsql_t] = [
        [req.body.id],
        'delete test from test where id = ? ',
        'delete discribe from discribe where id = ? '
    ]

    let test = new Promise((resolve, reject) => {
        connection.query(addsql, params, function(err, result) {
            err ? reject(`刪除失敗`) : resolve(result)
        })
    })
    let discribe = new Promise((resolve, reject) => {
        connection.query(addsql_t, params, function(err, result) {
            err ? reject(`刪除失敗`) : resolve(result)
        })
    })

    Promise.all([test, discribe]).then(result => {
        res.json({
            code: 200,
            data: []
        });
    }).catch(err => {
        res.json({
            code: 100,
            data: '刪除失敗'
        });
    })
});
複製代碼

第一個修改接口

//  修改
app.post('/updatedata', (req, res) => {
    let [params, params_t, addsql, addsql_t] = [
        [req.body.name, req.body.age, req.body.id, req.body.school],
        [req.body.discribe, req.body.id],
        'update test set name = ? , age = ? , school = ? where id = ? ',
        'update discribe set discribe = ? where id = ? '
    ]

    let selectSql = `select test.id,test.name,test.age,test.school,discribe.discribe 
                     from test,discribe 
                     where test.id = discribe.id = ?
    `

    let test = new Promise((resolve, reject) => {
        connection.query(addsql, params, (err, result) => {
            err ? reject(`插入失敗`) : resolve(result)
        })
    })
    let discribe = new Promise((resolve, reject) => {
        connection.query(addsql_t, params_t, (err, result) => {
            err ? reject(`插入失敗`) : resolve(result)
        })
    })

    Promise.all([test, discribe]).then(result => {
        connection.query(selectSql, [req.body.id], (err, results) => {
            if (err) res.json({
                code: 200,
                data: []
            });
            res.json({
                code: 200,
                data: results
            });
        })
    }).catch(err => {
        res.json({
            code: 100,
            data: '刪除失敗'
        });
    })
});

複製代碼

#大功告成啦！ 如今就須要去使用這些接口

咱們能夠直接在瀏覽器輸入 請求地址 查詢接口

有數據出來就說明請求成功啦！！ 接下來咱們還要測試 刪 改 查 三個接口，來寫一個html頁面測試

完整的app.js

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'test',
    multipleStatements: true, //  容許執行多條語句
})


connection.connect(function() {
    console.log('連接成功')
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: false
}))

//設置跨域訪問
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild");
    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();
});



//  查詢
app.get('/getdata', (req, res) => {
    let sql = ` select t.id,t.name,t.age,t.school,d.discribe
                from test as t
                join discribe as d
                on t.id = d.id
    `;
    connection.query(sql, (err, results) => {
        if (err) return res.json({
            code: 100,
            data: '沒有內容'
        });
        res.json({
            code: 200,
            data: results
        });
    })
});

//  插入
app.post('/insertdata', (req, res) => {
    let params = [req.body.name, req.body.age, req.body.school] //  傳來的參數
    let params_t = [req.body.discribe] //  傳來的參數  
    let addsql = `insert into test(name,age,school) value (?,?,?)` //  插入語句，?表明插入的值，要插入到test表內容
    let addsql_t = `insert into discribe(discribe) value (?)` //  傳插入語句，?表明插入的值，要插入到discribe表中

    let test = new Promise((resolve, reject) => {
        connection.query(addsql, params, (err, result) => {
            err ? reject(`插入失敗`) : resolve(result)
        })
    })
    let discribe = new Promise((resolve, reject) => {
        connection.query(addsql_t, params_t, (err, result) => {
            err ? reject(`插入失敗`) : resolve(result)
        })
    })

    Promise.all([test, discribe]).then(result => {
        //  last_insert_id是獲取表中最後一條數據
        connection.query('select last_insert_id()', (err, results) => {
            res.json({
                code: 200,
                data: {
                    id: results[0]['last_insert_id()'],
                    name: req.body.name,
                    age: parseInt(req.body.age),
                    school: req.body.name,
                    discribe: req.body.discribe
                }
            });
        })
    }).catch(err => {
        res.json({
            code: 100,
            data: `插入數據有誤`
        })
    })
});

//  刪除
app.post('/deletedata', (req, res) => {
    let [params, addsql, addsql_t] = [
        [req.body.id],
        'delete test from test where id = ? ',
        'delete discribe from discribe where id = ? '
    ]

    let test = new Promise((resolve, reject) => {
        connection.query(addsql, params, function(err, result) {
            err ? reject(`刪除失敗`) : resolve(result)
        })
    })
    let discribe = new Promise((resolve, reject) => {
        connection.query(addsql_t, params, function(err, result) {
            err ? reject(`刪除失敗`) : resolve(result)
        })
    })

    Promise.all([test, discribe]).then(result => {
        res.json({
            code: 200,
            data: `刪除成功`
        });
    }).catch(err => {
        res.json({
            code: 100,
            data: '刪除失敗'
        });
    })
});

//  修改
app.post('/updatedata', (req, res) => {
    let [params, params_t, addsql, addsql_t] = [
        [req.body.name, req.body.age, req.body.school, req.body.id],
        [req.body.discribe, req.body.id],
        'update test set name = ? , age = ? , school = ? where id = ? ',
        'update discribe set discribe = ? where id = ? '
    ]

    let selectSql = `select test.id,test.name,test.age,test.school,discribe.discribe 
                     from test,discribe 
                     where test.id = discribe.id = ?
    `

    let test = new Promise((resolve, reject) => {
        connection.query(addsql, params, (err, result) => {
            err ? reject(`插入失敗`) : resolve(result)
        })
    })
    let discribe = new Promise((resolve, reject) => {
        connection.query(addsql_t, params_t, (err, result) => {
            err ? reject(`插入失敗`) : resolve(result)
        })
    })

    Promise.all([test, discribe]).then(result => {
        connection.query(selectSql, [req.body.id], (err, results) => {
            if (err) res.json({
                code: 200,
                data: []
            });
            res.json({
                code: 200,
                data: results
            });
        })
    }).catch(err => {
        res.json({
            code: 100,
            data: '刪除失敗'
        });
    })
});


//配置服務端口 
var server = app.listen(3000, function() {
    const hostname = 'localhost';
    const port = 3000;
    console.log(`Server running at http://${hostname}:${port}/`);
})
複製代碼

新建html頁命名爲 test.html 寫入一下內容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入樣式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Document</title>
</head>

<style>
    body {
        background-color: #f7f7f7;
        margin: 0;
    }
    
    #app {
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 1px 4px #e7e7e7, 0 5px 40px #e9e9e9 inset;
    }
</style>

<body>
    <div id="app">
        <template>
            <el-button 
            type="primary" 
            @click="add" 
            style="margin-bottom:20px;" 
            size="medium">
            添加數據
            </el-button>
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                prop="name"
                label="名字"
                width="180">
                </el-table-column>
                <el-table-column
                prop="age"
                label="年齡"
                width="180">
                </el-table-column>
                <el-table-column
                prop="school"
                label="學校"
                width="180">
                </el-table-column>
                <el-table-column
                prop="discribe"
                label="介紹">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操做"
                    width="200">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" size="small">編輯</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">刪除</el-button>
                    </template>
        </el-table-column>
        </el-table>

        <el-dialog title="填寫信息" :visible.sync="dialogFormVisible" :before-close="cancel">
            <el-form :model="form">
                <el-form-item label="名字" label-width="200">
                    <el-input v-model="form.name" placeholder="請輸入名字"></el-input>
                </el-form-item>
                <el-form-item label="年齡" label-width="200">
                    <el-input v-model="form.age" placeholder="請輸入年齡" type="number" min="0"></el-input>
                </el-form-item>
                <el-form-item label="學校" label-width="200">
                    <el-input v-model="form.school" placeholder="請輸入學校"></el-input>
                </el-form-item>
                <el-form-item label="介紹" label-width="200">
                    <el-input v-model="form.discribe" placeholder="請輸入介紹"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">確 定</el-button>
            </div>
        </el-dialog>
        </template>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                tableData: [],
                dialogFormVisible: false,
                form: {
                    name: '',
                    age: '',
                    school: '',
                    discribe: ''
                },
                submitState: 0,
            },
            mounted() {
                this.getData()
            },
            methods: {
                //  簡單封裝g請求 url:請求地址  params：參數   showNotify：是否顯示錯誤彈出框 默認顯示
                getAxios(url, params, showNotify) {
                    return new Promise((resolve, reject) => {
                        axios({
                            method: params ? 'post' : 'get',
                            url: url,
                            data: params
                        }).then(res => {
                            if (res.data.code == 200) {
                                resolve(res)
                            } else {
                                reject(`${res.data.data}`)
                                this.$notify({
                                    title: '警告',
                                    message: res.data.data,
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            reject(err)
                            showNotify ? '' : this.$notify({
                                title: '警告',
                                message: err,
                                type: 'warning'
                            })
                        })
                    })
                },
                //  獲取數據
                getData() {
                    this.getAxios(`http://localhost:3000/getdata`).then(res => {
                        this.tableData = res.data.data
                    })
                },
                //  編輯
                handleEdit(i) {
                    this.submitState = 1
                    this.form = i
                    this.dialogFormVisible = true
                },
                //  刪除
                handleDelete(i) {
                    this.getAxios(`http://localhost:3000/deletedata`, {
                        id: i.id
                    }).then(res => {
                        this.tableData.splice(this.tableData.findIndex(e => e.id == i.id), 1)
                        this.dialogFormVisible = false
                    })
                },
                //  提交編輯
                submit() {
                    if (this.submitState == 0) {
                        this.getAxios(`http://localhost:3000/insertdata`, this.form).then(res => {
                            this.tableData.push(res.data.data)
                            this.dialogFormVisible = false
                        })
                    } else {
                        this.getAxios(`http://localhost:3000/updatedata`, this.form).then(res => {
                            this.tableData[this.tableData.findIndex(e => e.id == this.form.id)] = res.data.data
                            this.dialogFormVisible = false
                        })
                    }

                },
                //  添加
                add() {
                    this.submitState = 0
                    this.dialogFormVisible = true
                },
                cancel() {
                    this.form = {
                        name: '',
                        age: '',
                        school: ''
                    }
                    this.dialogFormVisible = false
                },
            }
        })
    </script>
</body>

</html>
複製代碼

一個簡單的node.js配合vue+element+axios的增刪改查demo就寫好了。 但這是遠遠不夠，app.js裏面若是還有不少接口，在一個頁面中是難以維護的，那麼就須要用到express中的router進行路由管理，不一樣的需求模塊用不一樣的文件來管理路由請求。

那麼能夠看一看下一章，簡單介紹express路由的使用 express路由router