java基础及前端基础



对于前端知识，需要进一步巩固和加强，进入企业之后，要具备一定的接口调试，参数接收的能力，以及单体页面的开发，这里我学习一下前端知识巩固一下自身的技术栈和水平。本次笔记是跟学黑马的同名课程，巩固一下自己的前端知识水平，希望入职能用到。

前言

Java 程序员一提起前端知识，心情那是五味杂陈，百感交集。

• 说不学它吧，说不定进公司以后，就会被抓壮丁去时不时写点前端代码
• 说学它吧，HTML、CSS、JavaScript 哪个不得下大功夫才能精通？
• 学一点够不够用呢？如果只学基础的 JavaScript 是不够用的，前端都已经工程化了，Vue、React 这些框架你去看吧，光有点基础根本看不懂，甚至连前端页面路径在哪儿配置，如何跳转都不甚了解，所以得学，而且要学的还不少，请把前端当作 web 不可或缺的一部分来学习。
• 学习前端好处挺多，我听说过这么一句挺有道理的话：一个程序员至少应该掌握一门静态语言，如 Java，还应该掌握一门动态语言，如 JavaScript。而且，你不觉得学了前端，就如打通了程序员的任督二脉，可以独立接活了嘛

这门课为什么不由前端老师来讲？

• 前端老师不知道后端学员的痛点，他认为重要的咱不关心，他认为是常识一带而过的又恰恰是咱迷茫的地方，作为后端老师，我更懂后端学员
• 前端老师不懂后端知识，只能用前端思维来讲前端，如果授课老师懂 Java，能用一些现有知识对比讲解，能起到快速突破的效果
• 前端每个框架动辄需要数十个小时的学习，咱耗不起，我们更希望学到对我们最有用的那部分，其它的省省吧，总不能夺了前端程序员的饭碗

课程安排

• 整个课程分成五章
  • HTML / CSS 这部分对咱们来说，不是重点，但又不能不讲，这俩知识作为第一章，必学
  • JavaScript 这部分是重点，尤其是 ES6 以后的一些新语法，不理解这些，前端代码你根本看不懂，必学
  • Vue2，Vue3，React 这三章是三选一的关系，根据你入职公司的使用的前端技术不同，有针对地学习
    • 后三章会涵盖 TypeScript、VueCli、Vuex、VueRouter、ElementUI、Vite、CreateReactApp、React、Redux、ReactRouter java基础及前端基础 等库和工具的使用
  • jquery 经过调研，还有一些学员毕业后确实会用到，所以也作为一个可选章节进行学习

课程安排

课程目标

第一章. HTML 与 CSS

HTML 是什么：即 HyperText Markup language 超文本标记语言，咱们熟知的网页就是用它编写的，HTML 的作用是定义网页的内容和结构。

什么是HyperText呢，我们看下资料提供的课件。
详见 代码第1章example1-什么是html和css 1.html

点击网页2

点击网页3

那什么是Markup language呢？
我们右键，以VS Code打开。

这些以尖括号括起来的部分，我们都称之为Markup。在前端中，我们称之为标签。

• HyperText 是指用超链接的方式组织网页，把网页联系起来
• Markup 是指用 的方式赋予内容不同的功能和含义

CSS 是什么：即 Cascading Style Sheets 级联（层叠）样式表，它描述了网页的表现与展示效果

我们引入style.css样式。

可以看到超链接的字体和背景颜色发生了变化。

1. HTML 元素

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

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

在 代码第1章example2-html元素下新建文件3.html我们自己写一个元素

代码如下:

用浏览器打开

效果如下：

如果我们想增加标签数量，通过快捷键复制
ALT + SHIFT + ↓

展示结果如下:

这里小提示：如果我们熟悉IDEA的快捷键，我们可以通过下载插件，改变快捷键习惯为IDEA的

元素还可以有属性，如

• 属性一般是预先定义好的，这里的 id 属性是给元素一个唯一的标识
  
  除此属性之外，我们还可以增加title标题属性

网页展示如下:鼠标悬浮后，出现标题1

元素之间可以嵌套，如

错误嵌套写法：
标签不能交叉

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

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

2. HTML 页面

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

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

在 代码第1章example3-html页面 目录下新建网页文件2.html

快捷键!，可以直接生成html的模版

这里我们修改代码为：

用浏览器打开后的效果如下：

图片宽度比较大，我们重新设置一下宽度的像素

再看浏览器如下:

3. 常见元素

1) 文本

Heading

效果如下：

Paragraph

代码如下

效果：

List

无序列表 unordered list

多级列表

Anchor

锚，超链接

(1).跳转本地网页

本地网页(同目录)

(2).跳转互联网网页

单击后

(3).跳转页面内锚点

点击后，到p1所在的标签位置

2) 多媒体

Image

src 格式有 3 种

• 文件地址

比如

• data URL，格式如下

这里要把图片转换为Base64的二进制数据，具体方法如下

输出结果如下:

页面展示如下：

• object URL，需要配合 javascript 使用
  这个后续js的时候介绍

Video

代码如下:

页面：

Audio

代码如下：

页面如下：

这里推荐一个网站，遇事不决MDN
MDN

3) 表单

作用与语法

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

表单的语法

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

常见的表单项

文本框

这里我们自己写一个表单

页面如下：

后端代码：

这里 @Controller + @ResponseBody 可以用@RestController替代
前端页面：

点击提交后，后端运行结果如下：

密码框

增加密码框

页面如下：

隐藏框

页面中没有显示

