综合性练习(后端代码练习2)——用户登录

目录

一、准备工作

二、约定前后端交互接口

1、需求分析

2、接口定义

1、输入账户密码界面

2、当前登录的用户界面

三、实现服务端代码

四、调整前端页面代码

1、login.html代码:

页面跳转的三种方式:

2、index.html代码:

五、运行测试


需求:用户输入账户和密码,后端进行校验账户和密码是否正确。

1、如果不正确,前端要告知用户(提示信息)。

2、如果正确,跳转页面,跳转的页面显示当前用户登录。

3、后续再访问首页,可以获取到用户登录信息。

一、准备工作

        创建一个Spring Boot项目,把下面两个前端代码复制进去,如图:        

        login.html代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名:<input name="userName" type="text" id="userName"><br>
  密码:<input name="password" type="password" id="password"><br>
  <input type="button" value="登录" onclick="login()">

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>


  </script>
</body>

</html>

        页面如下:

        

        index.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>用户登录首页</title>
</head>

<body>
    登录人: <span id="loginUser"></span>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>

    </script>
</body>

</html>

        页面如下:

        


二、约定前后端交互接口

1、需求分析

        对于后端开发人员而言,不涉及前端页面的展示,只需要提供下面的两个功能:

1、登录页面:通过账号和密码,校验输入的账户密码是否正确,并告知前端。

2、首页:告知前端当前登录用户。如果当前已有用户登录,返回登录的账号,如果没有,返回空。

2、接口定义

1、输入账户密码界面

        校验接口:

请求路径:/user/login

请求方式:POST

接口描述:校验账号密码是否正确

        请求参数:

参数名类型是否必须备注
userNameString校验的账号
passwordString校验的密码

        响应数据:

Content-Type:text/html

响应内容:

        true //账号密码验证成功

        false //账户密码验证失败

2、当前登录的用户界面

        校验接口:

请求路径:/user/index

请求方式:GET

接口描述:查询当前登录的用户

        请求参数:无

        响应数据:

Content-Type:text/html

响应内容:admin(返回当前登录的用户)


三、实现服务端代码

@RestController
    @RequestMapping("/user")
public class UserController {

    @RequestMapping("/login")
    public Boolean login(String userName, String password, HttpSession session) {
        //参数校验
//        if(userName == null || userName.length() == 0
//            || password == null || password.length() == 0) {
//            return false;
//        }
        //Spring MVC 提供了更方便写法
        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
            return false;
        }
        //判断账户密码是否正确
        //上面已经做了判空处理,userName不会为空,但下面的写法也是一种习惯
        if("admin".equals(userName) && "admin".equals(password)) {
            session.setAttribute("userName", userName);
            return true;
        }
        return false;
    }
    @RequestMapping("/index")
    //两种写法
//    public String getUserName(HttpSession session) {
//        return (String) session.getAttribute("userName");
//    }
    public String getUserName(@SessionAttribute("userName") String userName) {
        return userName;
    }
}

        因为是初学,所以这里不涉及到数据库,就直接把用户名和密码写死了,都定义成 admin。


四、调整前端页面代码

1、login.html代码:

        对于前端而言,点击登录按钮时,需要把用户输入的信息传递到后端进行校验,后端校验成功,就跳转的:index.html 页面,后端校验失败,则直接弹窗。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名:<input name="userName" type="text" id="userName"><br>
  密码:<input name="password" type="password" id="password"><br>
  <input type="button" value="登录" onclick="login()">

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    function login() {
      $.ajax({
        url: "/user/login",
        type: "post",
        data: {
          userName: $("#userName").val(),
          password: $("#password").val()
        },
        //http响应成功
        success: function(result) {
          if(result == true) {
            //页面跳转
            location.href ="index.html";
            // location.assign("index.html");
            // location.replace("index.html");
          } else{
            alert("密码错误");
          }
        }
      });
    }

  </script>
</body>

</html>

页面跳转的三种方式:

1、window.location.href="book_list.html";

