营销网站的关键字,wordpress免费教育主题,建设网站的效果目的及其功能,北京管庄网站建设公司目录
1. 添加依赖
2. 配置数据库
2.1 创建数据库与数据表
2.2 创建与数据库对应的实体类
3. 后端代码
3.1 目录结构
3.2 MessageController类
3.3 MessageService类
3.4 MessageMapper接口
4. 前端代码
5. 单元测试
5.1 后端接口测试
5.2 使用前端页面测试 在Spri…目录
1. 添加依赖
2. 配置数据库
2.1 创建数据库与数据表
2.2 创建与数据库对应的实体类
3. 后端代码
3.1 目录结构
3.2 MessageController类
3.3 MessageService类
3.4 MessageMapper接口
4. 前端代码
5. 单元测试
5.1 后端接口测试
5.2 使用前端页面测试 在Spring专栏中已经实现了Spring MVC版的留言墙详见下文
【SpringMVC】_SpringMVC实现留言墙_使用springmvc完成一个简单的留言板-CSDN博客文章浏览阅读994次点赞24次收藏17次。1、请求/message/publish2、参数使用对象MessageInfo进行存储参数3、响应true/false_使用springmvc完成一个简单的留言板https://blog.csdn.net/m0_63299495/article/details/139359758该版本的消息存储采用了ListMessageInfo存储每次重启服务器就会导致信息丢失。
本文基于上文对表白墙系统进行持久化。
1. 添加依赖
在pom.xml文件中使用Altinsert快捷键在EditStarters中选择MyBatis与Mysql的相关依赖 并在maven面板中进行刷新
2. 配置数据库
2.1 创建数据库与数据表
创建数据库名为message 在该库下创建messgae_info数据表
CREATE TABLE message_info (
id INT ( 11 ) NOT NULL AUTO_INCREMENT,
from VARCHAR ( 127 ) NOT NULL,
to VARCHAR ( 127 ) NOT NULL,
message VARCHAR ( 256 ) NOT NULL,
delete_flag TINYINT ( 4 ) DEFAULT 0 COMMENT 0-正常, 1-删除,create_time DATETIME DEFAULT now(),update_time DATETIME DEFAULT now() ON UPDATE now(),
PRIMARY KEY ( id )
) ENGINE INNODB DEFAULT CHARSET utf8mb4;
在application.yml中进行数据库与MyBatis的相关配置
# 端口配置
server:port: 8080
# 数据库连接配置
spring:datasource:url: jdbc:mysql://127.0.0.1:3306/message?characterEncodingutf8useSSLfalseusername: rootpassword: xxxxxxdriver-class-name: com.mysql.cj.jdbc.Driver
mybatis:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #配置打印MyBatis日志map-underscore-to-camel-case: true #配置转换驼峰
2.2 创建与数据库对应的实体类
修改MessageInfo类增加id、deleteFlag、createTime、uodateTime属性与数据表字段对应
package com.example.springbootdemo2.controller;import lombok.Data;
import java.util.Date;Data
public class MessageInfo {private Integer id;private String from;private String to;private String message;private Integer deleteFlag;private Date createTime;private Date updateTime;
}3. 后端代码
3.1 目录结构
创建controller、service、mapper、model包并创建对应类或接口 其中MessageController类主要功能
1参数校验2调用MessageService进行业务逻辑操作
MessageService类主要功能
1调用MessageMapper接口进行数据库操作
MessageMapper接口主要功能
1执行SQL语句
3.2 MessageController类
package com.example.springbootdemo2.controller;import com.example.springbootdemo2.model.MessageInfo;
import com.example.springbootdemo2.service.MessageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;// 新增留言
RequestMapping(/message)
RestController
public class MessageController {Autowiredprivate MessageService messageService;RequestMapping(/publish)public Boolean publishMessage(MessageInfo messageInfo){// 参数校验Controllerif(!StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getTo())|| !StringUtils.hasLength(messageInfo.getMessage())){return false;}// 添加留言:ServicemessageService.addMessage(messageInfo);return true;}// 返回所有留言信息RequestMapping(/getMessageList)public ListMessageInfo getMessageList(){return messageService.getMessageInfo();}
}3.3 MessageService类
package com.example.springbootdemo2.service;import com.example.springbootdemo2.mapper.MessageMapper;
import com.example.springbootdemo2.model.MessageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;Service
public class MessageService {Autowiredprivate MessageMapper messageMapper;public void addMessage(MessageInfo messageInfo){messageMapper.insertMessage(messageInfo);}public ListMessageInfo getMessageInfo(){return messageMapper.selectAllMessage();}
}3.4 MessageMapper接口
package com.example.springbootdemo2.mapper;import com.example.springbootdemo2.model.MessageInfo;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import java.util.List;Mapper
public interface MessageMapper {Insert(insert into message_info(from,to,message) values (#{from},#{to},#{message}))void insertMessage(MessageInfo messageInfo);Select(select* from message_info where delete_flag0)ListMessageInfo selectAllMessage();
}4. 前端代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title留言板/titlestyle.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}/style
/headbody
div classcontainerh1留言板/h1p classgrey输入后点击提交, 会将信息显示下方空白处/pdiv classrowspan谁:/span input typetext name idfrom/divdiv classrowspan对谁:/span input typetext name idto/divdiv classrowspan说什么:/span input typetext name idsay/divinput typebutton value提交 idsubmit onclicksubmit()!-- divA 对 B 说: hello/div --
/divscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/script
script// 页面加载时请求后端获取留言列表代码位置不限$.ajax({url:/message/getMessageList,type:get,success:function(messages){// 参数为后端返回结果变量名任意for(var m of messages){// 拼接留言// 拼接节点的HTML直接将HTML添加到container中var divE div m.from 对 m.to 说: m.message /div;// 把节点添加到页面上$(.container).append(divE);}}})function submit() {//1. 获取留言的内容var from $(#from).val();var to $(#to).val();var say $(#say).val();if (from || to || say ) {return;}// 提交留言$.ajax({url: /message/publish,type: post,data: {from: from,to: to,message: say},success: function (result) {if (result) {// 留言添加成功//2. 拼接节点的HTML直接将HTML添加到container中// document.createElement(div);var divE div from 对 to 说: say /div;//3. 把节点添加到页面上$(.container).append(divE);//4. 清空输入框的值$(#from).val();$(#to).val();$(#say).val();} else {// 留言添加失败alert(留言发布失败)}}})}/script
/body/html
5. 单元测试
5.1 后端接口测试
可以使用postman或Chrome 可以在服务器日志中查看到相关信息 需在数据库中进行是否成功的验证 5.2 使用前端页面测试 可以在服务器日志中查看到相关信息 需在数据库中进行是否成功的验证 一般报错检错步骤
1根据后端接口使用postman或Chrome构造请求检查后端代码是否有错
若后端接口访问无错误则说明错误出现在前端或前后端交互
2若使用Chrome则按F12看浏览器是否报错根据报错信息定位错误代码
若无错误则需检查请求是否发往后端可以在后端服务器对应方法处打印日志(使用slf4j)若前端进行操作后后端服务器处没有执行改行日志的代码则说明前后端交互处出现错误
3若后端、前后端交互、前端均没有出现问题可以进行清除前端与后端缓存
