一、开发简介
核心工作内容：logo实现、注册实现、登录实现、上传gitee
工作时间：第十周
二、logo实现
1.设计logo
2.添加logo
const logoUrl = new URL('@/assets/images/logo.png', import.meta.url).href<div class="aside-first">
<el-image :src="logoUrl" :fit="'scale-down'" />
</div>.aside-first {
@include hold(100, 10);
@include position-center-box("row,column");
}三、注册实现
1.配置后端
- 下载后端代码
- 配置MySql数据库
- 利用Postman测试后端功能
2.页面开发
<!--注册抽屉-->
<el-drawer v-model="drawer" :direction="direction">
<el-form ref="registerForm" :model="registerData" :rules="registerRules" label-width="80px">
<el-form-item label="手机号" prop="phone">
<el-input v-model="registerData.phone" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="registerData.password" placeholder="请输入密码" show-password />
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="registerData.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resister">注册</el-button>
<el-button @click="drawer = false">取消</el-button>
</el-form-item>
</el-form>
</el-drawer>3.定义API
/**
* @description: 用于用户的注册
* @return {Promise<>} - 返回Promise
*/
export const registerService = (conditions) => {
return request.post('/auth/register', conditions, {
headers: {
'Content-Type': 'application/json'
}
});
}4.事件处理
//注册——抽屉显示
const drawer = ref(false)
//注册——抽屉方向
const direction = ref("rtl")
//注册——表单
const registerForm = ref(null)
//注册——数据
const registerData = ref({
phone: '',
password: '',
name: ''
})
//校验规则——注册
const registerRules = {
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
}
/**
* @description: 用于用户的注册
* @return {Promise<>} - 提示操作的结果
*/
const register = async () => {
// 先验证表单
const valid = await registerForm.value.validate();
if (valid) {
try {
// 调用注册服务
const result = await registerService(registerData.value);
// 成功后提示
ElMessage.success('注册成功');
} catch (error) {
// 捕获并处理可能的错误
console.error('注册过程中出现错误:', error);
// ElMessage.error('注册失败，请稍后再试');
}
} else {
// 如果验证失败，提示用户检查表单信息
ElMessage.error('请检查表单信息');
}
};
四、登录实现
1.页面开发
<template>
<div id="background">
<el-row id="login">
<!--左表格-->
<el-col :span="9" id="left">
<div id="avatar">
<el-avatar :size="150" :src="circleUrl" fit="cover"/>
</div>
<el-text id="WELCOME">WELCOME</el-text>
</el-col>
<!--右表格-->
<el-col :span="15" id="right">
<el-form ref="loginForm" size="large" autocomplete="off" :model="loginData" :rules="loginRules">
<!--手机号-->
<el-form-item prop="phone" id="inputPhone">
<!-- <el-input :prefix-icon="User" placeholder="请输入手机号" v-model="registerData.phone" class="rounded-input" input-styles="border-radius: 15px;">
</el-input> -->
<input class="rounded-input" placeholder=" 手机号:" v-model="loginData.phone">
</el-form-item>
<!--密码-->
<el-form-item prop="password" id="inputPassword">
<!-- <el-input name="password" type="password" :prefix-icon="Lock" placeholder="请输入密码"
v-model="registerData.password"></el-input> -->
<input type="password" class="rounded-input" placeholder=" 密 码:" v-model="loginData.password">
</el-form-item>
<!--功能区块-->
<el-form-item class="flex">
<div class="flex">
<button class="registerButton" type="button" @click="drawer = true">
注册账号
</button>
<el-link :underline="false" style="color: #FFFFFF;">重置密码？</el-link>
</div>
</el-form-item>
<!-- 登录按钮 -->
<el-form-item id="loginButton">
<el-button id="button1" @click="login">立 即 登 录</el-button>
</el-form-item>
</el-form>
</el-col>
<!--注册抽屉-->
<el-drawer v-model="drawer" :direction="direction">
<el-form ref="registerForm" :model="registerData" :rules="registerRules" label-width="80px">
<el-form-item label="手机号" prop="phone">
<el-input v-model="registerData.phone" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="registerData.password" placeholder="请输入密码" show-password />
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="registerData.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">注册</el-button>
<el-button @click="drawer = false">取消</el-button>
</el-form-item>
</el-form>
</el-drawer>
</el-row>
</div>
</template>2.定义API
/**
* @description: 用于用户的登录
* @return {Promise<>} - 返回Promise
*/
export const loginService = (conditions) => {
return request.post('/auth/login', conditions, {
headers: {
'Content-Type': 'application/json'
}
});
}3.事件处理
/**
* @description: 用于用户的登录
* @return {Promise<>} - 提示操作的结果
*/
const login = async () => {
// 先验证表单
const valid = await loginForm.value.validate();
if (valid) {
try {
// 调用登录服务
const result = await loginService(registerData.value);
console.log(result)
// 成功后提示
tokenStore.setToken(result.data);
router.push('/home')
ElMessage.success('登录成功');
} catch (error) {
// 捕获并处理可能的错误
console.error('登录过程中出现错误:', error);
// ElMessage.error('登录失败，请稍后再试');
}
} else {
// 如果验证失败，提示用户检查表单信息
ElMessage.error('请检查表单信息');
}
};