springboot+mybatis+thymeleaf实现简单的留言板

渡目成书

已于 2024-11-01 13:41:21 修改

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JAVA学习之路文章标签： mybatis spring boot java

于 2022-07-26 17:15:55 首次发布

本文链接：https://blog.csdn.net/weixin_43674113/article/details/125998190

JAVA学习之路专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用Spring Boot创建一个简单的留言板应用，包括创建项目、添加Maven依赖、编写控制器、集成MyBatis并设置数据库连接。通过Thymeleaf模板展示数据，实现增删改查功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录结构

在这里插入图片描述

创建springboot项目

创建Maven项目，导入项目坐标，以下是已经完整的坐标导入


```xml
<?xml version="1.0" encoding="UTF-8"?>
<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.wang</groupId>
    <artifactId>springtf</artifactId>
    <version>1.0-SNAPSHOT</version>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.5.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.6</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.8</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
    </dependencies>
</project>

- 创建springboot的启动入口类，`com.wang.Application`

```java
package com.wang;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

新建com.wang.TestController进行框架测试

package com.wang.controller;


import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TestController {
    @GetMapping("/test")
    public String test() {
        return "hello springboot";
    }
}

在这里插入图片描述

这里注解@RestController会直接返回字符串数据，不会返回模板，想要返回模板使用注解@Controller

mybatis集成

导入坐标

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.6</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>

配置resource.application.yml，配置数据库地址和mybatis的配置文件地址

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/liuyanban?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=UTF-8
    username: root
    password:
mybatis:
  mapper-locations: classpath:mapper/*.xml

新建文章pojo.Article,这里使用lombok进行注解不用手动再去生成set/get，导入lombok坐标即可使用

package com.wang.pojo;

import lombok.Data;

import java.util.Date;

@Data
public class Article {
    private Long id;
    private String name;
    private String title;
    private String content;
    private Date created;
}

新建文章接口mapper.ArticelMapper,这里写了两个方法，一个查询所有一个保存新增数据

package com.wang.mapper;

import com.wang.pojo.Article;

import java.util.List;

public interface ArticelMapper {
    List<Article> queryAllArticles();

    boolean saveArticle(Article article);
}

新增mapper配置文件写sql

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wang.mapper.ArticelMapper">
    <select id="queryAllArticles" resultType="com.wang.pojo.Article">
        select * from article
    </select>
    <insert id="saveArticle" useGeneratedKeys="true" keyProperty="id">
        insert into article values (null,#{name},#{title},#{content},#{created})
    </insert>
</mapper>

新增service.ArticleService进行mapper调用

package com.wang.service;

import com.wang.mapper.ArticelMapper;
import com.wang.pojo.Article;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ArticleService {
    @Autowired
    private ArticelMapper articelMapper;

    public List<Article> queryAllArticles() {
        return articelMapper.queryAllArticles();
    }

    public boolean saveArticle(Article article) {
        return articelMapper.saveArticle(article);
    }

}

thymeleaf集成

thymeleaf的页面资源默认在resource.templates文件夹中
控制器controller.ArticleController

package com.wang.controller;


import com.wang.pojo.Article;
import com.wang.service.ArticleService;
import org.springframework.beans.factory.annotation.Autowired;
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.HttpServletResponse;
import java.io.IOException;
import java.util.Date;
import java.util.List;

@Controller
public class ArticleController {
    @Autowired
    private ArticleService articleService;

    @GetMapping("/")
    public String index(Model model) {
        List<Article> articles = articleService.queryAllArticles();
        model.addAttribute("articles", articles);
        return "index";
    }

    @GetMapping("/add")
    public String add(Model model) {
        model.addAttribute("article", new Article());
        return "add";
    }

    @PostMapping("/add")
    public void addArticel(Article article, HttpServletResponse response) throws IOException {
        Date date = new Date();
        article.setCreated(date);
        boolean b = articleService.saveArticle(article);
        System.out.println(b);
        response.sendRedirect("/");
    }
}

页面index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot 简单留言板</title>
    <link rel="stylesheet" type="text/css" th:href="@{bootstrap/dist/css/bootstrap.css}">
    <script th:src="@{js/jquery-1.9.1.js}"></script>
    <script th:src="@{bootstrap/dist/js/bootstrap.js}"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">留言板</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">首页</a></li>
                <li><a href="/add">留言</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>

</nav>
<div class="container">
    <div class="row">
        <div class="col-md-9">

            <div class="panel panel-primary" th:each="article,key:${articles}">
                <div class="panel-heading">
                    <h3 class="panel-title" th:text="${article.title}" style="margin-bottom: 10px">张三</h3>
                    <span th:text="作者：+${article.name}"></span>
                    <span th:text="时间：+${#dates.format(article.created,'yyyy-MM-dd HH:mm:ss')}"></span>
                </div>
                <div class="panel-body">
                    <p th:text="${article.content}">你好</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">最新评论</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

效果

列表页
新增页