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