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 = truecountDown()}).catch(err=>{//如果产生异常，提示重新操作isSmsSend.value = falsesendBtnText.value = '点击发送验证码'})
}
</script>

data.timeout和data.sms_code去system/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)👆
})