vue案例：axios实战

axios 在原理上属于 XMLHttpRequest， 因此也可以算为一个ajax
但是是基于promise对象来对结果进行处理
操作如下：

文件结构

前端vue页面（省略样式）

<template>
    <div>
        <div>{{ "MySQL" }}</div>
        <button @click="showData(1)">开始获取数据</button>
        <ul v-for="item in data" :key="item['stuID']">
            <li class="stuID">{{ item['stuID'] }}</li>
            <li class="stuName">{{ item['stuName'] }}</li>
            <li class="stuSex">{{ item['stuSex'] }}</li>
            <li class="stuBirthday">{{ item['stuBirthday'] }}</li>
            <li class="stuTelNum">{{ item['stuTelNum'] }}</li>
            <li class="stuNativePlace">{{ item['stuNativePlace'] }}</li>
            <li class="stuDescribe">{{ item['stuDescribe'] }}</li>
        </ul>
        <div v-if="data.length" class="pageBtn">
            <div v-for="(item, index) in [1,2,3,4,5]" :key="index" @click="showData(item)">{{ item }}</div>
        </div>
    </div>
</template>

<script>
// axios引入
import axios from "axios";

export default {
    name: "MySQLModel",
    data() {
        return {
            totalPage: 1,
            page: 1,
            data: []
        };
    },
    methods: {
        showData(page) {
            this.page = page;
            // axios使用get请求
            axios
                .get("api/user/showData", {
                    params: {
                        page
                    }
                })
                .then(res => { // 成功的处理操作
                    // console.log("success");
                    // console.log(res.data);
                    if (res.data && res.data.length > 0) {
                        this.data = res.data;
                    } else {
                        this.data = [];
                        alert("暂无数据！！！");
                    }
                })
                .catch(err => { // 失败
                    // console.log("fail");
                    // console.log(err);
                    this.data = [];
                    alert("数据获取失败！！！");
                });
        }
    },
    beforeRouteUpdate(to,from,next){
        console.log("数据更新");
    }
};
</script>

后台node页面

app.js

// node后端服务器
const http = require('http');
const badyParser = require('body-parser');
const express = require('express');
const router = require('./router/router');

let app = express();
let server = http.createServer(app);

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

// 后端api路由
app.use('/api/user', router);

// 启动监听
server.listen(3000, () => {
    console.log('Server run on 3000 port')
})

DBHelper.js

// 数据库连接助手
const mysql = require('mysql');

class DBHelper {
    // 获取数据库连接
    getConn() {
        let conn = mysql.createConnection({
            // 数据库连接配置
            host: '127.0.0.1',
            port: '3306',
            user: 'ycxvip',
            password: 'ycx962464',
            database: 'wlw_db' // 数据库名
        });
        conn.connect();
        return conn;
    }
}

module.exports = DBHelper;

router.js

const express = require('express');
const router = express.Router();

const DBHelper = require('../utils/DBHelper');



// 获取数据
router.get('/showData', (req, res) => {
    let page = req.query.page;
    let sqlStr = `select * from forEng61601 LIMIT ${(page-1)*9},9`;
    let conn = new DBHelper().getConn();
    conn.query(sqlStr, "", (err, result) => {
        if (err) {
            res.json(err);
        } else {
            // console.log(result);
            res.send(result);
        }
    });
    conn.end();
});

module.exports = router;

表面上看前端后台已经写好，运行vue页面和node服务，却会有如下报错

原因在于vue服务启动后，本服务上并没有相应的接口，无法获取数据，因此报错

解决方案

vue项目根目录新建vue.config.js的文件，添加以下代码

module.exports = {
    configureWebpack: {
        devtool: 'source-map',
        devServer: {
            port: 8080, //前端页面打开端口号
            proxy: { //nodejs代理服务器设置
                '/api': {
                    target: 'http://127.0.0.1:3000', //服务端地址
                    // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                    changeOrigin: true,
                    ws: true, //是否代理websockets
                    pathRewrite: { // 重写请求
                        '^/api': '/api' // 替换target中的请求地址，也就是说在请求http://127.0.0.1:8888/XXXXX这个地址的时候直接写成/api即可。
                    },
                    "secure": false
                }
            }
        }
    }
}

再次打开vue服务，数据获取成功