先後端分離-前端搭建（Vue）（3）加入Element和axios

繼續上篇博客的Vue剛剛搭建完 ， http://www.javashuo.com/article/p-fzwnqfid-ev.html

此次咱們來把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>