基于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")
},
前端界面展示:
二、后续任务
心理对话页面的搭建,以及前端主页的搭建。