基于RAG技术的心理健康大模型的开发及应用
本次任务为生成验证码、用户登录功能实现。
一、客户端登录前端页面编写
目的:登录界面为主页,用户打开界面,则会首先来到登录界面
功能实现:登录界面由账号,登录密码以及验证码、前往注册和忘记密码组成。当要注册一个新用户的时候,点击前往注册,转入注册页面,忘记密码则是使用邮箱找回密码。
前端页面编写
创建以下vue文件:
实现前端重点:
提交表单代码:
<el-form ref="loginForm" :model="form" :rules="rules" style="position: center" >
<el-form-item prop="username">
<el-input v-model="form.username" style="margin: 2px 0" placeholder="请输入账号" size="default" :prefix-icon="User"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="form.password" style="margin: 2px 0" show-password placeholder="请输入密码" size="default" :prefix-icon="Lock"></el-input>
</el-form-item>
<el-form-item prop="validCode">
<div style="display: flex">
<el-input v-model="form.validCode" style="width: 50%" placeholder="请输入验证码" :prefix-icon="FolderChecked"></el-input><!--form是提交到后台的数据,点登录就去验证他-->
<ValidCode @input="createValidCode"/><!--//组件里面向外提交的一个验证,用validCode接收-->
</div>
</el-form-item>
<el-form-item >
<el-button style="width: 100%" type="primary" @click=login>登录</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary"
link
@click="$router.push('/register')">前往注册 >>
</el-button>
<el-button type="warning"
link
@click=open>
忘记密码?
</el-button>
</el-form-item>
</el-form>
前端有表单组成:输入账号,输入密码以及验证码均为表单数据,绑定的都是data中的form,并且对这些数据进行前端的限制以及提示,使用rules进行对用户的提示,并且提示的方法是弹出。
valicode验证码的组件:
在表单数据中,验证码是引入了valicode验证码的组件,存储在component中,在valicode组件中,规定了组件的大小,以及点击验证码,就会进行点击触发刷新验证码的功能,(@click="refreshCode"),这个刷新方法中使用了创建新的二维码的方法,规定二维码生成长度,组成字符,以及组成字母的颜色,逐一生成二维码,并存储到data中的codeList中,之后就将生成的验证码,通过input提交到登录页面中。
valicode组件代码:
<template>
<div
class="ValidCode disabled-select"
:style="`width:${width}; height:${height}`"
@click="refreshCode"
>
<span
v-for="(item, index) in codeList"
:key="index"
:style="getStyle(item)"
>{{ item.code }}</span>
</div>
</template>
<script>
export default {
name: 'ValidCode',
model: {
prop: 'value',
event: 'input'
},
props: {
width: {
type: String,
default: '100px'
},
height: {
type: String,
default: '40px'
},
length: {
type: Number,
default: 4
},
refresh: {
type: Number
}
},
data () {
return {
codeList: []
}
},
watch: {
refresh () {
this.createdCode()
}
},
mounted () {
this.createdCode()
},
methods: {
refreshCode () {
this.createdCode()
},
createdCode () {
const len = this.length
const codeList = []
const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
const charsLen = chars.length
// 生成
for (let i = 0; i < len; i++) {
const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
codeList.push({
code: chars.charAt(Math.floor(Math.random() * charsLen)),
color: `rgb(${rgb})`,
fontSize: `${10 + (+[Math.floor(Math.random() * 10)] + 6)}px`,
padding: `${[Math.floor(Math.random() * 10)]}px`,
transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
})
}
// 指向
this.codeList = codeList
// 将当前数据派发出去
// console.log(codeList.map(item => item.code).join(''))
this.$emit('input', codeList.map(item => item.code).join(''))//现在用来生成地验证码,通过input提交到登录页面中
},
getStyle (data) {
return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
}
}
}
</script>
<style scoped>
.ValidCode{
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.ValidCode span{
display: inline-block;
}
</style>
这样Login.vue页面通过input获取到生成的验证码。
填写完表单数据之后,点击登录按钮,触发login方法。
首先验证验证码是否输入正确,若正确,则进一步将表单进行提交,若不正确,则进行return的退出方法。输入验证码正确,则将输入的表单数据传给后端,后端查询到有此用户,则返回登录成功的信息。并且同时缓存用户信息以及缓存用户角色,登录成功后,更新当前路由,跳转到登陆后的主页。
路由设置如下:
{
path: '/login',
name: 'Login',
component: () => import("@/views/Login")
},
前端界面展示:
二、客户端登录后端编写
首先编写一个login的实体类userDTO,表示前端传过来的表单数据。
之后写controller逻辑层的方法实现。
//登录
@ApiOperation("登录 输入用户名,密码")
@PostMapping("/login")
public Result login(@RequestBody UserDTO userDTO) {
//获取userDTO的属性
String username = userDTO.getUsername();
String password = userDTO.getPassword();
//之后进行查看是否为空白
if (StrUtil.isBlank(username) || StrUtil.isBlank(password)) {
return Result.error(Constants.CODE_400, "用户名或者密码为空");
}
UserDTO dto = userService.login(userDTO);
return Result.success(dto);
}
Service层login实现,这里是一个login接口:
public interface IUserService extends IService<User> {
UserDTO login(UserDTO userDTO);}
实现Service的login方法:首先将userDTO密码进行加密,并使用username、password在数据库中查找该用户,若查找到该用户,就设置token;若没有该用户名,则返回错误信息用户名或密码错误。
@Override
public UserDTO login(UserDTO userDTO) {
// 用户密码 md5加密
userDTO.setPassword(SecureUtil.md5(userDTO.getPassword()));
User one = getUserInfo(userDTO);
if (one != null) {
BeanUtil.copyProperties(one, userDTO, true);//把父类的属性拷贝到子类中
// 设置token
String token = TokenUtils.generateToken(one.getId().toString(), one.getPassword());
userDTO.setToken(token);
String role = one.getUsertype();
// 设置用户的菜单列表
List<Menu> roleMenus = getRoleMenus(role);
userDTO.setMenus(roleMenus);
return userDTO;
} else {
throw new ServiceException(Constants.CODE_600, "用户名或密码错误");
}
}
getUserInfo方法实现:在数据库查找该登录用户。
private User getUserInfo(UserDTO userDTO) {
//通过用户名,密码匹配用户
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("username", userDTO.getUsername());
queryWrapper.eq("password", userDTO.getPassword());
User one;
try {
one = getOne(queryWrapper); // IService的用法 从数据库查询用户信息
} catch (Exception e) {
LOG.error(e);//
throw new ServiceException(Constants.CODE_500, "系统错误");
}
return one;
}
二、数据库设计
数据库表展示