
- 外文名
- Package
- 中文名
- 封装
-
vue.cli项目封装全局axios,封装请求,封装公共的api和调用请求的全过程
2019-09-03 11:26:06vue项目的前期配置 封装axios实例 封装API目录
前言
在做vue中大型项目的时候,官方推荐使用axios,但是原生的axios可能对项目的适配不友好,所以,在工程开始的来封装一下axios,保持全项目数据处理的统一性。此文主要讲在vue-cil项目中如何封装axios,封装请求,封装公共的api,页面如何调用请求。
如果你能看到这篇文章,鉴于有很多小白可能会参考我这篇文章来进行前期配置,特说明下正式配置路线:
- 拿到项目及后台接口,首先做的是配置全局代理及第二点;
- 全局封装axios及第三点request.js;
- 过滤axios请求方式,控制路径及参数的格式及第四点http.js;
- 正式封装api及第五点api.js;
- 页面调用;
正文
一、vue项目的前期配置
新建vue项目,下载axios,并在main.js中导入axios
npm i axios -S
//main.js import axios from "axios";
二、配置config文件中的代理地址
在项目config目录下的修改 index.js文件,这里是主要书写配置多个后台接口。关于代理可能出现的问题,可以查看我的另一篇文档VueCil代理本地proxytable报错的解析;
vue cil2旧版本的代理配置——config/index.js
dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // 后端请求地址代理,配置后testIp再之后的页面调用时就直接指代 http://197.82.15.15:8088 proxyTable: { '/testIp': { target: 'http://197.82.15.15:8088', changeOrigin: true, pathRewrite: { '^/testIp': '' } }, '/elseIp': { target: 'http://182.83.19.15:8080', changeOrigin: true, pathRewrite: { '^/esleIp': '' } }, }, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'cheap-module-eval-source-map', // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, cssSourceMap: true },
vuecil 3+ 新版本的代理配置–vue.config.js 文件
关于多代理配置:
devServer: { overlay: { // 让浏览器 overlay 同时显示警告和错误 warnings: true, errors: true }, host: "localhost", port: 8080, // 端口号 https: false, // https:{type:Boolean} open: false, //配置后自动启动浏览器 hotOnly: true, // 热更新 // proxy: 'http://localhost:8080' // 配置跨域处理,只有一个代理 proxy: { //配置多个代理 "/testIp": { target: "http://197.0.0.1:8088", changeOrigin: true, ws: true,//websocket支持 secure: false, pathRewrite: { "^/testIp": "/" } }, "/elseIp": { target: "http://197.0.0.2:8088", changeOrigin: true, //ws: true,//websocket支持 secure: false, pathRewrite: { "^/elseIp": "/" } }, } }
其中vue.config.js详细参考我另一篇博客:vue项目升级(01):全面解析vuecil3/vuecil4的vue.config.js等常用配置
如果有多后台,就可以在api文件夹下另外新建一个elseApi.js ,书写当前ip下的接口请求。方法同上,只是
let resquest = "/elseIp/request/"
调用的时候把端口更改一下。三、封装axios实例 —— request.js
在项目src目录下新建utils文件夹,然后在其中新建 request.js文件,这个文件是主要书写axios的封装过程。
/**** request.js ****/ // 导入axios import axios from 'axios' // 使用element-ui Message做消息提醒 import { Message} from 'element-ui'; //1. 创建新的axios实例, const service = axios.create({ // 公共接口--这里注意后面会讲 baseURL: process.env.BASE_API, // 超时时间 单位是ms,这里设置了3s的超时时间 timeout: 3 * 1000 }) // 2.请求拦截器 service.interceptors.request.use(config => { //发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加 config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换 config.headers = { 'Content-Type':'application/x-www-form-urlencoded' //配置请求头 } //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法,推荐js-cookie const token = getCookie('名称');//这里取token之前,你肯定需要先拿到token,存一下 if(token){ config.params = {'token':token} //如果要求携带在参数中 config.headers.token= token; //如果要求携带在请求头中 } return config }, error => { Promise.reject(error) }) // 3.响应拦截器 service.interceptors.response.use(response => { //接收到响应数据并成功后的一些共有的处理,关闭loading等 return response }, error => { /***** 接收到异常响应的处理开始 *****/ if (error && error.response) { // 1.公共错误处理 // 2.根据响应码具体处理 switch (error.response.status) { case 400: error.message = '错误请求' break; case 401: error.message = '未授权,请重新登录' break; case 403: error.message = '拒绝访问' break; case 404: error.message = '请求错误,未找到该资源' window.location.href = "/NotFound" break; case 405: error.message = '请求方法未允许' break; case 408: error.message = '请求超时' break; case 500: error.message = '服务器端出错' break; case 501: error.message = '网络未实现' break; case 502: error.message = '网络错误' break; case 503: error.message = '服务不可用' break; case 504: error.message = '网络超时' break; case 505: error.message = 'http版本不支持该请求' break; default: error.message = `连接错误${error.response.status}` } } else { // 超时处理 if (JSON.stringify(error).includes('timeout')) { Message.error('服务器响应超时,请刷新当前页') } error.message('连接服务器失败') } Message.error(error.message) /***** 处理结束 *****/ //如果不需要错误处理,以上的处理过程都可省略 return Promise.resolve(error.response) }) //4.导入文件 export default service
特殊说明:
鉴于有很多朋友问关于数据转换这块的问题,特在页面中单独回复一下!
config.data = JSON.stringify(config.data); config.headers = { 'Content-Type':'application/x-www-form-urlencoded' } const token = getCookie('名称') if(token){ config.params = {'token':token} ; config.headers.token= token; }
上述的代码都是请求的配置项,非必须,也是分情况的,
data/headers /params
这种本身的参数都有多种,和后台沟通,需要什么就配什么!
config.data = JSON.stringify(config.data);
为什么不用qs.stringify
,因为我的后台想要的只是json类型的传参,而qs转换会转换成为键值对拼接的字符串形式。当然你们后台需要传递字符串类型参数,那就换成qs或者其他格式方式。
const token = getCookie('名称')
这是token的取值,在取之前你肯定需要发请求拿到token,然后setCookie存起来,而名称就是你存的token的名称,每个人的不一样;
config.headers = { 'Content-Type':'application/x-www-form-urlencoded' }
请求头内容的配置,也是不同的,application/x-www-form-urlencoded :
form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式),你可以根据实际情况去配置自己需要的;
以上
我已经举了很清晰的例子,写代码的过程是自己动脑去搭建工程的,希望能看到我文章的各位,善于搜索,善于思考,善于总结;
当然我很喜欢帮大家解决问题,但是相关的基础问题,还是建议自己去学习掌握。四、封装请求——http.js
在项目src目录下的utils文件夹中新建 http.js文件,这个文件是主要书写几种请求的封装过程。
/**** http.js ****/ // 导入封装好的axios实例 import request from './request' const http ={ /** * methods: 请求 * @param url 请求地址 * @param params 请求参数 */ get(url,params){ const config = { method: 'get', url:url } if(params) config.params = params return request(config) }, post(url,params){ const config = { method: 'post', url:url } if(params) config.data = params return request(config) }, put(url,params){ const config = { method: 'put', url:url } if(params) config.params = params return request(config) }, delete(url,params){ const config = { method: 'delete', url:url } if(params) config.params = params return request(config) } } //导出 export default http
五、正式封装API,用于发送请求——api.js
在项目src目录下新建api文件夹,然后在其中新建 api.js文件,这个文件是主要书写API的封装过程。
写法一:适合分类导出
import http from '../utils/http' // /** * @parms resquest 请求地址 例如:http://197.82.15.15:8088/request/... * @param '/testIp'代表vue-cil中config,index.js中配置的代理 */ let resquest = "/testIp/request/" // get请求 export function getListAPI(params){ return http.get(`${resquest}/getList.json`,params) } // post请求 export function postFormAPI(params){ return http.post(`${resquest}/postForm.json`,params) } // put 请求 export function putSomeAPI(params){ return http.put(`${resquest}/putSome.json`,params) } // delete 请求 export function deleteListAPI(params){ return http.delete(`${resquest}/deleteList.json`,params) }
写法二:使用全部导出
import http from '../utils/http' // /** * @parms resquest 请求地址 例如:http://197.82.15.15:8088/request/... * @param '/testIp'代表vue-cil中config,index.js中配置的代理 */ let resquest = "/testIp/request/" // get请求 export default{ getListAPI(params){ return http.get(`${resquest}/getList.json`,params) }, postFormAPI(params){ return http.post(`${resquest}/postForm.json`,params) } }
注意:一个项目中如果后台请求不是同一个ip,而是多个ip的时候,可以在api文件夹下建立多个js,用来调用请求。
我们看下之前遗留的一个问题://创建新的axios实例, const service = axios.create({ baseURL: process.env.BASE_API, timeout: 3 * 1000 })
在之前封装公共接口的baseUrl时候,用了
webpack
中的全局变量process.env.BASE_API
,而不是直接写死ip,也是为了适应多个后台或者开发的时候的api地址和发布的时候的api地址不一样这种情况。以上 关于配置环境 和接口 基本搭建完毕,下面看一下调用:
六、如何在vue文件中调用
方法一:用到哪个api 就调用哪个接口——适用于上文接口分类导出;
import {getListAPI,postFormAPI, putSomeAPI, deleteListAPI} from '@/api/api' methods: { //promise调用,链式调用, getList()括号内只接受参数; // get不传参 getList() { getListAPI().then(res => console.log(res)).catch(err => console.log(err)) }, //post传参 postForm(formData) { let data = formData postFormAPI(data).then(res => console.log(res)).catch(err => console.log(err)) }, //async await同步调用 async postForm(formData) { const postRes = await postFormAPI(formData) const putRes = await putSomeAPI({data: 'putTest'}) const deleteRes = await deleteListAPI(formData.name) // 数据处理 console.log(postRes); console.log(putRes); console.log(deleteRes); }, }
方法二 :把api全部导入,然后用哪个调用哪个api——适用于全部导出
import api from '@/api/api' methods: { getList() { api.getListAPI(data).then(res => { //数据处理 }).catch(err => console.log(err)) } }
结语
以上就详细介绍了,在vue-cil项目中 如何封装axios,封装请求,封装公共的api,配置多个接口,页面如何调用请求等问题,都是亲测有用的~ 但是这种封装方法的话,更适合大中型项目,配置比较合理,如果是自己小项目,就直接用axios就完事了。。。
补充:关于代理的配置及若出现配置代理报错404的问题,可以参考我的文章:代理的配置来解决;
如果本文对你有帮助的话,请不要忘记给我点赞打call哦~o( ̄▽ ̄)do
有其他问题留言 over~ -
一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端
2020-05-08 09:35:40sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端; 同时支持重新签名,覆盖签名,下载,保存等 github地址:https://github.com/mose-x/vue-sign-canvas.git ...sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端;
同时支持重新签名,覆盖签名,下载,保存等 -
数据包封装解封装过程
2020-02-13 17:14:17数据包封装解封装过程文章目录
5 网络基础知识储备
5.1 OSI七层模式
5.2 TCP/IP协议栈
5.3 描述TCP协议状态机及三次握手四次挥手过程
5.4 loopback网卡功能
5.5 描述数据包封装解封装过程
5.5.1 封装
是将对象运行所需的资源封装在程序对象中——基本上,是方法和数据。
- 封装过程
-
- 应用层:原始数据被转换成二进制数据
- 传输层:二进制数据被分割成小的数据段,并封装TCP头部 (数据段)
(TCP头部的关键信息–端口号) - 网络层:传输层传来的数据被封装上IP头部 (数据包)
(IP头部的关键信息–IP地址) - 数据链路层:网络层传来的数据被封装上MAC头部 (数据帧)
(MAC头部的关键信息–MAC地址) - 物理层:二进制数据组成的比特流转化为电信号在网络中传输 (比特流)
5.5.2 解封装
接收数据的时候,会一层一层的把包头去掉
- 解封过程
-
- 物理层:将电信号转化为二进制数据,并将其送至数据链路层
- 数据链路层:查看MAC地址,地址是自己,就拆掉MAC头部,继续传输
地址不是自己,就丢弃数据 - 网络层:查看IP地址,地址是自己,就拆掉IP头部,继续传输
地址不是自己,就丢弃数据 - 传输层:查看TCP头部,判断应该传到哪里,然后重组数据,传输到应用层
- 应用层:二进制转化为原始数据
小结
- TCP通信的数据封装解封过程
5.6 端口号的作用及常用的协议端口号有哪些
5.7 IP模块
5.8 基础路由和交换技术
-
python封装成exe
2018-10-17 14:45:15最近写了一个小小的程序,需要进行封装exe,为了简单,就直接用了pyinstaller这个模块,对于python3.6版本的童鞋来说,简直方便的不要。下面就给大家介绍一下如何用pyinstaller去封装程序为exe程序。 首先,需要安装...最近写了一个小小的程序,需要进行封装exe,为了简单,就直接用了pyinstaller这个模块,对于python3.6版本的童鞋来说,简直方便的不要。下面就给大家介绍一下如何用pyinstaller去封装程序为exe程序。
首先,需要安装一下pip这个应用,这个已经在前面的文章中说过了,windows和linux都有请借鉴windows和linux。
第二步,安装好pip之后,在cmd命令窗口中输入pip install pyinstaller即能安装上pyinstaller,那么接下来要介绍一下关于pyinstaller几个指令了:
-w指令
直接发布的exe应用带命令行调试窗口,在指令内加入-w命令可以屏蔽;
-F指令
注意指令区分大小写。这里是大写。使用-F指令可以把应用打包成一个独立的exe文件,否则是一个带各种dll和依赖文件的文件夹;
-p指令
这个指令后面可以增加pyinstaller搜索模块的路径。因为应用打包涉及的模块很多。这里可以自己添加路径。不过经过笔者测试,site-packages目录下都是可以被识别的,不需要再手动添加。
那么通常是使用-F指令,使用的语法是:pyinstaller -F (python程序名称).py
以“helloword”为例
在一个新建的文件夹下把python程序放进去,然后点击空白处,按住shift+鼠标右击,点击“在此处打开命令行窗口”,在cmd命令中输入“pyinstaller -F hello.py”
在回车之后,则会出现以下画面
以上证明已经封装好exe程序了,在新建的文件夹中,会出现以下的文件
封装好的exe程序就在dist文件夹中,如图所示:
倘若你的windows是正版的话就会出现“hello world”的字样,如果不是正版的将会出现没有dll文件支持,那么就需要进行正版的系统安装了。好了,以上就是python3.x版本的exe程序封装,希望能够帮助到大家。
(1)、如果您在阅读博客时遇到问题或者不理解的地方,可以联系我,互相交流、互相进步;
(2)、本人业余时间可以承接毕业设计和各种小项目,如系统构建、成立网站、数据挖掘、机器学习、深度学习等。有需要的加QQ:1143948594,备注“csdn项目”。 -
封装的含义、封装的作用、如何封装、什么情况下封装?
2020-06-01 13:36:05封装的含义:封装是实现面向对象程序设计的第一步,封装就是将数据或函数等集合在一个个的单元中(我们称之为类)。被封装的对象通常被称为抽象数据类型。 封装的作用:封装的作用在于保护或者防止代码(数据)被... -
OutputDebugString完美封装
2017-12-12 14:48:37C/C++开发中经常需要输出调试信息,我们一般使用OutputDebugString输出到DebugView或者调试器输出窗口。 OutputDebugString原型如下: void WINAPI OutputDebugString( LPCTSTR lpOutputString ...封装了2 -
WIN7封装教程+封装工具包
2012-04-03 16:30:55WIN7封装教程+封装工具包(非常详细) -
Android 一个改善的okHttp封装库
2015-12-15 14:36:37一、概述之前写了篇Android OkHttp完全解析 是时候来了解OkHttp了,其实主要是作为okhttp的普及文章,当然里面也简单封装了工具类,没想到关注和使用的人还挺多的,由于这股热情,该工具类中的方法也是剧增,各种 -
【vue组件封装】ECharts组件封装随笔
2020-09-05 20:18:11内容 记录组件封装思路 实现ECharts 组件的封装 -
面向对象第一步封装
2020-12-18 07:36:00封装:是指隐藏对象的属性和实现细节,仅对外提供公共访问方式。好处:将变化隔离。便于使用。提高重用性。提高安全性。封装原则:将不需要对外提供的内容都隐藏起来。把属性都隐藏,提供公共方法对其... -
数据传输封装与解封装过程
2019-12-02 20:07:16数据传输封装与解封装过程** 数据封装过程:客户端 ①:产生通讯数据信息 – 数据信息:PDU(协议数据单元) ②:传输层封装过程 – 传输层头部信息+数据信息 ③:网络层封装过程 – 网络头部信息+传输层头部信息+数据信息 ... -
SOP封装和SOIC封装的区别
2018-11-28 16:47:49前几天画板子时遇到一些问题,部分芯片只有SOIC封装,但是我在画原理图时没有考虑太多,使用的是SOP封装,此时PCB已经完成,懒得改动,就去查了一下这两个货的区别,得到如下结果。 SOP也是一种很常见的封装形式,... -
数据的封装与解封装
2019-05-22 13:24:00数据封装,就是把业务数据映射到某个封装协议的净荷中,然后填充对应协议的包头,形成封装协议的数据包,并完成速率适配。 数据封装是指将协议数据单元(PDU)封装在一组协议头和尾中的过程。在 OSI7层参考模型中,... -
Java 封装
2018-12-24 13:25:29封装 java中的封装是将代码和数据一起封装到单个单元中的过程,例如胶囊,即几种药物的混合。 我们可以通过将类的所有数据成员设为private,以在java中创建一个完全封装的类。现在我们可以使用setter和getter方法来... -
C++封装
2019-01-24 22:20:06封装 : 在类和对象阶段,我们只研究类的封装特性,那什么是封装呢? 封装:将数据和操作数据的方法进行有机结合,隐藏对象的属性和实现细节,仅对外公开接口来和对象进行 交互。 封装本质上是一种管理:我们如何管理... -
Altium Designer 20 超全终极封装库
2019-08-08 16:10:25Altium Designer超全终极封装库(带3D封装) 很多网友老是找不到合适的封装,自己又懒得做。今天给大家链接,整理了大概4g左右的封装库,共各位网友学习下载。 文末附带下载链接! 下面是部分封装展示: 效果... -
simulink的模块封装与解封装
2019-10-17 13:39:58MATLAB/Simulink 使用技巧:模块封装(简单) 1,新建或者打开Simulink仿真环境。 2,选择需要封装的部分,单击鼠标右键选择“create subsystem”选项即可封装模块。 MATLAB/Simulink 使用技巧:模块解封装。 ... -
TSSOP封装库
2014-03-09 16:39:29所有TSSOP封装都在这了,画电路板必备。 -
使用Hbuilder封装APP(含配置证书)详细图文教程
2020-06-02 09:52:31网站封装成 APP 所需软件 工具:Hbuilder(用于封装) 环境:Java(用于签名) 本机环境:Windows10,、Jdk1.8,Hbuilder1.5.4 网站封装成 APP详细步骤 1、首先要去hbuilder 官网下载 app 开发版,它是绿色版... -
电容尺寸、封装及PCB库
2018-08-28 16:28:51无极性电容封装以RAD为标识,有RAD-0.1 RAD-0.2 RAD-0.3等,后面的娥数字代表焊盘中心孔间距,单位英寸 1in=1000mil 0.1in =100mil=0.254mm 常见的瓷片电容(104)其封装就是RAD-0.1,其表示为无极性电容,两引脚... -
easysysprep4封装教程,自己封装系统
2018-12-01 21:08:17本教程详细介绍如何使用easysysprep4进行封装系统的详细介绍。本教程分三个部分。 easysysprep4封装教程上 打开easysysprep4看到如下图 这里只是显示了当前系统信息,以及easysysprep4设置的封装模式。我们点击... -
python封装exe+exe封装服务
2018-08-18 18:46:38python封装exe+exe封装服务 python封装exe+exe封装服务 一、python封装exe 安装pyinstaller: 打包 二、exe封装为服务 使用SC指令封装服务 使用nssm封装服务 一、python封装exe 本来使用的python... -
Win7、Win10封装系统制作系统镜像,操作流程#gho
2018-10-11 17:12:04工具1:Easy Sysprep v4.5.31.611,一个封装部署辅助工具。 工具2:万能驱动 v7.17.1117.3,可以与EasySysprep配合使用的万能驱动包。 工具3:IT天空一键运行库 v1.9.2016.0412,可以与EasySysprep配合使用的运行... -
ToolBar 的封装
2015-06-12 23:54:03ToolBar 的封装,使代码步重复,快捷开发 -
封装Ajax函数
2020-05-19 17:19:12所以要再次结合promise对Ajax进行封装以便于项目开发 ajax请求函数模块 返回值: promise对象(异步返回的数据是: response.data) */ import axios from 'axios' export default function ajax(url, data = {}, type... -
封装、封装的好处、特点
2019-08-08 21:29:14封装 1、方法、继承都是封装的一种体现,private(私有的)也是封装的一个体现。被private修饰的成员变量只能在本类中使用,外部不能直接通过对象属性改变。获取和改变需要提供设置器(访问接口|访问方法)和访问器... -
Java的封装
2020-05-24 20:48:29此教程演示了Java编程语言中封装的用法 什么是封装 封装就是将变量和方法包装在一个单元中。封装也称为数据隐藏。为什么?因为,当您设计类时,您可以使变量对其他类隐藏,只提供处理数据的方法。您的类应该设计成黑... -
什么是APP封装?APP封装如何实现?
2021-01-08 15:13:58APP封装是形成APP的最省钱的一种方式。你只需要拥有一个网址就可以通过一些技术处理封装成一个跨iOS和Android的APP,这个过程往往只需要几分钟。在移动互联网时代,拥有一个移动端APP是必不可少的。那么APP是怎样... -
各种USB封装库 含方扁口,Mini Micro USB封装
2015-09-14 13:41:17各种USB封装库 含方扁口,Mini Micro USB封装,使用前请确保和使用的器件尺寸吻合! -
用pyinstaller封装同样的python文件,为什么3.6封装的要远远大于3.5封装的?
2019-01-10 16:50:16用pyinstaller封装同样的python文件,为什么3.6封装的要远远大于3.5封装的? python3.6封装大小200M; python3.5封装60M。 用到的库有os、cv2、numpy、pyzbar 并且通过from……import……和直接import cv2,并...