Vue全栈开发旅游网项目(11)-用户管理前端接口联调

联调基本步骤

1.阅读接口文档 2.配置接口地址 3.使用axios获取数据 4.将数据设置到模型层

1.发送验证码联调

1.1 配置接口地址

文件地址:src\utils\apis.js

//系统相关的接口
const SystemApis = {
    sliderListUrl:apiHost+"/system/slider/list/",
    //发送验证码
    sendSmsCodeUrl:apiHost+"/system/send/sms/"
}

1.2 使用axios获取数据

文件地址:src\components\common\SendSmsCode.vue

<script setup>
//导入异步提交工具
import { ajax } from '@/utils/ajax';
//导入接口地址列表
import { SystemApis } from "@/utils/apis"
//导入提示框组件
import { showToast } from 'vant';

//发送验证码
const sendSmsCode = () => {
    //判断手机号是否输入
    if (!props.phoneNum) {
        showToast('请输入手机号码')
        return false
    }
    //调用接口,发送短息
    ajax.post(SystemApis.sendSmsCodeUrl,{
        phone_num:props.phoneNum
    }).then(({data})=>{  
        //提示验证码已经发送
        let message = `验证码为:${data.sms_code},${data.timeout/60}分钟内有效`
        showToast(message)
        //开始倒计时
        isSmsSend.value = true
        countDown()
      }).catch(err=>{
        //如果产生异常,提示重新操作
        isSmsSend.value = false
        sendBtnText.value = '点击发送验证码'
      })
}
</script>

data.timeoutdata.sms_codesystem/forms.py中调节格式:

1.3 代码效果展示

 

2.用户注册接口联调

2.1 配置接口地址

文件地址:src\utils\apis.js

//用户相关的接口
const AccountApis={
    //用户注册
    registerUrl:apiHost+'/accounts/user/api/register/'
}
//对外暴露
export{
    AccountApis
}

2.2 使用axios获取数据

文件地址:src\views\accounts\Register.vue

<script setup>
//导入异步提交工具
import { ajax } from '@/utils/ajax';
//导入接口地址列表
import { AccountApis } from '@/utils/apis';
//导入提示框组件
import { showToast } from 'vant';

const onSubmit = () => {
    // 提交表单
    // 1.调用接口
    ajax.post(AccountApis.registerUrl,{
        username:form.value.username,
        password:form.value.password,
        sms_code:form.value.sms_code,
        nickname:form.value.nickname
    }).then((data)=>{
        // 2.提示用户
        showToast('注册成功')
        // 3.跳转到个人中心页面
        router.push({name:'Mine'})
    })
}
</script>

2.3 输入错误信息提示

由于格式原因,避免一一调试,

账号被占用的400提示,选择用弹窗的提示模式弹出。

文件地址:src\utils\ajax.js

//响应拦截器
ajax.interceptors.response.use((reqs)=>{
    return reqs
},(err)=>{
    if(err.response.status==401){
        window.alert('未登录,即将跳转到登陆页面')
    }
    👇
    if(err.response.status==400){
        window.alert('手机号码被占用')
    }
    return Promise.reject(err)
    👆
})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【相关分析方法】MATLAB计算滑动时滞相关系数

【相关分析方法】MATLAB计算滑动时滞相关系数 1 滑动时滞相关系数2 MATLAB代码2.1 函数代码2.2 案例参考滑动时滞相关系数(Moving Time-Lagged Cross-Correlation, TLCC) 是一种常用于分析两个时间序列之间的滞后关系的工具。它可以帮助我们确定一个时间序列相对于另一个时间…

llama-cpp模型轻量化部署与量化

一、定义 定义配置环境遇到的问题&#xff0c;交互模式下模型一直输出&#xff0c;不会停止模型量化Qwen1.5-7B 案例demo 二、实现 定义 主要应用与cpu 上的部署框架。由c完成。配置环境 https://github.com/ggerganov/llama.cpp https://github.com/echonoshy/cgft-llm/blo…

MySQl基础----Linux下数据库的密码和数据库的存储引擎(内附 实操图和手绘图 简单易懂)

绪论​ 涓滴之水可磨损大石&#xff0c;不是由于他力量强大&#xff0c;而是由于昼夜不舍地滴坠。 只有勤奋不懈地努力&#xff0c;才能够获得那些技巧。 ——贝多芬。新开MySQL篇章&#xff0c;本章非常基础&#xff0c;但同时需要一定的Linux基础&#xff0c;所以假若你没学习…

Qwen2-VL:发票数据提取、视频聊天和使用 PDF 的多模态 RAG 的实践指南

概述 随着人工智能技术的迅猛发展&#xff0c;多模态模型在各类应用场景中展现出强大的潜力和广泛的适用性。Qwen2-VL 作为最新一代的多模态大模型&#xff0c;融合了视觉与语言处理能力&#xff0c;旨在提升复杂任务的执行效率和准确性。本指南聚焦于 Qwen2-VL 在三个关键领域…

科技资讯|Matter 1.4 标准正式发布,低功耗蓝牙助力其发展

连接标准联盟&#xff08;CSA&#xff09;宣布推出最新的 Matter 1.4 版本&#xff0c;引入了一系列新的设备类型和功能增强&#xff0c;有望提高包括 HomeKit 在内的智能家居生态系统之间的互操作性。 设备供应商和平台能够依靠增强的多管理员功能改善多生态系统下的用户体验&…

群控系统服务端开发模式-应用开发-前端登录页面开发

一、清理不必要的文件 1、删除auth-redirect.vue a、在根目录src文件夹下views文件夹下找到登录文件夹login&#xff0c;在login文件夹中删除auth-redirect.vue文件。 b、在根目录mock文件夹下role文件夹中的routes.js文件中&#xff0c;删除下面的代码 {path: /auth-redirect…

