Java程序员要掌握的前端技术HTML

最新推荐文章于 2024-10-04 00:46:18 发布

清梦压星河_Ciao

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量82

点赞数

分类专栏：前端文章标签：前端 java html

本文链接：https://blog.csdn.net/m0_53951384/article/details/132662778

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1. HTML 元素

HTML 由一系列元素 elements 组成，例如

<p>Hello, world!</p>

整体称之为元素
<p> 和 </p> 分别称为起始和结束标签
标签包围起来的 Hello, world 称之为内容
p 是预先定义好的 html 标签，作用是将内容作为一个单独的段落

元素还可以有属性，如

<p id="p1">Hello, world!</p>

属性一般是预先定义好的，这里的 id 属性是给元素一个唯一的标识

元素之间可以嵌套，如

<p>HTML 是一门非常<b>强大</b>的语言</p>

不包含内容的元素称之为空元素，如

<img src="1.png">
<img src="1.png"/>

img 作用是用来展示图片
src 属性用来指明图片路径

2. HTML 页面

前面介绍的只是单独的 HTML 元素，它们可以充当一份完整的 HTML 页面的组成部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <p id="p1">Hello, world!</p>
    <img src="1.png">
  </body>
</html>

html 元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素
head 元素包含的是那些不用于展现内容的元素，如 title，link，meta 等
body 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素

3. 常见元素

1) 文本

Heading

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>

Paragraph

<p>段落</p>

List

无序列表 unordered list

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

多级列表

<ul>
    <li>
    	北京市
        <ul>
            <li>海淀区</li>
            <li>朝阳区</li>
            <li>昌平区</li>
        </ul>
    </li>
    <li>
    	河北省
        <ul>
            <li>石家庄</li>
            <li>保定</li>
        </ul>
    </li>
</ul>

Anchor

锚，超链接

<a href="网页地址">超链接文本</a>

2) 多媒体

Image

<img src="文件路径">

src 格式有 3 种

文件地址

data URL，格式如下
data:媒体类型;base64,数据
在这里插入图片描述

<img src="data:image/png;base64,图片的base64编码字符穿"/>

object URL，需要配合 javascript 使用

Video

<video src="文件路径"></video>

Audio

<audio src="文件路径"></audio>

3) 表单

作用与语法

表单的作用：收集用户填入的数据，并将这些数据提交给服务器

表单的语法

<form action="服务器地址" method="请求方式" enctype="数据格式">
    <!-- 表单项 -->
    
    <input type="submit" value="提交按钮">
</form>

method 请求方式有
- get （默认）提交时，数据跟在 URL 地址之后
- post 提交时，数据在请求体内
enctype 在 post 请求时，指定请求体的数据格式
- application/x-www-form-urlencoded（默认）
- multipart/form-data
其中表单项提供多种收集数据的方式
- 有 name 属性的表单项数据，才会被发送给服务器

常见的表单项

文本框

<input type="text" name="uesrname">

密码框

<input type="password" name="password">

隐藏框

<input type="hidden" name="id">

日期框

<input type="date" name="birthday" value="2021-01-01">

在这里插入图片描述

单选

<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">

多选

<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">

文件上传

<input type="file" name="avatar">

4. HTTP 请求

1) 请求组成

请求由三部分组成

请求行
请求头
请求体

可以用 telnet 程序测试，需要先开启telnet。

2) 请求方式与数据格式

get 请求示例

GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1
Host: localhost

由于发送get请求携带多个参数时需要通过&进行参数之间的连接，这个&符号为特殊符号会进行处理解析出对应的参数，而中文在请求过程中也会被视为特殊符号进行处理，如果直接在telnet中传递中文参数解析就会失败。

%E5%BC%A0 是【张】经过 URL 编码后的结果

post 请求示例

POST /test2 HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 21

name=%E5%BC%A0&age=18

application/x-www-form-urlencoed 格式细节：

