前后端分离-前端搭建（Vue）（2）加入Element和axios

灰太狼 2022-01-09 15:19 215阅读 0赞

继续上篇博客的Vue刚刚搭建完 ， [https://my.oschina.net/u/4116654/blog/3064431][https_my.oschina.net_u_4116654_blog_3064431]

这次我们来把Element 和axios弄好

首先先安装Element  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70 1]

下载好了之后

在src目录下的main.js里去添加Element的配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70 2]

这样我们的Element就配置好了 ， 想要使用Element的组件直接去官网里复制即可

然后我们需要把前端的请求去连接到后端去

我们先安装axios

![在这里插入图片描述][20190620223829708.png]

安装好了之后 ， 再在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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70 3]

target里的路径是你要跳转到后端接口的路径前缀 ， 也就是后面去发送请求是 ， 这一段可以不用写

然后写个调用的示范  
![在这里插入图片描述][2019062022385432.png]

<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>

[https_my.oschina.net_u_4116654_blog_3064431]: https://my.oschina.net/u/4116654/blog/3064431
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70]: /images/20220109/33329e61aee549008c34ac12fcaa1148.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70 1]: /images/20220109/8492d29a000d41cf8c19cfd1fdb6c403.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70 2]: /images/20220109/a6f0615311aa49fd9bc1b596c6921256.png
[20190620223829708.png]: https://img-blog.csdnimg.cn/20190620223829708.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190620223847559.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3,size_16,color_FFFFFF,t_70
[2019062022385432.png]: https://img-blog.csdnimg.cn/2019062022385432.png