Vue + webpack 项目配置化、接口请求统一管理
准备工作
需求由来: 当项目越来越大的时候提高项目运行编译速度、压缩代码体积、项目维护、bug修复......等等成为不得不考虑而且不得不做的问题。
又或者后面其他同事接手你的模块,或者改你的bug时避免人家看的眼痛以及心里千百句mamaipi...问候。
并且一个好的开发思路也能大大提高开发效率,以及检验自己。
进入正题:
在本地用 vue-cli
新建一个项目,这个步骤vue的官网上有,我就不再说了。
这里展示一下我的项目架构目录 这次主要讲红字具体实现部分
├── build // 项目build脚本├── config // 项目配置目录├── dist // 项目输出部署目录,执行 npm run build后生成├── src // 生产目录│ ├── assets // 静态资源,包含图片等│ ├── components // 项目公用组件,例如Header、Footer组件等│ ├── mock // 接口mock文件目录│ └── index.js // mock接口集合文件│ ├── pages // 页面目录│ │ ├── Demo // Demo模块,必须用大写开头│ │ │ ├── components // Demo模块专用组件 组件建议全部首字母大写│ │ │ ├── style // Demo模块专用css│ │ │ ├── services // Demo模块服务,可以包含相应方法类│ │ │ ├── interface.js // Demo模块接口结合文件│ │ │ └── index.vue // Demo模块页面入口│ │ └── Other // 其他页面目录│ ├── router // 路由配置文件,如果路由太多了,可以拆分│ ├── services // 项目公用配置服务│ │ │ ├── ajax.js // 所有接口请求公共配置 可以和 request.js 合并一起 不嫌代码太长的话│ │ │ ├── request.js // (需求有则添加) 为所有接口设置公共请求头│ │ │ ├── prompt.js // 全局的提示 例如:接口错误提示、保存成功提示、操作错误提示等等...│ │ │ ├── validate.js // 全局表单校验具体封装可参照element-ui form表单模块│ ├── App.vue // 组件入口│ ├── config.js // 项目配置文件 例如:权限校验,cookie设置、access_token获取等等...│ ├── interface.js // 项目公共接口文件│ └── main.js // Webpack 预编译主入口├── style // 项目公用style├── static // 静态文件目录,保留│ └── i18n // 国际化目录,每一个目录为一种语言│ ├── zh // 中文目录│ │ └── index.json // 配置文件│ └── en // 英文目录├── index.html // 项目入口文件,一般不用改动├── package.json // 项目配置├── README.md // 项目说明├── CHANGE_LOG.md // 项目更新历史文档└── test // 测试目录
services/aiax.js文件
/*** ajax 模块,可以将 axios 替换成 $.ajax 等*/ import axios from 'axios'; import globalConfig from '../config' import { Notification } from 'element-ui'// 注: 具体设置具体判断 根据公司项目需求 以及 接口需求 现在以我公司为例 const init = function () {// 添加 axios 请求拦截器为所有请求加上前缀 、 access_token (我公司所有接口都比要有 access_token才能访问)// 有对 axios 不是很了解的 可以看看 axios 官方文档 https://www.kancloud.cn/yunye/axios/234845axios.interceptors.request.use(function (config) {// 为所有接口加上前缀 例 https://www.kancloud.cn/yunye/axios/234845 前缀为 https://www.kancloud.cn// 因为相同环境下的所有接口前缀肯定是一样的 window.localStorage.gatewayDomain 为前缀域名 倘若后面更改域名之类的 只需改一个地方就行了 就不用说每个调接口的地方都去改 维护便捷// 若想了解分环境打包以及分环境设置 公共域名、前缀等 请看以往博文 https://www.cnblogs.com/ljx20180807/p/9456489.htmlconfig.url = window.localStorage.gatewayDomain + config.url// 登录时设置 cookiesvar cookies = globalConfig.getCookies()if (config.url.indexOf('?') < 0) {config.url += '?'}// 为所有接口加上 access_tokenconfig.url += ('access_token=' + cookies['access_token'])if (!config.data) config.data = {}return config;}, function (err) {// 错误处理return Promise.reject(err)})// 添加 axios 响应拦截器axios.interceptors.response.use(function (response) {// 这里是当接口请求服务器成功响应的情况 解构赋值出需要的数据const {status, data} = response;if (status === 200) {// 如果不出现错误,直接向回调函数内输出 data 状态200if (data.error === 'SUCCESS') {// 成功不用提示return data} else {// 若出现错误则弹窗错误提示if (data.message) {Notification({title: '错误',message: data.message,type: 'error',customClass: 'el-error-msg',duration: 2000})}return data}} else {return response;}}, function (error) {// 这里是当接口请求失败的情况 (例如服务器没响应、后台代码问题之类的) (具体的响应判断根据你后台返回状态码结构)const {response} = error;// 这里处理错误的 http codeif (!response || response.status === 404) {if (!response) { // access_token 失效的情况 弹窗提示 Notification({title: '错误',message: 'access_token已失效请重新登录',type: 'error',customClass: 'el-error-msg',duration: 1500,onClose() {window.location.href = window.localStorage.loginUrl // 自动跳转返回登录页重新获取access_token }})} else {// 这是请求url不对的情况console.log('404 error %o' + error);}}// Do something with response error 对响应错误做点什么return Promise.reject(error.message);}); };export default {init }
services/prompt.js文件
const init = function () {const _this = this;// 建议为了方便使用,这里可以包装window.Alert 具体怎么使用往下看window.Alert = function (msg, duration = 3000) {// 错误提示 _this.$notify({title: '错误',message: msg,type: 'error',customClass: 'el-error-msg',duration});}// 成功提示window.Tips = function (msg, duration = 3000) { _this.$notify({title: '成功',message: msg,type: 'success',duration});}// 警告提示window.Warning = function (msg, duration = 3000) {_this.$notify({title: '警告',message: msg,type: 'warning',duration});}// 全局延时器window.SetTimeout = function (path, queryObject) {setTimeout(_ => {_this.$router.push({path: path,query: queryObject});}, 500)} };export default {init }
page/Demo/interface.js文件 (pc端不建议用vuex 具体看需求吧 vuex管理版本 往下看)
import axios from 'axios';const ajax = {// 获取影像件上传列表GET_IMAGE_LIST: 'images?' }; // 提取公共部分 const API_PATH_PRE_FIX = 'apply/v1/'; // 增加接口模块前缀 let INTERFACE = {}; for (let key in ajax) {INTERFACE[key] = API_PATH_PRE_FIX + ajax[key]; }/*** 方式1: 多参数情况 获取列表* @param data 参数* @returns {*}*/ function getImageList(data) {return axios.get(INTERFACE.GET_IMAGE_LIST, {params: data}).catch(function (error) {window.Alert(error);}); }/*** 方式2: es6模板语法 获取基本信息* @param data 参数* @returns {*}*/ function getContrantInfo(API_PATH_PRE_FIX, agreementId) {return axios.get(`${API_PATH_PRE_FIX}/middle/agreement/basic?agreementId=${agreementId}&`).catch(function (error) { window.Alert(error);}); } export default {getImageList,getContrantInfo, };
page/Demo/index.vue文件
<script>// 引入上面的接口文件 import INTERFACE from './interface' export default {data() {return {imageList: [],deleteList: []}},created() {// 获取列表 (调用封装好的请求)INTERFACE.getImageList().then(data => {if (data && data.data) this.imageList = data.data})},methods: {// 确认删除 handleDelete() {INTERFACE.deleteAgreement(this.deleteList).then(data => {// 操作成功提示 (上面定义好的全局提示)window.Tips('删除成功!')})}} } </script>
src/main.js文件
import Vue from 'vue' import ElementUI from 'element-ui' import App from './App' import ajax from '@/services/ajax'// axios 统一配置 ajax.init()// 全局变量 indow.localStorage.gatewayDomain = 'https://dev-api.cn/' window.localStorage.defaultLanguage = 'ZH_CN'
src/App.vue文件
<script> import prompt from '@/services/prompt' export default {name: 'app',mounted() {// 全局错误初始化prompt.init.call(this)} } </script>
以上就是pc端的项目配置化、请求统一管理内容了。有疑问的地方留言看到后会第一时间回复,或可改进的地方欢迎指导, 下面介绍vuex管理版本。
移动端结合Vuex 统一管理请求 stroe/actions.js文件
import Vue from 'vue'// 全局域名 const apiUrlBase = window.apiUrlBaseconst API_URL = {GET_APPLICENT: `${apiUrlBase}/app/v1/apply/dictionaries` }const actions = {/*** 获取投保人数据字典*/ actions.getApplicent = ({ state }) => {return new Promise((resolve, reject) => {Vue.http.get(`${API_URL.GET_APPLICENT}?access_token=${state.accessToken}`).then((ret) => {resolve(ret.body)}).catch((err) => {reject(err)})})} }export default actions
.vue文件里调用
this.$store.dispatch(`${storeName}/getApplicent`).then((data) => {console.log(data)})
这就可以啦。
本文为原创 转载请注明出处 。
转载于:https://www.cnblogs.com/ljx20180807/p/9799545.html
Vue + webpack 项目配置化、接口请求统一管理相关推荐
- vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决 参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
- axios封装,api接口封装统一管理
axios封装,api接口封装统一管理 一. axios说明 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios的封装和api接口的统一管理, ...
- Vue + webpack 项目实践
最近在内部项目中做了一些基于 vue + webpack 的尝试,在小范围和同事们探讨之后,还是蛮多同学认可和喜欢的,所以通过 blog 分享给更多人. 首先,我会先简单介绍一下 vue 和 webp ...
- 一字一句的搞懂vue-cli之vue webpack template配置
webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...
- 0. 一字一句的搞懂vue-cli之vue webpack template配置
此篇文章地址: https://www.cnblogs.com/xyyt/p/9117361.html webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对 ...
- 踩坑之旅:springboot+vue+webpack项目实战(一)
2019独角兽企业重金招聘Python工程师标准>>> 网上关于springboot的小项目很多,node.js+vue的项目也很多,但是好像没有两者合一的项目,最近在想实践下将两者 ...
- vue+webpack项目中px2rem的例子
引言: gitchat里有更详细的实战例子 Vue+Webpack 把 PX 转化成 REM 的实战例子 本文重点: 项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+ ...
- 搭建vue+webpack 项目
首先非常感谢有关vue+webpack文档创建者,有的让我很迷茫,有的让我又惊又喜,因为根据自己的需要创建的方式也不一样,所以我就记录一种适合我开发的一种.再次感谢 1.安装vs code (根据自己 ...
- 使用redis和mq完成接口的统一管理进化过程
为了统一规范好系统与系统之间的接口调用关系,我们开发了"接口中心"这个服务.其主要作用是统一接口暴露,统一鉴权配置,统一日志记录,最后可以通过图形报表形成调用关系图. 那么我们在1 ...
最新文章
- [20160311]ora-01732.txt
- resx文件在X64位编译,提示“未能加载文件或程序集”的问题?
- GDCM:gdcm::ExplicitDataElement的测试程序
- (多线程)leetcode1114. 按序打印 认识AtomicInteger
- Python实现AES加密进行PKCS5Padding的填充
- K8S - 为 Docker 而生
- 转贴:从现在电力短缺看今后劳动力短缺和高校破产
- freeradius+mysql+pptpd+radiusmanager 游戏×××代理站完整实验过程
- Usb设备驱动5:usb-firmware简易框架
- 多进程——守护进程例子
- 在线Latex公式编辑器
- HTML代码页面无法跳转为什么,html超链接不跳转 html为什么超链接不跳转页面
- 淘宝商品数据爬取并分析数据
- 科研linux发型版本,[合集]哪些Linux系统科研能用呢 - 优秀的Free OS(Linux)版 - 北大未名BBS...
- Android Go项目 来电铃声与UI不同步问题
- 志愿人生——带给你每一次温暖
- 《工程伦理与学术道德》第三章习题
- 喜马拉雅xm文件转换为mp3?
- nacos 单机部署_使用Docker部署Nacos-Server(单机版)
- “超越巴菲特计划“之股市小知识常用的术语笔记
热门文章
- 计算机组成原理左规右规,计算机组成原理 第四章(严军勇)-2003-2012年.ppt
- dataset的去重计数 g2_向工程渣土运输车辆计数 漏洞损失说“不”
- Spring3.1+Quertz1.8实现多个计划任务
- leetcode256. 粉刷房子
- Linux必懂知识大总结(上)
- 《C++ Primer 5th》笔记(10 / 19):泛型算法
- FFPLAY的原理(二)
- 图像、帧、片、NALU(firstime)
- 解决:vue 用 axios 发送请求,每次都会发送两次请求
- 解决: Spring Boot报错 This application has no explicit mapping ... a fallback