目录
前言
正文
一、vue项目的前期配置
二、配置config文件中的代理地址
vue cil2旧版本的代理配置——config/index.js
vuecil 3+ 新版本的代理配置--vue.config.js 文件
三、封装axios实例 —— request.js
四、封装请求——http.js
五、正式封装API，用于发送请求——api.js
六、如何在vue文件中调用
结语

前言
在做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(￣▽￣)ｄo

有其他问题留言 over~

sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端;

同时支持重新签名，覆盖签名，下载，保存等
gitee地址：https://gitee.com/mose-x/vue-sign-canvas.git

文章目录
5 网络基础知识储备
5.1 OSI七层模式
5.2 TCP/IP协议栈
5.3 描述TCP协议状态机及三次握手四次挥手过程
5.4 loopback网卡功能
5.5 描述数据包封装解封装过程
5.5.1 封装
5.5.2 解封装
小结
5.6 端口号的作用及常用的协议端口号有哪些
5.7 IP模块
5.8 基础路由和交换技术

5 网络基础知识储备
5.1 OSI七层模式
OSI七层模式
5.2 TCP/IP协议栈
TCP/IP协议栈
5.3 描述TCP协议状态机及三次握手四次挥手过程
TCP协议状态机及三次握手四次挥手过程
5.4 loopback网卡功能
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模块
IP模块
5.8 基础路由和交换技术
基础路由和交换技术

最近写了一个小小的程序，需要进行封装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项目”。