前后端联调测试第一个ts接口

This commit is contained in:
Guwan 2024-12-07 13:48:05 +08:00
parent 4d592db87e
commit 3b612cf022
4 changed files with 58 additions and 38 deletions

View File

@ -3,6 +3,7 @@ export interface ApiResponse<T = any> {
code: number
message: string
data: T
timestamp: number
}
// 分页请求参数接口
@ -18,4 +19,4 @@ export interface PageResult<T> {
total: number
page: number
pageSize: number
}
}

View File

@ -1,5 +1,5 @@
import request from '@/utils/request'
import type { ApiResponse, PageResult } from './types'
import type { ApiResponse, PageResult } from './common/types'
// 定义接口的请求参数类型
@ -58,6 +58,13 @@ export interface LoginParams {
verifyCode?: string
}
export interface RegisterParams {
phone: string
password: string
verifyCode?: string
}
// 定义后端返回的用户信息类型
export interface UserInfo {
id: number
@ -84,8 +91,18 @@ export interface UserQueryParams {
ageRange?: [number, number]
}
// 用户API接口
export const userApi = {
register(data: RegisterParams) {
return request.post<ApiResponse<{ token: string }>>('/auth/login', data)
},
// 手机号密码登录
login(data: LoginParams) {
return request.post<ApiResponse<{ token: string }>>('/auth/login', data)
@ -98,7 +115,7 @@ export const userApi = {
// 发送验证码
sendVerifyEmailCode(email: string) {
return request.post<ApiResponse<void>>('/user/getEmailCode', { email })
return request.post<ApiResponse>('/user/getEmailCode', { email })
},
// 获取当前登录用户信息

View File

@ -279,7 +279,6 @@ const sendEmailCode = async () => {
ElMessage.warning('请先输入邮箱')
return
}
console.log(111)
await userApi.sendVerifyEmailCode(emailForm.email)
ElMessage.success('验证码已发送')
startCooldown('email')

View File

@ -14,8 +14,8 @@
<h2>智慧养老平台</h2>
<p class="subtitle">创建新账号</p>
</div>
<el-form
<el-form
ref="registerFormRef"
:model="registerForm"
:rules="rules"
@ -23,7 +23,7 @@
class="animated-form"
>
<el-form-item label="姓名" prop="username">
<el-input
<el-input
v-model="registerForm.username"
class="custom-input"
>
@ -36,7 +36,7 @@
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
<el-input
v-model="registerForm.password"
type="password"
show-password
@ -49,9 +49,9 @@
</template>
</el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input
<el-input
v-model="registerForm.confirmPassword"
type="password"
show-password
@ -75,7 +75,7 @@
<el-icon><Phone /></el-icon>
<span>手机验证</span>
</div>
<el-form
:model="registerForm"
:rules="rules"
@ -83,7 +83,7 @@
>
<el-form-item label="手机号" prop="phone">
<div class="verify-code-input">
<el-input
<el-input
v-model="registerForm.phone"
placeholder="请输入手机号"
class="custom-input"
@ -94,8 +94,8 @@
</div>
</template>
</el-input>
<el-button
type="primary"
<el-button
type="primary"
:disabled="phoneCooldown > 0 || !registerForm.phone"
@click="sendPhoneCode"
>
@ -105,7 +105,7 @@
</el-form-item>
<el-form-item label="验证码" prop="phoneCode">
<el-input
<el-input
v-model="registerForm.phoneCode"
placeholder="请输入手机验证码"
class="custom-input"
@ -125,7 +125,7 @@
<el-icon><Message /></el-icon>
<span>邮箱验证</span>
</div>
<el-form
:model="registerForm"
:rules="rules"
@ -133,7 +133,7 @@
>
<el-form-item label="邮箱号" prop="email">
<div class="verify-code-input">
<el-input
<el-input
v-model="registerForm.email"
placeholder="请输入邮箱"
class="custom-input"
@ -144,8 +144,8 @@
</div>
</template>
</el-input>
<el-button
type="primary"
<el-button
type="primary"
:disabled="emailCooldown > 0 || !registerForm.email"
@click="sendEmailCode"
>
@ -155,7 +155,7 @@
</el-form-item>
<el-form-item label="验证码" prop="emailCode">
<el-input
<el-input
v-model="registerForm.emailCode"
placeholder="请输入邮箱验证码"
class="custom-input"
@ -172,16 +172,16 @@
</div>
</div>
<el-button
type="primary"
class="register-button"
<el-button
type="primary"
class="register-button"
:loading="loading"
@click="handleRegister"
>
<span class="button-text"> </span>
<el-icon class="button-icon"><Right /></el-icon>
</el-button>
<div class="login-link">
已有账号
<router-link to="/login" class="login-btn">立即登录</router-link>
@ -196,6 +196,7 @@ import { useRouter } from 'vue-router'
import { User, Lock, Phone, Message, Platform, Right, Key } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { userApi } from '@/api/user'
const router = useRouter()
const registerFormRef = ref<FormInstance>()
@ -259,17 +260,17 @@ const rules = {
const handleRegister = async () => {
if (!registerFormRef.value) return
await registerFormRef.value.validate(async (valid) => {
if (valid) {
loading.value = true
try {
//
// const response = await register(registerForm)
//
await new Promise(resolve => setTimeout(resolve, 1000))
ElMessage.success('注册成功')
router.push('/login')
} catch (error) {
@ -313,22 +314,24 @@ const sendPhoneCode = () => {
ElMessage.warning('请先输入手机号')
return
}
//
if (!/^1[3-9]\d{9}$/.test(registerForm.phone)) {
ElMessage.warning('请输入正确的手机号')
return
}
//
ElMessage.success('手机验证码已发送')
startPhoneCooldown()
}
//
const sendEmailCode = () => {
const sendEmailCode = async () => {
if (emailCooldown.value > 0 || !registerForm.email) return
//
const result = await userApi.sendVerifyEmailCode(registerForm.email)
console.log(result)
console.log(result.code)
ElMessage.success('邮箱验证码已发送')
startEmailCooldown()
}
@ -605,12 +608,12 @@ const sendEmailCode = () => {
width: 95%;
max-width: 500px;
}
.register-content {
flex-direction: column;
gap: 20px;
}
.basic-info {
padding-right: 0;
border-right: none;
@ -618,23 +621,23 @@ const sendEmailCode = () => {
padding-bottom: 20px;
flex: none;
}
.verify-info {
flex: none;
}
.verify-code-input {
flex-direction: column;
}
.verify-section .el-form-item:not(:first-child) .el-input {
width: 100%;
margin-left: 0;
}
.verify-code-input .el-button {
width: 100%;
margin-top: 10px;
}
}
</style>
</style>