Vue3项目开发——新闻发布管理系统（五）
文章目录
- 七、登录&注册页面设计开发
-
- 4、后端接口调用
-
- 4.1 AXIOS请求工具封装
- 4.2 创建 axios 实例
-
- ①安装 axios
- ② 封装 axios 模块
- 4.3完成 axios 基本配置
- 5 实现 注册功能
-
- 5.1 创建接口调用js文件
- 5.2 页面中调用注册方法
- 6 实现 登录功能
-
- 6.1 创建接口调用js文件
- 6.2 页面中调用登录方法
- 6.3 登录成功后token值本地持久化
-
- 1) 安装插件 pinia-plugin-persistedstate
- 2) 使用 main.js
- 3) 配置 stores/user.js
- 4) 配置优化
-
- ①pinia 独立维护
- ②仓库 统一导出
- 7 注册和登录功能开发涉及相关文件源码
-
- 涉及的文件
- 后端接口调用相关文件
-
- `utils`目录下`request.js`文件：
- `api`目录下`user.js`文件
- 数据本地持久化相关文件
-
- `stores`目录下`index.js`文件
- `stores\modules`目录下`user.js`文件
- `main.js`文件源码
- Vue文件 源码
七、登录&注册页面设计开发
4、后端接口调用
接下来，我们要调用后端接口来完成登录和注册功能。
本项目使用axios来请求后端接口。为了方便各模块调用后端接口，就需要要进行axios的封装设计。
4.1 AXIOS请求工具封装
使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)
一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用
对axios的封装主要包括以下三个方面：
4.2 创建 axios 实例
①安装 axios
pnpm add axios