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

news2024/12/26 11:30:31

该模块能做到的功能：

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

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

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

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

把前端页面写一下

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

前端借鉴了一下这个的视频的页面icon-default.png?t=N7T8https://www.bilibili.com/video/BV1zD4y1D7y4/%EF%BC%9Fshare_source=copy_web&vd_source=21f3fc7e7628e67cf8020c7bc3880a85视频演示源码，源自视频的简介icon-default.png?t=N7T8https://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 右上角的浏览器图标直接进入主页面）会弹回登录界面。

键值
name13334455667
password123456q

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

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

相关文章

探索Python的中文转换魔法：zhconv库的神秘力量

探索Python的中文转换魔法：zhconv库的神秘力量

文章目录 探索Python的中文转换魔法&#xff1a;zhconv库的神秘力量第一部分&#xff1a;背景介绍第二部分&#xff1a;库的概述第三部分&#xff1a;安装指南第四部分&#xff1a;函数使用示例第五部分&#xff1a;实际应用场景第六部分&#xff1a;常见问题与解决方案第七部分…
阅读更多...
【Vue3】路由Query传参

【Vue3】路由Query传参

【Vue3】路由Query传参 背景简介开发环境开发步骤及源码总结 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来&#xff0c;技术出身的人总是很难放下一些执念&#xff0c;遂将这些知识整理成文&#xff0c;以纪念曾经努力学习奋斗的日子…
阅读更多...
24/8/17算法笔记 策略梯度reinforce算法

24/8/17算法笔记 策略梯度reinforce算法

import gym from matplotlib import pyplot as plt %matplotlib inline#创建环境 env gym.make(CartPole-v0) env.reset()#打印游戏 def show():plt.imshow(env.render(mode rgb_array))plt.show() show()定义网络模型 import torch #定义模型 model torch.nn.Sequential(t…
阅读更多...
8月17日星期六今日早报简报微语报早读

8月17日星期六今日早报简报微语报早读

8月17日星期六&#xff0c;农历七月十四&#xff0c;早报微语早读。 1、海关总署&#xff1a;接触过猴痘病例的人员入境时应主动申报&#xff1b; 2、284名运动员出征&#xff01;巴黎残奥会中国体育代表团成立&#xff1b; 3、四部门&#xff1a;继续执行对彩票一次中奖不超…
阅读更多...
C语言 之 字符相关函数

C语言 之 字符相关函数

文章目录 字符分类函数字符转换函数 本章内容主要讲的是c语言中的字符相关的一些函数的作用用法和使用 为了方便我们对字符的各种操作&#xff0c;C语⾔标准库中提供了⼀系列库函数&#xff0c;我们大概可以根据其功能分成两类函数 字符分类函数 C语言中有一系列函数是专门用…
阅读更多...
【区块链+金融服务】基于 VoneBaaS 的区块链金融服务管理平台 | FISCO BCOS应用案例

【区块链+金融服务】基于 VoneBaaS 的区块链金融服务管理平台 | FISCO BCOS应用案例

在顺应数字经济发展、强化科技赋能金融的背景下&#xff0c;中央及地方政策层面鼓励“区块链 金融”应用示范项目&#xff0c; 在中小企业征信及风险管理、供应链金融等重点领域开展应用&#xff0c;探索建立区块链金融风险监控体系。同时&#xff0c;随着 科技金融服务逐步升…
阅读更多...
学生阅读行为与图书预定平台的设计与实现(全网独一无二，24年最新定做)

学生阅读行为与图书预定平台的设计与实现(全网独一无二，24年最新定做)

目录&#xff1a; 前言&#xff1a; 具体功能如下&#xff1a; 1. 学生角色 2. 图书管理员 3. 图书采购人员 4. 系统管理员 技术栈介绍&#xff1a; 1. Springboot 2. MySQL 3. Vue 4. Java 系统详细界面&#xff1a; 为什么选择我&#xff1a; 前言&#xff1a; 博…
阅读更多...
71、docker网络

71、docker网络

一、docker网络&#xff1a; 1.1、默认模式&#xff1a; 桥接模式 部署好docker服务&#xff0c;启动之后&#xff0c;就会创建一个虚拟网桥&#xff0c;docker0&#xff0c;这是一个虚拟网络设备&#xff0c;类似于交换机。 [rootdocker1 ~]# ifconfig docker0: flags4163…
阅读更多...
Linux：Linux环境基础开发工具使用

Linux：Linux环境基础开发工具使用

✨✨✨学习的道路很枯燥&#xff0c;希望我们能并肩走下来! 文章目录 目录 文章目录 前言 一. Linux 软件包管理器 yum 1.1 什么是软件包 1.2 查看软件包 1.3 如何安装软件 1.4 如何卸载软件 二 Linux编辑器-vim使用 ​编辑 2.1 vim的基本概念 2.2 vim正常模式命令集…
阅读更多...
安装postgresql和PGVector

