<template><div class="login_wrap"><div class="form_wrap">
<!--            账号输入-->
<el-form ref="formRef"  :model="user"  class="demo-dynamic" >
<!--prop要跟属性名称对应--><el-form-item prop="id"    :rules="[ { required: true, message: '账号不能为空', trigger: 'blur',}, ]"><el-input style="height: 50px;font-size: 30px" v-model="user.id" ><template #prepend>账号</template></el-input></el-form-item>
<!--密码输入--><el-form-item prop="password"  class="password-input"  :rules="[ { required: true, message: '密码不能为空', trigger: 'blur',}, ]"><el-input type="password" style="height: 50px;font-size: 30px" v-model="user.password" ><template #prepend>密码</template></el-input></el-form-item>
<!--    验证码--><el-form-item prop="identifyingcode.inputverificationcodenumber" :rules="[ { required: true, message: '验证码不能为空', trigger: 'blur',}, ]"><el-input style="height: 50px;font-size: 30px"  v-model="user.identifyingcode.inputverificationcodenumber" ><template #prepend>验证码</template></el-input></el-form-item><el-form-item><div style="font-size: 30px"> 用户角色:</div><el-select v-model="user.role"><el-optionv-for="item in option.role":key="item":label="item":value="item"/></el-select></el-form-item><canvas class='code' ref="codeimg"  @click="codetrigger"></canvas></el-form><el-button type="primary"  style="width: 100px;height: 40px" @click='lgintrigger' class="login-btn">登录</el-button></div></div><div class="information">作者:甘世涛<br/>版权所有  违者必究<br/>前端框架:vue <br/>    后端框架springboot</div>
</template><script>import {useRouter} from "vue-router";import {useStore} from "vuex";import {get,post} from "@/util/service";import { reactive, onMounted, ref, toRefs } from 'vue'import { ElMessage} from 'element-plus'export default {setup(){   const router=useRouter()const store=useStore()const codeimg = ref(null)//获取div对象 ref属性为codeimg的对象  这个对象是验证码let userrole=""const data = reactive ({option:{role:['管理员','教师','学生']},user:{//用户id:"",//用户账号password:"",//用户密码role:"",//用户角色identifyingcode: {//验证码pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', // 随机生成A-F 1-9的验证码// pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', // 字符串width: 360,height: 200,verificationcodenumber: "",/*随机生成的验证码*/inputverificationcodenumber:""/*键盘输入的验证码*/}},shishi:"",})onMounted(() => {//初始化函数data.user.identifyingcode.verificationcodenumber = draw() // 初始化绘制图片验证码})const codetrigger = () => {data.user.identifyingcode.verificationcodenumber = draw()  // 点击图片重新绘制}// 随机数const randomNum = (min, max) => {return parseInt(Math.random() * (max - min) + min)}const randomColor = (min, max) => { // 随机颜色const r = randomNum(min, max)const g = randomNum(min, max)const b = randomNum(min, max)return `rgb(${r},${g},${b})`}const draw = () => {// 绘制图片const ctx = codeimg.value.getContext('2d')// 3.填充背景颜色，背景颜色要浅一点ctx.fillStyle = randomColor(180, 230) // 填充颜色颜色不要太深ctx.fillRect(0, 0, data.user.identifyingcode.width, data.user.identifyingcode.height)// 填充的位置let verificationcodenumber = ''//存储四个验证码for (let i = 0; i < 4; i++) {               // 4.随机产生字符串，并且随机旋转const text = data.user.identifyingcode.pool[randomNum(0, data.user.identifyingcode.pool.length)]  // 随机的四个字verificationcodenumber += textconst fontSize = randomNum(100, 200) // 随机的字体大小const deg = randomNum(-30, 30) // 字体随机的旋转角度ctx.font = fontSize + 'px SimSun'//宋体ctx.textBaseline = 'top'ctx.fillStyle = randomColor(80, 150)/* 用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。*/ctx.save()ctx.translate(60 * i + 15, 15)//平移ctx.rotate((deg * Math.PI) / 180)//旋转ctx.fillText(text, -15 + 5, -15)//填充文本ctx.restore()}// 5.随机产生5条干扰线,干扰线的颜色要浅一点for (let i = 0; i < 5; i++) {ctx.beginPath()ctx.moveTo(randomNum(0, data.user.identifyingcode.width), randomNum(0, data.user.identifyingcode.height))ctx.lineTo(randomNum(0, data.user.identifyingcode.width), randomNum(0, data.user.identifyingcode.height))ctx.strokeStyle = randomColor(180, 230)ctx.closePath()ctx.stroke()}// 6.随机产生40个干扰的小点for (let i = 0; i < 40; i++) {ctx.beginPath()ctx.arc(randomNum(0, data.user.identifyingcode.width), randomNum(0, data.user.identifyingcode.height), 1, 0, 2 * Math.PI)ctx.closePath()ctx.fillStyle = randomColor(150, 200)ctx.fill()}return verificationcodenumber}onMounted( async () => {})const lgintrigger=async () => {if (data.user.role === "" && data.user.accountnumber === "" || data.user.password === "" || data.user.identifyingcode.inputverificationcodenumber === "") {ElMessage.error("输入信息不能为空")return}if (data.user.identifyingcode.inputverificationcodenumber !== data.user.identifyingcode.verificationcodenumber) {ElMessage.error("验证码不正确")return}let flag;localStorage.setItem('userrole', data.user.role)//当前用户角色localStorage.setItem('id', data.user.id)//当前用户角色var formdata = new FormData()formdata.append("id", data.user.id)formdata.append("password", data.user.password)if (data.user.role === "管理员") {await  post("/admin/login", formdata).then(res => {if (res) {localStorage.setItem('userrole', data.user.role)//当前用户角色router.push('/home')} else {alert("不存在该账号和密码")}})} else if (data.user.role === "教师") {await post("/teacher/login", formdata).then(res => {if (res) {localStorage.setItem('id', data.user.id)//当前用户编号localStorage.setItem('userrole', data.user.role)//当前用户角色router.push('/home')} else {alert("不存在该账号和密码")}})} else {await post("/student/login", formdata).then(res => {if (res) {localStorage.setItem('id', data.user.id)//当前用户编号localStorage.setItem('userrole', data.user.role)//当前用户角色router.push('/home')} else {alert("不存在该账号和密码")}})}}return{...toRefs(data),lgintrigger,codeimg,codetrigger}//}}</script><style scoped>
.login_wrap{width: 100%;height: 80vh;background: rgb(0,186,255,100);background-image: url("../assets/shouye.png");/*position: relative;*/
}.information{width: 100%;height: 80vh;background: rgb(0,100,255,100);font-size: 30px;text-align: center;
}
/*这个是包括登录还有验证码一系列的框*/
.form_wrap{width: 500px;height: 380px;position: fixed;top:50%;left: 50%;transform: translate(-50%,-50%);background: #fff;padding:10px 10px;/*子组件内部变距*/border-radius: 5px;border-radius: 7%;}
.form_wrap button{}
.form_wrap el-input{height: 900px;
}
/*这个是登录按钮*/
.login-btn
{ position: fixed;display: block;margin: 0px auto;top:80%;left:40%;
}/*这个是角色选择 角色的名称  有三种  admin student teacher*/
#rolename
{position: fixed;top:4%;left: 10%;}/*}*/
/*鼠标移动到验证码显示一个手*/
.code {cursor: pointer;width: 160px;height: 50px;
}
</style>

vue3启动

dev代表启动的环境