spring boot系列02--Thymeleaf+Bootstrap构建页面

上一篇说了一下怎么构建spring boot 项目

接下来我们开始讲实际应用中需要用到的先从页面说起

页面侧打算用Thymeleaf+Bootstrap来做

先共通模板页

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"

    xmlns:th="http://www.thymeleaf.org">

<body>

    <!-- Header -->

    <div th:fragment="header(title)">

        <div>

            <h2>Guaishushu</h2>

        </div>

    </div>

    <!-- Footer -->

    <div th:fragment="footer" class="navbar-fixed-bottom">

        <div class="container text-center">

            Copyright © GuaiShuShu

        </div>

    </div>

</body>

</html>

暂且定义两个共通 Header 和 Footer 之后还会再有比如 menu 的

这里能说的就是th:fragment 开始说了页面用 Thymeleaf+Bootstrap 来做

th就是Thymeleaf的缩写了它用【th:】来告诉解析器这里是Thymeleaf的东西了

（关于Thymeleaf的东西这里打算是用哪儿写哪儿不打算系统写之后可能会系统写一个Thymeleaf的系列）

说一下代码里的两个两个模板

th:fragment="header(title) 是表示名叫 header 有参的模板

th:fragment="footer" 这个就是无参的了

接下来看看调用的地方 L21，L79

模板画面名(common)+模板名（header）+参数( 'login')

 <!DOCTYPE HTML>

 <!-- thymeleaf 导入 -->

 <html xmlns:th="http://www.thymeleaf.org">

 <head>

 <title>登录</title>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 <script type="text/javascript" src="../static/js/jquery-3.2.1.min.js"></script>

 <link rel="stylesheet" href="../static/css/bootstrap.min.css"

     type="text/css"></link>

 <script type="text/javascript">

     $(function() {

     })

 </script>

 <body>

     <!-- common 的 定义好的 header模板 引用  参数 title  -->

     <!--

      Bootstrap的容器Class使用

      container ：用于固定宽度并支持响应式布局的容器

      container-fluid ：用于 100% 宽度，占据全部视口（viewport）的容器。

     -->

     <div class="container" th:replace="common :: header('login') "></div>

     <div class="container">

         <!--Bootstrap

             .row:行控制  一行有12列

             .clo-md-4:列控制 表示 占 4列

             .md-offfset-4:向右侧偏移4

          -->

         <div class="row">

             <div class="col-md-4 col-md-offset-4">

                 <div class="panel panel-default">

                     <div class="panel-heading">

                         <h3 class="panel-title">Login</h3>

                     </div>

                     <div class="panel-body">

                         <form th:action="@{'/login'}" method="post" th:object="${userDto}">

                             <div class="form-group form-inline">

                                 <label for="txtUserName" class="col-md-3 control-label"

                                     style="text-align: right;">用户名</label>

                                 <div class="col-md-9">

                                     <input type="text" class="col-md-9 form-control" id="txtUserName"

                                         placeholder="请输入用户名" th:field="*{userName}"

                                         required="required" />

                                 </div>

                             </div>

                             <div class="form-group form-inline" style="padding-top:45px">

                                 <label for="txtUserPwd" class="col-sm-3 control-label"

                                     style="text-align: right;">密码</label>

                                 <div class="col-md-9">

                                     <input type="password" class="col-sm-9 form-control" id="txtUserPwd"

                                         placeholder="请输入密码" th:field="*{userPsw}" />

                                 </div>

                             </div>

                             <div class="form-group">

                                 <div class="col-md-offset-3 col-md-9">

                                     <div class="checkbox">

                                         <label> <input type="checkbox" />请记住我

                                         </label>

                                     </div>

                                 </div>

                             </div>

                             <div class="form-group">

                                 <div class="col-md-offset-3 col-md-5">

                                     <button class="btn btn-primary btn-block" type="submit" name="action"

                                         value="login">登录</button>

                                 </div>

                             </div>

                             <div class="alert alert-danger" th:if="${loginError}">

                                 <strong>用户名或者用户密码不正确，请重新输入</strong>

                             </div>

                         </form>

                     </div>

                 </div>

             </div>

         </div>

     </div>

     <!-- common 的 定义好的 fotter模板引用  无参  -->

     <div class="container" th:replace="common :: footer"></div>

 </body>

 </head>

 </html>

