上一篇说了一下怎么构建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>

最后整体看一下效果

GitHub:spring-boot-hello

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

  1. spring boot系列01--快速构建spring boot项目

    最近的项目用spring boot 框架 借此学习了一下 这里做一下总结记录 非常便利的一个框架 它的优缺点我就不在这背书了 想了解的可以自行度娘谷歌 说一下要写什么吧 其实还真不是很清楚,只是想记录 ...

  2. Spring Boot 系列教程11-html页面解析-jsoup

    需求 需要对一个页面进行数据抓取,并导出doc文档 html解析器 jsoup 可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于JQuery的操 ...

  3. Spring Boot 系列（五）web开发-Thymeleaf、FreeMarker模板引擎

    前面几篇介绍了返回json数据提供良好的RESTful api,下面我们介绍如何把处理完的数据渲染到页面上. Spring Boot 使用模板引擎 Spring Boot 推荐使用Thymeleaf. ...

  4. 国内最全的Spring Boot系列之二

    历史文章 <国内最全的Spring Boot系列之一> 视频&交流平台 SpringBoot视频:http://t.cn/R3QepWG Spring Cloud视频:http:/ ...

  5. spring boot 之如何在两个页面之间传递值(转)

    原文地址:spring boot 之如何在两个页面之间传递值 问题:页面之间的跳转,通常带有值的传输,但是,在现在比较流行的SPRING MVC WEB 开发模型中,设计机制导致页面之间的直接接跳转和 ...

  6. spring boot 学习(二)spring boot 框架整合 thymeleaf

    spring boot 框架整合 thymeleaf spring boot 的官方文档中建议开发者使用模板引擎,避免使用 JSP.因为若一定要使用 JSP 将无法使用. 注意:本文主要参考学习了大神 ...

  7. Spring Boot 系列教程16-数据国际化

    internationalization(i18n) 国际化(internationalization)是设计和制造容易适应不同区域要求的产品的一种方式. 它要求从产品中抽离所有地域语言,国家/地区和 ...

  8. Spring Boot 系列教程15-页面国际化

    internationalization(i18n) 国际化(internationalization)是设计和制造容易适应不同区域要求的产品的一种方式. 它要求从产品中抽离所有地域语言,国家/地区和 ...

  9. Spring Boot 系列教程9-swagger-前后端分离后的标准

    前后端分离的必要 现在的趋势发展,需要把前后端开发和部署做到真正的分离 做前端的谁也不想用Maven或者Gradle作为构建工具 做后端的谁也不想要用Grunt或者Gulp作为构建工具 前后端需要通过 ...

  10. Spring Boot 系列教程8-EasyUI-edatagrid扩展

    edatagrid扩展组件 edatagrid组件是datagrid的扩展组件,增加了统一处理CRUD的功能,可以用在数据比较简单的页面. 使用的时候需要额外引入jquery.edatagrid.js ...

随机推荐

  1. Dos命令打印文件以及Dos打印到USB打印端口

    MS-DOS命令范例 要将当前目录中的 Report.txt 发送到连上本地计算机的 LPT2,请键入: print /d:LPT2 report.txt 要将 c:\Accounting 目录中的 ...

  2. 传统 HTML 表单数据的“整存整取”

    在日常开发中,涉及表单的处理司空见惯.过往,在取值和赋值的过程中,借助 jQuery 常常只是逐个控件进行操作,可惜这样开发效率并不高.那么能不能批量获取整个表单的值呢,以及批量为表单赋值. 一.取值 ...

  3. 知识树杂谈Java面试(4)

    一. Java集合 1.  集合分类:  Collection.Map. 2. Collection: 3. Map 4. 注意点 a. List 有序.可重复:Set 无序.不可重复:Map  键值 ...

  4. [机房练习赛7.26] YYR字符串

    1  无尽的矩阵(matrix.c/cpp/pas) 1.1  题目描述 从前有一个的小矩阵,矩阵的每个元素是一个字母(区分大小写),突然有一天它发生了变异,覆盖了整个二维空间,即不停自我复制产生相同 ...

  5. STM32F10XX存储器细节

    >> STM32F10XX系统架构 >>  程序存储器.数据存储器.寄存器和输入输出端口被组织在同一个4GB的线性地址空间内. >>  数据字节以小端格式存放在存储 ...

  6. Akka（29）： Http：Server-Side-Api，Low-Level-Api

    Akka-http针对Connection的两头都提供了方便编程的Api,分别是Server-Side-Api和Client-Side-Api.通过这两个Api可以大大提高编程效率.当然,上期我们提到 ...

  7. C# 使用HtmlAgilityPack抓取网页信息

    前几天看到一篇博文:C# 爬虫 抓取小说 博主使用的是正则表达式获取小说的名字.目录以及内容. 下面使用HtmlAgilityPack来改写原博主的代码 在使用HtmlAgilityPack之前,可以 ...

  8. vue项目中操作PDF文件

    以前从来没接触过前端要求显示PDF文件,一时之间有点懵逼,不知从哪下手啊... 无奈之下,去找度娘,方法还不少,iframe  embed  object这些标签就可以, 可是拿过来做个demo一试, ...

  9. 关于github在客户端不小心删除新仓库，重建后无法上传解决方法

    不小心删除了如果直接在客户端重建一个不行,首先找出本地新仓库,删除,然后在重新再客户端建立一个. 但此时如果两仓库名字一样,会发现无法上传. 此时应该在网页打开github,点击进入之前删除的仓库(云 ...

  10. LeetCode 79. Word Search（单词搜索）

    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...