登录注册实现
一、前端页面注册到Vue
1.创建登录和注册组件
<template><div>login</div></template><script>
export default {name: 'HomeView',data() {return {}},methods: {},
}
</script>
<template><div>register</div></template><script>
export default {name: 'Register',data() {return {}},methods: {},
}
</script>
2.组件路由注册
在router/index.js文件中注册 登录和注册的vue组件路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'Login',component: Login},{path: '/register',name: 'Register',component: Register},{path: '/home',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')}
]const router = new VueRouter({routes
})export default router
二、Login页面编写
<template><body id="poster"><el-form class="login-container" label-position="left" label-width="0px"><h2 class="login_title">系统登录</h2><el-form-item label=""><el-input type="text" v-model="loginFrom.loginName" placeholder="账号"></el-input></el-form-item><el-form-item label=""><el-input type="password" v-model="loginFrom.password" placeholder="密码"></el-input></el-form-item><el-form-item><el-button type="primary" style="width: 100%;background:#505458;border:none" @click="login">登录</el-button>没有账号？<el-button @click="toRegister" style="margin-top: 5px">点我注册</el-button></el-form-item></el-form></body></template><script>
export default {name: 'HomeView',data() {return {loginFrom: {name: '',loginName:'',password:''}}},methods: {login() {console.log('submit!',this.loginFrom);this.axios.post('http://localhost:3333/user/login',this.loginFrom).then((resp)=>{let data = resp.data;if(data.success){this.loginFrom = {},this.$message({message: '登录成功',type: 'success'});this.$router.push({path:'/home'})}})this.$router.push({path:'/home'})},toRegister(){//Vue跳转this.$router.push({path:'/register'})}},
}
</script><style>#poster{background-position: center;height: 100%;width: 100%;background-size: cover;position: fixed;
}
body{margin: 0px;padding: 0px;
}
.login-container{border-radius: 15px;background-clip: padding-box;margin:150px auto;padding: 35px 35px 15px 35px;width: 600px;height: 290px;background:#fff;border:1px solid #eaeaea;box-shadow:0 0 1000px #cac6c6;
}
.login_title{margin:0px auto 30px auto;text-align: center;color:#505458
}</style>
三、Register页面编写
<template><div id="poster"><el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px" class="register-container"><h2 class="register_title" style="display:inline;">系统登录</h2><el-button style="margin:0px 0px 10px 10px" @click="toLogin">去登录</el-button><el-form-item label="账号" prop="account"><el-input v-model="ruleForm.account" placeholder="请输入账号" autocomplete="off" prefix-icon="el-icon-user-solid"></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input type="text" v-model="ruleForm.name" placeholder="请输入姓名" autocomplete="off" prefix-icon="el-icon-user"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="ruleForm.sex" placeholder="性别" style="right: 140px"><el-option label="男" value="男"></el-option><el-option label="女" value="女"></el-option></el-select></el-form-item><el-form-item label="电话" prop="phone"><el-input v-model="ruleForm.phone" placeholder="请输入电话号码" autocomplete="off" prefix-icon="el-icon-phone"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请确认密码" prefix-icon="el-icon-lock"></el-input></el-form-item><el-form-item style="margin-right:100px"><el-button type="primary" @click="submitForm('ruleForm')">注册</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</template><script>
export default {name: 'Register',data() {var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.checkPass !== '') {this.$refs.ruleForm.validateField('checkPass');}callback();}};var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.ruleForm.password) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {ruleForm: {account:'',password: '',name:'',checkPass: '',phone:'',sex: ''},rules: {account: [{ required: true, message: '请输入账号', trigger: 'blur' },{ min: 6, max:20, message: '长度在 6 到 15 个字符', trigger: 'blur' }],name: [{ required: true, message: '请输入用户姓名', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }],phone: [//手机号格式校验规则{ required: true, message: '请填写手机号', trigger: 'blur' },{ pattern:/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '手机号格式不正确', trigger: 'blur' }],password: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],}};},methods: {submitForm(ruleForm) {//清除表单this.ruleForm = {};//axios请求this.axios.post('http://localhost:3333/user/register', this.ruleForm).then((resp) => {console.log(resp)let data = resp.data;console.log(data)if (data.success) {//消息提示this.$message({message:'注册成功',type:'success'});}})},resetForm(formName) {this.$refs[formName].resetFields();},toLogin(){this.$router.push({path:'/'})}}
}
</script><style>
#poster{background-position: center;height: 100%;width: 100%;background-size: cover;position: fixed;margin: 0px;padding: 0px;
}.register-container{border-radius: 15px;background-clip: padding-box;margin:80px auto;padding: 35px 35px 15px 35px;width: 600px;height: 480px;background:#fff;border:1px solid #eaeaea;box-shadow:0 0 1000px #cac6c6;
}
.register_title{margin:0px auto 30px auto;text-align: center;color:#505458
}</style>
相关文章：
登录注册实现
一、前端页面注册到Vue 1.创建登录和注册组件 <template><div>login</div></template><script> export default {name: HomeView,data() {return {}},methods: {}, } </script><template><div>register</div></tem…...
Push rejected: Push to origin/master was rejected
Push rejected: Push to origin/master was rejected 原因：推拒绝：推送到起源/主人被拒绝 解决方案如下： 方案1： 1.在Idea打开终端 方案2： 1、在对应项目文件里打开 Git Bash 然后依次输入： git pull …...
在线OJ项目核心思路
文章目录 在线OJ项目核心思路1. 项目介绍2.预备知识理解多进程编程为啥采用多进程而不使用多线程?标准输入&标准输出&标准错误 3.项目实现题目API实现相关实体类定义新增/修改题目获取题目列表 编译运行编译运行流程 4.统一功能处理 在线OJ项目核心思路 1. 项目介绍 …...
Spring MVC：数据绑定
Spring MVC 数据绑定数据类型转换数据格式化数据校验 附 数据绑定 数据绑定，指 Web 页面上请求和响应的数据与 Controller 中对应处理方法上的对象绑定（即是将用户提交的表单数据绑定到 Java 对象中）。 过程如下： ServletRequest…...
STM32CubeMX学习笔记-USB接口使用（HID按键）
STM32CubeMX学习笔记-USB接口使用（HID按键） 一、USB简介1.1 USB HID简介 二、新建工程1. 打开 STM32CubeMX 软件，点击“新建工程”2. 选择 MCU 和封装3. 配置时钟4. 配置调试模式 三、USB3.1 参数配置3.2 引脚配置3.3 配置时钟3.4 USB Device…...
C#，数值计算——Ranq2的计算方法与源程序
1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// Backup generator if Ranq1 has too short a period and Ran is too slow.The /// period is 8.5E37. Calling conventions same as Ran, above. /// </summary> …...
C/C++ 数据结构 - 链表
1.单链表 https://blog.csdn.net/qq_36806987/article/details/79858957 1 #include<stdio.h>2 #include<stdlib.h>3 4 /*结构体部分*/5 typedef struct Node6 {7 int data; //数值域8 struct Node *next; //指针域9 }N;10 11 N *Init() //初始化单…...
【算法基础】一文掌握十大排序算法，冒泡排序、插入排序、选择排序、归并排序、计数排序、基数排序、希尔排序和堆排序
目录 1 冒泡排序（Bubble Sort） 2 插入排序（Insertion Sort） 3 选择排序（Selection Sort） 4. 快速排序（Quick Sort） 5. 归并排序（Merge Sort） 6 堆排序 …...
：指定数组元素的特定属性进行搜索)
javascript二维数组(3)：指定数组元素的特定属性进行搜索
js中对数组， var data [{“name”: “《西游记》”, “author”: “吴承恩”, “cat”: “A级书刊”, “num”: 3},{“name”: “《三国演义》”, “author”: “罗贯中”, “cat”: “A级书刊”, “num”: 8},{“name”: “《红楼梦》”, “author”: “曹雪芹”,…...
使用Qt进行HTTP通信的方法
文章目录 1 HTTP协议简介1.1 HTTP协议的历史和发展1.2 HTTP协议的特点1.3 HTTP的工作过程1.4 请求报文1.5 响应报文 2 使用Qt进行HTTP通信2.1 Qt的HTTP通信类2.2 HTTP通信过程 3 JSON3.1 cJSON库简介3.2 cJSON库的设计思想和数据结构3.3 cJSON库的使用方法 1 HTTP协议简介 1.1…...
第45节——页面中修改redux里的数据
一、什么是action 在 Redux 中，Action 是一个简单的 JavaScript 对象，用于描述对应应用中的某个事件（例如用户操作）所发生的变化。它包含了一个 type 属性，用于表示事件的类型，以及其他一些可选的数据。 …...
软考 系统架构设计师系列知识点之软件架构风格（2）
接前一篇文章：软考 系统架构设计师系列知识点之软件架构风格（1） 这个十一注定是一个不能放松、保持“紧”的十一。由于报名了全国计算机技术与软件专业技术资格（水平）考试，11月4号就要考试，因此…...
【C++11】Lambda 表达式：基本使用 和 底层原理
文章目录 Lambda 表达式1. 不考虑捕捉列表1.1 简单使用介绍1.2 简单使用举例 2. 捕捉列表 [ ] 和 mutable 关键字2.1 使用方法传值捕捉传引用捕捉 2.2 捕捉方法一览2.3 使用举例 3. lambda 的底层分析 Lambda 表达式 书写格式： [capture_list](parameters) mutabl…...
【网络安全---ICMP报文分析】Wireshark教程----Wireshark 分析ICMP报文数据试验
一，试验环境搭建 1-1 试验环境示例图 1-2 环境准备 两台kali主机（虚拟机） kali2022 192.168.220.129/24 kali2022 192.168.220.3/27 1-2-1 网关配置： 编辑-------- 虚拟网路编辑器 更改设置进来以后 ，先选择N…...
【Docker】Docker的应用包含Sandbox、PaaS、Open Solution以及IT运维概念的详细讲解
前言 Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。 📕作者简介：热…...
Java Applet基础
Java Applet基础 目录 Java Applet基础 Applet的生命周期 "Hello, World" Applet: Applet 类 Applet的调用 获得applet参数 指定applet参数 应用程序转换成Applet 事件处理 显示图片 播放音频 applet是一种Java程序。它一般运行在支持Java的Web浏览器内。因…...
【记录】IDA｜IDA怎么查看当前二进制文件自动分析出来的内存分布情况（内存范围和读写性）
IDA版本：7.6 背景：我之前一直是直接看Text View里面的地址的首尾地址来判断内存分布情况的，似乎是有点不准确，然后才想到IDA肯定自带查看内存分布情况的功能，而且很简单。 可以通过View-Toolbars-Segments，…...
LIMS实验室信息管理系统源码 基于计算机的数据处理技术、数据存储技术、网络传输技术、自动化仪器分析技术于一体
LIMS 是一个集现代化管理思想与基于计算机的数据处理技术、数据存储技术、网络传输技术、自动化仪器分析技术于一体，以实验室业务和管理工作为核心，遵循实验室管理国际规范，实现对实验室全方位管理的信息管理系统。 LIMS将样品管理、数据管理…...
有效括号相关
相关题目 20. 有效的括号 921. 使括号有效的最少添加 1541. 平衡括号字符串的最少插入次数 32. 最长有效括号 # 20. 有效的括号 class Solution:def isValid(self, s: str) -> bool:stack []for pare in s:if pare in ([{:stack.append(pare)if not stack or (pare ) and…...
浅谈泛型擦除
文章目录 泛型擦除(1)转换泛型表达式(2)转换泛型方法泛型擦除带来的问题 泛型擦除 在编码阶段使用泛型时加上的类型参数，会被编译器在编译阶段去掉，这个过程叫做泛型擦除。 泛型主要用于编译阶段。在编译后生成的Java字节码文件中不包含泛型中的类型信息…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...
【杂谈】-递归进化：人工智能的自我改进与监管挑战
递归进化：人工智能的自我改进与监管挑战 文章目录 递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
golang循环变量捕获问题
在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景 看这个代码片段： fo…...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
浅谈不同二分算法的查找情况
二分算法原理比较简单，但是实际的算法模板却有很多，这一切都源于二分查找问题中的复杂情况和二分算法的边界处理，以下是博主对一些二分算法查找的情况分析。 需要说明的是，以下二分算法都是基于有序序列为升序有序的情况…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...