参数分成名字和值，中间用 = 分隔
多个参数使用 & 进行分隔
【张】等特殊字符需要用 encodeURIComponent() 编码为【%E5%BC%A0】后才能发送

json 请求示例

POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 25

{"name":"zhang","age":18}

json 对象格式

{"属性名":属性值}

其中属性值可以是

字符串 “”
数字
true, false
null
对象
数组

json 数组格式

[元素1, 元素2, ...]

multipart 请求示例

POST /test2 HTTP/1.1
Host: localhost
Content-Type: multipart/form-data; boundary=123
Content-Length: 125

--123
Content-Disposition: form-data; name="name"

lisi
--123
Content-Disposition: form-data; name="age"

30
--123--

boundary=123 用来定义分隔符
起始分隔符是 --分隔符
结束分隔符是 --分隔符–

数据格式小结

客户端发送

编码
- application/x-www-form-urlencoded ：url 编码
- application/json：utf-8 编码
- multipart/form-data：每部分编码可以不同
表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
文件上传需要用 multipart/form-data 格式
js 代码可以支持任意格式发送数据

服务端接收

对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据，Spring 接收方式是统一的，只需要用 java bean 的属性名对应请求参数名即可
对于 applicaiton/json 格式的数据，Spring 接收需要使用 @RequestBody 注解 + java bean 的方式

3) session 原理

Http 无状态，有会话

无状态是指，请求之间相互独立，第一次请求的数据，第二次请求不能重用
有会话是指，客户端和服务端都有相应的技术，可以暂存数据，让数据在请求间共享

服务端使用了 session 技术来暂存数据

存

GET /s1?name=zhang HTTP/1.1
Host: localhost

取

GET /s2 HTTP/1.1
Host: localhost
Cookie: JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D

如果同时有两个不同的登录请求发送给服务端，下次其他操作请求过来如何知道对应哪个用户？
在发送登录请求时，服务器会将登录状态保存到session中，每个session都会有一个标识：session=1，session开启完毕后会返回一个标识给客户端JSESSIONID=1，下次请求过来时携带上这个表示，就知道跟哪个session对应。

session 技术实现身份验证

在单体项目中进行身份状态的校验，可以使用session存储登录状态，也是比较方便的。登录后在服务端开启一个session会话用户存储登录信息，非登录操作会被拦截器进行拦截，如果此时的请求有携带cookie，JSESSIONID的值跟SESSION匹配成功后证明是登录后执行的操作，拦截器可以放行，如果匹配不上或者根本没有携带cookie，则直接拦截。

4) jwt 原理

jwt 技术实现身份验证

服务器端：

@RequestMapping ("/j1")
@ResponseBody
public String j1(String name,String pass){
	if ("zhang".equals(name) && "123".equals(pass)){
		//token是通过JWT会将用户名进行一个加密操作
		String token = Jwts.builder().setSubject(name).signWith(key).compact();
		return "验证身份通过："+token;
	}else{
		return "验证身份失败";
	}
}

@RequestMapping("/j2")
@ResponseBody
public String j2(@RequestHeader String authorization){
	try{
		System.out.println(authorization);
		Jws<claims> jws = Jwts.parserBuilder().setsigningKey(key).build().parseclaimsJws(authorization);
		return "校验通过，你是："+jws.getBody().getsubject();
	}catch (Exception e){
		return "校验失败";
	}
}

生成 token

GET /j1?name=zhang&pass=123 HTTP/1.1
Host: localhost

通过JWT生成的token是由三部分组成的，前两部分是可以通过Base64解码看到加密前的数据，而最后一部分通过某种算法将这三个值进行计算确保token不被篡改。
在这里插入图片描述

校验 token

GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28

JWT（JSON WEB TOKEN）和自己构造的token的区别：

JWT不用存放到数据库中，token需要。
JWT的校验是通过服务器端JWT算法校验是否篡改、有效。而token是通过数据库匹配。

清梦压星河_Ciao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录