vue2 引入Element UI和Axios
前提正确安装了vue2
引入Element UI
1. 在项目中控制台输入npm install element-ui --save命令进行安装
npm install element-ui --save
2. 项目中引进Element UI依赖
在项目的src目录中找到main.js文件,然后添加代码
import Element from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(Element)
例如:
然后我们就可以在vue中使用element ui组件了
引入axios
1. 项目安装axios
npm install axios --save
2. 引入依赖并全局注册
import axios from ‘axios’
Vue.prototype.$axios = axios
axios扩展(封装请求文件)
1. 创建axios请求配置文件 request.js
import axios from "axios";
import global from "@/config/global"
import { Message } from 'element-ui'
// 配置API接口地址
const root = global.BASE_WEB_URL;
function apiAxios (method, url, params, successFunction, failureFunction) {
// post 和 get 请求中,header的Content-Type是不一样的
const header= method === 'POST' ? {'Content-Type':'multipart/form-data'}:{'Content-Type':' application/json'};
// 后端sa-token需要的登录认证信息
const satoken = localStorage.getItem('identity_str');
satoken? header['satoken'] = satoken : null
// axios请求
axios({
method: method,
url: url,
data: method === 'POST' || method === 'PUT' ? params : null,
params: method === 'GET' || method === 'DELETE' ? params : null,
baseURL: root,
withCredentials: false,
headers: header
})
.then(function (res) {
if (res.data.code === 200) {
if (successFunction) {
successFunction(res.data)
}
} else {
if (failureFunction) {
failureFunction(res.data)
}else{
Message({
message: res.data.message,
type: 'error',
})
}
}
})
.catch(function (err) {
Message({
message: "系统异常,联系管理员处理,异常信息:"+err,
type: 'error',
})
// if (failure){
// failure({code:500,message:"系统异常,联系管理员处理"})
// }else {
// let res = err.response
// if (err) {
// window.alert('api error, HTTP CODE: ' + res)
// console.log(res)
// }
// }
})
}
// 返回在vue模板中的调用接口
export default {
get: function (url, params, success, failure) {
return apiAxios('GET', url, params, success, failure)
},
post: function (url, params, success, failure) {
return apiAxios('POST', url, params, success, failure)
},
put: function (url, params, success, failure) {
return apiAxios('PUT', url, params, success, failure)
},
delete: function (url, params, success, failure) {
return apiAxios('DELETE', url, params, success, failure)
}
}
2. 封装vue页面的api文件
这个文件应该是每个vue页面(component)对应的文件,即是每个component对应创建一个api文件,便于后续与后端联调时减少对component文件的操作。例如Login.vue对应的api文件LoginApi.js
import request from '@/utils/request'
export default {
// 登录接口
login(param,successFunction,errorFunction){
return request.post('/login',param,successFunction,errorFunction);
}
}