当前位置：首页 > news >正文

用后端实现一个简单的登录模块2 前端页面

news 2026/2/8 16:03:20

该模块能做到的功能：

1阶：输入账号和密码，输入正确即可返回登录成功的信息，反之则登录失败

2阶：有简单的前端页面，有登录成功和失败的弹窗，还有登录成功的主页面

3阶：前端页面的注册也可以使用，注册完的帐号能直接登录

1阶结束了，咱们2阶继续

把前端页面写一下

前端登录、注册页面预览图，登录成功或失败上方会有浏览器窗口提示

前端借鉴了一下这个的视频的页面https://www.bilibili.com/video/BV1zD4y1D7y4/%EF%BC%9Fshare_source=copy_web&vd_source=21f3fc7e7628e67cf8020c7bc3880a85视频演示源码，源自视频的简介https://blog.csdn.net/NpcCat/article/details/106434653?spm=1001.2014.3001.5501

上面的链接只是标明原出处，不影响接下来的步骤

在resources包里新建static包，在里面新建一个file文件，命名login.html，没错这是一个html文件

再添加一个file文件，命名home.html，这两个页面分别是登录页面和登录后的主页面

login.html

样式借鉴自上面的第一个链接视频

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js"></script>
</head>
<body>
<div class="control"><div class="item"><div class="active">登录</div>
<!--        <div>注册</div>--></div><div class="content"><div style="display: block;"><p>账号</p><input type="text"  id="name"/><p>密码</p><input type="password"  id="password"/><br/><input type="submit" value="登录" id="btn"/></div>
<!--        <div>-->
<!--            <p>账号</p>-->
<!--            <input type="text" placeholder="请输入11位手机号" id="rename" />-->
<!--            <p>密码</p>-->
<!--            <input type="password" placeholder="请输入至少7位同时带字母和数字的密码" id="repassword" />-->
<!--            <br/>-->
<!--            <input type="submit" value="注册" id="reg"/>-->
<!--        </div>--></div>
</div><script>window.onload = function(){var item = document.getElementsByClassName("item");var it = item[0].getElementsByTagName("div");var content = document.getElementsByClassName("content");var con = content[0].getElementsByTagName("div");for(let i=0;i<it.length;i++){it[i].onclick = function(){for(let j=0;j<it.length;j++){it[j].className = '';con[j].style.display = "none";}this.className = "active";it[i].index=i;con[i].style.display = "block";}}}var btn = document.getElementById("btn")btn.onclick = function () {const user = {name:document.getElementById("name").value,password:document.getElementById("password").value}axios.post("http://localhost:8080/doLogin",user).then(res => {if(res.data.code == 200){location.href="home.html"localStorage.setItem("name",res.data.data.name);localStorage.setItem("password",res.data.data.password);alert("登录成功,欢迎："+ res.data.data.name)}else {alert("登录失败")}})}// var reg = document.getElementById("reg")// reg.onclick = function () {//     const user = {//         name:document.getElementById("rename").value,//         password:document.getElementById("repassword").value//     }//     var re=/^1\d{10}$/;//     var pw= new RegExp("^(?=.{7,})(((?=.*[A-Z])|(?=.*[a-z]))(?=.*[0-9])).*$", "g");//     if (re.test(user.name) && pw.test(user.password)){//     axios.post("http://localhost:8080/register",user)//         .then(res => {//                 if(res.data.code == 200){//                     alert("注册成功")//                 }//                 else {//                     alert("注册失败")//                 }//         })}//     else {//     alert("手机号或密码格式不正确");//     }// }
</script></body><style>*{margin: 0;padding: 0;}body{background: #f3f3f3;}.control{width: 340px;background: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 5px;}.item{width: 340px;height: 60px;background: #eeeeee;}.item div{width: 170px;height: 60px;display: inline-block;color: black;font-size: 18px;text-align: center;line-height: 60px;cursor: pointer;}.content{width: 100%;}.content div{margin: 20px 30px;display: none;text-align: left;}p{color: #4a4a4a;margin-top: 30px;margin-bottom: 6px;font-size: 15px;}.content input[type="text"], .content input[type="password"]{width: 100%;height: 40px;border-radius: 3px;border: 1px solid #adadad;padding: 0 10px;box-sizing: border-box;}.content input[type="submit"]{margin-top: 40px;width: 100%;height: 40px;border-radius: 5px;color: white;border: 1px solid #adadad;background: #00dd60;cursor: pointer;letter-spacing: 4px;margin-bottom: 40px;}.active{background: white;}.item div:hover{background: #f6f6f6;}
</style>
</html>

前端的登录相对于注册讲的能轻松一些：

点击登录后，前端会将我们输入的账号密码放在一个叫user的对象里，然后使用post方法带着user将url传给后端，根据后端返回来的数据来确定是登录成功还是失败。

这里一共有三处被注掉的代码，这些是用来写注册功能的，现在用不上。

等说到注册功能咱再解开就可以，如果你现在就想解开也没事，不影响接下来代码的运行。

解除/添加批注快捷键：选中全部批注或需要批注的代码， ctrl+/

home.html

这是一个简单的主页面，毕竟咱主要写的是后端，前端凑合能看就行

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js"></script>
</head>
<body>
<div class="control"><div class="item"><div class="active">这是主页面</div></div><div class="content"><div style="display: block;"><input type="submit" value="退出登录" id="btn"/></div></div>
</div>
</body><script>window.onload = function(){let name = localStorage.getItem("name");let password = localStorage.getItem("password");if (name == null || password == null){location.href="login.html"alert("请先登录")}const user = {name:name,password:password}axios.post("http://localhost:8080/doLogin",user).then(res => {if(res.data.code != 200){location.href="login.html"alert("请先登录")}})var item = document.getElementsByClassName("item");var it = item[0].getElementsByTagName("div");var content = document.getElementsByClassName("content");var con = content[0].getElementsByTagName("div");for(let i=0;i<it.length;i++){it[i].onclick = function(){for(let j=0;j<it.length;j++){it[j].className = '';con[j].style.display = "none";}this.className = "active";it[i].index=i;con[i].style.display = "block";}}}var btn = document.getElementById("btn")btn.onclick = function () {localStorage.removeItem("name");localStorage.removeItem("password");location.href = "login.html"}</script><style>*{margin: 0;padding: 0;}body{background: #f3f3f3;}.control{width: 340px;background: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 5px;}.item{width: 340px;height: 60px;background: #eeeeee;}.item div{width: 340px;height: 60px;display: inline-block;color: black;font-size: 18px;text-align: center;line-height: 60px;cursor: pointer;}.content{width: 100%;}.content div{margin: 20px 30px;display: none;text-align: left;}p{color: #4a4a4a;margin-top: 30px;margin-bottom: 6px;font-size: 15px;}.content input[type="text"], .content input[type="password"]{width: 100%;height: 40px;border-radius: 3px;border: 1px solid #adadad;padding: 0 10px;box-sizing: border-box;}.content input[type="submit"]{margin-top: 40px;width: 100%;height: 40px;border-radius: 5px;color: white;border: 1px solid #adadad;background: #00dd60;cursor: pointer;letter-spacing: 4px;margin-bottom: 40px;}.active{background: white;}.item div:hover{background: #f6f6f6;}
</style>
</html>

这里加了个本地存储，如果在登录界面登录成功，前端会把输入正确的账号和密码的键和值保存在浏览器。这样就能保证主页面只有在登录状态下才能正常显示，否则（运行后端后直接通过home.html 右上角的浏览器图标直接进入主页面）会弹回登录界面。

键	值
name	13334455667
password	123456q

用后端实现一个简单的登录模块2 前端页面

把前端页面写一下

login.html

home.html

相关文章：

用后端实现一个简单的登录模块2 前端页面

MySQL慢查询的查找语法

SQL中的聚合方法与Pandas的对应关系

计算机毕业设计选题推荐-计算中心高性能集群共享平台-Java/Python项目实战

仿RabbitMq实现简易消息队列基础篇（future操作实现异步线程池）

经典算法题总结：数组常用技巧（双指针，二分查找和位运算）篇

版本控制基础理论

微分方程（Blanchard Differential Equations 4th）中文版Section1.4

求职Leetcode算法题（7）

ActiveMQ、RabbitMQ、Kafka、RocketMQ在事务性消息、性能、高可用和容错、定时消息、负载均衡、刷盘策略的区别

HanLP分词的使用与注意事项

Python 的进程、线程、协程的区别和联系是什么？

实时数据推送：Spring Boot 中两种 SSE 实战方案

数据守护者：SQL一致性检查的艺术与实践

jenkins配置+vue打包多环境切换

idea和jdk的安装教程

HTML静态网页成品作业(HTML+CSS)——电影网首页网页设计制作(1个页面)

大数据系列之：Flink Doris Connector，实时同步数据到Doris数据库

LabVIEW VI 多语言动态加载与运行的实现

Unity引擎基础知识

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

基于FPGA的PID算法学习———实现PID比例控制算法

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

【入坑系列】TiDB 强制索引在不同库下不生效问题

SCAU期末笔记 - 数据分析与数据挖掘题库解析

MVC 数据库

HTML前端开发：JavaScript 常用事件详解

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

优选算法第十二讲：队列 + 宽搜优先级队列

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）