【SpringBoot】写一个具有留言墙功能的JavaWeb

本文链接：https://blog.csdn.net/peng_YuJun/article/details/123963443

【SpringBoot】写一个具有留言墙功能的JavaWeb

项目已经部署上线
一、需求说明
二、概要设计
三、详细设计
四、具体代码

项目已经部署上线

可以跳转体验：留言墙
项目工程文件：基于SpringBoot的简单留言墙

一、需求说明

只是一个需要简单的留言墙功能，输入用户名称和留言内容，点击发送按钮，即可完成留言。

二、概要设计

前端：网页页面内容分为上下两部分，上面部分提供文本框给用户输入用户名称和留言内容进行留言，下面剩余部分则是展示所有用户的留言。

页面部分使用简单的HTML5+CSS样式和jQuery完成即可。

后端：负责接收前端页面输入的用户留言信息，将信息插入到数据库。以及将数据库的所有留言信息查询出来，并展示在前端页面。

后端采用SpringBoot的JavaWeb项目框架，搭配Thymeleaf + Lombok + MySQL + MyBatis 等技术完成

三、详细设计

（一）数据库设计

留言表E-R 图
留言表设计

（二）页面设计

在这里插入图片描述

（三）功能设计

前端：

进入页面初始化时，通过Ajax技术向后端Post请求，获取到所有留言信息的数据，并且循环插入到页面展示
发送按钮被点击时，获取文本框中的用户姓名和留言内容等信息，通过Ajax技术Post到后台。然后重复第一步。

后端：

接收到前端页面获取所有留言信息的请求，向数据库查询所有留言信息，储存到集合中，并返回该集合。
接收到前端页面的新增留言信息请求，将该新增的留言信息插入到数据库，将插入是否成功的信息存储到消息Map并返回该Map。

（四）项目结构

下面是项目的一个运行结构图，本项目依据该图展现出来的一个分层思想来进行项目编程。
请添加图片描述

四、具体代码

（一）message.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf_8">
  <title>留言空间</title>
  <!-- 标题栏logo -->
  <link rel="icon" href="img/P.ico" type="image/x-icon">
  <!-- 收藏夹里显示的logo -->
  <link rel="shortcut icon" href="img/P.ico" type="image/x-icon">
  <style>
    html{
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 0;
      margin: 0;
    }
    body{
      flex: 1;
      display: flex;
      flex-direction:column;
      justify-content: center;
      align-items:center ;
      margin: 4px;
      padding: 0;
      font-family: 楷体;
    }
    header{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      background-color:#F2F5A6;
      border: 2px solid;
    }
    #send{
      width: 60%;
      border: 2px solid #7A797B;
      border-radius: 20px;
      margin: 10px;
      padding: 10px;
    }
    #send textarea{
      width: 80%;
      height: 120px;
      font-size: larger;
      padding: 10px;
    }
    #send input{
      width: 40%;
      height: 24px;
    }
    #send button{
      padding: 6px 20px;
      margin-left: 28px;
    }

    #messages{
      width: 60%;
    }
    .item{
      margin: 20px;
    }
    #message .state{
      text-align: right;
    }
    .wordsgap{
      border:1px dashed #7A797B;
    }

    a{
      text-decoration: none;
      color: #7A797B;
    }
    h2,p{
      line-height: 0;
    }
    h2{
      margin: 33px 0;
    }
    p{
      margin: 20px 0;
    }
  </style>
</head>
<body onload="displayAll()">
<header>
  <a href="index.html">peng_YuJun的网络空间/</a>
  <h2>留言板</h2>
</header>

<div id="send">
  <h1>来踩一踩</h1>
  <hr>
  <h2>您的大名</h2>
  <input id="typingname">
  <h2>您的留言</h2>
  <textarea id="typingwords"></textarea>
  <button id="sendBtn">发表</button>
</div>

