SpringBoot的Web开发入门案例1
2024-04-01 10:53:37
SpringBoot的Web开发入门案例1—登录和页面数据遍历读取
- 新建maven项目：logintest
- pom.xml文件：
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.blu</groupId><artifactId>logintest</artifactId><version>0.0.1-SNAPSHOT</version><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.0.RELEASE</version><relativePath/> </parent><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><scope>provided</scope></dependency><dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version>3.3.7</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope><exclusions><exclusion><groupId>org.junit.vintage</groupId><artifactId>junit-vintage-engine</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId></dependency></dependencies>
</project>
- application.yml
server:port: 8088spring:thymeleaf:cache: false
- login.html（放在templates文件夹下）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Spring Boot Web 开发测试</title>
<link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css}" />
<script type="text/javascript" th:src="@{webjars/jquery/1.11.1/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script type="text/javascript">$(function() {$("#loginbtn").click(function() {var loginName = $("#loginName");var password = $("#password");var msg = "";if (loginName.val() == "") {msg = "登录名不能为空!";loginName.focus();} else if (password.val() == "") {msg = "密码不能为空!";password.focus();}62if (msg != "") {alert(msg);} else {$("#loginform").submit();}})})
</script>
</head>
<body><div class="container"><div class="row"><!-- 页面标题 --><div class="page-header"><h2>用户登录</h2><form class="form-horizontal" action="login" method="post"id="loginform"><div class="form-group"><div class="input-group col-md-4"><span class="input-group-addon"> <iclass="glyphicon glyphicon-user"></i></span> <input class="form-control" placeholder="用户名/邮箱" type="text"name="loginName" id="loginName" /></div></div><div class="form-group"><div class="input-group col-md-4"><span class="input-group-addon"><iclass="glyphicon glyphicon-lock"></i></span> <inputclass="form-control" placeholder="密码" type="password"name="password" id="password" /></div></div><p th:if="${not #strings.isEnpty(errorMsg)}" style="color : red">[[${errorMsg}]]</p><div class="form-group"><div class="col-md-4"><div class="btn-group btn-group-justified"><div class="btn-group"><button type="button" class="btn btn-success" id="loginbtn"><span class="glyphicon glyphicon-log-in"></span> 登录</button></div><div class="btn-group"><button type="button" class="btn btn-danger" id="registerbtn"><span class="glyphicon glyphicon-edit"></span> 注册</button></div></div></div></div></form></div></div></div>
</body>
</html>
- main.html（放在templates文件夹下）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css}" />
<script type="text/javascript" th:src="@{webjars/jquery/1.11.1/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<title>网站首页</title>
</head>
<body><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">第一个 Spring Boot Web 开发示例</h3></div></div><br/><br/><div class="container"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">图书信息列表</h3></div><div class="panel-body"><div class="container"><div class="row"><div class="col-md-4 col-sm-6" th:each="book : ${books}"><a href=""> <img th:src="@{${book.bookImg}==null ? 'img/disappear.jpg' : 'img/'+${book.bookImg}}" src="img/java.jpg" alt="图书封面" width="100px" height="138px"/></a><div class="captio"><h4 th:text="${book.bookName}"> Java </h4><p th:text="${book.author}">BLU</p><p th:text="${book.publisher}">未知出版社</p><p th:text="${book.price}">0.00</p><p th:text="${book.id}">0000</p></div></div></div></div></div></div></div>
</body>
</html>
两张图片：java.jpg 和 disappear.jpg (放在 static/img 文件夹下)
- 启动类WebApplication
package com.blu;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class WebApplication {public static void main(String[] args) {SpringApplication.run(WebApplication.class, args);}
}
- Book实体：
package com.blu.entity;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
public class Book {private String id;private String bookName;private String author;private String publisher;private Double price;private String bookImg;
}
- DemoController
package com.blu.controller;import java.util.Arrays;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;import com.blu.entity.Book;@Controller
public class DemoController {@GetMapping("/toLogin")public String toLogin() { return "login";}@PostMapping("/login")public String login(String loginName,String password, Model model) {if(loginName.equals("admin")&&password.equals("123456")) {return "redirect:/main";}else {model.addAttribute("errorMsg","用户名或密码错误");return "login";}}@GetMapping("/main")public String mainHTML(Model model) {Book b1 = new Book("1001","疯狂 Java 讲义1","李刚","电子工业出版社",109.00,"java.jpg");Book b2 = new Book("1002","疯狂 Java 讲义2","李刚","电子工业出版社",119.00,"java.jpg");Book b3 = new Book("1003","疯狂 Java 讲义3","李刚","电子工业出版社",129.00,null);Book b4 = new Book("1004","疯狂 Java 讲义4","李刚","电子工业出版社",139.00,"java.jpg");model.addAttribute("books",Arrays.asList(b1,b2,b3,b4));return "main";}
}测试
- 运行启动类，浏览器访问：http://localhost:8088/toLogin 进入登陆页面
正确输入用户名admin和密码123456后登陆可进入main页面
如果用户名/密码输入错误：
SpringBoot的Web开发入门案例1相关推荐
- SpringBoot的Web开发入门案例2—国际化
SpringBoot的Web开发入门案例2-国际化 改造logintest项目:SpringBoot的Web开发入门案例1 地址:https://blog.csdn.net/BLU_111/artic ...
- SpringBoot的Web开发入门案例9—数据访问
SpringBoot的Web开发入门案例9-数据访问 创建一个springboot项目(打包方式为jar包): 勾选Spring Web选项,勾选JDBC API和MySQL Driver pom文件 ...
- SpringBoot的Web开发入门案例7—WebMvcConfigurer配置类
SpringBoot的Web开发入门案例7-WebMvcConfigurer配置类 WebMvcConfigurer接口的几个常用方法: addViewControllers:配置请求路径和页面的映射 ...
- SpringBoot的Web开发入门案例3—异常处理
SpringBoot的Web开发入门案例3-异常处理 SpringBoot 默认404界面(由org.springframework.boot.autoconfigure.web.ErrorMvcAu ...
- SpringBoot的Web开发入门案例6—替换默认容器Tomcat
SpringBoot的Web开发入门案例6-替换默认容器Tomcat为Jetty Spring Boot默认是使用Tomcat作为内嵌的Servlet容器的,如需修改为Jetty,只要修改pom文件即 ...
- SpringBoot的Web开发入门案例5—注册Servlets, Filter, Listener
SpringBoot的Web开发入门案例5-注册Servlets, Filter, Listener 注册Servlet 创建MyServlet类 package com.blu.conf;impor ...
- SpringBoot的Web开发入门案例8—支持jsp
新建springboot工程:springboot_jsp,打包方式为war 导入web模块: 生成的项目结构: 包含启动类SpringbootJspApplication: package com. ...
- AOP配置开发入门案例
该AOP开发入门案例采用XML文件方式配置开发(非注解方式)共包含一个xml文件和4个Java类,创建好web工程后引入相应jar包(文末会给出),建好包(若自定义包名注意更改类中的包名),将xml文 ...
- EAS的WEB开发入门
web入门案例文档 web开发入门文档样例 web重写保存提交等方法,在保存提交时改变单据状态 在实体的ContrallerBean重写save和submit方法 如果需要改变工作流审核时的其他状态要 ...
最新文章
- UITextField 详解
- java语言修饰符$_Java语言中的修饰符
- Typora中使用Gitee图床
- [密码学基础][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第15篇]RSA-OAEP和ECIES的密钥生成,加密和解密
- html中表格布局还是div布局,Table布局 VS Div+CSS布局，选哪个？
- 再识PCI：一个PCI驱动实例
- eclipse使用不需要配置jdk的环境变量
- [No000048]程序员的成长过程中，有哪些阶段？
- 堡垒机原生ssh登陆解决方案
- slice,substr,substring三者的区别
- elasticsearch 7.0.1 + kibana + elasticsearch-analysis-ik 7.0.0 安装和配置过程中问题备忘录...
- 深入理解JVM虚拟机读书笔记——类的加载机制
- c语言编写比赛评分程序,比赛评分系统c语言课程设计.doc
- 关于惠普打印机可以打印但是无法扫描的问题
- Android 地图跳转到百度、高德、腾讯地图导航
- 棋牌游戏支付接口H5支付宝微信
- APP 跳转微信小程序和回调
- 传统情感分类方法与深度学习的情感分类方法对比
- ezuikit-js萤石云
- CISSP-D2-资产安全