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-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代表启动的环境

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/229594.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

磁力计LIS2MDL开发(3)----九轴姿态解算

磁力计LIS2MDL开发(3)----九轴姿态解算

磁力计LIS2MDL开发.3--九轴姿态解算 概述视频教学样品申请完整代码下载使用硬件欧拉角万向节死锁四元数法姿态解算双环PI控制器偏航角陀螺仪解析代码 概述 LIS2MDL 包含三轴磁力计。 lsm6ds3trc包含三轴陀螺仪与三轴加速度计。 姿态有多种数学表示方式&#xff0c;常见的是四元…
阅读更多...
服务器RAID配置及功能介绍

服务器RAID配置及功能介绍

服务器RAID配置及功能介绍 一、RAID磁盘阵列详解1.RAID磁盘阵列介绍2.RAID 03.RAID14.RAID35.RAID56.RAID67.RAID 10总结阵列卡介绍 一、RAID磁盘阵列详解 1.RAID磁盘阵列介绍 ①是Redundant Array of lndependent Disks的缩写中文简称为独立冗余磁盘阵列。 ②把多块独立的物…
阅读更多...
NBA得分数据可视化

NBA得分数据可视化

简介 这是上学期的一些课外活动内容&#xff0c;将 NBA 得分数据进行可视化&#xff0c;并进行后续的探索性分析和建模&#xff08;本文未介绍&#xff09;。主要研究动机来源于这篇论文&#xff1a; 该论文使用二元的伽马过程来刻画 NBA 主客场得分数据&#xff0c;并且考虑了…
阅读更多...
5.5 Linux Apache服务

5.5 Linux Apache服务

