一、静态页面
静态页面和完整程序有需留言即可。
另外个人地址为：添加链接描述
1.1 留言表单
1.2 留言贴列表
1.3 分页
二、程序设计【Springboot】
个人本户采用的是Springboot2+JPA完成设计的。
数据库会根据java实体类中的字段进行自动创建，不需要自己创建。
2.1 数据库实体设计
在数据库主要是对于留言贴这个对象的属性进行设计，比较简单，主要有ID，昵称字段，日期，留言贴内容，头像，性别等属性，这也是在表单中即将提交的内容。
2.2 Java实体类
省略构造，getter setter toString等方法。
@Entity @Table(name = "t_message") public class Message { @Id @GeneratedValue private Long id; // 留言昵称 private String nickname; // 性别 private String sex; // 留言内容 private String content; // 留言头像 private String avatar; // 留言时间 @Temporal(TemporalType.TIMESTAMP) private Date createTime; }
2.3 MessageService服务接口
接口功能：帖子存库，删除帖子【后台审核】，分页查询帖子数据封装到JPA中的Pageable中。
public interface MessageService { // 做留言贴存库 void getMessage(Message message); // 分页查询 public Page<Message> listMessage(Pageable pageable); // 删除留言 void delete(Long id); }
2.4 MessageServiceImpl实现类
@Service public class MessageServiceImpl implements MessageService { @Autowired private MessageRepository messageRepository; @Transactional @Override public void getMessage(Message message) { message.setCreateTime(new Date()); messageRepository.save(message); } //分页查询 jpa封装的 @Override public Page<Message> listMessage(Pageable pageable) { return messageRepository.findAll(pageable); } @Override public void delete(Long id) { messageRepository.deleteById(id); } }
2.5 DAO操作数据库
数据操作层，采用了JPA封装CRUD，只需要继承一个JpaRepository类即可。这也是和MybatisPlus如出一辙的想法。
public interface MessageRepository extends JpaRepository<Message, Long> { }
2.6 Controller层实现
控制层只做了简单的跳转和判空操作，为了安全起见，应该将视图层，控制层还有数据层全部需要进行判空，这里不做了。
@Controller public class MessageController { @Autowired MessageService messageService; // 带有分页的便利贴 @RequestMapping("/message") public String message(@PageableDefault(size = 12, sort = {"createTime"}, direction = Sort.Direction.DESC) Pageable pageable, Model model){ model.addAttribute("page", messageService.listMessage(pageable)); return "message"; } /** * 获取前台留言板信息 */ @PostMapping("/getMessage") public String getMessage(Message message,Model model){ if (message.getAvatar()!=null && message.getContent()!=null && message.getNickname()!=null && message.getSex()!=null){ // 插入数据库 messageService.getMessage(message); }else{ } return "redirect:/message"; } }
2.7 HTML数据渲染
数据渲染只展示出了留言贴的遍历和分页数据的简单使用。
提交表单：略 留言贴： <div class="suiyan_list"> <ul> <li th:each="message : ${page}"><a> <p class="suiyan_time" style="color: deeppink" th:text="${message.nickname}+' && '+${#dates.format(message.createTime,'yyyy-MM-dd')}">你的昵称 & 2020-07-04</p> <p class="suiyan_text" th:text="${message.content}">随着年龄的增长，人总会变得越来越宽容；所以很多事情到最后并不是真的解决了，而是，算了吧。</p> <img style="padding-bottom: 1px;" height="40px" width="40px" th:src="@{${message.avatar}}"> <span style="font-size: 20px;color: deeppink" th:text="${message.sex}">女生</span> </a> </li> </ul> </div> 分页： <!--分页--> <div class="pagelist2" th:if="${page.totalPages}>1"> <a th:href="@{/message/(page=0)}" th:classappend="${page.number==0} ? 'curPage'">首页</a> <a th:href="@{/message/(page=1)}" th:classappend="${page.number==1} ? 'curPage'">2</a> <a th:href="@{/message/(page=2)}" th:classappend="${page.number==2} ? 'curPage'">3</a> <a>...</a> <a th:href="@{/message/(page=${page.totalPages}-1)}" th:classappend="${page.number==page.totalPages-1} ? 'curPage'" >末页</a> <a th:href="@{/message/(page=${page.number}-1)}" th:unless="${page.first}">上一页</a> <a th:href="@{/message/(page=${page.number}+1)}" th:unless="${page.last}">下一页</a> </div>
