spring MVC 简单的案例(2)用户登录

news2024/11/24 0:44:34

一、用户登录

1)前端代码

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>

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>
    function login() {
    
    }

  </script>
</body>

</html>

运行服务,打开浏览器,查看前端页面是否正常

2)需求分析

在登录页面login.html,输入用户名 和 密码 之后

会返回用户名到首页index.html

2-1接口定义 - 用户验证

/login/check

参数

userName

password

响应

 用户和密码是否正确

true : 用户名和密码正确

false:用户或者密码错误

2-2接口定义 - 获取登录的用户

/login/index

参数

响应

登录的用户名

3)编写后端代码 

package com.ameris.springmvcdemo;

import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpSession;

@Controller
@RequestMapping("/login")
public class LoginController {
    @ResponseBody
    @RequestMapping("/check")
    public boolean check(String userName, String password, HttpSession session){
        //1.校验账号 和 密码 是否为空
        //传统的方式
//        if(userName == null ||"".equals(userName)||password == null ||"".equals(password)){
//            return false;
//        }
        //spring提供的方式
        if (!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){
            return false;
        }

        //2.校验 用户 和 密码 是否正确
        //假设用户 和 密码是 zhangsan 123456
        if ("zhangsan".equals(userName) && "123456".equals(password)){
            //登录成功,要设置session
            session.setAttribute("userName",userName);
            return true;
        }
        return false;
    }
    @ResponseBody
    @RequestMapping("/index")
    public String index(HttpSession session){
        String userName = (String) session.getAttribute("userName");
        return userName;

    }
}

测试后端代码,后端没问题

测试浏览器,发现点击登录按钮无效,没有响应

查看前端代码

发现 js里这个login()这个函数没有写,所以点击登录按钮时没有效果

再次浏览器验证

发现跳转了到index.html这个页面了,但是没有显示登陆人的名字

于是再查看 index.html 的前端页面代码

发现没有该页面的响应内容,写上js代码

再次测试

现在显示 用户名了

假设输入个错误密码

也可以正确提示

注意 

data里面的参数名 要与 后端的参数名 保持一致,否则前端的数据无法正确传递到后端

例如我故意把userName 写错成 Name

即便我输入正确的用户名密码,还是提示我错误

查看日志

发现userName 为空,说明该数据没有正确传递到后端来

所以在前端参数名这里一定要注意

4)完整的前端代码 

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()">
  <!-- 当登录按钮点击后,会执行 login()这个函数 -->

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    function login() {
      $.ajax({
        type: "post",
        url: "/login/check",
        data: {
          //这里面的数据 userName 和 password 是与后端定义的参数名对应
          //如果这里参数名 与 后端 不一致,那么会导致,这个数据无法正确传递到后端
          userName: $("#userName").val(),//$("#userName") 通过id名 userName这个标签,.val()获取该标签里的值,如果val("")里面有值,就是赋值
          password: $("#password").val()
        },
        success: function (result) {
          //sucess是一个回调函数,上述执行成功后,会执行这个函数
          //result 根据后端返回结果,是一个布尔类型的值
          if (result == true) {
            //用户名和密码正确
            //下面这几种跳转方式都可以
            location.href = "index.html";
            // location.assign("index.html");
            // location.replace("index.html");
          } else {
            alert("用户名或密码错误!!")
          }
        }
      });
    }

  </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>
        $.ajax({
            type: "get",
            url: "/login/index",
            success: function (result) {
                //result 根据后端返回结果,是一个用户名 userName
                $("#loginUser").text(result);
                //$("#loginUser") 选择 id 为 loginUser 的标签
                //.text(result); 标签里的内容 放置为 result
            }
        })
    </script>
</body>

</html>

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

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

相关文章

Filebeat k8s 部署(Deployment)采集 PVC 日志发送至 Kafka——日志处理(二)

文章目录 前言Filebeat Configmap 配置Filebeat Deployment验证总结 前言 在上篇文章中总结了 Django 日志控制台输出、文件写入按天拆分文件&#xff0c;自定义 Filter 增加 trace_id 以及过滤——日志处理&#xff08;一)&#xff0c;将日志以 JSON 格式写入日志文件。我们的…

