【SpringBoot】写一个具有留言墙功能的JavaWeb
【SpringBoot】写一个具有留言墙功能的JavaWeb
- 项目已经部署上线
- 一、需求说明
- 二、概要设计
- 三、详细设计
-
- （一）数据库设计
- （二）页面设计
- （三）功能设计
- （四）项目结构
- 四、具体代码
-
- （一）message.html
- （二）cn.example.springboottest
-
- （1）pojo：Message.java
- （2）mapper：MessageMapper.java
- （3）service：MessageService.java
- （4）controller
- （5）启动类
- （三）项目配置文件
项目已经部署上线
可以跳转体验：留言墙
项目工程文件：基于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>
<link rel="icon" href="img/P.ico" type="image/x-icon">
<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">timep>
<hr class="wordsgap">
div>
div>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 += ''+
''+data[i].name+ ' 说：'+''+
''
+data[i].words+''+
''
+data[i].time+''+
'
'+
''
}
$("#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
<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.0modelVersion>
<parent>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-parentartifactId>
<version>2.6.6version>
<relativePath/>
parent>
<groupId>com.examplegroupId>
<artifactId>springboot-testartifactId>
<version>0.0.1-SNAPSHOTversion>
<name>springboot-testname>
<description>Demo project for Spring Bootdescription>
<properties>
<java.version>1.8java.version>
properties>
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.mybatis.spring.bootgroupId>
<artifactId>mybatis-spring-boot-starterartifactId>
<version>2.2.2version>
dependency>
<dependency>
<groupId>mysqlgroupId>
<artifactId>mysql-connector-javaartifactId>
<version>5.1.46version>
dependency>
<dependency>
<groupId>org.projectlombokgroupId>
<artifactId>lombokartifactId>
<optional>trueoptional>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-testartifactId>
<scope>testscope>
dependency>
dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-maven-pluginartifactId>
plugin>
plugins>
build>
project>