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

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

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

因为我们用的是jsp，有页面包含的功能，所以呢，简单把目录结构布置如下：

common文件夹用于存放一下公共的内容，包含header，footer和sider。

先让我们看下整体的效果（页面上都是假数据）

其中，header就是顶部的导航菜单：

header.jsp源码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>
<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="" style="font-size: 20px"><i class="layui-icon layui-icon-face-smile" style="font-size: 20px"></i>  兔子日记本</a></li>
  <li class="layui-nav-item layui-this"><a href=""><i class="layui-icon layui-icon-home" style="color: #FFF;"></i>  主页</a></li>
  <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-edit" style="color: #FFF;"></i>写日记</a></li>
  <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-list" style="color: #FFF;"></i>日记分类</a></li>
  <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-friends" style="color: #FFF;"></i>个人中心</a></li>
  <div class="searchbox layui-nav-item" style="width: 260px;height: 60px;">
    <input style="display: inline-block;width: 60%" type="text" name="kws" required   placeholder="请输入关键字" autocomplete="off" class="layui-input">
    <button style="margin-top: -2px;" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-search"></i>搜索</button>
  </div>

</ul>

说实话，layui给我们提供了很多样式，我也是现学现卖。

Layui 开发使用文档 - 入门指南https://www.layuion.com/doc/上面就是layUI的文档，照着demo一点点做就行了。

sider是右边的部分，分别为个人信息，日记类别和日期搜索。

sider.jsp源码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>
<div class="layui-row">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-header"><b><i class="layui-icon layui-icon-friends" style="color: #000;"></i></b>个人信息</div>
      <div class="layui-card-body">
        <div style="text-align: center;">
          <img style="width: 200px;" src="${basePath}/images/1.jpg">
        </div>
        <div class="nickName">剽悍一小兔</div>
        <div class="signature">个性签名：你这接口保熟吗？</div>
      </div>
    </div>
  </div>
  <div class="layui-col-md12"  style="margin-top: 2px;">
    <div class="layui-card">
      <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="tlist">
          <li> <a href="">生活</a></li>
          <li> <a href="">情感</a></li>
          <li> <a href="">工作</a></li>
        </ul>

      </div>
    </div>
  </div>
  <div class="layui-col-md12"  style="margin-top: 2px;">
    <div class="layui-card">
      <div class="layui-card-header"><b><i class="layui-icon layui-icon-date" style="color: #000;"></i></b>按日期</div>
      <div class="layui-card-body">
        <ul class="tlist">
          <li> <a href="">2022年3月(2)</a></li>
          <li> <a href="">2022年4月(11)</a></li>

        </ul>

      </div>
    </div>
  </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中，做了一点点响应式。