定义api.js对请求的地址以及响应回来的数据处理
import axios from "axios"
import { Message } from 'element-ui';
// 封装服务端响应信息
axios.interceptors.response.use(success=>{
// 业务上的错误
if(success.status && success.status==200 && success.data.status===500){
Message.error({message:success.data.msg})
return;
}
return success.data;
},error => {
if(error.response.status==504 || error.response.status == 404){
Message.error({message:"服务器走失了"})
}else if(error.response.status==403){
Message.error({message:"权限不足,请联系管理员"})
}else if(error.response.status==401){
Message.error({message:"未登录"})
}else {
if(error.response.data.msg){
Message.error({message:error.response.data.msg})
}else {
Message.error({message:"未知错误"})
}
}
return;
})
let base='';
// 封装post请求
export const postKeyValueRequest=(url,params)=>{
return axios({
method:'post',
url:`${base}${url}`,
data:params,
transformRequest:[function (data){
let ret='';
for (let i in data) {
ret+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
}
console.log("ret"+ret);
return ret;
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
export const postRequest=(url,params)=>{
return axios({
method:'post',
url:`${base}${url}`,
data:params
})
}
export const putRequest=(url,params)=>{
return axios({
method:'put',
url:`${base}${url}`,
data:params
})
}
export const getRequest=(url,params)=>{
return axios({
method:'get',
url:`${base}${url}`,
data:params
})
}
export const deleteRequest=(url,params)=>{
return axios({
method:'delete',
url:`${base}${url}`,
data:params
})
}
定义vue.config.js处理跨域请求
// node.js处理前后端的跨域请求
let proxyObj={};
proxyObj['/']={
ws:false,
target:'http://localhost:8081',
changeOrigin:true,
pathRewrite:{
'^/':''
}
}
module.exports={
devServer:{
host:'localhost',
port:8080,
proxy:proxyObj
}
}
实际使用
登录界面的Login.vue,使用post请求登录
<template>
<div>
<el-form :rules="rules" :model="loginForm" ref="loginForm" class="loginContainer">
<h3>系统登录</h3>
<el-form-item prop="username">
<el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="请输入用户密码"></el-input>
</el-form-item>
<el-checkbox v-model="checked"></el-checkbox>
<el-button type="primary" @click="submitLogin">登录</el-button>
</el-form>
</div>
</template>
<script>
import {postKeyValueRequest} from "../utils/api";
export default {
data() {
return {
checked:true,
loginForm:{
username:"admin",
password:"123"
},
rules: {
username:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
password:[{ required: true, message: '请输入密码', trigger: 'blur' },]
}
}
},
methods:{
submitLogin(){
this.$refs.loginForm.validate((valid) => {
if (valid) {
// alert('submit!');
postKeyValueRequest('/login',this.loginForm).then(resp=>{
if (resp){
window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
this.$router.replace('home')
}
})
} else {
this.$message.error('请输入所有字段');
return false;
}
});
}
}
}
</script>
<style>
.loginContainer {
border-radius: 15px;
background-clip: padding-box;
margin: 100px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #FFFFFF;
border: 1px solid #00FF00;
box-shadow: 0 0 25px #82848A;
}
</style>