那如果我们想通过隐藏框传递值呢，这里我们可以给隐藏框赋值。

前台代码如下：

后台代码：

新建一个实体类

页面展示：

输出如下：

日期框

后台增加属性

后台输出如下:

单选

页面如下:

checked属性表示，界面加载过程中默认选中一个。
界面如下:

后台输出如下:

多选

前台如下：

页面如下:

后端如下：

文件上传

注意：上传文件必须加如下属性

后台如下:

后台输出如下:

4. HTTP 请求

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

1) 请求组成

请求由三部分组成

1. 请求行
2. 请求头
3. 请求体

请求行(必须)

红色标注

这里可以看到 GET /test2?name=tony HTTP/1.1 叫请求行
POST是请求方式
/test2?name=tony是URI
HTTP/1.1是协议版本

请求头(必须)

绿色标注

请求头：
格式：头名：头值
localhost:虚拟主机

请求体(非必须)

蓝色标注的，并不是请求都会携带

可以用 telnet 程序测试

2) 请求方式与数据格式

get 请求示例

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

java后台这么写

这里我们这么发送

这里要用虚拟机安装telnet,这里我的是CentOS，指令如下:

安装好后，用虚拟机连接windows本机

回车，连接上后，输入

敲击两次回车后，返回结果：

post 请求示例

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

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

这里我们测试一下，请求如下:

这里Content-Length = 10不是随便定义的，根据name=zhang一个英文字符占一个长度，共10个字节。

linux收到响应

多个参数

post请求多参数情况

如果参数是多个呢，这里我们修改一下Java后端的代码

telnet测试如下:

输出如下:

这里Content-Length是多少，我们可以简单学习javascript
打开浏览器输入F12在控制台中输入:

回车后

这里16就是Content-Length的值。

get请求多参数情况

这里我们再尝试一下get请求多参数的情况

返回如下:

汉字发送

在浏览器按F12，打开控制台

回车后，就出来了汉字的编码

我们再发送一下GET请求

收到结果:

那么“张”这个汉字，是怎么变成URL Code的呢？我们研究一下。
也就是说%E5%BC%A0是怎么来的。

我们不妨先用Java代码，把“张”转换成对应的UTF-8格式

输出结果：

json 请求示例

json 对象格式

其中属性值可以是

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

json 数组格式

我们发送如下:

Java后台新建实体类

返回如下:

这里的19和0是分块发送的，最终字符数量是0，就停止发送。
这里发送的时候Content-Length: 25 明明是25
接收的时候怎么变成19

Java后台输出如下:

如果是JDK16，还可以使用Req,替代实体类,但是Req相当于get，初次赋值后不会更改，而没有set方法，是不可变的对象。

注意:json汉字可以照常发送

打开浏览器输入F12，之后输入

返回：21(字符)

因为传递是按照字节的，UTF-8中，一个汉字是三个字节，所以
21 -1 + 3 = 23
所以Content-Length是23

结果如下:

multipart 请求示例

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

Java后端如下:

telnet结果如下:

这里有个疑问
Content-Length: 125是如何计算的

这里要引入反引号，最后答案是116

116相比于125少了9个字节，那这9个字节差在哪儿呢。就差在换行符上
在换行中其实有两个符号 和 ，而JavaScript中只计算了一个，而我们的多行数据，刚好是9行，所以要加9

数据格式小结

客户端发送

• 编码
  • 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 技术来暂存数据

存

Java后端如下:

返回数据如下：

jsessionid = 5EC247CB0B301ACBFE90157D6F723CC5

取

Java后端代码如下：

输出结果如下:

session 技术实现身份验证

缺点：不适用于分布式项目，因为分布式项目有多台服务器，如果每一台都存储一份完整session，显然不太合理，这里引出了jwt技术。

4) jwt 原理

jwt 技术实现身份验证

生成 token

token为
eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ6aGFuZyJ9.qmta3qjU3XKd8di9n6h9DhbTznJYb75v0CESA7ZLx0E

Java后端代码

校验 token

Java后端代码

输出结果如下:

这里有个问题，就是这个长字符串的token有什么用，这里我们在IDEA中编写一个方法

我们访问试了下，发现没有骗过服务器

那为什么服务器能检验出问题呢，主要在第三部分签名上，签名是根据前两个部分生成了秘钥。

5. CSS

即 Cascading Style Sheets，它描述了网页的表现与展示效果

1) 选择器

type 选择器 - 根据标签名进行匹配（元素选择器）

新建一个文件style-exercise.css

html加上如下代码

效果如下：段落标签的背景颜色变为了紫色

class 选择器 - 根据元素的 class 属性进行匹配

修改html中需要修改的部分标签

修改style-exercise.css

效果如下:

id 选择器 - 根据元素的 id 属性进行匹配

修改html文件

修改style-exercise.css

效果如下：

这里我们不禁要问，如果多个选择器都匹配到了同一个元素，那么优先级是怎么样的呢？
css代码如下：

我们都修改段落2的样式
最后效果如下：

结论：
id选择器 > class选择器 > 选择选择器

2) 属性和值

• background-color : red;
• …
• display

页面如下：发现p2被隐藏了

如果更改为

发现p2就展示出来了

3) 布局

与布局相关的 html 元素

div

资料提供的界面如下：

效果如图：

这里style可以理解为内部样式，之前我们新建css，通过link引入，这个叫做外部样式。

我们给div id ="main"中增加type类型的文本

样式如下：增加了文本

template

先看下资料的源码

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.bianchenghao6.com/h6javajc/235.html