10分钟完成补充个人博客留言设计贴功能

一、静态页面

静态页面和完整程序有需留言即可。
另外个人地址为：添加链接描述

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>&nbsp;
            <a th:href="@{/message/(page=${page.number}+1)}" th:unless="${page.last}">下一页</a>
        </div>