项目目录:
![](https://i-blog.csdnimg.cn/blog_migrate/6bce5c91f82b9d9f639f0bd5e4ccc88c.png)
main.js
import Vue from 'vue'
import App from './App.vue'
import {Button,Input,Form,FormItem} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
Vue.config.productionTip = false
Vue.use(Button)
Vue.use(Input)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(axios)
new Vue({
render: h => h(App),
}).$mount('#app')
request.js
import axios from "axios";
import {Loading,Message} from 'element-ui'
let baseUrl='http://localhost:8088'
let config={
baseUrl:baseUrl,
timeout:30000
}
let _axios=axios.create(config);
let l1;
/* 请求拦截器(请求之前的操作) */
_axios.interceptors.request.use(
(config) => {
l1=Loading.service({
text:'加载中...'
})
//如果有需要在这里开启请求时的loading动画效果
// config.headers.Authorization = getToken; //添加token,需要结合自己的实际情况添加,
return config;
},
(err) => Promise.reject(err)
);
/* 请求之后的操作 */
_axios.interceptors.response.use(
(res) => {
setTimeout(() => {
l1.close();
}, 2000);
//关闭请求时的loading动
//返回401无权限,可能会是跳回到登录页的操作,结合项目写
if (res.data.meta.status === 401) {
Message.error("无权限操作");
}
if (res.data.meta.status === 400) {
Message.error("请求网络失败");
}
if (res.data.meta.status === 404) {
Message.error("请求网络失败");
}
return res;
},
(err) => {
if (err) {
setTimeout(() => {
l1.close();
}, 2000);
//在这里关闭请求时的loading动画效果
Message.error("请求网络失败");
}
return Promise.reject(err);
}
);
const http = {
get(url = baseUrl+"", params = {}) {
return new Promise((resolve, reject) => {
_axios({
url,
params,
headers: { "Content-Type": "application/json;charset=UTF-8" },
method: "GET",
})
.then((res) => {
resolve(res.data);
return res;
})
.catch((error) => {
reject(error);
});
});
},
post(url =baseUrl+ "", params = {}) {
return new Promise((resolve, reject) => {
_axios({
url,
data: params,
headers: { "Content-Type": "application/json;charset=UTF-8" },
method: "POST",
})
.then((res) => {
resolve(res.data);
return res;
})
.catch((error) => {
reject(error);
});
});
},
};
// methods可变的请求方式
const request = (methods, url ="", params = {}) => {
let paramsRequest = {
url,
headers: { "Content-Type": "application/json;charset=UTF-8" },
method: methods,
};
paramsRequest.url=baseUrl+url;
// get请求使用params
if (methods === "get" || methods === "GET") {
paramsRequest.params = params;
} else {
// post put 请求使用data
paramsRequest.data = params;
}
return new Promise((resolve, reject) => {
_axios(paramsRequest)
.then((res) => {
resolve(res.data);
return res;
})
.catch((error) => {
reject(error);
});
});
};
export default request;
HelloWorld.vue
<template>
<div>
<el-form label-width="80px">
<el-form-item label="用户名">
<el-input v-model="username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="password"></el-input>
</el-form-item>
<el-button type="warn" @click="login">登录</el-button>
</el-form>
<h1>{{ username }}</h1>
<h1>{{ password }}</h1>
</div>
</template>
<script>
import apiFun from "@/api/api"; // 引入网络请求
export default {
name: "HelloWorld",
data() {
return {
username:'admin',
password:'1234'
};
},
methods: {
//登陆
async login() {
const res = await apiFun.Login(this.username,this.password); // 使用请求
console.log(res)
},
},
};
</script>
TestElementUi.vue
<template>
<div id="app">
<h1>{{ tt }}</h1>
<el-button type="primary" @click="onload">msg:{{ tt }}</el-button>
<el-button type="warn" @click="postInfo">发起请求</el-button>
<h1>{{ info }}</h1>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "TestElementUi",
data(){
return{
tt:1,
info:'等待请求获取中...'
}
},
methods: {
// 获取数据
onload:function(){
this.tt++;
} ,
postInfo(){
axios.get('http://localhost:8088/test').then(resp=>{
this.info = resp.data
}).catch(error=>{
console.log((error))
})
}
}
}
</script>
<style scoped>
</style>
App.vue
<template>
<div id="app">
<HelloWorld></HelloWorld>
<TestElementUi></TestElementUi>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import TestElementUi from './components/TestElementUi.vue'
export default {
name: 'App',
components: {
HelloWorld,TestElementUi
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
ctrl+~打开控制台输入npm run serve 运行vue项目
服务端代码:
@GetMapping("/login")
public String login(String username,String password){
System.out.println(username);
System.out.println(password);
return "登陆成功!";
}
记得在controller前加@CrossOrigin跨域访问,
服务端开启服务,开放8088端口
![](https://i-blog.csdnimg.cn/blog_migrate/b0faa812bebbe0a4f81f056d5b801605.png)
运行结果:
![](https://i-blog.csdnimg.cn/blog_migrate/3d0426dcd6986f082208902ce02ac66a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5737fbc6681741abc16e5500386c2d36.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fa3930f0fd3d493bdee41a6c5ee74199.png)