说一下thymeleaf使用的地方

L35 使用或者说定义了一个userDto对象

说使用是因为这个对象你得重后台传给它否则报错

说定义是因为在当前from作用于域内像L41那样去访问使用userDto这个对象内属性/方法

关于Bootstrap的部分我基本都在代码的注释里写了

这里就不赘述了看一下Controller

 package com.sts.springboot.controller;

 import org.springframework.stereotype.Controller;

 import org.springframework.ui.Model;

 import org.springframework.web.bind.annotation.ModelAttribute;

 import org.springframework.web.bind.annotation.RequestMapping;

 import org.springframework.web.bind.annotation.RequestMethod;

 import org.springframework.web.bind.annotation.RequestParam;

 import org.springframework.web.servlet.mvc.support.RedirectAttributes;

 import com.sts.springboot.dto.UserDto;

 @Controller

 public class LoginController {

     //初期化

     @RequestMapping(value = "/login", method = RequestMethod.POST)

     public String login(Model model) {

         UserDto userDto = new UserDto();

         model.addAttribute("userDto",userDto);

         return "login";

     }

     //登录

     @RequestMapping(value = "/login",params="action=login", method = RequestMethod.POST)

     public String login(@RequestParam(value = "userName") String userName,

             @RequestParam(value = "userPsw") String userPsw,Model model,RedirectAttributes redirectAttributes ) {

         UserDto userDto = new UserDto();

         if(userName.equals(userPsw)) {

             redirectAttributes.addFlashAttribute("userName",userName);

             return "redirect:index";

         } else {

             model.addAttribute("loginError",true);

             model.addAttribute("userDto",userDto);

             return "login";

         }

     }

     @RequestMapping("/index")

     public String welcomeIndex(@ModelAttribute("userName") String userName,Model model) {

         model.addAttribute("userName",userName);

         return "index";

     }

 }

简单说一下,先说参数部分

@RequestParam 使用来接收前台穿过来的参数不用赘述有一点 @RequestParam的value 是要和页面上 th:field="*{userPsw}" 的保持一致的

Model model 这是页面的对象返回时作为传参的载体使用

RedirectAttributes 是重定向传参用的像L30那样 set进去 L39 接受 L40 set 到新页面的model里

然后

主要逻辑是判断用户名是否等于用户密码

是重定向到 index 页面显示

否想页面返回error 提示

贴一下index 的代码

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Insert title here</title>

</head>

<body>

    <div class="container"  th:replace="common :: header('login') "></div>

    <div class="container">

    欢迎,<span th:text="${userName}"></span>登录

    </div>

    <div class="container" th:replace="common :: footer"></div>

</body>

</html>

最后整体看一下效果

spring boot系列02--Thymeleaf+Bootstrap构建页面

GitHub:spring-boot-hello

spring boot系列02--Thymeleaf+Bootstrap构建页面的更多相关文章

