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
  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值