Vue3项目开发——新闻发布管理系统(五)

news2024/12/23 11:09:53

文章目录

  • 七、登录&注册页面设计开发
    • 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2099497.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VirtualBox 中 Ubuntu 系统在桥连模式下网络适配器启动过慢或连接失败

一个(无线或有线)网卡同时为虚拟机和电脑提供网络。 一、技术基础 网络桥接技术: 网卡可以通过桥接模式与虚拟机的网络接口进行连接。在这种模式下,网卡会创建一个虚拟的网桥,将虚拟机的网络接口与物理网络接口&…

基础闯关5

一、XTuner简介 XTuner 是一个高效、灵活、全能的轻量化大模型微调工具库。 高效 支持大语言模型 LLM、多模态图文模型 VLM 的预训练及轻量级微调。XTuner 支持在 8GB 显存下微调 7B 模型,同时也支持多节点跨设备微调更大尺度模型(70B)。自…

视频编码标准化组织介绍

ITU ITU,即International Telecommunication Union,国际电信联盟,是一个专门负责信息通信技术(Information and Communication Technologies,ICT)领域的联合国机构。它成立于1865年,最初是为了协…

彻底改变计算机视觉的 Vision Transformer (ViT) 综合指南(视觉转换器终极指南)

欢迎来到雲闪世界。大家好!对于那些还不认识我的人,我叫 Francois,我是 Meta 的研究科学家。我热衷于解释先进的 AI 概念并使其更容易理解。 今天,让我们深入探讨计算机视觉领域最重要的贡献之一:Vision Transformer&…

Debezium+Kafka:Oracle 11g 数据实时同步至 DolphinDB 运维手册

目前我们已经支持基于开源技术 Debezium Kafka,从 Mysql 和 Oracle 11g 实时同步数据到 DolphinDB 中。由于当前方案涉及到四个程序的部署,而且具体的 Source 同步任务和 Sink 同步任务还需要额外管理,在运维上具有一定难度。 本文将基于 O…

分类预测|基于鲸鱼优化WOA最小二乘支持向量机LSSVM的数据分类预测Matlab程序WOA-LSSVM 多特征输入多类别输出

分类预测|基于鲸鱼优化WOA最小二乘支持向量机LSSVM的数据分类预测Matlab程序WOA-LSSVM 多特征输入多类别输出 文章目录 一、基本原理1. 最小二乘支持向量机(LSSVM)LSSVM的基本步骤: 2. 鲸鱼优化算法(WOA)WOA的基本步骤…

安装 rocky9.4

涉及软件:virtualbox、rocky linux 9.4、mobaxterm virtualbox新建虚拟机,设置虚拟机配置 启动虚拟机,第一次会提示挂载虚拟光盘,选择下载的rocky linux 9.4。 选择第一项,安装rocky linux 9.4 进入安装设置&#…

echarts graphChart关系图简单逻辑实现

ECharts 的 graph 图表类型非常适合用来展示节点之间的关系,比如社交网络分析、系统架构图等。下面是一个简单的关系图功能,用来展示疾病与一些因素的关联关系。 1、数据之间的关系 首先,你需要准备数据来表示节点(nodes&#…

C ++初阶:类和对象(中)

目录 🌞0.前言 🚈1. 类的6个默认成员函数 🚈2. 构造函数 🚝2.1 概念 🚝2.2特性 🚝2.3编译器默认生成的构造函数。 ✈️补充1: ✈️补充2:开空间问题 🚈3. 析构函…

C++相关概念和易错语法(30)(异常、智能指针)

1.异常 在C语言这样的面向过程编程的语言来说,处理错误一般有两种方式:终止程序,如assert;返回错误码,比如打开文件失败,errno就会改变,perror就会打印错误码对应的错误信息 在面向对象的语言…

云原生存储Rook部署Ceph

Rook 是一款云原生存储编排服务工具,Ceph 是一种广泛使用的开源分布式存储方案,通过Rook 可以大大简化 ceph 在 Kubernetes 集群中的部署和维护工作。 Rook 由云原生计算基金会( CNCF )孵化,且于 2020 年 10 月正式进入毕业阶段。Roo…

【python因果推断库3】使用 CausalPy 进行贝叶斯geolift 分析

目录 导入数据 丹麦的销售额是否有地理提升(GeoLift)? 结果 本笔记本介绍如何使用 CausalPy 的贝叶斯{术语}合成控制功能来评估“地理提升”(GeoLift)。我们的假设情景如下: 你是一家在欧洲运营的公司的…

集成电路学习:什么是ISP系统编程

一、ISP:系统编程 ISP(In-System Programming)即系统编程,是一种在系统内部进行的编程方法,主要用于对闪存(FLASH)、EEPROM等非易失性存储器的编程。ISP编程提供了巨大的灵活性,允许…

SaaS用户增长:提升转化率的实践路径

在SaaS(软件即服务)行业这片竞争激烈的蓝海中,企业要实现稳健的用户增长,必须聚焦于优化用户获取与转化策略,以提升用户转化率。用户转化率,作为衡量SaaS产品市场吸引力和用户接纳度的核心指标,…

图文解析保姆级教程: IDEA里面创建SpringBoot工程、SpringBoot项目的运行和测试、实现浏览器返回字符串

文章目录 一、创建SpringBoot工程(需要联网)二、 定义请求处理类三、运行测试 此教程摘选自我的笔记:黑马JavaWeb开发笔记13——Springboot入门(创建、运行&测试项目)、Http协议(请求&响应协议&…

Unity实战案例 2D小游戏HappyGlass(模拟水珠)

本案例素材和教程都来自Siki学院,十分感谢教程中的老师 本文仅作学习笔记分享交流,不作任何商业用途 预制体 在这个小案例中,水可以做成圆形但是带碰撞体,碰撞体比图形小一圈,顺便加上Trail renderer组件 材质 将碰撞…

SVN介绍和使用

一、SVN(Subversion) SVN 是一种版本控制系统,可以用于管理和控制文件的变更。以下是SVN的基本使用步骤: 安装SVN:首先,您需要在计算机上安装SVN客户端。您可以从Subversion官方网站下载安装程序&#xff…

sql-labs61-65关通关攻略

第61关 一:查看数据库 ?id1)) and updatexml(1,concat(1,(select database())),1)-- 二:查看表名 ?id1)) and updatexml(1,concat(1,(select group_concat(table_name) from information_schema.tables where table_schemasecurity)),1)-- 三&#…

MATLAB/Simulink 汽车ABS仿真模型 防抱死刹车 教程 资料 程序 模型 论文 视频

项目概述 防抱死制动系统(ABS)是现代车辆中的一项重要安全技术,它能够在紧急制动时防止车轮锁死,从而提高车辆的稳定性和操控性。本项目旨在使用MATLAB/Simulink建立一个完整的ABS仿真模型,帮助学习者理解ABS的工作原理…

WebRTC协议下的视频汇聚融合技术:EasyCVR构建高效视频交互体验

视频汇聚融合技术是指将来自不同源、不同格式、不同网络环境的视频流进行集中处理、整合和展示的技术。随着视频监控、远程会议、在线教育、直播娱乐等领域的快速发展,视频数据的规模急剧增长,对视频处理能力和效率提出了更高要求。视频汇聚融合技术通过…