继续上篇博客的Vue刚刚搭建完 , https://my.oschina.net/u/4116654/blog/3064431
这次我们来把Element 和axios弄好
首先先安装Element
下载好了之后
在src目录下的main.js里去添加Element的配置
这样我们的Element就配置好了 , 想要使用Element的组件直接去官网里复制即可
然后我们需要把前端的请求去连接到后端去
我们先安装axios
安装好了之后 , 再在src下面创建一个utils的包 , 把下面的工具类放进去 api.js
import axios from 'axios'
import {Message} from 'element-ui'
axios.interceptors.request.use(config => {
return config;
}, err => {
Message.error({message: '请求超时!'});
// return Promise.resolve(err);
})
axios.interceptors.response.use(data => {//{data:{status:200,msg"",obj:{}},status:200}
if (data.status && data.status == 200 && data.data.status == 500) {
//业务逻辑错误
Message.error({message: data.data.msg});
return;
}
if (data.data.msg) {
Message.success({message: data.data.msg});
}
return data.data;
}, err => {
if (err.response.status == 504 || err.response.status == 404) {
Message.error({message: '服务器被吃了⊙﹏⊙∥'});
} else if (err.response.status == 403) {
Message.error({message: '权限不足,请联系管理员!'});
} else if (err.response.status == 401) {
Message.error({message: err.response.data.msg});
} else {
if (err.response.data.msg) {
Message.error({message: err.response.data.msg});
}else{
Message.error({message: '未知错误!'});
}
}
// return Promise.resolve(err);
})
let base = '';
export const postKeyValueRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'application/json'
}
});
}
export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'application/json'
}
});
}
export const deleteRequest = (url) => {
return axios({
method: 'delete',
url: `${base}${url}`
});
}
export const getRequest = (url) => {
return axios({
method: 'get',
url: `${base}${url}`
});
}
再去继续配置main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import {postKeyValueRequest} from "./utils/api";
import {postRequest} from "./utils/api";
import {getRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";
Vue.prototype.postKeyValueRequest=postKeyValueRequest
Vue.prototype.postRequest=postRequest
Vue.prototype.getRequest=getRequest
Vue.prototype.putRequest=putRequest
Vue.prototype.deleteRequest=deleteRequest
Vue.use(ElementUI,{size:'small'})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
然后再去config包下修改index.js
target里的路径是你要跳转到后端接口的路径前缀 , 也就是后面去发送请求是 , 这一段可以不用写
然后写个调用的示范
<template>
<div style="display: flex;justify-content: center;margin-top: 200px" >
<el-card class="box-card" style="width:330px">
<div slot="header" class="clearfix">
<span>用户登陆</span>
</div>
<div>
<table>
<tr>
<td><el-tag>用户名:</el-tag></td>
<td><el-input v-model="user.username" @keydown.enter.native="doLogin" placeholder="请输入用户名"></el-input></td>
</tr>
<tr>
<td><el-tag>密码:</el-tag></td>
<td><el-input v-model="user.password" @keydown.enter.native="doLogin" type="password" placeholder="请输入密码"></el-input></td>
</tr>
</table>
<div style="margin-top: 20px">
<el-button style="width: 270px;" type="primary" @click="doLogin">登陆</el-button>
</div>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return{
user:{
username:'admin',
password:123
}
}
},
methods:{
doLogin(){
this.postKeyValueRequest("/doLogin",{username:this.user.username,password:this.user.password}).then(msg=>{
if (msg){
alert(JSON.stringify(msg))
// this.$router.push("/home")
}
})
}
}
}
</script>
<style scoped>
</style>