spring boot系列01--快速构建spring boot项目
最近的项目用spring boot 框架借此学习了一下这里做一下总结记录非常便利的一个框架它的优缺点我就不在这背书了想了解的可以自行度娘谷歌说一下要写什么吧其实还真不是很清楚,只是想记录 ...
Spring Boot 系列教程11-html页面解析-jsoup
需求需要对一个页面进行数据抓取,并导出doc文档 html解析器 jsoup 可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于JQuery的操 ...
Spring Boot 系列（五）web开发-Thymeleaf、FreeMarker模板引擎
前面几篇介绍了返回json数据提供良好的RESTful api,下面我们介绍如何把处理完的数据渲染到页面上. Spring Boot 使用模板引擎 Spring Boot 推荐使用Thymeleaf. ...
国内最全的Spring Boot系列之二
历史文章 <国内最全的Spring Boot系列之一> 视频&交流平台 SpringBoot视频:http://t.cn/R3QepWG Spring Cloud视频:http:/ ...
spring boot 之如何在两个页面之间传递值(转)
原文地址:spring boot 之如何在两个页面之间传递值问题:页面之间的跳转,通常带有值的传输,但是,在现在比较流行的SPRING MVC WEB 开发模型中,设计机制导致页面之间的直接接跳转和 ...
spring boot 学习(二)spring boot 框架整合 thymeleaf
spring boot 框架整合 thymeleaf spring boot 的官方文档中建议开发者使用模板引擎,避免使用 JSP.因为若一定要使用 JSP 将无法使用. 注意:本文主要参考学习了大神 ...
Spring Boot 系列教程16-数据国际化
internationalization(i18n) 国际化(internationalization)是设计和制造容易适应不同区域要求的产品的一种方式. 它要求从产品中抽离所有地域语言,国家/地区和 ...
Spring Boot 系列教程15-页面国际化
internationalization(i18n) 国际化(internationalization)是设计和制造容易适应不同区域要求的产品的一种方式. 它要求从产品中抽离所有地域语言,国家/地区和 ...
Spring Boot 系列教程9-swagger-前后端分离后的标准
前后端分离的必要现在的趋势发展,需要把前后端开发和部署做到真正的分离做前端的谁也不想用Maven或者Gradle作为构建工具做后端的谁也不想要用Grunt或者Gulp作为构建工具前后端需要通过 ...
Spring Boot 系列教程8-EasyUI-edatagrid扩展
edatagrid扩展组件 edatagrid组件是datagrid的扩展组件,增加了统一处理CRUD的功能,可以用在数据比较简单的页面. 使用的时候需要额外引入jquery.edatagrid.js ...

随机推荐

学习 Linux，101&colon; 使用基本 SQL 命令
概述在本教程中,将学习结构化查询语言 (SQL),包括: 使用基本 SQL 命令执行基本数据操作本教程将简要介绍您需要知道的与 LPI 102 考试相关的 SQL 概念. 回页首数据库和 ...
GPRS组网的几种方案【来自网络】
GPRS组网的几种方案:1) 方案一:中心采用ADSL等INTELNET公网连接,采用公网固定IP或者公网动态IP+DNS解析服务.此种方案向先INTERNET运营商申请ADSL等宽带业务. ...
android ListView内数据的动态添加与删除
main.xml 文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...
oracle存储过程中is和as区别
在存储过程(PROCEDURE)和函数(FUNCTION)中没有区别:在视图(VIEW)中只能用AS不能用IS:在游标(CURSOR)中只能用IS不能用AS.
MSSQL查询数据分页
这几天刚好碰到数据的分页查询,觉得不错,Mark一下,方法有两种,都是使用select top,效率如何就不在这讨论方法1:利用select top配合not in(或者not exists),查询 ...
Velocity(3)——&num;set指令
引用可以让模板设计者生成动态内容,而指令允许设计者真正的负责页面的展现和内容. 指令是以#开头,后面紧跟一个关键字,比如if,else,foreach等.而这个关键字,是可以被放在{}中间的.这是规范 ...
关于MySQL5&period;7开启bin-log主从复制
主从复制:一般用于实时备份.也可配合mycat,实现读写分离. 传统的基于 ROW的主从复制简单说下步骤: master主库配置同步,slave从库配置同步,master锁表/备份,slave恢复数 ...
jsp页面中的EL表达式不被解析的问题
原因:问题在web.xml配置文件上,web.xml声明部分一般分为如下版本的xsd, web-app_2_2.xsd web-app_2_3.xsd web-app_2_4.xsd web-app_ ...
白盒测试实践-任务进度-Day05
所使用静态代码检查工具阿里巴巴Java开发代码检测IDE插件小组成员华同学.郭同学.覃同学.刘同学.穆同学.沈同学任务进度任务已经进入收官阶段,为了对大家各自任务完成情况进行确认,保证任务能 ...
Python前戏
1.Python解释器官网:https://www.python.org/getit/ 因为Python的3.0和2.0版本有所差别,所以根据个人学习方向分别下载安装. 安装验证:打开命令提示符,执 ...