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

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

页面侧打算用Thymeleaf+Bootstrap来做

先共通模板页

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.     xmlns:th="http://www.thymeleaf.org">
  4. <body>
  5.     <!-- Header -->
  6.     <div th:fragment="header(title)">
  7.         <div>
  8.             <h2>Guaishushu</h2>
  9.         </div>
  10.     </div>
  11.  
  12.     <!-- Footer -->
  13.     <div th:fragment="footer" class="navbar-fixed-bottom">
  14.         <div class="container text-center">
  15.             Copyright © GuaiShuShu
  16.         </div>
  17.  
  18.     </div>
  19. </body>
  20. </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')

  1.  <!DOCTYPE HTML>
  2.  <!-- thymeleaf 导入 -->
  3.  <html xmlns:th="http://www.thymeleaf.org">
  4.  <head>
  5.  <title>登录</title>
  6.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7.  <script type="text/javascript" src="../static/js/jquery-3.2.1.min.js"></script>
  8.  <link rel="stylesheet" href="../static/css/bootstrap.min.css"
  9.      type="text/css"></link>
  10.  <script type="text/javascript">
  11.      $(function() {
  12.      })
  13.  </script>
  14.  <body>
  15.      <!-- common 的 定义好的 header模板 引用  参数 title  -->
  16.      <!--
  17.       Bootstrap的容器Class使用
  18.       container ：用于固定宽度并支持响应式布局的容器
  19.       container-fluid ：用于 100% 宽度，占据全部视口（viewport）的容器。
  20.      -->
  21.      <div class="container" th:replace="common :: header('login') "></div>
  22.      <div class="container">
  23.          <!--Bootstrap
  24.              .row:行控制  一行有12列
  25.              .clo-md-4:列控制 表示 占 4列
  26.              .md-offfset-4:向右侧偏移4
  27.           -->
  28.          <div class="row">
  29.              <div class="col-md-4 col-md-offset-4">
  30.                  <div class="panel panel-default">
  31.                      <div class="panel-heading">
  32.                          <h3 class="panel-title">Login</h3>
  33.                      </div>
  34.                      <div class="panel-body">
  35.                          <form th:action="@{'/login'}" method="post" th:object="${userDto}">
  36.                              <div class="form-group form-inline">
  37.                                  <label for="txtUserName" class="col-md-3 control-label"
  38.                                      style="text-align: right;">用户名</label>
  39.                                  <div class="col-md-9">
  40.                                      <input type="text" class="col-md-9 form-control" id="txtUserName"
  41.                                          placeholder="请输入用户名" th:field="*{userName}"
  42.                                          required="required" />
  43.                                  </div>
  44.                              </div>
  45.                              <div class="form-group form-inline" style="padding-top:45px">
  46.                                  <label for="txtUserPwd" class="col-sm-3 control-label"
  47.                                      style="text-align: right;">密码</label>
  48.                                  <div class="col-md-9">
  49.                                      <input type="password" class="col-sm-9 form-control" id="txtUserPwd"
  50.                                          placeholder="请输入密码" th:field="*{userPsw}" />
  51.                                  </div>
  52.                              </div>
  53.                              <div class="form-group">
  54.                                  <div class="col-md-offset-3 col-md-9">
  55.                                      <div class="checkbox">
  56.                                          <label> <input type="checkbox" />请记住我
  57.                                          </label>
  58.                                      </div>
  59.                                  </div>
  60.                              </div>
  61.                              <div class="form-group">
  62.                                  <div class="col-md-offset-3 col-md-5">
  63.                                      <button class="btn btn-primary btn-block" type="submit" name="action"
  64.                                          value="login">登录</button>
  65.                                  </div>
  66.  
  67.                              </div>
  68.                              <div class="alert alert-danger" th:if="${loginError}">
  69.                                  <strong>用户名或者用户密码不正确，请重新输入</strong>
  70.                              </div>
  71.                          </form>
  72.                      </div>
  73.                  </div>
  74.              </div>
  75.          </div>
  76.      </div>
  77.  
  78.      <!-- common 的 定义好的 fotter模板引用  无参  -->
  79.      <div class="container" th:replace="common :: footer"></div>
  80.  </body>
  81.  </head>
  82.  </html>

说一下thymeleaf使用的地方

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

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

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

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