2、window.location.assign("book_list.html);

3、window.location.replace("book_list.html);

        以上的写法,通常把 “window.” 省略,比如 window.location.href="book_list.html"; 写成 location.href="book_list.html"; 。上面的三种写法区别,可参考:location.assign()、location.href、location.replace(url)的不同-阿里云开发者社区 (aliyun.com)

2、index.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>用户登录首页</title>
</head>

<body>
    登录人: <span id="loginUser"></span>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        $.ajax({
            url: "/user/index",
            type: "get",
            success: function(loginName) {
                $("#loginUser").text(loginName);
            }
        });
    </script>
</body>

</html>

五、运行测试

        用户名和密码都输入:admin

        

        点击登录,跳转到如下页面:

        

        这个页面多次刷新,依然可以获取到登录用户,如果重启服务器,再刷新这个页面,就会发现为空了,如图:

        

如果登录页面输入错误,就会有弹窗信息:密码错误,如图:


都看到这了,点个赞再走吧,谢谢谢谢谢

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[华为OD] C卷 服务器cpu交换 现有两组服务器QA和B,每组有多个算力不同的CPU 100

题目&#xff1a; 现有两组服务器QA和B,每组有多个算力不同的CPU,其中A[i]是A组第i个CPU的运算能 力&#xff0c;B[i]是B组第i个CPU的运算能力。一组服务器的总算力是各CPU的算力之和。 为了让两组服务器的算力相等&#xff0c;允许从每组各选出一个CPU进行一次交换。 求两…

计算机网络----第十三天

DNS协议和文件传输协议 DNS&#xff1a; 含义&#xff1a;用于域名和IP地址的互相解析 DNS域名&#xff1a; 背景&#xff1a;通过IP地址访问目标主机&#xff0c;不便于记忆 域名的树形层次化结构&#xff1a; ①根域 ②顶级域&#xff1a;主机所处的国家/区域&#xf…

个人学习资源整理

文章目录 视频相关stl源码讲解相关 网站相关CPP网站 视频相关 stl源码讲解相关 跳转 网站相关 CPP网站 https://cplusplus.com/ https://gcc.gnu.org/

PostgreSQL的扩展(extensions)-常用的扩展之pg_repack

PostgreSQL的扩展&#xff08;extensions&#xff09;-常用的扩展之pg_repack pg_repack 是一款非常有用的 PostgreSQL 扩展工具&#xff0c;它能够重新打包&#xff08;repack&#xff09;表和索引以回收空间并减少碎片&#xff0c;而且在这个过程中不会锁定表&#xff0c;允…

软件测试常问的超高频面试题目,2022最强版,附答案

1、你的测试职业发展是什么&#xff1f; 测试经验越多&#xff0c;测试能力越高。所以我的职业发展是需要时间积累的&#xff0c;一步步向着高级测试工程师奔去。而且我也有初步的职业规划&#xff0c;前3年积累测试经验&#xff0c;按如何做好测试工程师的要点去要求自己&…

基于Vue3的Axios异步请求

基于Vue3的Axios异步请求 1. Axios安装与应用2. Axios网络请求封装3. axios网络请求跨域前端解决方案server.proxy 1. Axios安装与应用 Axios是一个基于promise的网络请求库&#xff0c;Axios.js.中文文档&#xff1a;https://axios.js.cn/ 安装&#xff1a;npm install --sa…

Apollo Dreamview+之Studio插件安装

步骤一&#xff1a;登录 Apollo Studio 工作台 登录 Apollo Studio 工作台。 步骤二&#xff1a;获取插件安装链接 在账户信息中&#xff0c;单击 我的服务 。 2. 选择 仿真 页签。 3. 在 插件安装 中单击 生成 &#xff0c;选择 Apollo 最新版本&#xff0c;并单击 确定 。…

计算机视觉大项目(1)-水果分级系统

项目来源&#xff1a;河北大学计算机视觉课程-杨老师. 一共有四个标题&#xff0c;本篇博客只完成前两问。 目录 实验目的: 实验内容&#xff1a; 实验步骤&#xff1a; 1.水果图像的分割 >掩膜图像Mask 是什么&#xff1f; >改进:去除反光部分的影响 2&#xf…

ES6之rest参数、扩展运算符

文章目录 前言一、rest参数二、扩展运算符 1.将数组转化为逗号分隔的参数序列2.应用总结 前言 rest参数与arguments变量相似。ES6引入rest参数代替arguments&#xff0c;获取函数实参。扩展运算符能将数组转化为参数序列。 一、rest参数 function namelist1() {console.log(ar…

【无标题】场外个股期权多少钱才能做?个人能做吗?

场外个股期权的交易门槛相对较高&#xff0c;主要面向符合特定条件的机构投资者。一般来说&#xff0c;法人或合伙企业等组织参与的&#xff0c;需要满足最近1年末净资产不低于5000万元人民币、金融资产不低于2000万元人民币的条件&#xff0c;并具备3年以上证券、基金、期货、…

【postgresql】实时查询表字段相关数据

需求&#xff1a;数据库设计时候时不时变动&#xff0c;想根据实际编号进行查询表字段相关信息 库表 脚本 原始 优化后 查询 文档

[C++][算法基础]最大不相交区间数量(贪心 + 区间问题2)

给定 &#x1d441; 个闭区间 [&#x1d44e;&#x1d456;,&#x1d44f;&#x1d456;]&#xff0c;请你在数轴上选择若干区间&#xff0c;使得选中的区间之间互不相交&#xff08;包括端点&#xff09;。 输出可选取区间的最大数量。 输入格式 第一行包含整数 &#x1d4…

Servlet(三个核心API介绍以及错误排查)【二】

文章目录 一、三个核心API1.1 HttpServlet【1】地位【2】方法 1.2 HttpServletRequest【1】地位【2】方法【3】关于构造请求 1.3 HttpServletResponse【1】地位【2】方法 四、涉及状态码的错误排查&#xff08;404……&#xff09;五、关于自定义数据 ---- body或query String …

【AI写作】未来科技趋势:揭秘DreamFusion的革新力量

首先&#xff0c;这篇文章是基于笔尖AI写作进行文章创作的&#xff0c;喜欢的宝子&#xff0c;也可以去体验下&#xff0c;解放双手&#xff0c;上班直接摸鱼~ 按照惯例&#xff0c;先介绍下这款笔尖AI写作&#xff0c;宝子也可以直接下滑跳过看正文~ 笔尖Ai写作&#xff1a;…

分享一个网站实现永久免费HTTPS访问的方法

免费SSL证书作为一种基础的网络安全工具&#xff0c;以其零成本的优势吸引了不少网站管理员的青睐。要实现免费HTTPS访问&#xff0c;您可以按照以下步骤操作&#xff1a; 一、 选择免费SSL证书提供商 选择一个提供免费SSL证书的服务商。如JoySSL&#xff0c;他们是国内为数不…

Ubuntu C++ man手册安装及使用

Ubuntu下C++ man手册安装 C++在线文档: http://www.cplusplus.com/reference/ 第一种办法:使用cppman $ sudo apt install cppman 使用方法 第二种办法: 打开网页:GCC mirror sites- GNU Project 点击下图中的突显行链接: Russia, Novosibirsk:

可平滑替代FTP的FTP替代解决方案,具有哪些强大功能?

FTP是一种广泛使用的文件传输协议&#xff0c;主要用于在网络上的计算机之间传输文件。具有以下特点&#xff1a; 1.简单易用&#xff1a;FTP协议相对简单&#xff0c;易于设置和使用&#xff0c;许多操作系统和应用程序都内置了对FTP的支持。 2.广泛的客户端支持&#xff1a…

售价不当人暴涨后,盘点当前更值得入手的SSD

PC 硬件市场本无测&#xff0c;去年 SSD 白菜价到如今彻底反转这一案例&#xff0c;可以说再次给我们狠狠上了一课。 当初被降价冲昏头脑&#xff0c;坚信 SSD 售价还会继续下探做起等等党的同学&#xff0c;看到今年这价格近乎翻倍行情估计得懵逼了吧。 不过既然有等等党&…

基于OpenCv的图像二值图和灰度直方图

⚠申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xff0c;请标注链接地址。 全文共计3077字&#xff0c;阅读大概需要3分钟 &#x1f308;更多学习内容&#xff0c; 欢迎&#x1f44f;关注&#x1f440;【文末】我的个人微信公众号&#xf…

Python新手入门基础英文笔记

1、字符串的操作 user&#xff1a;用户 name&#xff1a;名称/姓名 attibute&#xff1a;字段/属性 Value&#xff1a;值 2、重复/转换/替换/原始字符号 upper&#xff1a;上面 lower&#xff1a;下面 capitalize&#xff1a;用大写字母写或印刷 title&#xff1a;标题…