使用axios进行数据传输,vue与express前后端交互(Mysql)
接着上一篇文章(配置了基本的环境,并搭建好了路由):
https://blog.csdn.net/weixin_42514162/article/details/105259226
这一次,我们的任务是使用axios完成前后端数据交互。
我们在main.js中写入如下代码:
import Vue from 'vue';
import App from './App.vue';
import router from '@/router';
import axios from 'axios';//引入axio模块
//import Qs from 'qs';
var axios_instance = axios.create({
//headers: { },
/*headers: {
post: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
'Content-Type': 'application/json;charset=utf-8'
},*/
// 超时设置
timeout: 30000,
// 跨域是否带Token
withCredentials: true,
// 响应的数据格式 json / blob /document /arraybuffer / text / stream
responseType: 'json'
})
//为axios设置拦截器,可以对请求或者返回数据进行处理。
//请求
axios_instance.interceptors.request.use(
config => {//成功
return config;
},
error => {//失败
return Promise.reject(error);
}
)
// 返回结果处理
axios_instance.interceptors.response.use(
res => {
return res.data;
},
error => {
return Promise.reject(error);
}
)
//这个很重要,这样才可以全局使用。
Vue.prototype.$http = axios_instance;
Vue.config.productionTip = true;
new Vue({
render: h => h(App),
router,
}).$mount('#app');
这个搞定之后,我们在Login.js中写入以下代码:
<template>
<div id="login">
<input type="text" v-model="user" placeholder="请输入用户名"/>
<input type="password" v-model="pwd" placeholder="请输入密码" />
<input type="button" v-on:click="login" value="登录" />
</div>
</template>
<script>
//为了使用post方法,我们必须引入这个模块
import qs from 'qs';
export default {
data() {
return {
user: '',
pwd: '',
}
},
mounted() {
},
methods: {
login() {
// 为了便于测试,我这里又定义了一遍拦截器
this.$http.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.reject(error);
}
)
// 返回结果处理
this.$http.interceptors.response.use(
res => {
return res;
},
error => {
return Promise.reject(error);
}
)
if (this.user == '' || this.pwd == '') {
alert('Not null!');
} else {
//发送post请求,请注意!headers必须设置,它和普通的格式不同。
this.$http
.post('/music/get_information', qs.stringify({ 'name': 'Liu YiLei' }),
{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
.then(function (res) {
//显示我们的数据
alert(JSON.stringify(res));
}.bind(this))
.catch(function (error){
alert(error);
}.bind(this));
}
}
}
}
</script>
<style scoped>
#login {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
text-align: center;
}
#login input {
margin: 10px;
padding: 6px 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
接下来,我们处理后端的接口。在src文件夹下建立route文件夹,在它的下面创建DB.js、serve.js、index.js、SQL.js。
代码分别如下:
DB.js:
module.exports = {
mysql: {
host: 'localhost',
user: 'root',
password: '123456',
database: 'chat',
port: '3307',
//多语句请求->允许
multipleStatements: true
}
}
serve.js:基本的express框架的服务器创建,不懂可以看这里:
https://www.runoob.com/nodejs/nodejs-express-framework.html
const express = require('express');
const bodyParser = require('body-parser');//为了解析post数据
const app = express();
const routerapi = require('./index');
var createError = require('http-errors');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const cors = require('cors');
app.use(cors());
app.use(bodyParser.json());
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use('/get_information', routerapi);
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); //允许所有访问者跨域请求
res.header("Access-Control-Allow-Headers", "*");
res.header("Access-Control-Allow-Methods", "*");
res.header("X-Powered-By", ' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
app.listen(3000);
console.log('run on port 3000....');
index.js:
const express = require('express');
const Router = express.Router();
const sql = require('./SQL');
//初始获取信息
Router.post('/', (req, res) => {
console.log(req.body.name);
//获取数据库中的信息,见下一个代码块,使用callback进行数据返回
sql.information(function (resu) {
console.log(resu);
//res.writeHead(200, { 'Content-Type': 'application/json;charset=utf-8' });
res.json(resu);//前面的main.js设置了返回类型是json
})
})
module.exports = Router;
SQL.js:
const config = require('./DB');
const mysql = require('mysql');
//获取信息,建议将sql语句另存放在一个js文件之中,使用?传参,我这里没用
var information = function (callback) {
var connection = mysql.createConnection(config.mysql);
connection.connect();
connection.query("select* from librarians", function (error, results, fields) {
if (error) throw error;
connection.end();
callback(results);
});
}
module.exports = {
information
}
好了,到这里,我们的前后端的代码看似都完成了。但是,这里有一个大坑,**注意!!!**由于,我们的前端和后端运行在不同的端口上,因此,会涉及到跨域的问题。那么,我们要如何解决呢?经过两天的摸索,发现vue-cli3的解决方法并不满足vue-cli4的状况,config文件夹不存在。于是,我们在和package.json同级的目录下新建一个vue.config.js文件,在里面写入以下代码:
module.exports={
devServer:{
/*host:'localhost',
port:'8080',
http:false,
open:true,*/
proxy:{
'/music':{//要代理的地址
target:'http://localhost:3000',
//是否跨域
changeOrigin: true,
//重写路径
pathRewrite: {
'^/music': ''
}
}
}
}
}
到这里,就全部完成了。如果,什么包需要导入,只需要在项目的目录的cmd里面,输入: cnpm insatll xxx(你需要导入的包名)
附上,我的文件结构图:
在浏览器中输入:htttp://localhost:8080进入以下界面:
输入用户名和密码,结果如下就是成功啦!@_@
当然,数据库的连接配置(见DB.js),要根据自己的情况。祝大家顺利。到此结束。