和服务端进行交互

孙强 2022/3/1 vue

# 前端请求流程

在 vue-element-admin 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

UI 组件交互操作；
调用统一管理的 api service 请求函数；
使用封装的 request.js 发送请求；
获取服务端返回；
更新 data；

开发的过程中，可以将请求统一放在 @/api 文件夹中，并且按照 model 纬度进行拆分文件，如：

api/
  login.js
  article.js
  remoteSearch.js
  ...

也可以在页面上单独调用request方法，不强制要求

# request.js

其中，@/utils/request.js 是基于 axios (opens new window) 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。它封装了全局 request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等。

暴露给外部的一共有4个方法，均挂载到$http下面：

// promise
this.$http.get(url,param)
this.$http.post(url,data)
this.$http.download(url,params,method = 'get')
this.$http.request(url,method,params)

# 开发服务器代理

由于微服务架构前后端分离的特性，一般来说，开发过程中我们需要调用后端开发人员的服务器接口，此时如果设置baseurl会出现跨域的问题。

因此我们换一种方案，不设置baseURL，而是通过代理模拟服务器地址访问接口，具体的方法如下：

打开项目根目录下的vue.config.js文件，找到devServer项目

devServer: {
    disableHostCheck: true,
    port: 3200,
    proxy: {
        '/api/member/order': {
            target: 'http://192.168.0.121:8862',
            ws: false,
            changeOrigin: true
        },
        '/api': {
            // 开发环境请求接口代理地址，如需修改可在此处调整【不要提交代码】
            target: 'http://192.168.0.202:32006/',
            ws: false,
            changeOrigin: true
        }
    }
}

说明：proxy就是设置代理地址的项目，代理以接口字符为匹配规则，譬如上文中：

发送的请求如果以/api为开头，则代理到192.168.0.202:32006的地址
发送的请求如果以/api/member/order为开头，则代理到192.168.0.121:8862的地址
以字符长度进行优先级的匹配原则

# host配置

# 来由

首先，为什么要进行hosts配置？

众所周知，在传统前后端代码未分离的情况下，启动项目后，控制台会出现以下打印：

  App running at:
  - Local:   http://localhost:3001/    
  - Network: http://192.168.0.107:3001/

此时，我们在浏览器中访问localhost，或者打印出的ip，即可访问全部的前后端功能。然而我们目前的框架，是前后端分离的，为了避免前后端协同，需要在浏览器中访问不同的ip地址，以及需要给sso平台添加白名单限制，我们相当于给服务添加了虚拟域名的概念，也就是说，不管是使用谁的前端服务，我们只要访问固定的域名地址都可以访问，我们要做的，仅仅是改变hosts文件中的虚拟域名指向的ip地址即可。

# 产品线介绍

目前Sup SCE微服务系统中集成了7套产品线，对应7个前端工程，他们之前可能存在相互跳转的情况，比如在sso中心进行用户登录，登录完成后返回原系统。

我们总不能每次通过修改代码的方式调整跳转链接把，那么这个时候hosts的作用就体现出来了，在代码中固定各个系统的访问地址，只需要调整host中的ip端口即可。

ith-ui业务系统需要通过域名访问，禁止直接访问ip或localhost！

当前系统产品线分布如下：

系统名称	开发环境域名	开发环境端口固定
管理员后台admin	admin.ithcloud.com	3000
登录中心sso	login.ithcloud.com	3100
采购系统产品线purchase	purchase.ithcloud.com	3200
供应链系统产品线member	member.ithcloud.com	3300
销售系统产品线channel	channel.ithcloud.com	3400
审批流bpm	bpm.ithcloud.com	3500
前台商城	tmall.ithcloud.com	3600

# 如何配置

百度中有很多教程，本文同样整理了大概操作：

Hosts文件所在位置：C:\Windows\System32\drivers\etc
Host文件修改需要更改安全设置，具体步骤如下：
右键hosts文件-属性-安全-将以下权限全部打√

或者使用host管理工具【推荐】【超鸡好用】

工具地址：

使用截图：

keep-alive页面保活说明 mixins混入

Th技术开发白皮书

Choose mode