首页已经安排好了，接下来搞日记新增。
这里是一个超链接，补上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; });
会有一个加载的效果，提交成功后返回主页。
测试数据：
