[Vue]做一个留言板界面

界面展示

• 亮点：
  卡片的颜色与长度可以随机变化，自适应页面长度布局，用户可以点击like。

准备

• MySQL
  一张message的表：
  
  message：留言内容;
  username：由后端进行处理，如果提交的为空，那么设置名字为“匿名”;
  upTime：提交时间;
  likeNum：点赞数量，默认0。

• 后端
  只需做一些简单的增删改查即可

  MessageMapper：

  <?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
          "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="cn.lzy.blog.Mapper.MessageMapper">
  
      <insert id="addMessage" useGeneratedKeys="true" keyProperty="id">
          insert into message set message = #{
       message},username=#{
       username},upTime=now()
      </insert>
      <update id="addLike">
          update message set likeNum = likeNum + 1 where id = #{
       id}
      </update>
      <delete id="deleteMessage">
          delete from message where id = #{
       id}
      </delete>
      <select id="selectAllMessage" resultType="cn.lzy.blog.Pojo.Message">
          select * from message order by upTime desc
      </select>
  </mapper>
  

  MessageController：

  @RestController
  @RequestMapping("/message")
  public class MessageController {
       
  
      @Autowired
      private MessageService messageService;
  
      @PostMapping("/add")
      public Response addMessage(@RequestBody Message message){
       
          Integer id = messageService.addMessage(message);
          if(id >0){
       
              return Response.Success("留言成功!",id);
          }
          return Response.Fail("留言失败");
      }
  
      @DeleteMapping("/del/{id}")
      public Response delMessage(@PathVariable Integer id){
       
          if(messageService.delMessage(id))
              return Response.Success("删除留言成功");
          return Response.Fail("删除留言失败");
      }
  
      @GetMapping("/all")
      public Response selMessage(@RequestParam @DefaultValue(value = "1") Integer pageNo,@RequestParam @DefaultValue(value = "10") Integer pageSize){
       
          PageInfo<Message> messagePageInfo = messageService.selectMessage(pageNo, pageSize);
          if(messagePageInfo != null){
       
              return Response.Success(messagePageInfo);
          }
          return Response.Fail("获取留言失败");
      }
  
      @PostMapping("/like")
      public Response addLike(@RequestBody JSONObject object){
       
          if(messageService.addLike(object.getInteger("id")))