vue3组件的基本结构

<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-option
          v-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 += text
                    const 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>