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