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

目录结构

在这里插入图片描述

创建springboot项目

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


```xml


    4.0.0

    com.wang
    springtf
    1.0-SNAPSHOT
    
        org.springframework.boot
        spring-boot-starter-parent
        2.1.5.RELEASE
    
    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
            mysql
            mysql-connector-java
            5.1.46
        
        
            com.alibaba
            druid
            1.1.6
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.0.1
        
        
            org.projectlombok
            lombok
            1.18.8
        
        
            org.springframework.boot
            spring-boot-starter-test
        
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

- 创建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);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

新建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";
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

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

mybatis集成

导入坐标

<dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-jdbcartifactId>
        dependency>
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>5.1.46version>
        dependency>
        <dependency>
            <groupId>com.alibabagroupId>
            <artifactId>druidartifactId>
            <version>1.1.6version>
        dependency>
        <dependency>
            <groupId>org.mybatis.spring.bootgroupId>
            <artifactId>mybatis-spring-boot-starterartifactId>
            <version>2.0.1version>
        dependency>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

配置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
1
2
3
4
5
6
7
8

新建文章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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

新建文章接口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);
}

1
2
3
4
5
6
7
8
9
10
11
12

新增mapper配置文件写sql


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>
1
2
3
4
5
6
7
8
9
10
11
12

新增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);
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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("/");
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

页面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 navigationspan>
                <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>
    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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

效果

列表页
新增页

相关阅读:
Java 的四种引用方式
 文件缓存的读写
 前端导入导出
 通过API爬取到的淘宝商品详情数据展示（api测试入口）
项目整个管理论文之2
Java面向对象(下)
华纳云：租用的服务器连接超时怎么办?
linux下mv命令移动目录的二种情况
 UniApp组件封装
 2023年09月个人工作生活总结
原文地址：https://blog.csdn.net/weixin_43674113/article/details/125998190