上一篇说了一下怎么构建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. springboot使用zookeeper(curator)实现注册发现与负载均衡

    最简单的实现服务高可用的方法就是集群化,也就是分布式部署,但是分布式部署会带来一些问题.比如: 1.各个实例之间的协同(锁) 2.负载均衡 3.热删除 这里通过一个简单的实例来说明如何解决注册发现和负 ...

  2. JavaWeb基础之JdbcUtils工具类1.0

    2016年12月20日,第一次学习JDBC.看的是传智播客崔希凡老师的视频,东北口音很是风趣幽默,技术之牛让人膜拜.2017年9月21日,再次重温web知识,分享JdbcUtils工具类,用以接下来的 ...

  3. AmCharts 对数据排序后展示

    在官网看到的例子 给chart添加一个排序功能的handler AmCharts.addInitHandler( function(chart){ if (chart.orderByField === ...

  4. ajax和jsonp使用总结

    前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理:实例化xmlhttp对 ...

  5. DevOps之网络

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <网络(Network)> 关于网络的网络架构和网络模型:知识与技能的层次(知道. ...

  6. .net Mvc框架原理

    .net Mvc框架原理 本文只是简要说明原理,学习后的总结. 1.当一个Http请求发送后会被URLRoutingModule拦截(这时候也就是正式进入管道,下章会讲管道事件) 2.这时根据Isap ...

  7. win10 uwp 读写XML

    UWP 对 读写 XML做了一些修改,但和之前 WPF 的方法没有大的区别. 我们先来说下什么是 XML , XML 其实是 树结构,可以表达复杂的结构,所以在定制要求高的.或其他方面如json 做不 ...

  8. 【广告】win10 uwp 水印图床 含代码

    本文主要是广告我的软件. 图床可以加速大家写博客上传图片的时间,通过简化我们的操作来得到加速. 在写博客的时候,我们发现,我们需要上传一张图片,需要先打开图片,然后选择本地图片,然后上传. 但是我经常 ...

  9. 使用Hexo+Github一步步搭建属于自己的博客（进阶）

    主题的配置:这里以NexT主题作为题材 1.安装NexT,在其文件夹中鼠标右键,点击Git Base Here.输入命令:git clone https://github.com/iissnan/he ...

  10. JVM菜鸟进阶高手之路十三（等你来战！！！）

    转载请注明原创出处,谢谢! 前几天有个朋友问了我个问题,下面给大家分享下,希望大家积极在评论区进行评论留言,等你来战!!! 先来个趣味题,热身下,引出后面的jvm题目. 地上的影子是那个人的? 地上的 ...