创新项目实训开发日志4
一、开发简介
核心工作内容：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('请检查表单信息');}
};