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: 8088
spring:
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();
}
62
if (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"> <i
class="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"><i
class="glyphicon glyphicon-lock"></i></span> <input
class="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页面
-
如果用户名/密码输入错误：
扫一扫
804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
