2021-5-24：Spring Boot的Web开发

最新推荐文章于 2021-09-11 10:21:06 发布

小芙子☞

最新推荐文章于 2021-09-11 10:21:06 发布

阅读量123

点赞数 1

分类专栏： Spring

本文链接：https://blog.csdn.net/Lydialhf/article/details/117213934

版权

Spring 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

本文介绍了如何使用SpringBoot结合Thymeleaf展示个人和商品信息。首先创建了Person和Product实体类，接着在登录控制器中添加个人信息方法，并创建对应的Thymeleaf模板页面。然后在商品控制器中处理商品列表展示，同样配合Thymeleaf模板完成。文章最后展示了模板页面的JavaScript如何访问模型数据。

摘要由CSDN通过智能技术生成

Spring Boot的Web开发

创建person文件
在这里插入图片描述

package net.lhf.lesson09.bean;

public class Person {
    private int id;
    private String name;
    private String gender;
    private int age;
    private String telephone;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getTelephone() {
        return telephone;
    }

    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }
    @Override
    public String toString() {
        return "Person{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", gender='" + gender + '\'' +
                ", age=" + age +
                ", telephone='" + telephone + '\'' +
                '}';
    }

}

在登录控制器里添加个人信息方法
在这里插入图片描述

在这里插入图片描述

package net.lhf.lesson09.controller;

import net.lhf.lesson09.bean.Person;
import net.lhf.lesson09.bean.User;
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 javax.servlet.http.HttpServletRequest;
import java.util.Calendar;

/**
 * 功能：登录控制器
 * 作者：李红芙
 * 日期：2021年05月19日
 */
@Controller
public class LoginController {
    /**
     * 通过请求“toLoginPage”跳转到templates目录下的
     * login页面，并把当前年份数据保存到模型对象中
     */
    @GetMapping("toLoginPage")
    public String toLoginPage(Model model){
        User user = new User();
        user.setId(1);
        user.setName("李红芙");
        user.setAge(20);
        user.setAddress("四川");
        model.addAttribute("user",Calendar.getInstance().get(Calendar.SATURDAY));
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login"; // 返回逻辑页面视图名

    }
    @PostMapping("login")
    public String login(HttpServletRequest request, Model model) {
        // 获取表单提交的用户名与密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 判断用户是否登录成功（假设合法用户名为howard，密码为903213）
        if (username.equals("howard") && password.equals("903213")) {
            model.addAttribute("loginMsg", "恭喜，用户登录成功~");
            return "success";
        } else {
            model.addAttribute("loginMsg", "遗憾，用户登录失败~");
            return "failure";
        }
    }
    @GetMapping("/getPerson")
    public String getPerson(Model model){
        //创建个人实体对象
        Person person = new Person();
        //设置个人实体属性
        person.setId(1);
        person.setName("李红芙");
        person.setGender("女");
        person.setAge(20);
        person.setTelephone("12345156");
        //将个人实体写入模型
        model.addAttribute(person);
        //返回逻辑视图名
        return  "person";

    }
}

创建显示个人信息的模板页面
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div  class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">显示个人信息</h3>
    </div>
    <div class="panel-body">
        编号：<span th:text="${person.id}">1</span><br/>
        姓名：<span th:text="${person.name}">娃哈哈</span><br/>
        性别：<span th:text="${person.gender}">男</span><br/>
        年龄：<span th:text="${person.age}">12</span><br/>
        号码：<span th:text="${person.telephone}">183423541</span><br/>
    </div>
</div>
</body>
</html>

启动应用，测试效果
在这里插入图片描述
访问http://localhost:8080/getPerson

问题：Bootstrap的面板样式没有起作用。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="card">
    <div class="card-header" style="background-color:#007bff">
        <h4 class="card-title" style="color:white">显示个人信息</h4>
    </div>
    <div class="card-body">
        编号：<span th:text="${person.id}">1</span><br/>
        姓名：<span th:text="${person.name}">娃哈哈</span><br/>
        性别：<span th:text="${person.gender}">男</span><br/>
        年龄：<span th:text="${person.age}">20</span><br/>
        电话：<span th:text="${person.telephone}">15878789056</span><br/>
    </div>
    <div class="card-footer">
        信工院2021.05.24
    </div>
</div>
</body>
</html>

在这里插入图片描述

package net.lhf.lesson09.bean;

public class Product {
    private int id;
    private String name;
    private double price;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }



    @Override
    public String toString() {
        return "Product{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", price=" + price +
                '}';
    }


}

在这里插入图片描述

package net.lhf.lesson09.controller;

import net.lhf.lesson09.bean.Product;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

/**
 * 功能：商品控制器
 * 作者：李红芙
 * 日期：2021年5月24日
 */

@Controller
public class ProductController {
    @GetMapping("/getProducts")
    public String getProducts(Model model){
        List<Product> products = new ArrayList<>();
        Product product = new Product();
        product.setId(1);
        product.setName("海尔冰箱");
        product.setPrice(3700);
        products.add(product);

        product = new Product();
        product.setId(2);
        product.setName("OPPO Reno5G手机");
        product.setPrice(2700);
        products.add(product);

        product = new Product();
        product.setId(3);
        product.setName("联想电脑");
        product.setPrice(5700);
        products.add(product);
        //将商品列表写入模型
        model.addAttribute("products",products);
        //返回逻辑视图名
        return "products";
    }
}

创建显示商品信息页面
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>商品信息</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="card">
    <div class="card-header">
        <h3>商品列表</h3>
    </div>
    <div class="card-body">
        <ul class="list-group">
            <li class="list-group-item" th:each="product:${products}">
                编号:<span th:text="${product.id}">1</span><br/>
                名称:<span th:text="${product.id}">洗衣机</span><br/>
                单价:<span th:text="${product.id}">2000</span><br/>
            </li>
        </ul>
    </div>
    <div class="card-footer">
        信工院2021.05.24
    </div>

</div>
</body>
</html>

启动应用，查看效果
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>商品信息</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div th:if="${not #lists.isEmpty(products)}">
    <div class="card">
        <div class="card-header" style="background-color:#007bff">
            <h4 class="card-title" style="color:white">显示商品信息</h4>
    </div>
    <div class="card-body">
        <ul class="list-group">
            <li class="list-group-item" th:each="product:${products}">
                编号:<span th:text="${product.id}">1</span><br/>
                名称:<span th:text="${product.name}">洗衣机</span><br/>
                单价:<span th:text="${product.price}">2000</span><br/>
            </li>
        </ul>
    </div>
        <div class="card-footer">
            信工院2021.05.24
        </div>
    </div>
</div>
<div th:if="${#lists.isEmpty(products)}">
    <div class="card">
        <div class="card-header" style="background-color:#007bff">
            <h4 class="card-title" style="color:white">显示商品信息</h4>
        </div>
        <div class="card-body">
            没有查询到满足条件的商品信息
        </div>
        <div class="card-footer">
            信工院2021.05.24
        </div>
    </div>
</div>
</body>
</html>