1、概念介绍 a. Web 服务简介 WEB服务器也称为WWW(WORLD WIDE WEB&#xff0c;万维网)服务器&#xff0c;主要功能是提供网上信息浏览服务。 常用web服务器&#xff1a;httpd&#xff08;apache&#xff09;、nginx、tomcat、IIS 客户端&#xff1a;IE、firefox、chrome b…
阅读更多...
高通平台开发系列讲解（AI篇）SNPE工作流程介绍

高通平台开发系列讲解（AI篇）SNPE工作流程介绍

文章目录 一、转换网络模型二、量化2.1、选择量化或非量化模型2.2、使用离线TensorFlow或Caffe模型2.3、使用非量化DLC初始化SNPE2.4、使用量化DLC初始化SNPE三、准备输入数据四、运行加载网络沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇章主要介绍SNPE模型工作…
阅读更多...
学习Java第70天,过滤器Filter简介

学习Java第70天,过滤器Filter简介

过滤器概述 Filter,即过滤器,是JAVAEE技术规范之一,作用目标资源的请求进行过滤的一套技术规范,是Java Web项目中最为实用的技术之一 Filter接口定义了过滤器的开发规范,所有的过滤器都要实现该接口 Filter的工作位置是项目中所有目标资源之前,容器在创建HttpServletRequest和…
阅读更多...
【C++】POCO学习总结（十八）：XML

【C++】POCO学习总结（十八）：XML

【C】郭老二博文之&#xff1a;C目录 1、XML文件格式简介 1&#xff09;XML文件的开头一般都有个声明&#xff0c;声明是可选 <&#xff1f;xml version"1.0" encoding"UTF-8"?>2&#xff09;根元素&#xff1a;XML文件最外层的元素 3&#xff…
阅读更多...
java内置的数据结构

java内置的数据结构

Java语言提供了许多内置的数据结构&#xff0c;包括&#xff1a; 1. 数组&#xff08;Array&#xff09;&#xff1a;数组是最基本的数据结构之一&#xff0c;它是一个有序的元素集合&#xff0c;每个元素都有一个对应的索引。在Java中&#xff0c;数组可以通过声明和初始化来创…
阅读更多...
【从零开始学习--设计模式--策略模式】

【从零开始学习--设计模式--策略模式】

返回首页 前言 感谢各位同学的关注与支持&#xff0c;我会一直更新此专题&#xff0c;竭尽所能整理出更为详细的内容分享给大家&#xff0c;但碍于时间及精力有限&#xff0c;代码分享较少&#xff0c;后续会把所有代码示例整理到github&#xff0c;敬请期待。 此章节介绍策…
阅读更多...
每天五分钟计算机视觉：网络中的网络(NiN)

每天五分钟计算机视觉：网络中的网络(NiN)

本文重点 前面的课程中我们学习了众多的经典网络模型&#xff0c;比如LeNet、AlexNet、VGG等等&#xff0c;这些网络模型都有共同的特点。 它们的特点是&#xff1a;先由卷积层构成的模块充分提取空间特征&#xff0c;然后再由全连接层构成的模块来输出分类结果。也就是说它们…
阅读更多...
C练习题_3答案

C练习题_3答案

一、单项选择题（本大题共20小题，每小题2分，共40分。在每小题给出的四个备选项中,选出一个正确的答案，并将所选项前的字母填写在答题纸的相应位置上。 以下正确的C语言自定义标识符是(A)A. la B. 2a C. do D. a.12 2.在C语言中,错误的常数表示是(D) A. OL B. 0x6aL C. ‘6’…
阅读更多...
Apache SeaTunne简介

Apache SeaTunne简介

Apache SeaTunne简介 文章目录 1.Apache SeaTunne是什么&#xff1f;1.1[官网](https://seatunnel.apache.org/)1.2 项目地址 2.架构3.特性3.1 丰富且可扩展的连接器和插件机制3.2 支持分布式快照算法以确保数据一致性3.3 支持流、批数据处理&#xff0c;支持全量、增量和实时数…
阅读更多...
Linux_Docker图形化工具Portainer如何安装并结合内网穿透实现远程访问

Linux_Docker图形化工具Portainer如何安装并结合内网穿透实现远程访问

文章目录 前言1. 部署Portainer2. 本地访问Portainer3. Linux 安装cpolar4. 配置Portainer 公网访问地址5. 公网远程访问Portainer6. 固定Portainer公网地址 前言 本文主要介绍如何本地安装Portainer并结合内网穿透工具实现任意浏览器远程访问管理界面。Portainer 是一个轻量级…
阅读更多...
频谱论文：基于张量Tucker分解的频谱地图构建算法

频谱论文：基于张量Tucker分解的频谱地图构建算法

#频谱# [1]陈智博,胡景明,张邦宁 郭道省.(2023).基于张量Tucker分解的频谱地图构建算法.电子与信息学报(11),4161-4169. &#xff08;陆军工程大学&#xff09; 研究内容 将动态电磁环境的时变频谱地图建模为3维频谱张量&#xff0c;通过张量Tucker分解提取出具有物理意义的核…
阅读更多...
【MySQL】(DDL) 数据库操作

【MySQL】(DDL) 数据库操作

创建&#xff1a; create database 数据库名称; //创建数据库 create database if not exists 数据库名 ; //创建数据库并添加判断 &#xff08;如果存在就不创建不存在就创建 &#xff09; create database 数据库名 default charset 字符集 ; //创建数据库并设置字符集 查…
阅读更多...
CSRF(跨站脚本请求)

CSRF(跨站脚本请求)

一、漏洞原理 CSRF&#xff08;Cross-Site Request Forgery&#xff09;是一种网络安全攻击&#xff0c;攻击者通过欺骗用户在不知情的情况下发送请求&#xff0c;从而实现对目标网站的操作。 网站管理员(已经登录网站后台)——黑客构造的恶意服务器(是网站的创建用户请求)——…
阅读更多...
B01、JVM与Java体系结构-01

B01、JVM与Java体系结构-01

字节码与多语言混合编程 字节码概述&#xff1a; 我们平时说的java字节码&#xff0c;指的是用java语言编译成的字节码。准确的说任何能在jvm平台上执行的字节码格式都是一样的。所以应该统称为&#xff1a;jvm字节码。不同的编译器&#xff0c;可以编译出相同的字节码文件&…
阅读更多...
人工智能在金融与商业领域的智能化变革

人工智能在金融与商业领域的智能化变革

导言 随着人工智能技术的不断发展&#xff0c;金融和商业领域正迎来一场智能化的变革。随着人工智能的不断发展&#xff0c;其在金融和商业领域的应用正成为业界瞩目的焦点。本文将深入探讨人工智能在金融和商业应用中的关键技术、应用场景以及对未来的影响。 1. 关键技术与算…
阅读更多...
音频I2S

音频I2S

前言 基于网上资料对相关概念做整理汇总&#xff0c;部分内容引用自文后文章。 学习目标&#xff1a;简单了解相关概念、相关协议。 1 概述 数字音频接口DAI&#xff0c;即Digital Audio Interfaces&#xff0c;顾名思义&#xff0c;DAI表示在板级或板间传输数字音频信…
阅读更多...
AtCoder Beginner Contest 332 G. Not Too Many Balls(最大流转最小割 dp)

AtCoder Beginner Contest 332 G. Not Too Many Balls(最大流转最小割 dp)

题目 n(n<500)种球&#xff0c;第i种有ai(0<ai<1e12)个球&#xff0c; m(m<5e5)个盒子&#xff0c;第j个能放bj(0<bj<1e12)个球 特别地&#xff0c;第j个盒子最多能放i*j个第i种球 求m个盒子能放的最多的球的总数 思路来源 官方题解 题解 显然是一个最…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023