安装postgresql和PGVector

1. 概述 研发有需要&#xff0c;要使用PGVector做向量。简单记录安装postgresql和PGVector过程。 2. 参考 postgresql官方下载连接 postgresql官方linux yum安装 PostgreSQL的安装、配置与使用指南 PostgreSQL向量数据插件–pgvector安装 3. 安装 3.1 只安装postgresql&am…
阅读更多...
进程地址空间（一）

进程地址空间（一）

目录 1. 语言层面上的地址2. 引入新概念 ---- 地址空间的概念3. 进一步理解地址空间4. 为什么要有地址空间 在正式介绍进程地址空间之前&#xff0c;我们需要做一些铺垫&#xff0c;在父子进程同时运行时&#xff0c;从代码层面上的变量的地址&#xff0c;引入进程地址空间的概…
阅读更多...
2.1算法的时间复杂度与空间复杂度

2.1算法的时间复杂度与空间复杂度

本篇博客介绍算法的时间复杂度与空间复杂度 一、算法效率 算法好坏从时间和空间两个维度衡量 二、时间复杂度 1&#xff0e;概念 时间复杂度是算法中基本操作的执行次数&#xff0c;定量描述了算法的运行时间 2&#xff0e;注意 &#xff08;1&#xff09;时间复杂度是偏…
阅读更多...
vue项目中引入字体文件样式

vue项目中引入字体文件样式

需求:关于一些样式需要自定义的,所以需要ui提供字体文件,然后引入项目中,就可实现自定义 首先看一下实现效果图: 第一步:新建一个字体样式文件用于放字体文件和css样式 font.css文件: /* 数字特殊字体 */ font-face {/*给字体命名*/font-family: DINCondBold;/*引入字体文件*…
阅读更多...
课堂助手小程序的设计

课堂助手小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;专业信息管理&#xff0c;部门信息管理&#xff0c;课程信息管理&#xff0c;教学内容管理&#xff0c;学生作业管理&#xff0c;系统管理 微信端账号功能包…
阅读更多...
防止内存泄漏的神兵利器 — 智能指针

防止内存泄漏的神兵利器 — 智能指针

1.内存泄漏 1.1什么是内存泄漏 当我们在写C/C程序的时候&#xff0c;难免会出现内存泄漏的错误&#xff0c;因为C/C不像Java语言那样&#xff0c;拥有自己的垃圾回收机制&#xff0c;C/C中对于资源的管理&#xff0c;完全交给程序员自己打理&#xff0c;也就是说使用C/C的程序…
阅读更多...
Ubuntu下NFS和SSH服务

Ubuntu下NFS和SSH服务

本篇文章记录Ubuntu下如何对NFS和SSH服务进行配置和开启。 目录 一、NFS服务 二、SSH服务 1、安装SSH服务 2. 启动和检查SSH服务 3. 配置SSH服务 4. 连接到SSH服务 5. 设置防火墙 6. 测试连接 三、结语 一、NFS服务 NFS&#xff08;Network File System&#xff0…
阅读更多...
设计模式（2）行为型模式和七大原则

设计模式（2）行为型模式和七大原则

1、目标 本文的主要目标是学习设计模式的行为型模式并举例说明 2、行为型模式 2.1 观察者模式&#xff08;Observer&#xff09; 观察者模式是对象之间存在一对多的依赖关系&#xff0c;当一个对象的状态发生变化时&#xff0c;所有依赖它的对象都会得到通知并自动更新&…
阅读更多...
京东数据编织

京东数据编织

计算引擎是Hbase 中间计算结果的物化【就是存下来】 自动物化 在这里插入图片描述
阅读更多...
设计模式在芯片验证中的应用——状态

设计模式在芯片验证中的应用——状态

一、状态模式 状态模式是一种行为设计模式&#xff0c; 让你能在一个对象的内部状态变化时改变其行为&#xff0c; 使其看上去就像改变了自身所属的类一样。 在RTL中可能存在复杂的有限状态机FSM&#xff0c;在任何一个特定状态中&#xff0c; RTL的行为都不相同&#xff0c;…
阅读更多...
pip install 遇到ValueError: check_hostname requires server_hostname的解决办法

pip install 遇到ValueError: check_hostname requires server_hostname的解决办法

我需要下载Cython来将py编译成c&#xff0c;结果在pip install的时候报错这个&#xff1a; ERROR: Exception: Traceback (most recent call last):File "F:\Anaconda3\envs\DouyinLive32\lib\site-packages\pip\_internal\cli\base_command.py", line 173, in _mai…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023