SpringBoot开发小而美的博客学习笔记12（页面处理）

最新推荐文章于 2021-07-05 09:00:40 发布
最新推荐文章于 2021-07-05 09:00:40 发布
阅读量237 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LALisafans/article/details/118327510
版权

页面处理

  1. 静态页面导入project
    把之前在ws上写的东西导入到IDEA上来
    在这里插入图片描述
    在这里插入图片描述

  2. thymeleaf布局
    二维码图片需要指定路径
    在这里插入图片描述
    运行查看效果
    在这里插入图片描述
    二维码图片显示出来了

定义fragment
使用fragment布局

定义一个html _fragments.html(放置所有需要的模板）
在这里插入图片描述
在这里插入图片描述

可以在index页面直接引用这样的一个片段
在这里插入图片描述
把title传递过去
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  1. 错误页面美化
    404
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
  <link rel="stylesheet" href="../../static/css/me.css" >
</head>
<body>

<!--导航-->
<nav th:replace="_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
  <div class="ui container">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui teal header item">Blog</h2>
      <a href="#" class=" m-item item m-mobile-hide"><i class=" home icon"></i>首页</a>
      <a href="#" class="m-item item m-mobile-hide"><i class=" idea icon"></i>分类</a>
      <a href="#" class="m-item item m-mobile-hide"><i class=" tags icon"></i>标签</a>
      <a href="#" class="m-item item m-mobile-hide"><i class=" clone icon"></i>归档</a>
      <a href="#" class="m-item item m-mobile-hide"><i class=" info icon"></i>关于我</a>
      <div class="right m-item item m-mobile-hide">
        <div class="ui icon inverted transparent input m-margin-tb-tiny">
          <input type="text" placeholder="Search....">
          <i class="search link icon"></i>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<br>
<br>
<br>

  <div class="m-container-small m-padded-tb-massive">
    <div class="ui error message m-padded-tb-huge" >
      <div class="ui contianer">
        <h2>404</h2>
        <p>对不起，你访问的资源不存在</p>
      </div>
    </div>
  </div>
<br>
<br>
<br>
<br>


<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
  <div class="ui center aligned container">
    <div class="ui inverted divided stackable grid">
      <div class="three wide column">
        <div class="ui inverted link list">
          <div class="item">
            <img src="../../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
          </div>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          <a href="#" class="item m-text-thin">关于刻意练习的清单</a>
          <a href="#" class="item m-text-thin">失效要趁早</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">Email：Anwen@163.com</a>
          <a href="#" class="item m-text-thin">QQ：2192787371</a>
        </div>
      </div>
      <div class="seven wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
      </div>
    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Anwen Designed by Anwen</p>
  </div>

</footer>
</body>
</html>

效果：
在这里插入图片描述

500

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>500</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
  <link rel="stylesheet" href="../../static/css/me.css" >
</head>
<body>

<!--导航-->
<nav th:replace="_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
  <div class="ui container">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui teal header item">Blog</h2>
      <a href="#" class=" m-item item m-mobile-hide"><i class=" home icon"></i>首页</a>
      <a href="#" class="m-item item m-mobile-hide"><i class=" idea icon"></i>分类</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
      <a href="#" class="m-item item m-mobile-hide"><i class=" clone icon"></i>归档</a>
      <a href="#" class="m-item item m-mobile-hide"><i class=" info icon"></i>关于我</a>
      <div class="right m-item item m-mobile-hide">
        <div class="ui icon inverted transparent input m-margin-tb-tiny">
          <input type="text" placeholder="Search....">
          <i class="search link icon"></i>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<br>
<br>
<br>

<div class="m-container-small m-padded-tb-massive">
  <div class="ui error message m-padded-tb-huge" >
    <div class="ui contianer">
      <h2>500</h2>
      <p>对不起，服务异常，请联系管理员</p>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>


<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
  <div class="ui center aligned container">
    <div class="ui inverted divided stackable grid">
      <div class="three wide column">
        <div class="ui inverted link list">
          <div class="item">
            <img src="../../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
          </div>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          <a href="#" class="item m-text-thin">关于刻意练习的清单</a>
          <a href="#" class="item m-text-thin">失效要趁早</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">Email：Anwen@163.com</a>
          <a href="#" class="item m-text-thin">QQ：2192787371</a>
        </div>
      </div>
      <div class="seven wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
      </div>
    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Anwen Designed by Anwen</p>
  </div>

</footer>
</body>
</html>

效果：
在这里插入图片描述

error

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>错误</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
  <link rel="stylesheet" href="../../static/css/me.css" >
</head>
<body>

<!--导航-->
<nav th:replace="_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
  <div class="ui container">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui teal header item">Blog</h2>
      <a href="#" class=" m-item item m-mobile-hide"><i class=" home icon"></i>首页</a>
      <a href="#" class="m-item item m-mobile-hide"><i class=" idea icon"></i>分类</a>
      <a href="#" class="m-item item m-mobile-hide"><i class=" tags icon"></i>标签</a>
      <a href="#" class="m-item item m-mobile-hide"><i class=" clone icon"></i>归档</a>
      <a href="#" class="m-item item m-mobile-hide"><i class=" info icon"></i>关于我</a>
      <div class="right m-item item m-mobile-hide">
        <div class="ui icon inverted transparent input m-margin-tb-tiny">
          <input type="text" placeholder="Search....">
          <i class="search link icon"></i>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<br>
<br>
<br>

<div class="m-container-small m-padded-tb-massive">
  <div class="ui error message m-padded-tb-huge" >
    <div class="ui contianer">
      <h2>错误</h2>
      <p>对不起，服务异常，请联系管理员</p>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>

  <div>
    <div th:utext="'&lt;!--'" th:remove="tag"></div>
    <div th:utext="'Failed Request URL : ' + ${url}" th:remove="tag"></div>
    <div th:utext="'Exception message : ' + ${exception.message}" th:remove="tag"></div>
    <ul th:remove="tag">
      <li th:each="st : ${exception.stackTrace}" th:remove="tag"><span th:utext="${st}" th:remove="tag"></span></li>
    </ul>
    <div th:utext="'--&gt;'" th:remove="tag"></div>
  </div>
<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
  <div class="ui center aligned container">
    <div class="ui inverted divided stackable grid">
      <div class="three wide column">
        <div class="ui inverted link list">
          <div class="item">
            <img src="../../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
          </div>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          <a href="#" class="item m-text-thin">关于刻意练习的清单</a>
          <a href="#" class="item m-text-thin">失效要趁早</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">Email：Anwen@163.com</a>
          <a href="#" class="item m-text-thin">QQ：2192787371</a>
        </div>
      </div>
      <div class="seven wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
      </div>
    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Anwen Designed by Anwen</p>
  </div>

</footer>

</body>
</html>

效果
在这里插入图片描述

LALisafans
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringBoot经典学习笔记_springboot_SpringBoot经典学习笔记_
09-30
SpringBoot经典学习笔记是针对Java开发者的宝贵资源，它涵盖了SpringBoot的核心概念、特性以及实践应用。SpringBoot是由Pivotal团队开发的框架，旨在简化Spring应用的初始搭建以及开发过程，通过“约定优于配置”的...
【翠花学SpringBoot】使用Springboot进行页面操作（thymeleaf）
m0_57082679的博客
05-23 1425
Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面 。 演练： 通过使用thymeleaf模板进行增删改查。 创建项目。 注意勾选thymeleaf依赖，其余的和之前相同。 在pom文件中导入mybatis-plus
SpringBoot页面访问处理
weixin_30587025的博客
10-24 94
SpringBoot页面访问处理 1、介绍 Springboot推荐使用thymeleaf模板引擎搭载html页面实现jsp动态渲染效果，因此这里才会用该种方案进行。 2、集成步骤 引入thymeleaf的maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <a...
springboot个人博客的构建（6） 分类管理(标签管理)
qq_40979622的博客
11-02 2635
标签管理和分类管理一样。 分类管理页面： 首先：建立HTML文件types.html 这个是分类列表的页面。  这个页面是由blog.html页面由来的，进行修改得到。 看源代码:这里用的模板引用，在admin/下面建立新的模板引擎。 先看模板引擎： &lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns:th="http://www...
夜光带你走进我擅长的领域：SpringBOOT（10）
夜光的博客
08-20 348
夜光序言： 有时候我们有些近视，忽略了离我们最真的情感；有时候我们有些远视，模糊了离我们最近的幸福。一辈子真的很短，远没有我们想象的那么长，永远真的没有多远。所以,对爱你的人好一点，对自己好一点，今天是你的枕畔人，明天可能成了陌路人，如果这辈子来不及好好相爱，就更不要指望下一辈子还能遇见。 正文：采用Semantic UI前端框架，和jquery，css，js...
好看的博客归档页面
愿你拥有大风与烈酒,也能享受孤独与自由
03-28 1263
发现一个比较好看的个人博客归档页面的设计 如图 只需要一个CSS样式以及JS随后接收后台数据渲染就可以了 timeline.css *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } .timeline ul li { list-style-type: none; position: relative; width: 6px; margin: 0 auto
基于Springboot开发的精简博客系统.zip
11-26
笔记博客系统 springboot开发自动建表的博客系统包含前后端 markdown编辑 主要功能：首页，博客浏览，内容发布，内容管理，字典管理，偏好设置，个人内容，消息管理，评价管理， 运行环境 jdk8+mysql+IntelliJ IDEA+...
SpringBoot学习笔记
01-11
### SpringBoot学习笔记 #### 一、SpringBoot入门 ##### 1、SpringBoot简介 - **简化Spring应用开发**：SpringBoot是简化Spring应用开发的一个框架，它通过默认配置极大地减少了开发过程中的样板代码，使得开发者...
springboot学习思维笔记.xmind
06-19
springboot学习笔记 spring基础 Spring概述 Spring的简史 xml配置 注解配置 java配置 Spring概述 Spring的模块 核心容器CoreContainer Spring-Core Spring-Beans ...
springboot学习笔记day12.xmind
03-30
springboot学习笔记day12.xmind
Spring boot实训开发个人博客(十) 框架搭建异常处理
欢迎您
07-05 168
处理异常处理 1.定义错误页面 -404 -500 -error 2.全局处理异常 1.新建index.html文件 在templates目录下新建，作为首页显示 2.新建目录error: 用此文件来存放错误页面: 3.新建各个错误页面: 1.404错误页面: <!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head th:replace="_fragments :: he
SpringBoot开发小而美的博客学习笔记11 框架搭建（异常处理）
LALisafans的博客
06-28 185
发动机盖的妇女
SpringBoot个人博客开发（七）----项目配置
ce121的博客
06-03 173
在这里先提一下，我的css me.css /*----padding----*/ .m-padded-tb-mini { padding-top: 0.2em !important; padding-bottom: 0.2em !important; } .m-padded-mini { padding: 0.2em !important; } .m-padded-tiny { padding: 0.3em !important; } .m-padded { pa
Zblog 的CDNfly-CloudFlare全能CDN自动刷新缓存插件-自动清理-适配优化2.1.0版本
最新发布
09-12
Zblog 的CDNfly|CloudFlare全能CDN自动刷新缓存插件，包括其自动清理、适配优化和缓存配置,手动刷新，全站刷新，自动预热等功能。作者之前已写过Wordpress对接cdnfly的插件，而此次是应群友要求为Zblog打造相应插件
基于Dubbo与Spring Boot的服务化实践demo.zip
09-12
本项目是一个简单的Dubbo整合Spring Boot的示例，展示了如何通过Dubbo实现服务的注册与发现、服务的调用和监控等功能。通过本demo，读者可以了解到Dubbo服务框架与Spring Boot框架的集成方式，以及如何快速构建微服务应用。项目包括启动Nacos服务、生产者服务提供者、消费者服务调用者以及Dubbo的管理平台。通过简单的步骤和操作，可以实现服务的发布、订阅和监控。本demo对于初学者了解Dubbo和微服务架构有很好的帮助。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业
weixin254基于微信小程序的社团活动助手php.rar
09-12
所有源码都可以运行成功
system_file1711460535847
09-12
system_file1711460535847
25工程建筑中工程造价的应用研究.docx
09-12
25工程建筑中工程造价的应用研究
27概预算编制质量对建筑工程造价的影响.docx
09-12
27概预算编制质量对建筑工程造价的影响
DirectShow SDK开发学习笔记
"Directshow_SDK开发笔记（翻译）.pdf" DirectShow SDK开发是针对Windows平台流媒体处理的重要技术，尤其适合初学者深入...通过深入学习和实践，开发者可以掌握DirectShow的精髓，进而开发出自己的多媒体处理应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值