目录
一.项目准备
1.创建项目
2.配置MyBatis
二.代码编写
1.数据库准备
2.创建用于获取用户输入的数据类：
3.创建Mapper：
4.创建Service：
5.创建Controller：
6.HTML页面准备：
一.项目准备
1.创建项目
2.配置MyBatis
在使用yml配置文件的时候一定要注意空格，空格不对会导致yml配置文件读取错误：
MyBatis配置模板 https://blog.csdn.net/weixin_52159554/article/details/148771292?spm=1001.2014.3001.5501
试运行检查MySQL数据库连接是否成功:
表示连接成功：
连接错误日志 https://blog.csdn.net/weixin_52159554/article/details/148848671?sharetype=blogdetail&sharerId=148848671&sharerefer=PC&sharesource=weixin_52159554&spm=1011.2480.3001.8118
二.代码编写
1.数据库准备
DROP DATABASE IF EXISTS message_boards;CREATE DATABASE message_boards DEFAULT CHARACTER SET utf8mb4;DROP TABLE IF EXISTS message_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;2.创建用于获取用户输入的数据类：
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 deleteFlage;private Date createTime;private Date updateTime;
}
3.创建Mapper：
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.example.springmessageboardsdemo.model.MessageInfo;import java.util.List;@Mapper
public interface MessageInfoMapper {@Insert("insert into message_info (`from`,`to`,`message`)" +" values (#{from}, #{to},#{message})")Integer insertMessageInfo(MessageInfo messageInfo);@Select("select * from message_info")List<MessageInfo> selectAllMessageInfo();
}
4.创建Service：
import org.example.springmessageboardsdemo.mapper.MessageInfoMapper;
import org.example.springmessageboardsdemo.model.MessageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class MessageInfoService {@Autowiredprivate MessageInfoMapper messageInfoMapper;public Integer setMessages(MessageInfo messageInfo) {return messageInfoMapper.insertMessageInfo(messageInfo);}public List<MessageInfo> selectAllMessageInfo() {return messageInfoMapper.selectAllMessageInfo();}
}
5.创建Controller：
import org.example.springmessageboardsdemo.Service.MessageInfoService;
import org.example.springmessageboardsdemo.model.MessageInfo;
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.List;@RequestMapping("/message")
@RestController
public class MessageInfoController {@Autowiredprivate MessageInfoService messageInfoService;@RequestMapping("/board")public boolean message(MessageInfo messageInfo){if(!StringUtils.hasLength(messageInfo.getFrom())&& !StringUtils.hasLength(messageInfo.getTo())&& !StringUtils.hasLength(messageInfo.getMessage())){return false;}messageInfoService.setMessages(messageInfo);return true;}@RequestMapping("/all")public List<MessageInfo> messageList(){return messageInfoService.selectAllMessageInfo();}}
6.HTML页面准备：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.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>
</head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 对 B 说: hello</div> --></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$.ajax({type: 'POST',url: 'message/all',success: function (message) {for(var list of message){var divE = "<div>"+list.from +"对" + list.to + "说:" + list.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({type: 'POST',url: 'message/board',data: {from: from,to: to,message: say,},success: function (result) {if(result){//2. 构造节点var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";//3. 把节点添加到页面上$(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");}else{alert("上传留言失败!")}}})}</script>
</body></html>
