上一篇说了一下怎么构建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. NodeJS 初学之安装配置环境

    [TOC] 1.环境安装 操作系统: Ubuntu 16.04.2 LTS 1.1安装nvm ryan@ryan-900X5L:~/temp$ curl https://raw.githubuserc ...

  2. 作为前端Web开发者，这12个终端命令不可不会

    对于开发人员来说,终端是最重要的工具之一.掌握终端,能够有效的提升开发人员的工作流程.使用终端,许多日常任务都被简化为了编写简单的命令并按下 Enter 按钮. 本文列举了一系列 Linux 命令,旨 ...

  3. Android之View绘制流程源码分析

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 对于稍有自定义View经验的安卓开发者来说,onMeasure,onLayout,onDraw这三个方法都不会陌生,起码多少都有所接触吧. 在安卓中 ...

  4. 【原创】修复ios输入框获取焦点时不支持fixed的bug

    前些日子,做了一个手机站的项目,有一个页面是这样的, 有一个固定(position:fixed)的头部和底部导航,中间是一些表单内容,没啥特别的.但是到了ios中,正常滚动页面没有问题,一旦触发了文本 ...

  5. 详解python命名空间和作用域

    1.典型案例 先从几个典型的案例来看下名称空间及作用域对python代码运行的影响,请看下面几个代码实例及其执行结果,是否符合你的预期. 代码1:块作用域 if True: i = 1 print i ...

  6. 张高兴的 Windows 10 IoT 开发笔记：BH1750FVI 光照度传感器

    BH1750FVI 是一款 IIC 接口的数字型光强度传感器集成电路.下面介绍一下其在 Windows 10 IoT Core 环境下的用法. 项目运行在 Raspberry Pi 2/3 上,使用 ...

  7. JS前端三维地球渲染——中国各城市航空路线展示

    前言 我还从来没有写过有关纯JS的文章(上次的矢量瓦片展示除外,相对较简单.),自己也学习过JS.CSS等前端知识,了解JQuery.React等框架,但是自己艺术天分实在不过关,不太喜欢前端设计,比 ...

  8. 使用HTML DOM 来分配事件 —— onmouseover和onmouseout ，onmousedown和onmouseup

    一, onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 一个小例:鼠标未在 ...

  9. javascrip实现：若选中TreeView的父节点checkbox，则其子节点全部选中；子节点全部没选中，则父节点也会没选中。

    <script type="text/javascript"> function public_GetParentByTagName(element, tagName) ...

  10. js中的undefined 和null

    undefined是基本数据类型 表示未定义 缺少的意思 null是引用数据类型  是对象 表示空对象 undefined是从null派生出来的  所以undefined==null  true Ja ...