网站制作网站价格,WordPress都可以做什么,如何自己设置网站,私人接单网站开发的能赚多少钱#x1f9f8;欢迎来到dream_ready的博客#xff0c;#x1f4dc;相信你对这篇博客也感兴趣o (ˉ▽ˉ#xff1b;) #x1f4dc;表白墙/留言墙初级Spring Boot项目#xff08;此篇博客的简略版#xff0c;不带MyBatis数据库开发#xff09; 目录
1、项目前端页面及项目… 欢迎来到dream_ready的博客相信你对这篇博客也感兴趣o (ˉ▽ˉ) 表白墙/留言墙初级Spring Boot项目此篇博客的简略版不带MyBatis数据库开发 目录
1、项目前端页面及项目文件架构展示
1.1、项目前端页面展示
1.2、项目文件架构展示
2、首先定义前后端交互接口
3、然后创建Spring Boot项目导入下列依赖
4、编写前端页面
5、配置并连接数据库数据库相关工作
5.1、数据库分析及建库建表语句
5.2、连接数据库(yml文件)并配置相关配置
6、编写后端代码
6.1、数据库实体类(Model)
6.2、Controller —— 控制层
方法publishMessage处理逻辑
方法getMessageInfo处理逻辑
6.3、Service —— 业务逻辑层
6.4、Dao(此处命名为Mapper) —— 持久层
方法insertMessage处理逻辑
方法selectAllMessage处理逻辑
7、全部代码超级全含建库建表语句含搭建教程
依赖
建表
yml配置文件书写
实体类
Controller
Service
Dao(此处是Mapper)
前端 1、项目前端页面及项目文件架构展示
1.1、项目前端页面展示 1.2、项目文件架构展示
此处用到了后端极其常见的三层架构
详细信息请看下面这个博客其实如果是初学者的话先简单按着SpringMVC的理解来也行但两者是有区别的
什么是SpringMVC简单好理解什么是应用分层SpringMVC与应用分层的关系 什么是三层架构SpringMVC与三层架构的关系 2、首先定义前后端交互接口 讲解 此项目注重前后端信息的交互舍去了登录的操作 提交留言 —— 点击提交后前端从输入框获取三个参数的值向后端发送这MessageInfo的三个参数的值后端接收后保存到MySQL数据库中 查看所有留言 —— 前端发送无参的请求后端查询数据库将查询后的数据封装到List集合中前端接收数据后将其展示到页面上
3、然后创建Spring Boot项目导入下列依赖
如何在idea中创建Springboot项目 手把手带你创建Springboot项目稳
导入下列依赖 4、编写前端页面 在resource目录下的static目录下创建表白墙的html页面此处我将其命名为 messagewall.html
如图红框位置 表白墙页面(messagewall.html) !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/getMessageInfo,type: get,success:function (message){for(var m of message){// 2. 拼接节点的 htmlvar divE div m.from 对 m.to 说: m.message/div;//3. 把节点添加到页面上$(.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. 拼接节点的 htmlvar divE divfrom 对 to 说: say/div;//3. 把节点添加到页面上$(.container).append(divE);//4. 清空输入框的值$(#from).val();$(#to).val();$(#say).val();}else{// 添加失败alert(留言发布成功)}}});}/script
/body/html
代码逻辑 从input输入框内获取fromtomessage三个参数向后端发送post请求并将参数发送过去后端接收参数并保存前端页面也将这段数据直接展示在页面上 每次刷新页面前端向后端发送get请求后端响应回封装成List集合的所有数据前端遍历集合并将其展示在前端页面上
5、配置并连接数据库数据库相关工作
5.1、数据库分析及建库建表语句
建库建表语句
库在此处就不指定了放你自己常用的库下或者新建都行
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;
数据库分析 你也可以输入 desc userinfo; 命令来在你的客户端查看建表的各字段信息和我上面这张图表达的意思一样
解析如下
id 整数类型的自增字段 作为主键from 字符串类型 用于存储消息发送者信息to 字符串类型 用于存储消息接收者信息message 字符串类型 用于存储两者间发送的消息内容delete_flag 小整数类型0或1 此处默认设置为0 用于标记信息是否被删除0表示正常1表示删除create_time DATETIME 类型 用于存储消息创建时间 默认为当前时间update_time DATETIME 类型 用于存储消息更新时间 默认为当前时间并且会在更新时自动更新为当前时间
字符集采用utf8mb4自增主键是id
默认为...即若不主动设置则为默认值
5.2、连接数据库(yml文件)并配置相关配置
你的application文件后缀大概率是 .properties 将其后缀改为 .yml 即可 yml配置如下
spring:datasource:url: jdbc:mysql://127.0.0.1:3306/message?characterEncodingutf8useSSLfalseusername: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:configuration: # 配置打印 MyBatis 日志log-impl: org.apache.ibatis.logging.stdout.StdOutImplmap-underscore-to-camel-case: true #配置驼峰⾃动转换# 配置 mybatis xml 的⽂件路径在 resources/mapper 创建所有表的 xml ⽂件 classpath指的是resourcesmapper-locations: classpath:mapper/**Mapper.xml
mybatis下面不懂得还好我都给注释了如果是前几行不懂的话那完蛋你最好先稍微学习下mybatis前六行的作用是连接数据库
第三行的ip地址、端口号、数据库库名以及第四行和第五行的信息根据自己实际情况修改
6、编写后端代码 yml配置在上面 6.1、数据库实体类(Model)
为实现分层架构定义Model层其实Model层也算Dao层的一部分然后将对应的实体类命名为MessageInfo
这其中的各个属性对应数据库中的各个字段 以下是全部代码
import lombok.Data;
import java.util.Date;Data // 组合注解集成了Getter Setter ToString 等注解
public class MessageInfo {private Integer id;private String from;private String to;private String message;private Date createTime;private Date updateTime;}
6.2、Controller —— 控制层
注意Controller层、Serbice层、Dao层密切相关所以Controller代码里就行Service和Dao层的部分不要慌我的代码是绝对完整正确的跟着我的讲解走并且理解就行
接收前端发送的请求对请求进行处理并响应数据 全部代码如下
import com.example.messagewall_mybatis.model.MessageInfo;
import com.example.messagewall_mybatis.service.MessageService;
import lombok.extern.slf4j.Slf4j;
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;Slf4j
RequestMapping(/message)
RestController
public class MessageController {Autowiredprivate MessageService messageService;RequestMapping(/publish)public Boolean publishMessage(MessageInfo messageInfo){log.info(发表留言);// 进行参数的校验if(!StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getTo())|| !StringUtils.hasLength(messageInfo.getMessage())){return false;}// 添加留言messageService.addMessage(messageInfo);return true;}RequestMapping(/getMessageInfo)public ListMessageInfo getMessageInfo(){return messageService.getMessageInfo();}
}
下面这个注入了MessageService该类里面都是对数据库进行增删改查的方法 方法publishMessage处理逻辑 接收前端传来的数据自动将其封装为MessageInfo类型进行参数的校验判断三个参数是否有空若有空返回false(失败)若参数正确则添加留言调用Service中的addMessage方法将留言添加到数据库中并返回true
方法getMessageInfo处理逻辑 调用Service中的getMessageInfo方法从数据库中查询数据并返回给前端
6.3、Service —— 业务逻辑层
处理具体的业务逻辑 全部代码如下
import com.example.messagewall_mybatis.mapper.MessageMapper;
import com.example.messagewall_mybatis.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();}
}
下面这个注入了MessageService该接口里面都是实现对数据库进行增删改查的具体操作 两个方法的定义逻辑 Service层属于声明和调用对数据库的具体操作在Mapper中可以看到addMessage和getMessageInfo实际都是再次调用Mapper中的操作addMessage 表示向数据库中添加信息getMessageInfo 表示从数据库中查询所有的信息
6.4、Dao(此处命名为Mapper) —— 持久层
负责数据访问操作包括数据的增、删、改、查 全部代码如下
import com.example.messagewall_mybatis.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}))public void insertMessage(MessageInfo messageInfo);Select(select * from message_info where delete_flag0)ListMessageInfo selectAllMessage();
}
此处因为SQL语句过于简单所以我选择了使用注解当然你使用XML当然也可以按你的写作风格就行但若你是初学者又刚好了解注解那么按着我的来更方便一些
方法insertMessage处理逻辑 定义Insert注解将messageInfo实体类中的from、to、message三个属性的值赋值给mossage_info表中对应的三个属性
方法selectAllMessage处理逻辑 定义Select注解查询message_info表中未被逻辑删除的数据并将其放到集合中 至此本项目就讲解完成了 前路漫漫数年磨剑只求一朝天下知希望本篇博客给您进了些绵薄之力感谢您的阅读 7、全部代码超级全含建库建表语句含搭建教程
友情提示若您是初学者建议慢慢阅读博客跟着步骤一步一步搭建项目代码也是绝对正确的
但同时也为时间紧迫者以及掌握了一些知识的人提供了快捷方案直接把所有代码放在下面并配上了简单的搭建教程(详细的在上面)
依赖 建表
库自己指定就行
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;
yml配置文件书写
spring:datasource:url: jdbc:mysql://127.0.0.1:3306/message?characterEncodingutf8useSSLfalseusername: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:configuration: # 配置打印 MyBatis 日志log-impl: org.apache.ibatis.logging.stdout.StdOutImplmap-underscore-to-camel-case: true #配置驼峰⾃动转换# 配置 mybatis xml 的⽂件路径在 resources/mapper 创建所有表的 xml ⽂件 classpath指的是resourcesmapper-locations: classpath:mapper/**Mapper.xml
实体类
import lombok.Data;import java.util.Date;Data // 组合注解集成了Getter Setter ToString 等注解
public class MessageInfo {private Integer id;private String from;private String to;private String message;private Date createTime;private Date updateTime;}
Controller
import com.example.messagewall_mybatis.model.MessageInfo;
import com.example.messagewall_mybatis.service.MessageService;
import lombok.extern.slf4j.Slf4j;
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;Slf4j
RequestMapping(/message)
RestController
public class MessageController {Autowiredprivate MessageService messageService;RequestMapping(/publish)public Boolean publishMessage(MessageInfo messageInfo){log.info(发表留言);// 进行参数的校验if(!StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getTo())|| !StringUtils.hasLength(messageInfo.getMessage())){return false;}// 添加留言messageService.addMessage(messageInfo);return true;}RequestMapping(/getMessageInfo)public ListMessageInfo getMessageInfo(){return messageService.getMessageInfo();}
}
Service
import com.example.messagewall_mybatis.mapper.MessageMapper;
import com.example.messagewall_mybatis.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();}
}
Dao(此处是Mapper)
import com.example.messagewall_mybatis.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}))public void insertMessage(MessageInfo messageInfo);Select(select * from message_info where delete_flag0)ListMessageInfo selectAllMessage();
}
前端
!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/getMessageInfo,type: get,success:function (message){for(var m of message){// 2. 拼接节点的 htmlvar divE div m.from 对 m.to 说: m.message/div;//3. 把节点添加到页面上$(.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. 拼接节点的 htmlvar divE divfrom 对 to 说: say/div;//3. 把节点添加到页面上$(.container).append(divE);//4. 清空输入框的值$(#from).val();$(#to).val();$(#say).val();}else{// 添加失败alert(留言发布成功)}}});}/script
/body/html 欢迎您于百忙之中阅读这篇博客希望这篇博客给您带来了一些帮助祝您生活愉快
