SpringBoot日记本系统全程直播04：把首页内容接起来撒~~

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

    <div class="signature">个性签名：你这接口保熟吗？</div>
  </div>
</div>

日记类别

  </div>
</div>

按日期

2022年3月(2)
2022年4月(11)
```
    </ul>

  </div>
</div>
```

```

至于中间的日记列表，是自己用div和a标签做的

分页用的是layPage，当然了，现在还都是假数据。

list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>
<div class="layui-card dbox" style="border-right: 2px solid #eaeaea;">
  <div class="layui-card-header"><b><i class="layui-icon layui-icon-list" style="color: #000;"></i></b>日记列表</div>
  <div class="layui-card-body">
    <ul class="dlist">
      <li>『2022-04-11』 <a href="">今天发了比小财，买了麻辣烫！</a></li>
      <li>『2022-04-11』 <a href="">今天发了比小财，买了麻辣烫！</a></li>
      <li>『2022-04-11』 <a href="">今天发了比小财，买了麻辣烫！</a></li>
      <li>『2022-04-11』 <a href="">今天发了比小财，买了麻辣烫！</a></li>
      <li>『2022-04-11』 <a href="">今天发了比小财，买了麻辣烫！</a></li>
      <li>『2022-04-11』 <a href="">今天发了比小财，买了麻辣烫！</a></li>
      <li>『2022-04-11』 <a href="">今天发了比小财，买了麻辣烫！</a></li>
      <li>『2022-04-11』 <a href="">今天发了比小财，买了麻辣烫！</a></li>
      <li>『2022-04-11』 <a href="">今天发了比小财，买了麻辣烫！</a></li>
      <li>『2022-04-11』 <a href="">今天发了比小财，买了麻辣烫！</a></li>
    </ul>
    <div id="pageCode"></div>
  </div>
</div>

分页初始化：

layui.use('laypage', function(){
    var laypage = layui.laypage;

    //执行一个laypage实例
    laypage.render({
        elem: 'pageCode' //注意，这里的 pageCode 是 ID，不用加 # 号
        ,count: 50 //数据总数，从服务端得到
    });
});

add.jsp用来添加日记，暂时还没弄，现在是拷贝过去的代码，忽略即可。

最后是样式，我目前写在index.jsp中，做了一点点响应式。

body{background: #eaeaea;}
.dlist li{line-height: 30px;}
.dlist li a,.tlist li a {color: #0088cc}
#pageCode{text-align: center;margin-top: 50px;}
.nickName {text-align: center;font-size: 16px}
.signature{text-align: center;color: #666}
.dbox{height: 90%;}
.searchbox {float: right}

@media screen and (max-width: 999px) {
    .searchbox {float: none !important;width: 100% !important;}
    .dbox {height: auto}
}

.footer {height: auto;text-align: center;color: #fff;background: #393D49}

移动端效果：

最后是footer.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>
<div class="footer" ><br>
  哈喽，我是兔哥，优快云前端优质创作者，《JavaScript百炼成仙》作者。<br>
  欢迎一起来学习前后端技术，我们一起交流，共同进步~<br>
  公众号：java小白翻身<br>
  私人vx：javaxbfs<br>
  csdn账号：剽悍一小兔<br>
  欢迎加我vx，进群一起快乐地学习前端知识吧！<br><br>
</div>

在index.jsp中，我们来做一个整合：

<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">
                <jsp:include page="diary/list.jsp"></jsp:include>
            </div>
            <div class="layui-col-md3" style="">
                <jsp:include page="common/sider.jsp"></jsp:include>
            </div>



        </div>


![img](https://img-blog.csdnimg.cn/img_convert/b5c6a0fb3de90017dc4755f8510c36e7.png)
![img](https://img-blog.csdnimg.cn/img_convert/fe411da5dccde956fc7b2a7baebba631.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618668825)**

伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618668825)**

SpringBoot日记本系统全程直播04：把首页内容接起来撒~~_springbootcommon文件夹(1)