1.前端Vue的环境配置与全局方法封装

前端Vue的环境配置与全局方法封装

安装命令，在终端窗口执行

#安装element-ui
npm i element-ui -S  
#安装axios
npm install axios
#安装vuex
npm install vuex --save

前端依赖工具包：

  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "element-ui": "^2.13.2",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

引入 Element

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

引入Font Awesome

1.在npm中安装font-awesome

npm install --save font-awesome

2.在main.js中引入

import ‘font-awesome/css/font-awesome.min.css’;

开发环境下的跨域问题解决

解决开发环境下的跨域问题（因浏览器的同源策略，不能直接访问其他端口的接口）

解决：配置由node.js实现请求转发，配置文件 vue.config.js如下：

let proxyObj={};
proxyObj['/ws']={
  ws:true,
  target:"ws://localhost:8082"
};
proxyObj['/']={
  ws:false,
  target:'http://localhost:8082',
  changeOrigin: true,
  pathRewrite:{
    '^/':''
  }
}
module.exports={
  devServer:{
    host:'localhost',
    port:8080,
    proxy:proxyObj
  }
}

全局方法封装

新建文件夹utils，其中新建js文件api.js，代码如下：

import axios from 'axios';
import {Message} from "element-ui";
import router from '../router'


/*axios全局响应拦截*/
axios.interceptors.response.use(success=>{
  if (success.status&&success.status==200&&success.data.status==500){//请求成功，但处理出现其他错误
    Message.error({message:success.data.msg})
    return;
  }
  //请求成功且服务器处理无错误
  if (success.data.msg){
    Message.success({message:success.data.msg});
  }
  return success.data;
},error => {
  if (error.response.status==504) {//	充当网关或代理的服务器，未及时从远端服务器获取请求
    Message.error({message:'找不到服务器'})
  }else if(error.response.status==403){	//服务器理解请求客户端的请求，但是拒绝执行此请求
    Message.error({message:'权限不足，请联系管理员'})
  }else if (error.response.status==401){//请求要求用户的身份认证
    Message.error({message:'尚未登录，请登录'});
    router.replace("/");//跳转到登陆页
  }else if (error.response.status==404){
    Message.error({message:'服务器无法根据客户端的请求找到资源'})
  } else if (error.response.status==500){
    Message.error({message:'服务器内部错误，无法完成请求'})
  } else {
    if (error.response.data){
      Message.error({message:error.response.data.msg})
    }
    else {
      Message.error({message:'未知错误!'})
    }
  }
  return;
})

let base='';

/*
登录请求方法，与服务端Spring Security的登录接口对接
 */
export const postKeyValueRequest=(url,params)=>{
  return axios({
    method:'post',
    url:`${base}${url}`,
    data:params,
    transformRequest:[function (data) {//处理请求的数据格式
      //console.log(data);
      let ret='';
      for (let i in data){
        ret+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
      }
     // console.log(ret);
      return ret;
    }],
    headers:{
      'Content-Type':'application/x-www-form-urlencoded'
    }
  });
}
/*
封装“增加”请求方法——post
 */
export const postRequest=(url,params)=>{
  return axios({
    method:'post',
    url:`${base}${url}`,
    data:params
  });
}
/*
封装“修改”请求方法——put
 */
export const putRequest=(url,params)=>{
  return axios({
    method:'put',
    url:`${base}${url}`,
    data:params
  });
}
/*
封装“查询”请求方法——get
 */
export const getRequest=(url,params)=>{
  return axios({
    method:'get',
    url:`${base}${url}`,
    data:params
  });
}
/*
封装“删除”请求方法——get
 */
export const deleteRequest=(url,params)=>{
  return axios({
    method:'delete',
    url:`${base}${url}`,
    data:params
  });
}

在main.js中进行封装

/*
封装请求方法,供全局调用
 */
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";
import {initMenu} from "./utils/menus";

Vue.prototype.postKeyValueRequest=postKeyValueRequest;
Vue.prototype.postRequest=postRequest;
Vue.prototype.getRequest=getRequest;
Vue.prototype.putRequest=putRequest;
Vue.prototype.deleteRequest=deleteRequest;