<div id="messages">
  <h1>留言板</h1>
  <hr>
  <div id="message">
    <div class="item">
      <b class="user_name">示例 说：</b>
      <p class="words">这是一个示例</p>
      <p class="state">time</p>
      <hr class="wordsgap">
    </div>
  </div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
  //发表留言
  $("#sendBtn").on("click",function (){
     //检查文本框是否有值
    if(($("#typingname").val() == null|| $("#typingname").val().replace(/^\s+|\s+$/g,"")=="")||($("#typingwords").val() == null|| $("#typingwords").val().replace(/^\s+|\s+$/g,"")=="")){
      alert("请完整填写信息！");
      return;
    }
    $.ajax({
      url: "/message/add",
      type: "POST",
      data: {
        name: $("#typingname").val(),
        words: $("#typingwords").val()
      },
      resultType: "JSON",
      success: function (result){
        displayAll();
        alert(result.message);
        $("#typingname").val("");
        $("#typingwords").val("");
      },
      error: function (result){
        alert(result.message);
      }
    });
  });

  //申请显示所有留言信息
  function displayAll(){
    $.ajax({
      url: "/message/find",
      type: "POST",
      dataType: "JSON",
      success: function (data){
        var message = "";
        for (var i = 0;i<data.length; i++){
          message += '<div class="item">'+
                  '<b class="user_name">'+data[i].name+ ' 说：'+'</b>'+
                  '<p class="words">'+data[i].words+'</p>'+
                  '<p class="state">'+data[i].time+'</p>'+
                  '<hr class="wordsgap">'+
                  '</div>'
        }
        $("#message").empty();
        $("#message").append(message);
      },
      error: function (){
        alert("获取留言数据异常");
      }
    });
  }
</script>
</html>

（二）cn.example.springboottest

（1）pojo：Message.java

package com.example.springboottest.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.time.LocalDateTime;

@Data
@NoArgsConstructor //无参数的构建方法
@AllArgsConstructor //有参数的构建方法
public class Message {
    private Integer id; //留言编号
    private String name; //用户大名
    private String words; //留言内容
    private LocalDateTime time;  //留言时间
}

（2）mapper：MessageMapper.java

package com.example.springboottest.mapper;

import com.example.springboottest.pojo.Message;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface MessageMapper {
    /**
     * 查询所有留言信息
     * @return
     */
    @Select("SELECT * FROM tb_message")
    List<Message> selectAllMessage();

    /**
     * 新增一条留言信息
     * @param message
     * @return
     */
    @Insert("INSERT INTO tb_message(name, words,time)"+
            "VALUES(#{name}, #{words}, #{time})")
    int insertMessage(Message message);
}

（3）service：MessageService.java

package com.example.springboottest.service;

import com.example.springboottest.mapper.MessageMapper;
import com.example.springboottest.pojo.Message;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.time.LocalDateTime;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Service  //Service类的注解
public class MessageService {

    @Resource  //注入MessageMapper接口
    private MessageMapper messageMapper;

    /**
     * 查找所有留言信息
     * @return
     */
    public List<Message> findAllMessage(){
        //查找所有留言信息
        List<Message> messageList = messageMapper.selectAllMessage();
        //测试
        for(Message message:messageList){
            System.out.println(message.toString());
        }
        //返回留言信息
        return messageList;
    }

    /**
     * 插入留言信息
     * @param message
     * @return
     */
    public Map<String, Object> addMessage(Message message){
        Map<String, Object> resultMap = new HashMap<>();
        System.out.println(message.toString());
        //补充插入信息
        message.setTime(LocalDateTime.now());
        //插入留言信息
        int result = messageMapper.insertMessage(message);
        if(result > 0){
            //留言信息插入成功
            resultMap.put("code" ,200);
            resultMap.put("message" , "信息发送成功！");
        }else{
            //留言信息插入失败
            resultMap.put("code" ,400);
            resultMap.put("message" , "！信息发送失败");
        }
        return resultMap;
    }
}

（4）controller

MessageController.java

package com.example.springboottest.controller;

import com.example.springboottest.pojo.Message;
import com.example.springboottest.service.MessageService;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("message")
public class MessageController {

    @Resource
    private MessageService messageService;

    /**
     * 找到所有留言信息
     * @return
     */
    @PostMapping("find")
    public List<Message> findAllMessage(){
        return messageService.findAllMessage();
    }

    /**
     * 发送一条留言信息
     * @param message
     * @return
     */
    @PostMapping("add")
    public Map<String, Object> addMessage(Message message){
        return messageService.addMessage(message);
    }
}

UiController.java

package com.example.springboottest.controller;

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

@RestController
public class UiController {

    @GetMapping("/message")
    public ModelAndView message(){
        return new ModelAndView("message.html");
    }

}

（5）启动类

package com.example.springboottest;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("com.example.springboottest.mapper")
@SpringBootApplication
public class SpringbootTestApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootTestApplication.class, args);
    }

}

（三）项目配置文件

application.yml

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost/brog_database?characterEncoding=UTF8&useUnicode=true&useSSL=false
    username: root
    password: 200153

mybatis:
  configuration:
    map-underscore-to-camel-case: true # 开启驼峰映射

pom.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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.6</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>springboot-test</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-test</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>