导语：路漫漫其修远兮，吾将上下而求索
前篇：
新手摸爬滚打：vue+springboot前后端分离项目演示（一）——vue cli创建vue2项目
新手摸爬滚打：vue+springboot前后端分离项目演示（二）——创建springboot项目整合mybatis+mysql
vue中axios的使用
首先建议参考官方文档https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
回到demo_front文件里，安装axios
npm install axios --save在main.js里写几句话
import axios from "axios";
Vue.prototype.$axios=axios
axios.defaults.baseURL='http://localhost:8081' // 表示以后所有的请求路径前面都会默认加上这个baseURL，减少url长度那个$参考官方文档https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
在demo_front里面添加事件login（调样式是不可能调样式的，这辈子都不可能调样式的）
?
<template>
<div class="login-form">
<el-form :model="loginForm">
? <el-form-item label="用户名">
? ? <el-input v-model="loginForm.userName"></el-input>
? </el-form-item>
? <el-form-item label="密码">
? ? <el-input type="password" v-model="loginForm.password"></el-input>
? </el-form-item>
</el-form>
? <el-button @click="login">确认</el-button>
</div>
</template>
<script>
import axios from "axios";
export default {
? name: "Login.vue",
? data()
? {
? ? return{
? ? ? loginForm:{
? ? ? ? userName:'',
? ? ? ? password:'',
? ? ? }
? ? }
? },
? methods:{
? ? // 愚蠢的方式
? ? login()
? ? {
? ? ? axios({
? ? ? ? method:'post',
? ? ? ? // 除了直接写到url里，我拿axios一点办法也没有
? ? ? ? url:'/validateUser?userName='+this.loginForm.userName+'&password='+this.loginForm.password,
? ? ? }).then((resp)=>{
? ? ? ? this.$alert(resp.data)
? ? ? })
? ? }
? }
}
</script>
<style scoped>
.login-form{
? text-align: center;
}
</style>解释：
1.无论用axios({
??? ?method:
??? ?url:
??? ?data:
})
还是axios.post格式，笔者都无法做到让数据显示在param里面，于是后台写的函数接收不到（改成RequestBody是不可能改的，这辈子都不可能改RequestBody的，除非传列表）
2.由于在main.js里面写过了baseURL，所以在axios的url里面不用写那一长串了（虽然最后还是一长串东西）
同时运行demo_front和demo_back项目（前后端分离的真谛啊）
最后结果：
?于是新手向vue+springboot前后端分离项目就初步搭建起来了，在此附上笔者GitHub主页（内含源码）https://github.com/marious123g