项目介绍
项目归属：华为
项目名称：商臻系统管理—企业展会 Portal
技术栈：vueCli4 + vue2.6 + vue-i18n + ...
项目配置
配置国际化 ./plugins/myi18n.js
把国际化配置单独抽取
拓展 Vue 设置国际化的方法
设置国际化(页面显示 存储到 vuex 全局备用 设置国际化请求头)
import Vue18n from 'vue-i18n'
import store from "@/store/index"
import { setLang } from "@/utils/axios"
var zh = require("@/common/lang/cn")
var en = require("@/common/lang/en")
export default {
install(Vue) {
Vue.use(Vue18n)
const i18n = new Vue18n({
locale: `zh-CN`,
messages: {
"zh-CN": zh,
"en-US": en
}
})
Vue.prototype.i18n = i18n
Vue.prototype.setLang = (lang = `zh-CN`) => {
// 配置国际化
i18n.locale = lang
// 根据不同国际化可能发送不同的接口，或者使用不同的参数
store.commit(`setLang`, lang)
// 根据国际化配置不同的请求头
setLang(lang)
}
}
}
配置 axios ./utils/axios.js
配置过期时间
配置后端返回的正确 code 值
配置后端提示字段，比如返回格式为{ code:"90000", retMsg:"保存错误！", retData:null }
请求/响应拦截返回 Promise
暴露设置国际化的方法
暴露设置 token 的方法
import Axios from 'axios'
const baseURL = `http://192.168.28.170:8080/company_portal`, // baseURL
timeout = 7000, // 过期时间
successCode = [0, 90011, 90015, 90014, 90013], // 正确的code值 [常规请求,文件上传,文件删除,预览模板,保存/修改模板]
message = "retMsg"; // 后端参数返回字段，比如{code:"90010",retMsg:"保存失败",retData:null}
Axios.defaults.timeout = timeout
Axios.defaults.baseURL = baseURL
// 请求拦截器
Axios.interceptors.request.use(config => config, error => Promise.reject(error))
// 响应拦截器
Axios.interceptors.response.use(
response => successCode.indexOf(response.data.retCode) !== -1 ?
Promise.resolve(response.data) : Promise.reject(response.data),
error => {
if (error && error.response) {
switch (error.response.status) {
case 400: error[message] = '请求错误(400)'; break;
case 401: error[message] = '未授权,请登录(401)'; break;
case 403: error[message] = '拒绝访问(403)'; break;
case 404: error[message] = `请求地址出错:${error.response.config.url}`; break;
case 405: error[message] = '请求方法未允许(405)'; break;
case 408: error[message] = '请求超时(408)'; break;
case 500: error[message] = '服务器内部错误(500)'; break;
case 501: error[message] = '服务未实现(501)'; break;
case 502: error[message] = '网络错误(502)'; break;
case 503: error[message] = '服务不可用(503)'; break;
case 504: error[message] = '网络超时(504)'; break;
case 505: error[message] = 'HTTP版本不受支持(505)'; break;
default: error[message] = `连接错误:${error[message]}`;
}
} else error[message] = '连接到服务器失败，请联系管理员'
return Promise.reject(error)
}
)
/**
* 设置国际化
* @param {String} lang 国际化
*/
const setLang = (lang) => Axios.defaults.headers["Accept-Language"] = `${lang},zh;q=0.5`
/**
* 设置token
* @param {String} token token
*/
const setToken = token => Axios.defaults.headers.common['Authorization'] = token
export {
setLang, setToken
}
export default Axios
封装请求 ./utils/request.js
后端正确返回resolve
后端错误返回，提示并reject
配置loading
配置JSON请求和Form请求
接收参数：请求地址，是否显示全局loading，是否使用form提交方式
暴露get和post的方法
暴露显示全局loading和关闭全局loading的方法（特殊用途）
import Axios from './axios'
import { Message, Loading } from 'element-ui'
let config = {
loading: null, // Loading 对象
loadingCount: 0, // Loading 计数器
sendJson: `application/json;charset=UTF-8`, // JSON请求
sendForm: `multipart/form-data`, // FORM请求
con_service: { // Loading 配置
lock: true,
text: 'Loading……',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
}
}
let { loading, loadingCount, sendJson, sendForm, con_service } = config
/**
* 显示Loading
*/
const startLoading = () => loading = Loading.service(con_service)
/**
* 关闭Loading
*/
const endLoading = () => loading.close()
/**
* 根据计数确定是否loading
*/
const showFullScreenLoading = () => loadingCount++ === 0 && startLoading()
/**
* 根据计数确定是否取消loading
*/
const tryHideFullScreenLoading = () => --loadingCount === 0 && endLoading()
/**
* 封装请求
* @param url 请求地址
* @param params 请求参数
* @param config 配置
* @param config.loading 是否显示loading
* @param config.formData 是否使用form请求
* @returns {Promise}
*/
class Http {
constructor() {
this.post = this.post.bind(this)
this.get = this.get.bind(this)
}
require = (method, url, params, { loading, formData }) => new Promise((resolve, reject) => {
Axios.defaults.headers.post['Content-Type'] = sendJson
// 如果显示loading
loading && showFullScreenLoading()
// 如果是form请求
formData && (() => {
let data = new FormData();
for (const key in params) {
data.append(key, params[key])
}
params = data
Axios.defaults.headers.post['Content-Type'] = sendForm
})()
// 如果是get请求
method === "get" && (() => {
let data = {}
for (let key in params) {
data[key] = encodeURIComponent(params[key])
}
params = data
})()
// 发射请求
Axios[method](url, params)
.then(
response => loading && tryHideFullScreenLoading() || resolve(response),
err => {
loading && tryHideFullScreenLoading();
Message.error(err.retMsg);
reject(err);
}
)
})
get = (...data) => this.require("get", ...data)
post = (...data) => this.require("post", ...data)
}
const { get, post } = new Http()
export {
showFullScreenLoading,
tryHideFullScreenLoading,
post,
get
}
请求样例 ./api/replace.js
暴露请求方法
根据不同的API设置是否要全局loading及请求方式(JSON或form)
import { post } from "@/utils/request"
// 模板首屏数据
const getTemplateUrl = `/company/template/create`
// 更新首屏数据
const modifyTemplateUrl = `/company/template/modify`
// 保存图片
const saveFileUrl = `/upload/resource/imgage`
// 删除图片
const deleteFileUrl = `/company/template/resource/delete`
// 预览模板数据
const previewTemplateUrl = `/company/template/preview`
// 保存模板数据
const saveTemplateUrl = `/company/template/save`
// 更新模板数据
const updateTemplateUrl = `/company/template/update`
// 请求是否显示loading 是否是form表单提交
const [loading, formData] = [true, true]
/**
* 请求模板数据
* @param {Object} params 请求参数
* @param {String} params.templateId 模板ID
* @param {String} params.companyId 企业ID
* @returns {Object} 结果
*/
export const getTemplate = (params = {}) => post(getTemplateUrl, params, { loading, formData })
/**
* 请求模板数据
* @param {Object} params 请求参数
* @param {String} params.templateId 模板ID
* @param {String} params.companyId 企业ID
* @returns {Object} 结果
*/
export const modifyTemplate = (params = {}) => post(modifyTemplateUrl, params, { loading, formData })
/**
* 上传图片
* @param {Object} params 请求参数
* @param {String} params.versionId 企业关联模板版本ID
* @param {String} params.companyId 企业ID
* @param {Number} params.showType 类别:1:banner 2：cover 3：video 4：3d 5：vr 6：logo
* @param {Number} params.showSortNo 显示顺序，升序
* @param {String} params.showUrl 跳转地址
* @param {File} params.file 二进制流文件
* @returns {Object} 结果
*/
export const saveFile = (params = {}) => post(saveFileUrl, params, { loading, formData })
/**
* 删除图片
* @param {Object} params 请求参数
* @param {Object} params.id 请求参数
*/
export const deleteFile = (params = {}) => post(deleteFileUrl, params, { loading, formData })
/**
* 预览模板
* @param {Object} params 所有参数
*/
export const previewTemplate = (params = {}) => post(previewTemplateUrl, params, { loading })
/**
* 保存模板数据
* @param {Object} params 所有参数
*/
export const saveTemplate = (params = {}) => post(saveTemplateUrl, params, { loading })
/**
* 更新模板
* @param {Object} params 所有参数
*/
export const updateTemplate = (params = {}) => post(updateTemplateUrl, params, { loading })