【BUG】已解决:SyntaxError invalid syntax

SyntaxError invalid syntax 目录 SyntaxError invalid syntax 【常见模块错误】 错误原因&#xff1a; 解决办法&#xff1a; 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于…

CentOS 7 安装Jenkins2.346.1(war方式安装)

既然想要安装Jenkins&#xff0c;肯定是先要从官网解读所需环境配置信息&#xff0c;如需了解更多自行查阅 https://www.jenkins.io/doc/book/installing/linux/ JDK17&#xff0c;Maven3.9 安装 先从官网分别下载JDK17与Maven3.9 下载好之后上传至服务器、并解压&#xff1a…

【体外诊断】ARM/X86+FPGA嵌入式计算机在医疗CT机中的应用

体外诊断 信迈科技提供基于Intel平台、AMD平台、NXP平台的核心板、2.5寸主板、Mini-ITX主板、4寸主板、PICO-ITX主板&#xff0c;以及嵌入式准系统等计算机硬件。产品支持GAHDMI等独立双显&#xff0c;提供丰富串口、USB、GPIO、PCIe扩展接口等I/O接口&#xff0c;扩展性强&…

vscode里的ts配置以及js配置不生效,可能是扩展程序被关了

在setting.json里检查了下typescript的配置发现配置都被置灰了。。。 最后在我不断重复尝试重启vscode的时候&#xff0c;右下角总是弹出一个扩展程序未使用&#xff0c;可能会影响编辑器使用&#xff0c;我点了一下开启&#xff0c;nnd&#xff0c;原来是builtin typescript-…

Leetcode1305.两颗二叉搜索树中的所有元素

1.题目要求: 给你 root1 和 root2 这两棵二叉搜索树。请你返回一个列表&#xff0c;其中包含 两棵树 中的所有整数并按 升序 排序。.2.思路: 我这个方法采用的是设立一个数组&#xff0c;然后用前序遍历把值存入数组中&#xff0c;然后用qsort给它排序 3.代码: /*** Definiti…

Spring Boot2(Spring Boot 的Web开发 springMVC 请求处理 参数绑定 常用注解 数据传递)

目录 一、Spring Boot 的Web开发 1. 静态资源映射规则 2. enjoy模板引擎 二、springMVC 1. springMVC-请求处理 测试&#xff1a; 以post方式请求 限制请求携带的参数 GetMapping 查询 PostMapping 新增 DeleteMapping删除 PutMapping 修改 2. springMVC-参…

5.java操作RabbitMQ-简单队列

1.引入依赖 <!--rabbitmq依赖客户端--> <dependency><groupId>com.rabbitmq</groupId><artifactId>amqp-client</artifactId> </dependency> 操作文件的依赖 <!--操作文件流的一个依赖--> <dependency><groupId>c…

【AI教程-吴恩达讲解Prompts】第1篇 - 课程简介

文章目录 简介Prompt学习相关资源 两类大模型原则与技巧 简介 欢迎来到面向开发者的提示工程部分&#xff0c;本部分内容基于吴恩达老师的《Prompt Engineering for Developer》课程进行编写。《Prompt Engineering for Developer》课程是由吴恩达老师与 OpenAI 技术团队成员 I…

vue学习笔记(十)——Vuex(状态管理,组件间共享数据)

1. vuex基础-介绍 1.1 为什么会有Vuex ? 在现代 Web 开发复杂多变的需求驱动之下&#xff0c;组件化开发已然成为了事实上的标准。然而大多数场景下的组件都并不是独立存在的&#xff0c;而是相互协作共同构成了一个复杂的业务功能。 组件间的通信成为了必不可少的开发需求。…

Android IjkPlayer内核编译记(一)so库编译使用

