网站导航
> 文档中心 > SpringBoot日记本系统全程直播04：把首页内容接起来撒~~

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

网友: 文档中心 2022-04-10 22:36:43

OK，感谢大家对本系列教程的支持，上一讲，我们完成了基本的登录和注册功能，可以说正式地把后台的架构搭好了。这一讲呢，我们就来画画页面，把前台的内容写个大概。

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

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

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

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

 header.jsp源码：

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

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

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

sider.jsp源码：

  
    
      
个人信息
      
 
   SpringBoot日记本系统全程直播04：把首页内容接起来撒~~ 
 
剽悍一小兔
 
个性签名：你这接口保熟吗？
      
    
  
  
    
      
日记类别
      
       
    
  
  
    
      
按日期

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

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

list.jsp

  
日记列表

分页初始化：

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


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

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

最终效果：

还是很简单的吧，我其实对css也就是略懂一些皮毛，毕竟自己还是后端出生，哈哈。

这一讲暂时就到这里啦，喜欢的朋友来一个三连，谢谢啦。

我是兔哥，CSDN前端优质创作者，《JavaScript百炼成仙》作者，欢迎关注下方公众号，一起来学习前端技术，我们一起交流，共同进步！

公众号中有我私人vx，学习上有疑惑可以随时问我哦！

源码已经给大家准备好了，关注下方公众号，回复日记本。

毕业设计范文站

网络标签：

相关问题