深入理解接口测试:实用指南与最佳实践5.0(三)

✨博客主页&#xff1a; https://blog.csdn.net/m0_63815035?typeblog &#x1f497;《博客内容》&#xff1a;.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 &#x1f4e2;博客专栏&#xff1a; https://blog.csdn.net/m0_63815035/cat…

mongoDB的安装及使用

mongodb的安装参考&#xff1a; Centos系统中mongodb的安装详解_centos安装mongodb-CSDN博客 不要下载最新的版本&#xff0c;新的版本中mongo命令无法使用&#xff0c;也就是安装后不能通过mongo命令登录&#xff0c;我这里使用5.0.30版本&#xff1b; mongodb客户端demo: …

vue3面试题1|[2024-11-12]

问题1&#xff1a;vue2与vue3的区别 1.vue2 和 vue3 双向绑定 方法不同 vue2&#xff1a;Object.defineProperty() ***使用这种方法&#xff0c;对于后添加的属性是劫持不到的&#xff0c;所以就会出现数据更新了&#xff0c; 但是视图没有更新&#xff0c;所以vue2就需要使用$…

python-24-一篇文章彻底掌握Python HTTP库Requests

python-24-一篇文章彻底掌握Python HTTP库Requests 一.简介 在 Python 中&#xff0c;Requests 是一个非常流行且易于使用的 Python HTTP 库&#xff0c;专门用于发送 HTTP/HTTPS 请求&#xff0c;获取请求响应&#xff1b; 可能觉得HTTP请求不是应该前端去做么&#xff1f;…

打造移动友好网站:UI设计的自适应技巧

随着移动互联网的快速发展&#xff0c;手机已成为人们获取信息的主要渠道之一。对于UI设计师而言&#xff0c;打造一个能够自适应手机屏幕的网站变得尤为重要。这不仅能够提升用户体验&#xff0c;还能在搜索引擎优化&#xff08;SEO&#xff09;中占据优势。以下是实现UI设计网…

Python →爬虫实践

爬取研究中心的书目 现在&#xff0c;想要把如下网站中的书目信息爬取出来。 案例一 耶鲁 Publications | Yale Law School 分析网页&#xff0c;如下图所示&#xff0c;需要爬取的页面&#xff0c;标签信息是“<p>”&#xff0c;所以用 itemssoup.find_all("p&…

STM32问题集

这里写目录标题 一、烧录1、 Can not connect to target!【ST-LINK烧录】 一、烧录 1、 Can not connect to target!【ST-LINK烧录】 烧录突然 If the target is in low power mode, please enable “Debug in Low Power mode” option from Target->settings menu 然后就&…

正点原子IMX6ULL--嵌入式Linux开发板学习中常用命令和笔记记录

学习路线图 传驱动文件 sudo cp chrdevbase.ko chrdevbaseApp /home/txj/linux/nfs/rootfs/lib/modules/4.1.15/ -f bootcmd setenv bootcmd tftp 80800000 zImage;tftp 83000000 imx6ull-alientek-emmc.dtb;bootz 80800000 - 83000000 setenv bootcmd tftp 80800000 zImag…

29.电影院售票系统(基于springboot和vue的Java项目)

目录 1.系统的受众说明 2 论文背景 2.1 国内研究现状&#xff1a; 2.2 国外研究现状&#xff1a; ​​​​​​​2.3 所用技术 3 系统需求分析 ​​​​​​​3.1 需求分析 ​​​​​​​3.2 可行性分析 3.2.1技术可行性分析 3.2.2市场可行性分析 3.2.3经济可…

(一)<江科大STM32>——软件环境搭建+新建工程步骤

一、软件环境搭建 &#xff08;1&#xff09;安装 Keil5 MDK 文件路径&#xff1a;江科大stm32入门教程资料/Keil5 MDK/MDK524a.EXE&#xff0c;安装即可&#xff0c;路径不能有中文。 &#xff08;2&#xff09;安装器件支持包 文件路径&#xff1a;江科大stm32入门教程资料…

热点更新场景,OceanBase如何实现性能优化

案例背景 这个案例来自一个保险行业的客户&#xff1a;他们的核心系统底层采用了OceanBase数据库作为存储解决方案&#xff0c;然而&#xff0c;在系统上线运行后&#xff0c;出现了一个异常情况&#xff0c;执行简单的主键更新语句时SQL执行时间出现了显著的波动。为了迅速定…

从0开始学习机器学习--Day24--核函数

核函数(Kernelsl function) 非线性数据的决策边界 对于非线性问题来说&#xff0c;决策边界在很多时候都是曲线&#xff0c;需要我们在假设函数中加入高阶多项式来拟合原始数据&#xff0c;这对于算法来说需要很长的运行时间去计算这些高阶多项式&#xff0c;那么有没有更高效…

Unity学习笔记(4):人物和基本组件

文章目录 前言开发环境新增角色添加组件RigidBody 2D全局项目设置Edit 给地图添加碰撞体 总结 前言 今天不加班&#xff0c;有空闲时间。争取一天学一课&#xff0c;养成习惯 开发环境 Unity 6windows 11vs studio 2022Unity2022.2 最新教程《勇士传说》入门到进阶&#xff…

【C++】字符串相乘

1.题目 2.代码 介绍一种比较简单的方法&#xff0c;就是先将字符串逆序&#xff0c;然后取出其中每一位的数相乘、相加。最后再考虑进位问题。 class Solution { public:string multiply(string num1, string num2) {//先排除边界情况&#xff0c;防止输出"00000...&quo…