SpringBoot diary system live broadcast 04: connect the content of the home page~~

OK, thank you for your support for this series of tutorials. In the last lecture, we completed the basic login and registration functions, and we can say that the background structure is officially set up. In this lecture, let's draw the page and write a general outline of the content of the front desk.

Because we are using jsp, which has the function of page inclusion, so, simply arrange the directory structure as follows:

The common folder is used to store common content, including header, footer and sider.

Let's take a look at the overall effect (the page is full of fake data)

Among them, the header is the navigation menu at the top:

 header.jsp source code:

<%@ 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>

 To be honest, layui provides us with a lot of styles, and I am learning and selling them now.

Layui Development and Use Documentation - Getting Started Guide https://www.layuion.com/doc/ The above is the documentation of layUI, just follow the demo a little bit.

The sider is the part on the right, which is for personal information, diary category and date search.

sider.jsp source code:

<%@ 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>

 As for the diary list in the middle, I made it myself with div and a tags

Pagination uses layPage, of course, it is still fake data.

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>

Paging initialization:

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

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

 add.jsp is used to add a diary. It has not been done yet. Now it is to copy the past code and ignore it.

Lastly is the styling, which I currently write in index.jsp, making it a little responsive.

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}

 Mobile effect:

And finally 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>
  哈喽，我是兔哥，CSDN前端优质创作者，《JavaScript百炼成仙》作者。<br>
  欢迎一起来学习前后端技术，我们一起交流，共同进步~<br>
  公众号：java小白翻身<br>
  私人vx：javaxbfs<br>
  csdn账号：剽悍一小兔<br>
  欢迎加我vx，进群一起快乐地学习前端知识吧！<br><br>
</div>

In index.jsp, let's do an integration:

<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>
    </div>
    <jsp:include page="common/footer.jsp"></jsp:include>
</div>

final effect:

It's still very simple. I actually know a little bit about CSS. After all, I was born at the back end, haha.

This talk is here for the time being, friends who like it come to a three-line, thank you.

I am Brother Rabbit, a high-quality creator of CSDN front-end, and the author of "JavaScript Hundreds of Tempered Immortals". Welcome to the following public account, let's learn front-end technology together, let's communicate and make progress together!

There is my private vx in the official account. If you have any doubts in your studies, you can ask me at any time!

The source code has been prepared for everyone, pay attention to the public account below and reply to the diary.