SpringBoot 中 JSP和HTML的简单使用

最新推荐文章于 2024-07-21 11:21:32 发布

WoongCha

最新推荐文章于 2024-07-21 11:21:32 发布

阅读量865

点赞数

分类专栏：笔记文章标签： html5

本文链接：https://blog.csdn.net/woongcha/article/details/106976391

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

SpringBoot 中 JSP和HTML的简单使用

JSP

在pom文件中引入相应的依赖

  <!-- web -->
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>

  <!-- 整合JSP -->
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-tomcat</artifactId>
  </dependency>
  <dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
  </dependency>

创建application.yml文件

因为SpringBoot无需添加springMVC的配置文件，所以直接在application中配置视图解析器的前缀和后缀。

server:
  port: 8080
spring:
  mvc:
    view:
      prefix: /
      suffix: .jsp

简化Controller层

    @GetMapping("/index")
    public ModelAndView index(){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("index");
        modelAndView.addObject("list",studentRepository.findAll());
        return modelAndView;
    }

JSP页面

<%@ page isELIgnored="false" %> 允许使用el表达式

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 核心标签是最常用的 JSTL标签。引用核心标签库的语法.

<c:forEach items="${list}" var="student"> 遍历

<%--
  Created by IntelliJ IDEA.
  User: woongcha
  Date: 2020-06-26
  Time: 20:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1>test</h1>
    <table>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>AGE</th>
        </tr>
        <c:forEach items="${list}" var="student">
            <tr>
                <td>${student.id}</td>
                <td>${student.name}</td>
                <td>${student.age}</td>
            </tr>
        </c:forEach>
    </table>
</body>
</html>

HTML

HTML循环

在pom文件中引入相应的依赖

       <!-- 引入thymeleaf依賴 -->
		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!-- web启动jar包 -->
        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.3.1.RELEASE</version>
        </dependency>

创建application.yml文件

server:
  port: 8080
spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8

Controller层

@Controller
@RequestMapping("/hello")
public class IndexHandler {

    @GetMapping("/index")
    public String index(){
        System.out.println("index...");
        return "index";
    }
}

HTML页面

<html xmlns:th="http://www.thymeleaf.org"></html> 引用thymeleaf语法

<tr th:each="student,seat:${list}" th:style="'background-color:'+@{${seat.odd}?'#F2F2F2'}"> seat起计数器的作用，随着list的循环，seat也一直增加。

background-color: 背景色

@{${seat.odd}?'#F2F2F2'} 当seat值为偶数的时候，所在行的背景色为#F2F2F2 even表示偶数 odd为奇数

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>hello world1</h1>
    <table>
        <tr>
            <th>index</th>
            <th>count</th>
            <th>学生id</th>
            <th>学生姓名</th>
            <th>学生年龄</th>
        </tr>
        <tr th:each="student,seat:${list}" th:style="'background-color:'+@{${seat.odd}?'#F2F2F2'}">

            <td th:text="${seat.index}"></td>
            <td th:text="${seat.count}"></td>
            <td th:text="${student.id}"></td>
            <td th:text="${student.name}"></td>
            <td th:text="${student.age}"></td>
        </tr>
    </table>
</body>
</html>

HTML赋值拼接

Controller层

    @GetMapping("/index2")
    public String index2(Map<String,String> map) {
        map.put("name","张三");
        System.out.println(map);
        return "index2";
    }

HTML

 取到name的值

  字符与数据拼接的两种方法

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello world1</h1>
    <p th:text="${name}"></p>
    <p th:text="'学生姓名是'+${name}"></p>
    <p th:text="|学生姓名是${name}|"></p>
</body>
</html>

HTML条件判断

th:if 表示条件成立时显示内容

th:unless 表示条件不成立时显示内容

Controller层

    @GetMapping("/index3")
    public String index3(Map<String, Boolean> map) {
        map.put("flag", true);
        return "index3";
    }

HTML

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello world1</h1>
<p th:if="${flag == true}" th:text="if判断成立"></p>
<p th:unless="${flag != true}" th:text="unless判断成立"></p>

</body>
</html>

HTML中URL的使用

<a th:href="@{http://www.baidu.com}">跳转</a>

通过HTML传数据

    @GetMapping("/index2/{name}")
    public String index2(@PathVariable("name") String name) {

        return "index2";
    }

    @GetMapping("/index4")
    public String index4(Model model) {
        model.addAttribute("name","tom");
        return "index4";
    }

index4.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a th:href="@{http://www.baidu.com}">跳转</a>
<a th:href="@{http://localhost:9090/index/index2/{name}(name=${name})}">跳转2</a>
</body>
</html>

index2.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello world1</h1>
    <p th:text="${name}"></p>
    <p th:text="'学生姓名是'+${name}"></p>
    <p th:text="|学生的姓名是${name}|"></p>
</body>
</html>

<a th:href="@{http://localhost:9090/index/index2/{name}(name=${name})}">跳转2</a>

其中{name}(name=${name}) 第一个name为从第二个name中接收到的值，第三个name通过EL表达式将model.addAttribute("name","tom"); 中的tom传给第二个name。

WoongCha

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot 中 JSP和HTML的简单使用

SpringBoot 中 JSP和HTML的简单使用JSP在pom文件中引入相应的依赖  <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 整合JSP --&g
复制链接

扫一扫