Vue-cli4.2.3下的axios数据传输，后端使用express框架

使用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），要根据自己的情况。祝大家顺利。到此结束。