创新项目实训开发日志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('请检查表单信息');}
};

五、上传gitee

1.上传logo相关

2.上传认证相关

3.将web分支并入master分支