SpringBoot日记本系统全程直播05：把日记新增功能搞出来撒~

首页已经安排好了，接下来搞日记新增。

这里是一个超链接，补上url

修改header.jsp

<li class="layui-nav-item"><a href="${basePath}/diary/add.html"><i class="layui-icon layui-icon-edit" style="color: #FFF;"></i>写日记</a></li>

PageController 增加路由 diary/add.html （假的，其实不是html啦，这个代码我写的比较随性，哈哈！）

@RequestMapping("diary/add.html")
public String addDiary(){
    return "diary/add";
}

指向的就是这个jsp

代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
    <title>日记新增</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <script src="${basePath}/layui/layui.all.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${basePath}/layui/css/layui.css" media="all">
    <style>

    </style>
</head>
<body>

<div class="layui-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-row">
            <div class="layui-col-md12">
                <jsp:include page="../common/header.jsp"></jsp:include>
            </div>
            <div class="layui-col-md9">
                写日记
            </div>
            <div class="layui-col-md3" style="">
                <jsp:include page="../common/sider.jsp"></jsp:include>
            </div>



        </div>
    </div>
    <jsp:include page="../common/footer.jsp"></jsp:include>
</div>

<script>

</script>
</body>
</html>

直接访问： http://localhost/diary/add.html

有两个问题。

第一个问题，写日记的菜单没有被选中

这是因为我们没有记录当前的菜单，点击写日记的超链接导致页面跳转了，没有记录当前的页面。

设置菜单项高亮，只需要加上layui-this的class就行了。

别担心，有问题我们就解决问题。

我们可以用 window.location.pathname 获取当前的url后面的部分，比如：/diary/add.html

然后用case语句去判断，如果是/diary/add.html，就让当前这个菜单被选中。

为了方便，我们引入layUI内部的jquery

layui.use(['jquery', 'layer'], function(){
  let $ = layui.$;
  let pathName = window.location.pathname;
  switch (pathName) {
    case "/diary/add.html":
      $('.layui-nav-item').eq(2).addClass("layui-this").siblings().removeClass("layui-this")
          break;
  }
});

刷新一下页面，发现写日记变成高亮了。

标题和主页，我们希望点击后返回首页，用绝对路径 /

第二个问题，右侧的类别样式没有了：

这是因为，首页的css我们写在style标签块里面的，当访问add.jsp时，就没有样式了。

当然啦，你可以整一个css文件，每个jsp去引入一下。

但是我比较懒，就直接把这些样式放到header.jsp里面去了。

style标签并不是非得在head标签里面哦。

问题迎刃而解。

ok，要记日记，首先需要有一张日记表。

-- ----------------------------
-- Table structure for tbl_syn_blog
-- ----------------------------
DROP TABLE IF EXISTS `tbl_syn_blog`;
CREATE TABLE `tbl_syn_blog` (
  `id` int(11) NOT NULL,
  `title` varchar(30) DEFAULT NULL COMMENT '标题',
  `user_id` int(11) DEFAULT NULL COMMENT '用户ID',
  `blog_type` int(11) DEFAULT NULL COMMENT '类型',
  `content` text COMMENT '内容',
  `is_delete` varchar(1) DEFAULT '0',
  `create_date` varchar(20) DEFAULT NULL,
  `update_date` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

日记的ID，我们还是用redis来实现。

先把后台准备好吧。

实体类

package com.rabbit.diary.bean;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import org.springframework.stereotype.Service;

@TableName("tbl_syn_blog")
@Data
public class TblSynBlog {
    @TableId
    private Long id;
    private String title;
    private Long userId;
    private String blogType;
    private String content;
    private String isDelete;
    private String createDate;
    private String updateDate;
}

有了lombok确实清爽了好多！

Mapper文件

@Mapper
public interface BlogMapper extends BaseMapper<TblSynBlog> {
}

service接口和实现类

public interface BlogService {

    void save(TblSynBlog tblSynBlog);
}

@Service
public class BlogServiceImpl implements BlogService {

    @Autowired
    BlogMapper blogMapper;

    @Autowired
    RedisServiceImpl redisServiceImpl;


    /**
     * 保存
     * @param blog
     */
    @Override
    public void save(TblSynBlog blog) {
        blogMapper.insert(blog);
    }


}

最后是Controller

@RestController
@RequestMapping("/blog")
public class BlogController {

    @Autowired
    BlogService BlogService;

    @Autowired
    RedisServiceImpl redisServiceImpl;


    @RequestMapping("/add")
    @SaCheckLogin
    public Result register(@RequestBody TblSynBlog blog){
        //拼装BlogBean
        blog.setId(redisServiceImpl.getIncr("BlogId")); //redis自增ID
        blog.setCreateDate(DateUtil.now());
        blog.setUpdateDate(DateUtil.now());
        blog.setUserId(StpUtil.getLoginIdAsLong());
        BlogService.save(blog);
        return Result.success();
    }

}

日记的ID使用BlogId自增序列。

add.jsp

我们写一个layUI的form表单，页面效果如下

代码太多了，我就不贴了。挑一些重要的讲一下。

这边用了layedit富文本编辑器，不过我去掉了图片上传，暂时我们先不做那么复杂，就写写文本吧。

用法全部可以去layUI官网找，我也是一边查文档一边写的。

提交方法：

form.on('submit(demo1)', function(data){
    data = {...data.field ,...{content:layedit.getContent(editIndex)}}

    if(data.content.length < 10){
        layer.msg('内容至少10个字符！',{icon:2});
        return false;
    }
    var index = layer.load(1); //添加laoding,0-2两种方式
    axios.post('${basePath}/blog/add',data).then(r =>{
        layer.close(index);    //返回数据关闭loading
        if(r.data.code != '0000'){
            layer.msg(r.data.message,{icon:2});
            return;
        }
        layer.msg('日记记录成功!',{icon:1});
        setTimeout(()=>{location.href="/"},500)
    });
    return false;
});

会有一个加载的效果，提交成功后返回主页。

测试数据：

SpringBoot日记本系统全程直播05：把日记新增功能搞出来撒~

猜你喜欢