这里就不赘述了 看一下Controller

  1.  package com.sts.springboot.controller;
  2.  
  3.  import org.springframework.stereotype.Controller;
  4.  import org.springframework.ui.Model;
  5.  import org.springframework.web.bind.annotation.ModelAttribute;
  6.  import org.springframework.web.bind.annotation.RequestMapping;
  7.  import org.springframework.web.bind.annotation.RequestMethod;
  8.  import org.springframework.web.bind.annotation.RequestParam;
  9.  import org.springframework.web.servlet.mvc.support.RedirectAttributes;
  10.  
  11.  import com.sts.springboot.dto.UserDto;
  12.  
  13.  @Controller
  14.  public class LoginController {
  15.  
  16.      //初期化
  17.      @RequestMapping(value = "/login", method = RequestMethod.POST)
  18.      public String login(Model model) {
  19.          UserDto userDto = new UserDto();
  20.          model.addAttribute("userDto",userDto);
  21.          return "login";
  22.      }
  23.  
  24.      //登录
  25.      @RequestMapping(value = "/login",params="action=login", method = RequestMethod.POST)
  26.      public String login(@RequestParam(value = "userName") String userName,
  27.              @RequestParam(value = "userPsw") String userPsw,Model model,RedirectAttributes redirectAttributes ) {
  28.          UserDto userDto = new UserDto();
  29.          if(userName.equals(userPsw)) {
  30.              redirectAttributes.addFlashAttribute("userName",userName);
  31.              return "redirect:index";
  32.          } else {
  33.              model.addAttribute("loginError",true);
  34.              model.addAttribute("userDto",userDto);
  35.              return "login";
  36.          }
  37.      }
  38.      @RequestMapping("/index")
  39.      public String welcomeIndex(@ModelAttribute("userName") String userName,Model model) {
  40.          model.addAttribute("userName",userName);
  41.          return "index";
  42.      }
  43.  
  44.  }

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

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

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

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

然后

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

是 重定向到 index 页面 显示

否 想页面 返回error 提示

贴一下index 的代码

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8.     <div class="container"  th:replace="common :: header('login') "></div>
  9.     <div class="container">
  10.     欢迎,<span th:text="${userName}"></span>登录
  11.     </div>
  12.     <div class="container" th:replace="common :: footer"></div>
  13. </body>
  14. </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. C# Async/await 异步多线程编程

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  2. 关于KVO导读

    入门篇 KVO是什么? Key-value observing is a mechanism that allows objects to be notified of changes to spec ...

  3. 使用docker 解决一个小问题，你也可能用的到

    以前一直觉得docker是运维用的工具,或者devops 用的工具,一般人应该用不上,直到最近发现docker 还有另外一个妙用,不管是什么语言. 这几天开会网络特别不好,nodejs npm 仓库 ...

  4. Ubuntu 14.04 配置iptables防火墙

    Ubuntu默认安装是没有开启任何防火墙的,为了服务器的安全,建议大家安装启用防火墙设置,这里推荐使用iptables防火墙.如果mysql启本地使用,可以不用打开3306端口. # whereis ...

  5. JS中replace()用法举例

    语法: string.replace(regexp,replacement) 参数: regexp:声明了要替换的模式的RegExp对象.如果该参数是一个字符串,则将它作为要检索的直接量文本模式,而不 ...

  6. Thrift - 快速入门

    简单实例 有homebrew的话,直接执行以下命令即可,brew会处理相关依赖(https://thrift.apache.org/docs/install/). brew install thrif ...

  7. MySql 5.7.20安装

    1.首先上MySql的官网下载  https://dev.mysql.com/downloads/mysql/ 以我所选版本为例(免安装版),选择MYSQL Community Server 然后在右 ...

  8. 数据权限设计——基于EntityFramework的数据权限设计方案：一种设计思路

    前言:“我们有一个订单列表,希望能够根据当前登陆的不同用户看到不同类型的订单数据”.“我们希望不同的用户能看到不同时间段的扫描报表数据”.“我们系统需要不同用户查看不同的生产报表列”.诸如此类,最近经 ...

  9. Python多进程应用

    在我之前的一篇博文中详细介绍了Python多线程的应用:  进程,线程,GIL,Python多线程,生产者消费者模型都是什么鬼 但是由于GIL的存在,使得python多线程没有充分利用CPU的多核,为 ...

  10. 【唯星宠物】——CSS/BootStrap/Jquery爬坑之响应式首页

    前言:唯星宠物产品官网,分为首页.子页和登录注册页三个页面,除网页内容设计与图片素材的部分使用网上的材料之外,其余内容呈现以及功能模块全部为自己重构. 一.响应式轮播banner 思路:使用BootS ...