zoukankan      html  css  js  c++  java
  • springboot02 Thymeleaf

    一、http协议

    1. 什么是协议?

    协议是交易双方共同遵守的一种约定,比如: 租房协议 , 购买协议....

    2. 什么是http协议?

    HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写 HTTP 是基于 TCP/IP 协议的应用层协议。它不涉及数据包(packet)传输,主要规定了客户端和服务器之间的通信格式,默认使用80端口 。

    演变过程

    1. http 0.9版本

    最早版本是1991年发布的0.9版 , 只有一个GET 命令 。 如 GET /index.html 表示返回的是html网页,别的数据结果不接受。0.9只是一个雏形,并不能表示很丰富的结果。

    1. http 1.0版本

    1996年5月,HTTP/1.0 版本发布 , 任何格式的内容都可以传输, 这使得互联网不仅可以传输文字,还能传输图像、视频、二进制文件。这为互联网的大发展奠定了基础 。 其次除了GET 命令,还引入了 POST 和 HEAD 命令。 数据也变得丰富了起来, 除了本来应该要传输的数据之外,还包含了头信息(HTTP header),用来描述一些元数据

    1.0 有一个缺点 ,每个TCP连接只能发送一个请求。发送数据完毕,连接就关闭,如果还要请求其他资源,就必须再新建一个连接。

    1. http 1.1版本

    1997年1月,HTTP/1.1 版本发布,只比 1.0 版本晚了半年 。 直到如今的20年后,1.1版本仍然是最流行的版本。 1.1 版的最大变化,就是引入了长连接, 服务器端响应完毕后,不再关闭连接

    1. 未来的演变

    2009年,谷歌公开了自行研发的 SPDY 协议 , 主要解决 HTTP/1.1 效率不高的问题 , 后面的http2正是继承了SPDY 。

    2015年,HTTP/2 发布。它不叫 HTTP/2.0,是因为标准委员会不打算再发布子版本了,下一个新版本将是 HTTP/3。

    3. 请求响应信息解析

    为了加深大家对http协议认知,我们接下来可以使用一些工具来监视 请求 & 响应的过程。这些工具常用的有: PostMan , HttpWatch ...

    1. 安装 firefox & HttpWatch

    2. 搭建环境

    • 添加SpringBoot 依赖
    compile("org.springframework.boot:spring-boot-starter-web:1.5.10.RELEASE")
    
    • 编写页面
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
        <h2>以下表单采用GET方式提交</h2><br>
    
        <form action="user_login" method="get">
            用户名:<input type="text" name="username"/><br>
            密  码:<input type="text" name="password"/><br>
            <input type="submit" value="登录"/>
        </form>
        
    </body>
    </html>
    
    • 编写controller
    @RestController
    public class UserController {
        private static final String TAG = "UserController";
    
        @RequestMapping("user_login")
        public String login(String username , String password){
            System.out.println("执行登录了~");
            String content ="process login with "+username  + " : "+password;
            return content;
        }
        
    }  
    

    3. GET请求信息解释

    • 请求信息

    img01

    请求行 : 
    	GET /user_login?username=admin&password=123 HTTP/1.1
    	表示使用Get请求 , 表示请求什么路径地址  ,表示使用什么版本的协议
    	
    请求头 :
    	Host: localhost:8080
        User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0
        Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
        Accept-Language: zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
        Accept-Encoding: gzip, deflate
        Referer: http://localhost:8080/login.html
        Connection: keep-alive
        
        ---------------------------------------------------------------------
        
         Host : 表示主机地址
         User-Agent  : 表示客户端的信息
         Accept : 声明客户端可以接收什么类型的数据
    	Accept-Language  : 表示客户端支持的语言
    	Accept-Encoding  : 表示客户端支持的压缩格式
    	Referer : 表示请求从哪里过来的
    	Connection  : 表示连接状态。
    	
    请求体
    	get请求没有请求体。
    
    • 响应信息

    02

    响应行
    
    	HTTP/1.1 200 
    
    	表示服务器也支持1.1的版本协议 , 对这次请求处理的状态码是200  
    
    响应头
    
    	Content-Type: text/html;charset=UTF-8   : 表示返回的结果是一份网页,使用的是UTF-8编码
    	Content-Length: 75  : 返回的数据长度
    	Date: Sun, 21 May 2017 07:09:28 GMT  : 响应时间
    
    响应体
    
    	process login with admin : 123
    

    4. post请求响应解释

    • 请求信息

    04

    请求行:
    
    	POST /user_login HTTP/1.1
    	意思和get请求的意思一样,只不过这里的地址再也不跟数据了。 并且这里使用post请求
    	
    请求头:
    
    	这里只讲没有见过的就可以了
    	
    	Content-Type :  其实就是说明提交上去的数据是什么类型数据 。  是一个经过url编码的form表单数据
    	Content-Length :  提交的数据长度
    	Cache-Control : 表示再次请求的时候,是否读缓存。 
    	
    请求体:
    
    	username=zhangsan&password=123
    	是以流的形式写给服务器的。
    	
    
    • 响应信息

    05

    响应信息和GET请求的响应请求一样,此处就不解释了。

    4. Get请求和Post请求的区别

    03

    二、请求响应

    前面演示过了Controller ,也解释了http协议,接下来为了让大家更直观的感受请求响应 对象,通过一个简单例子, 引出 request & response 对象

    1. request对象

    request 对象其实是HttpServletRequest 类型, 通过它可以获取请求相关的一切信息, 包含请求信息 、 以及请求参数 ,甚至可以当成往里面存储数据【暂定】

        @RequestMapping("/aa")
        @ResponseBody
        public String aa(HttpServletRequest request , HttpServletResponse response){
    
            //1. 获取请求行
            String method = request.getMethod(); //请求方式
            String uri = request.getRequestURI(); //请求地址
            String protocol = request.getProtocol(); //获取协议
            System.out.println(method + " :" + uri +  " : "+ protocol);
    
            //2. 获取请求头信息
            Enumeration<String> headerNames = request.getHeaderNames();
            while (headerNames.hasMoreElements()){
                String headerName = headerNames.nextElement();
                String headerValue = request.getHeader(headerName);
    
                System.out.println(headerName + " = " + headerValue);
            }
            
            //3. 获取请求参数
            String username = request.getParameter("username");
            
    
            return "请求成功";
        }
    

    2. response对象

    response的类型为HttpServletResponse类型 , 在客户端发出每个请求时,服务器都会创建一个response对象,目的是为了对客户端的请求做出响应。

    @RequestMapping("testResponse")
    public void testResponse(HttpServletResponse response)throws IOException{
    
    
        //1. 设置响应行
        response.setStatus(200);
    
        //2. 设置响应头
        response.setHeader("myHeader" , "myHeaderValue");
    
        //3. 设置响应体
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("你好~!??");
    
    
        System.out.println("执行了testResponse");
    }
    

    三、 转发 & 重定向

    跳转页面的分类有两种,一种是请求转发 、 另一种是重定向, 两种跳转操作各有千秋、下面先给大家演示一个基本的跳转。

    1. 静态资源

    在我们的工程目录结构中,有一个叫做resource的目录,该目录主要是用来存放项目的资源,一般是htmlcssjs图片 ... . 默认情况下,resource下的资源是不能随便乱放的。因为Spring Boot 在处理资源匹配上,有自己默认的配置。 其中 /** 匹配的是 /static ,/public , /resources , /META-INF/resources 目录 。 什么意思呢 ? 后面的几个目录都是从resource目录开始的。 比如我们有一个html页面,那么这个html页面,默认可以放在以上4个目录中,注意: 这4个目录要我们自己创建。详情请参看 SpringBoot 文档 27.1.5

    06

    1. 使用默认目录

    假设在以上4个目录有一个 login.html , 那么访问该网页的路径应该是 localhost:8080/login.html 。 上面的/** 表示不管多少重的路径,都是在这默认的4个路径下查询资源。例如: 我们访问路径为:

    localhost:8080/image/aa.jpg 或者 localhost:8080/image/jpg/01/aa.jpg 。 从8080 后面就表示要在咱们的项目里面找东西了,那么如何找呢。 在那默认的4个目录中找子目录image , 然后在子目录iamge中查找aa.jpg ,后面的例子是在4个目录中查找 image/jpg/01这个子目录,然后在这个子目录中查找aa.jpg

    2. 自定义目录

    一般来说,官方给定的默认目录已经足够我们开发用了。我们如果想要声明 html文件, 可以在static下新建目录html , 如果要表示 图片,可以再static下新建image目录。如果自定义目录,需要在resource下新建application.properties 文件,在文件中指定路径。

    #表示静态资源位置  直到public 都是默认的位置。 后面的是我们自己添加的。
    spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/html,classpath:/image
       
    

    2. 跳转页面

    1. 编写页面

     <form action="/user_register" method="get">
         用户名: <input type="text" name="username"/><br>
         密  码: <input type="password" name="password"/><br>
         昵  称: <input type="text" name="nickname"/><br>
         <input type="submit" value="注册"/><br>
     </form>
    

    2. User实体类

    public class User {
        private static final String TAG = "User";
    
        private String username;
        private String password;
        private String nickname;
        
        // getXXX & setXXX
        ...
            
        @Override
        public String toString() {
            return username + "#" + password + "#" + nickname;
        }    
    }    
    

    3. 编写Controller

    @RestController
    public class UserController {
        private static final String TAG = "UserController";
        
        @RequestMapping("/user_register")
        public String register(User user){ 
            //此处使用对象来封装数据
            try {
                FileWriter fileWriter = new FileWriter("stu.txt", true);
                fileWriter.write(user.toString() + "
    ");
                fileWriter.close();
                
                System.out.println("注册成功");
            } catch (IOException e) {
                e.printStackTrace();
            }
            return "注册成功";
        }
    }
    

    4. 跳转页面

    要想跳转页面,类上使用的注解应该换成@Controller , @RestController 是用于返回json字符串的,而@Controlle 使用于跳转页面

    @Controller
    public class UserController {
        private static final String TAG = "UserController";
        
        @RequestMapping("/user_register")
        public String register(User user){ 
            //此处使用对象来封装数据
            try {
                FileWriter fileWriter = new FileWriter("stu.txt", true);
                fileWriter.write(user.toString() + "
    ");
                fileWriter.close();
                
                System.out.println("注册成功");
            } catch (IOException e) {
                e.printStackTrace();
            }
            return "index.html";
        }
    }
    

    3. 请求转发

    请求转发的写法有以下几种。

    • 使用request对象
    request.getRequestDispatcher("index.html").forward(request,response);
    
    • 直接返回跳转页面
    return "index.html";
    
    或者
    
    return "forward:index.html";
    

    4. 重定向

    返回值使用 redirect: 作为前缀,表示使用重定向来跳转页面 。

    • 使用response对象
    response.sendRedirect("index.html");
    
    • 直接返回跳转页面
     @RequestMapping("/save09")
    public String save09() throws ServletException, IOException {
        System.out.println("来到save9方法了~!~!");
        return "redirect:index.jsp";
    }
    

    5. 请求转发和重定向的区别

    07

    四、 显示数据 - Thymeleaf

    有时候我们需要在页面上显示一些动态的数据,比如,登录失败的时候,我们需要显示为什么失败。 登录成功进入首页,我们需要在右上角显示 登录人的昵称。 又或者我们想查询所有学生的信息,这些数据想要在页面上显示,我们应该如何显示呢?

    在以前的时候,有诸如使用jsp , 配合作用域显示 , 也有使用freemarker模板技术,如今我们给大家讲讲SpringBoot 主推的模板技术Thymeleaf. 使用这个Thymeleaf,我们很简单即可在页面上显示一些动态数据。

    1. 什么是Thymeleaf

    Thymeleaf 是一款用于渲染XML/XHTML/HTML5内容的模板引擎,类似JSP、Velocity、FreeMarker 等模板引擎。 Thymeleaf的主要目的是提供一个优雅和格式良好的方式创建模板。为了实现这一目标,它把预定义的逻辑放在XML的标记和属性上,而不是显式放在XML标记的内容上

    2. 如何使用Thymeleaf

    • 添加依赖
    compile("org.thymeleaf:thymeleaf-spring4:2.1.4.RELEASE")
    
    • controller封装数据
    @requestMapping("test")
    public String test(){
        
        ModelAndView modelAndView = new ModelAndView();
       
        //设置模型数据
        modelAndView.addObject("name" , "奥巴马");
    
        //设置跳转的目标是哪里。 list.html
        modelAndView.setViewName("list");
        
        return "index";
    }
    
    • 声明模板页面

    务必要在resources下面新建一个templates文件夹,用于存放模板页面。早前我们说的static 页面是用于存放静态页面,静态页面的内容都是固定好的,不会再改变。而要显示动态数据的页面,需要放置在resources/templates文件夹中。我们一般把这些页面称之为模板页面。

    • 页面显示数据
    <!-- 引入命名空间 -->
    <html xmlns:th="http://www.thymeleaf.org" >
    <body>
       
        <!-- thymeleaf的模板取值显示都是写在标签里面。使用th命名空间来取值 
        
         1.  取值的写法是: ${属性的名称} , 这种写法不能独立存在,
        必须放在th:xxx="${属性名称}"
    
        2. 如果数据要放置到标签的中间形成文本,那么使用th:text,
        如果数据要填充到标签的value属性中,那么使用th:value  -->
        <p th:text="${name}"></p> <br/>
        
        <input type="text" th:value="${name}"/>
          
    </body>  
    

    3. 存值手法

    a. 使用Model参数存值

     @RequestMapping("test")
     public String test(Model model){
    
         model.addAttribute("address","深圳");
    
         return "testpage";
     }
    

    b. 使用ModelAndView对象存值

    @RequestMapping("test2")
    public ModelAndView test2(){
    
        ModelAndView modelAndView = new ModelAndView();
    
        //1. 存数据
        modelAndView.addObject("address","北京");
    
        //2. 指定视图
        modelAndView.setViewName("testPage");
    
        return modelAndView;
    }
    

    3. 基本用法

    这里的基本用法,我们给大家讲两个基本的表达式即可 表达式要求务必写在 th:xxx这样的属性中。而th:xxx这样的属性又必须写在html标签中,不能单独使用。

    • 变量表达式

    用于取值 ${变量名}

    • URL表达式

    用于指定超链接 @{路径}

    如果是需要从model中取值的话,写法为

    th:href="@{${model中的name值}}"。

    有的时候我们不止需要从model中进行取值,还需写字符串与model中的值进行拼接,写法为

    th:href="@{'字符串'+${model中的name值}}"。

    五、作业

    1. 使用request | response 完成注册功能。 注册完毕跳转到登录页面。
    2. 完成登录功能, 要求实现登录成功 跳转到首页显示欢迎信息, 登录失败,在登录页面显示失败原因。【需要使用Thymeleaf】

    注册功能 :

    登录功能:

  • 相关阅读:
    ubuntu(16.04.01)学习-day2
    python学习day5--set、函数
    ubuntu(16.04.01)学习-day1
    nosql
    redis学习-day1
    scrapy框架梳理
    io多路复用--本质
    异步非阻塞--高性能相关
    爬虫设计模式总结
    requests模块参数介绍
  • 原文地址:https://www.cnblogs.com/xiaocongcong888/p/9436281.html
Copyright © 2011-2022 走看看