springboot基础--实现默认登录页面
1、搭建项目
依赖中 多加入thymeleaf依赖
<dependencies><!--thymeleaf的依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--web工程的依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--单元测试的依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies>
application.properties
#关闭thymeleaf的缓存，避免开发过程中修改页面不生效的情况，在部署的时候可以取消
spring.thymeleaf.cache=false
2、导入静态资源
src/main/resources/templates/login.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>登陆页面</title><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!-- 新 Bootstrap4 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"><!-- popper.min.js 用于弹窗、提示、下拉菜单 --><script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><h2>登录</h2><form method="post" action="#" th:action="@{/user/login}"><div class="form-group has-feedback"><label for="用户名">用户名:</label><input th:value="${username}" type="text" name="username" class="form-control" id="username" placeholder="请输入用户名"></div><div class="form-group has-feedback"><label for="pwd">密码:</label><input type="password" name="password" class="form-control" id="pwd" placeholder="请输入密码"><span th:text="${login_error}" class="glyphicon glyphicon-envelope form-control-feedback"></span></div><div class="form-check"><label class="form-check-label"><input class="form-check-input" type="checkbox"> 记住我</label></div><button type="submit" class="btn btn-primary">登录</button><button type="button" class="btn btn-primary">注册</button></form></div>
</body>
</html>
src/main/resources/templates/list.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title><title>登陆页面</title><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!-- 新 Bootstrap4 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"><!-- popper.min.js 用于弹窗、提示、下拉菜单 --><script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script><script>$(function(){$("button:contains('删除')").click(function(){$.post("/user/delete",{"id":this.id});$(this).parent().parent().remove();});$("button:contains('修改')").click(function(){//弹出修改窗口$('#myModal').modal();//把User对象转成json对象var jsonObj = JSON.parse($(this).attr("id"));//为修改页面进行赋值$('#txt_id').val(jsonObj['id']);$('#txt_username').val(jsonObj['username']);$('#txt_password').val(jsonObj['password']);$('#txt_name').val(jsonObj['name']);$('#txt_userSex').val(jsonObj['userSex']);});})//添加的方法function add() {//弹出新建窗口$('#myModal1').modal();}</script>
</head>
<body>
<div class="container"><table class="table table-dark table-hover"><thead><tr><th>id</th><th>用户名</th><th>密码</th><th>真实姓名</th><th>性别</th><th>删除</th><th>修改</th></tr></thead><tbody><tr th:each="users:${list}"><td th:text="${users.id}"></td><td th:text="${users.username}"></td><td th:text="${users.password}"></td><td th:text="${users.name}"></td><td th:text="${users.userSex}"></td><th><button th:id="${users.id}" onclick="return confirm('你确定要删除这条数据吗？')">删除</button></th><th><button th:id="${users}">修改</button></th></tr></tbody></table><button onclick="add()">添加</button><!--添加页面--><div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><form method="post" action="#" th:action="@{/add.do}"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel1">添加</h4></div><div class="modal-body"><div class="form-group"><label for="txt_username">用户名</label><input type="text" name="username" class="form-control" placeholder="用户名"></div><div class="form-group"><label for="txt_password">密码</label><input type="password" name="password" class="form-control" placeholder="密码"></div><div class="form-group"><label for="txt_name">真实姓名</label><input type="text" name="name" class="form-control" placeholder="真实姓名"></div><div class="form-group"><label for="txt_userSex">性别</label><input type="text" name="userSex" class="form-control" placeholder="性别"></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button><input type="submit" value="保存" id="btn_submit1" class="btn btn-primary" /><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></div></form></div></div></div><!--修改页面--><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><form method="post" action="#" th:action="@{/update.do}"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">修改</h4></div><div class="modal-body"><input type="text" name="id" id="txt_id" hidden="true"><div class="form-group"><label for="txt_username">用户名</label><input type="text" name="username" class="form-control" id="txt_username" placeholder="用户名"></div><div class="form-group"><label for="txt_password">密码</label><input type="password" name="password" class="form-control" id="txt_password" placeholder="密码"></div><div class="form-group"><label for="txt_name">真实姓名</label><input type="text" name="name" class="form-control" id="txt_name" placeholder="真实姓名"></div><div class="form-group"><label for="txt_userSex">性别</label><input type="text" name="userSex" class="form-control" id="txt_userSex" placeholder="性别"></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button><input type="submit" value="保存" id="btn_submit" class="btn btn-primary" /><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></div></form></div></div></div>
</div>
</body>
</html>
127.0.0.1:8080/login.html 进行页面访问，但是无法访问，因为templates下的文件都是被保护的
只能通过controller的方式访问
通过control访问
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
public class LoginController {@RequestMapping("/test")public String test(){return "login";}}
http://127.0.0.1:8080/test 访问测试成功
3、 自定义mvc配置方式默认主页
src/main/java/com/franklin/springbootwebdemo/config/WebMvcConfig.java
通过修改WebMvcConfigure的默认设置来指定页面的默认访问方式
1、构建一个配置类,实现WebMvcConfigurer接口， 重写addViewControllers方法;
2、添加自定义页面的默认主页映射: addViewController().setViewName()
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class WebMvcConfig implements WebMvcConfigurer {@Overridepublic void addViewControllers(ViewControllerRegistry registry) {//转发registry.addViewController("/").setViewName("login.html");
// registry.addViewController("/main.html").setViewName("/list.do");//重定向
// registry.addRedirectViewController("/main.html","list.do");}}测试 访问登录http://127.0.0.1:8080/
注意此时http://127.0.0.1:8080/test 还可以访问成功
4、升级controller
package com.franklin.springbootwebdemo.controller;import com.franklin.springbootwebdemo.entity.Users;
import com.franklin.springbootwebdemo.repository.UsersRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.thymeleaf.util.StringUtils;import javax.servlet.http.HttpSession;@Controller
public class LoginController {@Autowiredprivate UsersRepository usersRepository;@RequestMapping("/user/login")public String login(ModelMap map, Users users, HttpSession session){map.addAttribute("username",users.getUsername());//进行用户名密码的校验if(!StringUtils.isEmpty(users.getUsername())&&!StringUtils.isEmpty(users.getPassword())&&"zhangsan".equals(users.getUsername())&&"123456".equals(users.getPassword())){//登录成功，把当前user对象注入到session中，进入拦截器里配置session.setAttribute("userInfo",users);return "list";}else{map.addAttribute("login_error","用户名密码错误");return "login";}}}5、 repository类
src/main/java/com/hckj/managersystemdemo/repository/UsersRepository.java
package com.franklin.springbootwebdemo.repository;import com.franklin.springbootwebdemo.entity.Users;import java.util.List;public interface UsersRepository {List<Users> findAll();int deleteUserById(int id);
}src/main/java/com/hckj/managersystemdemo/repository/UserRepositoryImp.java
package com.franklin.springbootwebdemo.repository;import com.franklin.springbootwebdemo.entity.Users;
import org.springframework.stereotype.Repository;import java.util.ArrayList;
import java.util.Collections;
import java.util.Iterator;
import java.util.List;@Repository
public class UserRepositoryImp implements UsersRepository {static List<Users> users = new ArrayList<>();static{Collections.addAll(users,new Users(1001,"zhangsan","123456","张三","男"),new Users(1002,"lisi","123456","李四","女"),new Users(1003,"wangwu","123456","王五","男"),new Users(1004,"zhaoliu","123456","赵柳","女"),new Users(1005,"wangba","123456","网吧","男"));}@Overridepublic List<Users> findAll() {return users;}@Overridepublic int deleteUserById(int id) {int num = 0;Iterator<Users> iterator = users.iterator();while(iterator.hasNext()){Users users = iterator.next();if (users.getId()==id){iterator.remove();num = 1;}}return num;}
}登录http://127.0.0.1:8080/ 输入账号：admin 密码12345
登录http://127.0.0.1:8080/ 输入账号：zhangsan 密码123456
6、第二次升级controller
@Controller
public class LoginController {@Autowiredprivate UsersRepository usersRepository;@RequestMapping("/user/login")public String login(ModelMap map, Users users, HttpSession session){map.addAttribute("username",users.getUsername());//进行用户名密码的校验if(!StringUtils.isEmpty(users.getUsername())&&!StringUtils.isEmpty(users.getPassword())&&"zhangsan".equals(users.getUsername())&&"123456".equals(users.getPassword())){//登录成功，把当前user对象注入到session中，进入拦截器里配置session.setAttribute("userInfo",users);return "redirect:/user/list";}else{map.addAttribute("login_error","用户名密码错误");return "login.html";}}@RequestMapping("/user/list")public String show(ModelMap map){List<Users> list = usersRepository.findAll();map.addAttribute("list",list);return "list.html";}}登录http://127.0.0.1:8080/ 输入账号：zhangsan 密码123456
7、数据展示和删除
<script>$(function(){$("button:contains('删除')").click(function(){$.post("/user/delete",{"id":this.id});$(this).parent().parent().remove();});$("button:contains('修改')").click(function(){//弹出修改窗口$('#myModal').modal();//把User对象转成json对象var jsonObj = JSON.parse($(this).attr("id"));//为修改页面进行赋值$('#txt_id').val(jsonObj['id']);$('#txt_username').val(jsonObj['username']);$('#txt_password').val(jsonObj['password']);$('#txt_name').val(jsonObj['name']);$('#txt_userSex').val(jsonObj['userSex']);});})//添加的方法function add() {//弹出新建窗口$('#myModal1').modal();}</script>
8、第三次 升级controller
src/main/java/com/hckj/managersystemdemo/controller/LoginController.java
加入
@RequestMapping("/user/list")public String show(ModelMap map){List<Users> list = usersRepository.findAll();map.addAttribute("list",list);return "list.html";} @RequestMapping("/user/delete")public String delete(int id){usersRepository.deleteUserById(id);return "list";}
9、拦截器
src/main/java/com/hckj/managersystemdemo/intercept/LoginHandlerIntercept.java
package com.franklin.springbootwebdemo.intercept;import com.franklin.springbootwebdemo.entity.Users;
import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class LoginHandlerIntercept implements HandlerInterceptor {@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {Users users = (Users) request.getSession().getAttribute("userInfo");if (users!=null){return true;}else{request.setAttribute("login_error","请先登录");request.getRequestDispatcher("/").forward(request,response);return false;}}
}src/main/java/com/franklin/springbootwebdemo/config/WebMvcConfig.java
加入
@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(new LoginHandlerIntercept()).addPathPatterns("/**").excludePathPatterns("/","/eitilogin.html","/user/login","/css/**","js/**","img/**");}测试
访问http://127.0.0.1:8080/user/list 都是跳转到登录界面，测试通过
相关文章：
springboot基础--实现默认登录页面
1、搭建项目 依赖中 多加入thymeleaf依赖 <dependencies><!--thymeleaf的依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--we…...
TDesign WXS语法
目录 一、输出函数返回值如何获取？ 二、WXS语法 三、WXS案例 一、输出函数返回值如何获取？ 写在js的方法中 wxml中{{方法名()}}输出： 发现不显示？？ 所以不能使用这种方式！！ 二、WXS语法 1.…...
Iterator设计模式
目录 1、示例 1.1 Aggregate接口 1.2 Iterator接口 1.3 Book类 1.4 BookShelf类 1.6 BookShelfIterator 类 1.7 Main类 2、解释Iterator模式中的角色 2.1 Iterator模式的存在意义 2.2 抽象类和接口 2.3 Aggregate 和 Iterator的对应 2.4 容易弄错"下一个"…...
ROS 入门
目录 简介 ROS诞生背景 ROS的设计目标 ROS与ROS2 安装ROS 1.配置ubuntu的软件和更新 2.设置安装源 3.设置key 4.安装 5.配置环境变量 安装可能出现的问题 安装构建依赖 卸载 ROS架构 1.设计者 2.维护者 3. 立足系统架构: ROS 可以划分为三层 ROS通信机制 话…...
第四章 Linux网络编程
ARP 协议 ARP 协议（Address Resolution Protocol）通过 IP 地址查找对应的 MAC 地址。 当一个主机需要发送数据给另一个主机时，它首先会检查本地的 ARP 缓存表（ARP cache）中是否存在目标主机的 MAC 地址。如果存在&…...
无涯教程-JavaScript - OFFSET函数
描述 OFFSET函数返回对范围的引用,该范围是一个单元格或单元格范围中指定的行数和列数。 返回的引用可以是单个单元格或单元格范围。您可以指定要返回的行数和列数。 语法 OFFSET (reference, rows, cols, [height], [width]) 争论 Argument描述Required/OptionalReferenc…...
rust切片
切片类型写为[T]。 切片是序列的一个片段。 它是动态大小类型，所以要使用切片类型，就必须使用它的指针类型。引用是最常用的指针类型。 [T; n]能隐式转换成[T]。 一、定义切片 （一）不可变切片 &[T]，共享切片&…...
2023/9/18 -- C++/QT
作业 完善登录框 点击登录按钮后，判断账号（admin）和密码（123456）是否一致，如果匹配失败，则弹出错误对话框，文本内容“账号密码不匹配，是否重新登录”，给定两…...
vue柱状图+折线图组合
<template><div id"main" style"width: 100%;height: 500px; padding-top: .6rem"></div> </template>data() {return {weekData: ["1周","2周","3周","4周","5周","6周&…...
js中如何实现一个简单的防抖函数？
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 防抖函数⭐ 使用示例⭐ 写在最后 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚踏…...
mysq 主从同步错误之 Error_code 1032 handler error HA_ERR_KEY_NOT_FOUND
错误说明： MySQL主从同步的1032错误，一般是指要更改的数据不存在，SQL_THREAD提取的日志无法应用故报错，造成同步失败 （Update、Delete、Insert一条已经delete的数据）。 1032的错误本身对数据一致性没什么影…...
蓝桥杯 题库 简单 每日十题 day4
01 津津上初中了。妈妈认为津津应该更加用功学习，所以津津除了上学之外，还要参加妈妈为她报名的各科复习班。另外每周妈妈还会送她去学习朗诵、舞蹈和钢琴。但是津津如果一天上课超过八个小时就会不高兴，而且上得越久就会越不高兴。假设津津…...
l8-d21 域名解析与http服务器实现原理
一、域名解析gethostbyname函数 主机结构在 <netdb.h> 中定义如下： struct hostent { char *h_name; /* 官方域名 */ char **h_aliases; /* 别名*/ int h_addrtype; /* 地址族（地址类型） */ int h_l…...
网络安全（黑客技术）自学规划
一、什么是网络安全 网络安全可以基于攻击和防御视角来分类，我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性…...
阻止用邮件不停注册wordpress账户的方法
您可以使用多种不同的策略来阻止垃圾邮件注册。以下是一些策略供您参考：第1个最好用 1.完全禁用WordPress注册：如果您不需要在您的WordPress网站上公开注册，最好完全禁用注册，而不是试图打击垃圾邮件注册。要完全禁用WordPress上…...
低代码工具大比拼：哪个最适合你？
低代码开发平台正日益流行，成为企业和开发者们的首选。但是，面对市场上众多的低代码工具，你是否感到困惑呢？今天，就和数聚股份一起探讨一下，究竟应该选择哪个低代码工具才能最好地满足你的需求。 首先&…...
用Python实现链式调用
嗨喽，大家好呀~这里是爱看美女的茜茜呐 我们在使用Django的models查询数据库时，可以看到有这种写法： form app.models import XXX query XXX.objects.all() query query.filter(name123, age456).filter(salary999)在这种写法里面…...
基于SSM的汽车租赁后台管理系统
基于SSM的汽车租赁后台管理系统 介绍 包括登录、首页、客户管理、车辆管理、汽车出租、出租单管理、汽车入库、检查单管理、系统管理等功能，适合二次开发课程设计、毕业设计等 软件架构 SSM 运行环境 数据库 mysql 安装教程输入链接说明 端口：3306…...
Word 文档转换 PDF、图片
工作有需要 Word 文档转换 PDF、图片 的场景，我们来看看 Java 开发中怎么解决这个问题的。 Word 转 PDF Word 转 PDF 分为商用 Aspose 方案和开源 Apache POIiText 方案。 Aspose 方案 这种方式在目前来看应该是最好的，无论是转换的速度还是成功的概…...
解决Permission is not allowed后基于Ubuntu23.04安装配置docker与docker-compose
参考：Docker官网-Install Docker Engine on Ubuntu 一、 Install using the Apt repository 1.1 Set up Docker’s Apt repository 1.1.1 Add Docker’s official GPG key # Add Dockers official GPG key: sudo apt-get updatesudo apt-get install ca-certifi…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化（Gradient Normalization） (2) 判别器梯度间隙正则化（Discriminator Gradient Gap Regularization） (3) 自注意力机制（Self-Attention） 3. 完整损失函数 二…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程？ 2. Java创建对象的过程？ 3. 对象的生命周期？ 4. 类加载器有哪些？ 5. 双亲委派模型的作用（好处）？ 6. 讲一下类的加载和双亲委派原则？ 7. 双亲委派模…...
淘宝扭蛋机小程序系统开发：打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发，旨在打造一个互动性强的购物平台，让用户在购物的同时，能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机，实现旋转、抽拉等动作，增…...