-
上篇我们学完了对整个登录逻辑的剖析，这一篇我们来细细讲下，vue3+ts如何开发项目的，我们既然是使用这个模版来开发，就要熟悉它，使用它，然后在试着改造它，使其适配你们自己的项目，这才是正确的学习步骤，不要上来就想剖析源码，很容易放弃自己的，哈哈。
- 一个项目，拿到手之后，第一步一定少不开反向代理，因为请求接口，如果后端没有放开跨域，前端直接请求，肯定会跨域，那么开发环境解决跨域的方式就是配置反响代理。
- 之前vue2.x+js的项目配置反向代理的位置在
vue.config.js文件的proxy里，那么vue3.x+vite+ts的项目，一定在vite.config.ts文件的proxy中，那么，打开vite.config.ts找到proxy
server: {
host: "0.0.0.0",
port: viteEnv.VITE_PORT,
open: viteEnv.VITE_OPEN,
cors: true,
// Load proxy configuration from .env.development
proxy: createProxy(viteEnv.VITE_PROXY)
},
- 可以看到，
proxy反向代理，这个模版全部封装起来了，createProxy是个封装好的方法，我们不要管，都配置好了，直接用，如何vue2.x项目里是你自己配置的，你应该很熟悉下面这段代码
image.png
-
createProxy(viteEnv.VITE_PROXY)传入的一个实参，顺藤摸瓜，找到本地环境配置文件.env.development里的VITE_PROXY
image.png
- 全局搜索
VITE_API_URL，打开src/api/index.ts，这个文件是模版封装好的axios请求插件，代码不用动，就修改下该修改的地方，比如：
config.headers.set("x-access-token", userStore.token);
image.png
- 这里都
x-access-token修改成你们后端所接收的token key
-
data.code == ResultEnum.OVERDUE和data.code && data.code !== ResultEnum.SUCCESS这里的code值，修改成你们项目实际返回的对应的code，模版封装统一管理起来了，很方便，路径是src/enums/httpEnum.ts
image.png
- 这里我就不动了。
-
接下来，就打开src/api/modules/login.ts文件，我们来看下，登录接口是如何封装的。
image.png
- 首先引入了
import { Login } from "@/api/interface/index";接口，导入了Login接口，里面规定了某些字段，多传或者不传或者少传，都会报错提醒，这就是TS，严格校验规范了开发规范，故而开发周期可能会久一点（相比vue+js项目来说）。
-
Login.ReqLoginForm规范了传入参数字段，必须是username和password，而且比如是string类型，否则报错！
-
Login.ResLogin规范了，接口返回数据字段，比如有access_token，且必须是string类型
image.png
- 换句话说，
loginApi = (params: Login.ReqLoginForm)括弧里的是规范传入参数的
-
http.post<Login.ResLogin>请求方式后面的尖括号是规范返回字段的。
-
import { PORT1 } from "@/api/config/servicePort";这个是引入了一个请求接口前缀
image.png
- 没啥好说的，就是个拼接接口地址用的，根据实际情况使用
import authMenuList from "@/assets/json/authMenuList.json";
import authButtonList from "@/assets/json/authButtonList.json";
- 这俩就是引入的本地json文件。
-
import http from "@/api";这个导入的文件，就至关重要了，这是接口请求工作。
- 这个请求工具，我们已经配置过了，直接就可以用了。
/**
* @name 登录模块
*/
// 用户登录
export const loginApi = (params: Login.ReqLoginForm) => {
return http.post<Login.ResLogin>(PORT1 + `/login`, params, { loading: false }); // 正常 post json 请求 ==> application/json
};
- 如果你在开发中，想要新建
api方法，就直接复制它，稍做修改请求方式和传参接口，以及返回接口字段规范。就可以了。
-
*后面在切换真实接口的时候，在演示如何新建方法和和接口*。
下篇再讲对接真实登录接口，累了，想睡觉了。
网友评论