转载请注明出处&#xff1a;https://blog.csdn.net/kong_gu_you_lan/article/details/140528831 本文出自 容华谢后的博客 0.写在前面 最近在搞RTMP协议直播拉流的功能&#xff0c;使用了B站开源的IjkPlayer作为播放器内核&#xff0c;在网络不好的情况下延迟会比较高&#xf…

Guns v7.3.0:基于 Vue3、Antdv 和 TypeScript 打造的开箱即用型前端框架

摘要 本文深入探讨了Guns v7.3.0前端项目&#xff0c;该项目是基于Vue3、Antdv和TypeScript的前端框架&#xff0c;以Vben Admin的脚手架为基础进行了改造。文章分析了Guns 7.3.0的技术特点&#xff0c;包括其使用Vue3、vite2和TypeScript等最新前端技术栈&#xff0c;以及提供…

环信IM x 亚马逊云科技,助力出海企业实现可靠通讯服务

随着全球化进程的加速&#xff0c;越来越多的企业选择出海&#xff0c;拓展国际市场。然而&#xff0c;面对不同国家和地区的用户&#xff0c;企业在即时通讯方面遇到了诸多挑战。为了帮助企业克服这些困难&#xff0c;环信IM与亚马逊云科技强强联手&#xff0c;共同推出了一套…

蚂蚁集团推出EchoMimic:能通过音频和面部标志生成逼真的肖像动画视频

蚂蚁集团最近推出了一项名为EchoMimic的新技术。能通过音频和面部标志生成逼真的肖像动画视频&#xff0c;让你的声音和面部动作被完美复制到视频中&#xff0c;效果自然如照镜子。 EchoMimic不仅可以单独使用音频或面部标志点生成肖像视频&#xff0c;也可以将两者结合&#…

CSPVD 智慧工地安全帽安全背心检测开发包

CSPVD SDK适用于为各种智慧工地应用增加安全防护穿戴合规的检测能力&#xff0c;能够有效检测未戴安全帽和未穿 安全背心的人员&#xff0c;提供Web API和原生API。官方下载&#xff1a;CSPVD工地安全防护检测 1、目录组织 CSPVD开发包的目录组织说明如下&#xff1a; xlpr_…

价格战再起:OpenAI 发布更便宜、更智能的 GPT-4o Mini 模型|TodayAI

OpenAI 今日推出了一款名为 GPT-4o Mini 的新模型&#xff0c;这款模型较轻便且成本更低&#xff0c;旨在为开发者提供一个经济实惠的选择。与完整版模型相比&#xff0c;GPT-4o mini 在成本效益方面表现卓越&#xff0c;价格仅为每百万输入 tokens 15 美分和每百万输出 tokens…

喜报!极限科技再获国家发明专利:《一种超大规模分布式集群架构的数据处理方法》,引领大数据处理技术创新

近日&#xff0c;极限数据&#xff08;北京&#xff09;科技有限公司&#xff08;简称&#xff1a;极限科技&#xff09;传来喜讯&#xff0c;公司再次斩获国家发明专利授权。这项名为"一种超大规模分布式集群架构的数据处理方法"的专利&#xff08;专利号&#xff1…

html+canvas 实现签名功能-手机触摸

手机上的效果图 需要注意&#xff0c;手机触摸和鼠标不是一个事件&#xff0c;不能通用&#xff0c;上一篇是关于使用鼠标的样例 相关代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewpo…

[Vulnhub] MERCY SMB+RIPS-LFI+Tomcat+Ports-Knocking+Timeclock权限提升

信息收集 IP AddressOpening Ports192.168.101.151TCP:80,22,53, 110, 139, 143, 445, 993, 995, 8080 $ $ nmap -p- 192.168.101.151 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 53/tcp open domain ISC BIND 9.9.5-3ubuntu0.17 (Ubuntu Linux) …

主从复制 哨兵服务 数据类型 持久化

配置主从复制 一主多从结构 配置一主一从结构 修改配置文件 配置salve服务器 配置带验证的主从复制 查看密码&#xff0c;默认redis服务没有密码 192.168.88.61:6379> config get requirepass 设置密码 192.168.88.61:6379> config set requirepass 123456 输入密码…