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
}
}
}
}
}