【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><!-- 标题栏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 {@Resourceprivate 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.Driverurl: jdbc:mysql://localhost/brog_database?characterEncoding=UTF8&useUnicode=true&useSSL=falseusername: rootpassword: 200153mybatis: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>

【SpringBoot】写一个具有留言墙功能的JavaWeb相关推荐

【微信小程序/实现】实现留言墙功能页面
[微信小程序/实现]实现留言墙功能一.需求分析二.功能设计三.页面设计四.代码 (一)核心代码:向服务器发出请求 (二)完整代码 message.wxml message.wxss messa ...
字符串右移n位,例如 “hello world“ 右移两位后ldhello wor 要求写一个方法实现此功能,方法的格式是 String moveToRight(String str,int po
字符串右移n位,例如 "hello world" 右移两位后ldhello wor 要求写一个方法实现此功能,方法的格式是 String moveToRight(String s ...
【c语言写计算器】利用函数写一个计算器包括菜单功能和加减乘除四个功能
/*利用函数写一个计算器包括菜单功能和加减乘除四个功能作者:NBDR_YL*/ #include<stdio.h>int mean(void); //声明菜单的函数 float add ...
课后习题5.13 编写一程序，将两个字符串连接起来，结果取代第一个字符串。（1）用字符数组，不用stract函数（即自己写一个具有stract函数功能的函数）；（2）用标准库中的stract函数；
课后习题5.13 编写一程序,将两个字符串连接起来,结果取代第一个字符串. (1)用字符数组,不用stract函数(即自己写一个具有stract函数功能的函数): (2)用标准库中的stract函数: ...
如何使用SpringBoot写一个属于自己的Starter
(一)概述 SpringBoot以其自动装配的能力被广泛应用,我们在写代码时肯定遇到过很多spring-boot-starter命名的依赖,比如spring-boot-starter-web,在pom ...
【程序功能设计】先写一个在线留言本，实现用户的在线留言功能，留言信息存储到数据库，要求书籍数据表内容以及使用PHP编码完成。
文章目录一.考点 1.数据表设计分析数据表结构留言板有哪些信息需要存储? 2.数据表创建语句 3.选择PHP连接数据库的方式 1)PDO[推荐使用] 2)MySQLi 3)MySQL库 4.编码 ...
练手：原生js（部分jquery）写一个前端页面分页功能
准备一个获取数据的接口 –注–:页面可能有点简陋,我们这里主要写如何操作dom来实现分页的功能. 这里我是用node搭建了一个简易的服务器,用来给前端发送数据: const express = req ...
SpringBoot写一个聊天工具
一.简介这是一款基于 JS 实现的超轻量级桌面版聊天软件.主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket.也支持web网页聊天实现.文字聊天,互传文件,离线消息 ...
写一个用户登入功能(html+ tomcat + mysql)
用户登入功能的实现(html + tomcat + mysql) 第一导入 jar包(放入到web-inf的文件夹下) 和html Title 游戏玩第二写个jdbc操控数据库的一个类 packa ...

【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】写一个具有留言墙功能的JavaWeb相关推荐

最新文章

热门文章