登录前端思路 - 码农知识堂

登录前端思路

登录注册

登录前端：

1.前端表单验证-减轻服务器的负载-DOM操作写特效

1.1 邮箱验证:绑定change事件判断value是否符合邮箱正则

1.2 密码验证:密码要符合格式(自己定制的比如大小写特殊符号),两次密码要一致

2.POST暗文把密码发送给后端--JWT

3.等后端返回数据

如果返回的数据包的业务码是xxx 就操作页面xxx

如果返回的数据包的业务码是正确就跳转到首页页面或者其他页面

4.验证码:

前端页面渲染就请求验证码==>后端生成验证码然后设置到缓存在把验证码发送前端

前端获取用户输入的验证码发送给后端==>取出缓存和接受到的对比

<body>

HTML样式：

<div class="main">

<h1>登录界面h1>

<div class="content">

输入邮箱：<input type="text" id="email" placeholder="请输入邮箱.....">

<p id="emailtext"> p>

输入密码：<input type="password" id="pwd" placeholder="8-18位字母、数字，区分大小写">

<p id="pwdtext"> p>

<div class="btn">

<button id="register">要注册button>

<button id="login">要登录button>

div>

div>

div>

js代码

<script>

var email = document.querySelector("#email")

var pwd = document.querySelector("#pwd")

var login = document.querySelector("#login")

var register = document.querySelector("#register")

var arr = [false, false]

//邮箱

email.addEventListener("change", function () {

//邮箱验证正则表达式

var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

let emailres = reg.test(email.value)

//根据结果做出提示

if (emailres) {

email.style.borderColor = "3px green solid"

emailtext.innerHTML = "邮箱格式正确"

emailtext.style.color = "green"

arr[0] = true;

} else {

email.style.borderColor = "3px red solid"

emailtext.innerHTML = "邮箱格式错误"

emailtext.style.color = "red"

}

})

//密码

pwd.addEventListener("change", function () {

//密码正则表达式

var reg = /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/

var pwdres = reg.test(pwd.value)

//根据结果做出提示

if (pwdres) {

pwd.style.borderColor = "3px green solid"

pwdtext.innerHTML = "密码格式正确"

pwdtext.style.color = "green"

arr[1] = true;

} else {

pwd.style.borderColor = "3px red solid"

pwdtext.innerHTML = "密码格式错误"

pwdtext.style.color = "red"

}

})

script>

<--模态弹窗CSS样式-->

<style>

.screen {

width: 100%;

height: 900px;

background-color: rgba(219, 214, 214, 0.6);

z-index: 10000;

position: fixed;

top: 0px;

left: 0px;

}

.mainbox {

width: 300px;

height: 100px;

margin: 0 auto;

background-color: #fff;

margin-top: 100px;

border-radius: 10px;

}

.text {

width: 300px;

height: 50px;

margin: 0 auto;

line-height: 50px;

text-align: center;

}

.sure {

margin-left: 220px;

margin-top: 10px;

}

.sure {

width: 39px;

height: 22px;

}

style>

<script>

//跳转到登录好的界面

login.addEventListener("click", async () => {

// console.log(111)

if (arr.includes(false)) {

// alert("填写邮箱和密码登录")

var screen = document.createElement("div")

screen.className = "screen"

document.body.appendChild(screen)

//在半透明的背景上添加展示框

var mainbox = document.createElement("div")

mainbox.className = "mainbox"

screen.appendChild(mainbox)

//在展示框中添加文字和确定按钮

var text = document.createElement("p")

text.className = "text"

var sure = document.createElement("button")

mainbox.appendChild(text)

text.innerHTML = "请填写邮箱和密码登录"

text.style.color = "red"

mainbox.appendChild(sure)

sure.innerHTML = "确定"

sure.className = "sure"

mainbox.appendChild(sure)

//给确定按钮绑定点击事件，删除半透明模板

sure.onclick = function () {

// console.log(sure.parentElement.parentElement)

sure.parentElement.parentElement.remove()

email.value = ""

pwd.value = ""

emailtext.innerHTML = " "

pwdtext.innerHTML = " "

}

} else {

//输入的信信存入后端验证

var form = new FormData()

form.append("email", email.value)

form.append("pwd", pwd.value)

var res = await axios.post("/login", form)

console.log(res)

//通过后端返回的code码向用户反馈

if (res.data.code == 402) {

// alert(res.data.info)

email.value = ""

pwd.value = ""

email.style.borderColor = "3px red solid"

emailtext.innerHTML = "邮箱输入错误"

emailtext.style.color = "red"

email.focus()

} else if (res.data.code == 403) {

// alert(res.data.info)

// email.value = ""

pwd.value = ""

pwd.style.borderColor = "3px red solid"

pwdtext.innerHTML = "密码输入错误"

pwdtext.style.color = "red"

email.focus()

} else {

//验证成功，跳转到主页面

window.open("/public/home.html")

}

}

})

script>

<script>

//回到注册界面

register.addEventListener("click", function () {

window.open("/public/register.html")

})

script>

body>

router.js文件

//登录

router.post('/login',controller.home.login)

controller文件home.js

async login(){

var value=this.ctx.request.body

console.log(value,11111)

this.ctx.body="6666"

//验证邮箱是否存在

var sql1=`SELECT * FROM user WHERE email="${value.email}"`

var res1=await this.app.mysql.query(sql1)

if(!res1[0]){

this.ctx.body={info:"邮箱不存在",code:402}

}else{

let sql1 = `SELECT * FROM user WHERE email="${value.email}" AND pwd="${value.pwd}"`

let res1 = await this.app.mysql.query(sql1)

if(res1[0]){

//将email进行缓存

this.ctx.session.email = value.email

this.ctx.body={info:"登陆成功", code:201}

}else{

this.ctx.body = {info: "密码错误",code: 403}

}

}

}

数据库：

注册前端思路：

http://t.csdn.cn/f8mVS
相关阅读:
数学建模笔记-第九讲-分类模型-逻辑回归
 问题记录1
c++编程（18）——deque的模拟实现（2）容器篇
 项目复习:基于UDP的网络聊天室
 java - 网络编程TCP/IP
【文章学习系列之模型】DAGMM
vue 使用 js 监听监听键盘按钮事件并阻止按键默认事件
 当大语言模型遇到AI绘画-google gemma与stable diffusion webui融合方法-矿卡40hx的AI一体机
 【牛客 - 剑指offer】JZ8 二叉树的下一个结点 Java实现
 netty学习 java-io
原文地址：https://blog.csdn.net/cjx177187/article/details/126440176