前後端分離-前端搭建（Vue）（3）加入Element和axios
阿新 • • 發佈：2019-06-21
繼續上篇部落格的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>