npm使用國內淘寶鏡像的方法css
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm 導入axios 包vue
cnpm install axios -save
config.js axios默認配置,包含基礎路徑信息等ios
import { baseUrl } from '@/utils/global' export default { method: 'get', // 基礎url前綴 baseUrl: baseUrl, // 請求頭信息 headers: { 'Content-Type': 'application/json;charset=UTF-8' }, // 參數 data: {}, // 設置超時時間 timeout: 10000, // 攜帶憑證 withCredentials: true, // 返回數據類型 responseType: 'json' }
axios.js 二次封裝axios模塊,包含攔截器等信息npm
import axios from 'axios'; import config from './config'; import Cookies from "js-cookie"; import router from '@/router' export default function $axios(options) { return new Promise((resolve, reject) => { const instance = axios.create({ baseURL: config.baseUrl, headers: config.headers, timeout: config.timeout, withCredentials: config.withCredentials }) // request 請求攔截器 instance.interceptors.request.use( config => { let token = Cookies.get('token') // 發送請求時攜帶token if (token) { config.headers.token = token } else { // 重定向到登陸頁面 router.push('/login') } return config }, error => { // 請求發生錯誤時 console.log('request:', error) // 判斷請求超時 if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) { console.log('timeout請求超時') } // 須要重定向到錯誤頁面 const errorInfo = error.response console.log(errorInfo) if (errorInfo) { error = errorInfo.data // 頁面那邊catch的時候就能拿到詳細的錯誤信息,看最下邊的Promise.reject const errorStatus = errorInfo.status; // 404 403 500 ... router.push({ path: `/error/${errorStatus}` }) } return Promise.reject(error) // 在調用的那邊能夠拿到(catch)你想返回的錯誤信息 } ) // response 響應攔截器 instance.interceptors.response.use( response => { return response.data }, err => { if (err && err.response) { switch (err.response.status) { case 400: err.message = '請求錯誤' break case 401: err.message = '未受權,請登陸' break case 403: err.message = '拒絕訪問' break case 404: err.message = `請求地址出錯: ${err.response.config.url}` break case 408: err.message = '請求超時' break case 500: err.message = '服務器內部錯誤' break case 501: err.message = '服務未實現' break case 502: err.message = '網關錯誤' break case 503: err.message = '服務不可用' break case 504: err.message = '網關超時' break case 505: err.message = 'HTTP版本不受支持' break default: } } console.error(err) return Promise.reject(err) // 返回接口返回的錯誤信息 } ) // 請求處理 instance(options).then(res => { resolve(res) return false }).catch(error => { reject(error) }) }) }
api.js 請求接口彙總模塊,聚合全部的APIelement-ui
/* * 接口統一集成模塊 */ import * as login from './modules/login' import * as user from './modules/user' import * as dept from './modules/dept' import * as role from './modules/role' import * as menu from './modules/menu' import * as dict from './modules/dict' import * as config from './modules/config' import * as log from './modules/log' import * as loginlog from './modules/loginlog' // 默認所有導出 export default { login, user, dept, role, menu, dict, config, log, loginlog }
API user.js 示例json
import axios from '../axios' /* * 用戶管理模塊 */ // 保存 export const save = (data) => { return axios({ url: '/user/save', method: 'post', data }) } // 刪除 export const batchDelete = (data) => { return axios({ url: '/user/delete', method: 'post', data }) } // 分頁查詢 export const findPage = (data) => { return axios({ url: '/user/findPage', method: 'post', data }) } // 導出Excel用戶信息 export const exportUserExcelFile = (data) => { return axios({ url: '/user/exportUserExcelFile', method: 'post', data }) } // 查找用戶的菜單權限標識集合 export const findPermissions = (params) => { return axios({ url: '/user/findPermissions', method: 'get', params }) } // 根據用戶名查找 export const findByName = (params) => { return axios({ url: '/user/findByName', method: 'get', params }) } // 更新用戶密碼 export const updatePassword = (params) => { return axios({ url: '/user/updatePassword', method: 'get', params }) }
index.js 將axios 封裝成插件,按照插件的方式引入axios
// 導入全部接口 import api from './api' const install = Vue => { if (install.installed) return; install.installed = true; Object.defineProperties(Vue.prototype, { // 注意,此處掛載在 Vue 原型的 $api 對象上 $api: { get() { return api } } }) } export default install 備註:調用的方式this.$api.子模塊.方法
global.js 全局的配置,常量和方法api
/** * 全局常量、方法封裝模塊 * 經過原型掛載到Vue屬性 * 經過 this.Global 調用 */ // 後臺管理系統服務器地址 // export const baseUrl = 'http://139.196.87.48:8001' export const baseUrl = 'http://localhost:8001' // 系統數據備份還原服務器地址 // export const backupBaseUrl = 'http://139.196.87.48:8002' export const backupBaseUrl = 'http://localhost:8002' export default { baseUrl, backupBaseUrl }
main.js 導入api模塊,並註冊使用,導入global模塊,掛載服務器
import Vue from 'vue' import App from './App' import router from './router' import api from './http' import i18n from './i18n' import store from './store' import global from '@/utils/global' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import 'font-awesome/css/font-awesome.min.css' Vue.use(ElementUI) // 註冊使用Element Vue.use(api) // 註冊使用API模塊 Vue.prototype.global = global // 掛載全局配置模塊 new Vue({ el: '#app', i18n, router, store, render: h => h(App) })