# JavaWebDemo204
**Repository Path**: nieps/java-web-demo204
## Basic Information
- **Project Name**: JavaWebDemo204
- **Description**: 204java班 javaweb 案例和笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-07
- **Last Updated**: 2022-11-15
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# JavaWeb笔记
## HTML
### 介绍
HTML的全称为[超文本标记语言](https://baike.baidu.com/item/超文本标记语言/6972570?fromModule=lemma_inlink)，是一种[标记语言]
Hyper Text Markup language
> 扩展：微信小程序开发
>
> * wxml 微信 markup language 如:
> * wxss 微信 Style Sheets （跟css一样）
> * wxs weixin script （写的就是javascript）
> * xml 页面 描述页面相关信息 (可扩展的标记语言),通常用来描述数据 （现在都是使用json格式数据）
### 结构
### 元素
标签、元素 如：
* html
* body
分类：
* 块级元素 在浏览器中占据整行 ,并排斥其它元素与其在同一行
> div 盒子模型 : div+css
>
> ol 有序列表 orderer list ,其下子元素 li list item 列表项
>
> ul 无序列表 unordered list ,其下子元素 li list item 列表项
>
> br 表示换行
>
> 其它：
>
> p 段落元素
>
> h1-h6表示1-6级标题
* 行内元素 又称为内联元素(inline block) ,在浏览器中可以与其它行内元素共占一行，只有在多个行内元素的总跨度大于浏览器宽度时，才会换行
> span 常用
>
> a 超连接
>
> img 显示图片的
>
> input 表单元素：输入框 密码框 单选按钮 复选按钮 button按钮...
>
> select 下拉列表
## css
### 介绍
层叠样式表 Cascading Style Sheets
样式的定义：
* 行内样式 在html元素内 通过style属性来定义 的，优先级最高
* 内部样式 通常在标记内，通过标记定义的样式 ，可以复用样式代码
> 通过css选择器定义样式：
>
> 语法：
>
> 
* 外部样式 通过标签 引入单独的css文件 ,这是开发中常用 的 ，可以使多个页面复用css代码
> ~~~html
>
>
> ~~~
>
> * 属性href 指明外部css文件所在路径
>
> 路径的定义：
>
> 1. 相对路径 相对于要引用css的文件所在的位置
>
> > ./ 代表当前目录
> >
> > ../ 代表上一级目录
>
> 2. 绝对路径 就是css的真实路径 可以是本地系统的路径(不推荐使用)，也可以是网络上的绝对路径
### 长度单位
px em rem 的区别？
1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
2. em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布
3. 3.em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。
移动页面排版： 推荐使用rem 进行换算
### 750稿
引入换算单位
~~~javascript
function remSize() {
let screenWidth = window.document.documentElement.clientWidth || window.innerWidth;
if (screenWidth > 750) {
screenWidth = 750;
}
if (screenWidth < 320) {
screenWidth = 320
}
console.log('screenWidth:', screenWidth);
document.documentElement.style.fontSize = (screenWidth / 7.5) + 'px';
let doc=document.querySelector("body");
console.log("doc>>>>",doc)
if(doc){
doc.style.fontSize = 0.3 + 'rem'
}
}
window.onload=function(){
remSize()
}
window.onresize = function () {
remSize()
}
~~~
>获取设备宽度
>
>750 等于750
><320 等于320
>设置字体大小 设备宽度/7.5 1rem=100像素
>// 设计稿是750px
>// 1rem == 100px的设计稿宽度
>// 整个屏幕750px宽度7.5rem，屏幕一半的宽度375px就是3.75rem
>调用
>window.onresize = function(){ 调用 }
### viewport
移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。
我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：
~~~html
~~~
> 该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放
meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：
| width | 设置***layout viewport*** 的宽度，为一个正整数，或字符串"width-device" |
| ------------- | ------------------------------------------------------------ |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置***layout viewport*** 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
### 边距属性
left/top/right/bottom 使用：
* 默认如A (靠左上角) 调整边距离 left top
* 如果A靠右上角 right top
* 如果A靠左下角 left bottom
* 如果A靠右下角 right bottom
边距一个属性设置所有值规则 ，以margin为例：
* 如果只有1个值 效果等同于设置 left top right bottom 四个值
* 如果是2个值，第一个值设置的是top bottom的值，第二个设置的是left right的值
* 如果是3个值，第一个代表top ,第二个代表left right ,第三个代表bottom
* 如果是4个值 ，分别对应 top right bottom left 这四个值
### 边框属性
重要的三个属性：
* *-color 设置边框线颜色的
* *-width 设置边框线的宽度
* *-style 设置边框线样式的 dashed 虚线 dottted 点线 solid实线 none禁用
示例:
设置四4个边框
~~~css
border-color: #f00;
border-width: 1px;
border-style: solid;
~~~
缩写形式：
~~~css
border: solid #f00 1px;
~~~
border属性的值包含边框的3个属性，顺序任意。
### 边框弧度
border-radius: 像素或百分比，设置4个角的弧度
也可以分别设置4个角：
* border-top-left-radius 设置左上角弧度
* border-top-right-radius 设置右上角弧度
* border-bottom-left-radius 设置左下角弧度
* border-bottom-right-radius 设置右下角弧度
### float
元素浮动
找到当前元素最近的父元素或浮动的兄弟元素，以其为参考，脱离正常排版，浮动显示
浮动float属性值：
left：元素向左浮动
right：元素向右浮动
none：默认值。元素不浮动。
inherit：规定从父元素继承float的属性值；
### css块元素与行内元素相互转换
~~~css
display: inline |block |inline-block ;
~~~
* inline 元素以行内元素效果显示
* block 元素以块元素显示 独占一行
* inline-block 行内块 具备行内元素与块元素的属性
### css定位
position 属性指定了元素的定位类型，然后指定坐标值定位(left/top/right/bottom)
常用属性值：
- relative 相对定位 相对元素当前的位置进行定位
- fixed 固定位置 不会随着页面的滚动而移动
- absolute 绝对定位 相对于浏览器窗口
### Flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
定义flex布局：
~~~css
display: -webkit-flex; /* Safari */
display: flex;
~~~
> 注意，设为 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效。
#### 容器的属性（父元素）
- flex-direction 属性决定主轴的方向（即项目的排列方向）
> - `row`（默认值）：主轴为水平方向，起点在左端。
> - `row-reverse`：主轴为水平方向，起点在右端。
> - `column`：主轴为垂直方向，起点在上沿。
> - `column-reverse`：主轴为垂直方向，起点在下沿。
- flex-wrap 属性定义，如果一条轴线排不下，如何换行。
> ```css
> nowrap | wrap | wrap-reverse;
> ```
- flex-flow 属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`
- **justify-content** 属性定义了项目在主轴上的对齐方式。(常用)
> - `flex-start`（默认值）：左对齐
> - `flex-end`：右对齐
> - `center`： 居中
> - `space-between`：两端对齐，项目之间的间隔都相等。
> - `space-around`：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- **align-items** 属性定义项目在交叉轴上如何对齐。
> - `flex-start`：交叉轴的起点对齐。
> - `flex-end`：交叉轴的终点对齐。
> - `center`：交叉轴的中点对齐。
> - `baseline`: 项目的第一行文字的基线对齐。
> - `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
- **align-content** 属性定义了多根轴线(多行，align-items单行)的对齐方式。如果项目只有一根轴线，该属性不起作用。
> - `flex-start`：与交叉轴的起点对齐。
> - `flex-end`：与交叉轴的终点对齐。
> - `center`：与交叉轴的中点对齐。
> - `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。
> - `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
> - `stretch`（默认值）：轴线占满整个交叉轴。
#### 项目的属性(子元素)
- `order ` 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
- *`flex-grow` 属性定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。*
> *如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。*
- *`flex-shrink` 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小*
> *如果所有项目的`flex-shrink`属性都为1，当空间不足时，都将等比例缩小。如果一个项目的`flex-shrink`属性为0，其他项目都为1，则空间不足时，前者不缩小。*
>
> *负值对该属性无效。*
- *`flex-basis` 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。*
- **flex** ` 属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。
> 该属性有两个快捷值：`auto` (`1 1 auto`) 和 none (`0 0 auto`)。
>
> 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
- `align-self`
- 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。
> 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
### 文本溢出显示省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
实现方法：
~~~css
overflow: hidden; /*内容溢出 隐藏*/
text-overflow:ellipsis; /*文本溢出 显示省略号: ... */
white-space: nowrap; /*内容不换行*/
~~~
如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号，如下。
实现方法：
~~~css
display: -webkit-box;
-webkit-box-orient: vertical;/*垂直方向*/
-webkit-line-clamp: 3; /*最多显示的行数*/
overflow: hidden;/*内容溢出 隐藏*/
~~~
> 适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
>
> 注：
>
> 1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
> 2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
> 3. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
## JavaScript
是一个脚本语言，让页面动起来
Js类库：jQuery
框架： Vue 前端：React
### 定义
通常在标签中，通过标记定义js, 可以是内部js,也可以是外部js
* 事件冒泡 事件从内到外传递 （事件会从子元素传递给父元素）
* 事件捕获 事件从外到内传递 （事件会父元素传递给子元素）
函数： 一段js代码
DOM (document object modal):文档对象模型,内置了一部分对象：document
js对象： 一组属性的无序集合，属性类型是字符串，属性值可以是：字符串、数字、数组、对象、函数等
声明变量：
* var 声明变量
* let 具有局部作用域
* const 声明常量
> js是弱类型语言，变量的类型由值来决定 ,如值是字符串就是字符串类型，值是数字就是数字类型
## Servlet
### 历史
web开发 ：
* web1.0 纯静态页面 html
* web2.0 动态的 允许用户与网站进行交互
> 动态脚本语言：
>
> 1. asp 微软的 新的技术 .net 运行在window服务器 如iis服务器
> 2. php 活跃的 适用做网站 草根语言 黄金组合： lamp
>
> linux + apache + mysql + php
>
> 3. jsp java server pages -------前身 servlet
>
> * jsp1.0 早先的语法 脚本和html混合 <% 这里允许你写java代码 %>
>
> <%=表达式%> <%! 声明变量或方法 %>
>
> * jsp2.0 引入了jstl 标签技术 核心标签 c标签 定义一个变量 sql标签操作数据库的 fn标签 功能函数 fmt标签格式化 x标签操作xml 的
>
> * jsp前身 是servlet 运行过程： 通过serlvet容器 将jsp 转换成Servlet ，然后再编译成class文件 ，最后解释输出
* web3.0 前后端分离
前端框架 基于javascript/typescript vue react angular
### Servlet介绍
RIA 应用 ： rich internet application
其它技术：
* Adobe Flex----经过编译后成为flash flash动画
* Siverlight 微软的
* Java Applet 是“客户端小程序”
接口： 常量 和功能 的集合
声明接口： Fly 提供一个功能 飞
### 版本
4.0.1之前 属于apache 下的 包名是javax.servlet ...
4.0.2之后 jakarta （apache下的一个子组织）
### Servlet容器
区分：
* 服务器
> 通常所说的 Web 服务器，比如 Apache、Nginx、IIS 等，它们的功能往往都比较单一，只能提供 http(s) 服务，让用户访问静态资源（HTML 文档、图片、CSS 文件、JavaScript 文件等），它们不能执行任何编程语言，也不能访问数据库，更不能让用户注册和登录。
* 容器 (包含服务器+Servlet运行规范)
> 要想运行 Servlet 代码，还需要一种额外的部件，该部件必须支持 Servlet 规范，实现了 Servlet 接口和一些基础类，这种部件就是 Servlet 容器。
>
> 为了简化部署流程，Web 容器往往也会自带 Web 服务器模块，提供基本的 HTTP 服务，如Tomcat
### Tomcat
版本选择
#### 端口号
默认为8080
localhost -----对应本机地址-----127.0.0.1
tomcat正常运行的前提是jdk环境变量没问题。
~~~shell
java
javac
~~~
编辑本机地址和域名映射：
~~~
127.0.0.1 www.niu.com
~~~
就可以通过 [http://www.niu.com:8080/](http://www.niu.com:8080/)访问
### 应用创建
maven依赖
~~~xml
javax.servlet
javax.servlet-api
4.0.1
provided
~~~
#### 服务器配置
#### 项目结构
#### Servlet基类
## Servlet接口
Servlet本身是一个Java类 ，它的运行必须实例化
> 实例化：
>
> * 在java中 通过 new来实例化
> * Servlet的实例化是由容器来实例化的 （不再是程序员自己实例化 ），在容器启动时实例化
## HttpServlet
#### 请求方法
restful api :
* get 代表读操作
* post 代表新增 资源
* put 代表的修改资源
* delete 代表删除资源
* get 请求 参数显示在地址栏中 不能传递敏感参数不安全 ，地址栏长度是有限制的，不能传递太多的参数
参数传递格式 ： url ? 参数名=参数值 &参数名=参数值
* post 请求 参数不会显示在地址栏，更安全，以表单数据传递 ，参数的长度和大小不受限制
#### Servlet配置
##### xml配置
通过在web.xml映射servlet路径来访问
#### ServletConfig
#### XML
*xml*一般指可扩展标记语言,用来描述数据或配置文件
xml允许用户自定义标签：
~~~xml
<中国>
<河南省>
<郑州市>
<开封>
~~~
一个严格、良好的xml文档，具有文档验证规则，规则：
* 早期版本 DTD **文档类型定义(Document Type Definition)** 它定义了xml文档中标签的规则 （通俗说：xml文档中可以使用哪些标签，标签出现的顺序、标签的属性）
> 
>
> 元素限制符号说明：
>
> * ？ 说明指定 的元素最多出现一次
> * serlvet* 元素后面的* 代表 元素可以出现任意次
> * 元素+ 代表元素至少 出现一次
* XML SCHEMA 一种xml格式的 文档验证
#### Servlet实例 创建时机
两种创建时机：
* 在访问的时候创建 （默认的）
* 在容器启动的时候创建 需要我们配置
> load-on-startup 元素取值规则如下：
>
> 1. 它的取值必须是一个整数；
> 2. 当值小于 0 或者没有指定时，则表示容器在该 Servlet 被首次请求时才会被加载；
> 3. 当值大于 0 或等于 0 时，表示容器在启动时就加载并初始化该 Servlet，取值越小，优先级越高；
> 4. 当取值相同时，容器就会自行选择顺序进行加载。
#### 项目部署
不包含war包
包含war包
war包是web项目的归档文件（类似于.zip压缩包）,放到tomcat目录下，服务器启动会自动解压。
#### @WebServet注解
### ServletContext
servlet上下文，可以理解为整个应用的全局对象（在任何jsp \servlet中获取到的该对象都是同一个）
在Servlet中，有三个域对象 （内存中的存储空间，不同的域对象，作用域不同）
* ServletContext 上下文对象 整个应用共享
* session 域对象 会话（当我们访问服务器时，建立 连接，就开始会话 ，直接到浏览器关闭，会话结束） 以前记录用户登录状态常用的方式
* request 请求域对象 在整个请求链中共享资源
## HttpServletRequest接口
http:协议 超文本传输协议
https: 安全协议 数据在传输时会加密 更安全 如果tomcat要启用该协议，需要ssl证书
ftp协议
pop3 协议
amqp 高级队列消息协议
tcp/udp协议
### 请求头
常用方法：
getHeader(String name) 获取指定请求头参数的值
setCharacterEncoding 设置请求编码 的，通常解决请求乱码问题
getParameter 获取指定参数的值
getParameterValues 获取一个参数多个值
作业：
1. getParameterMap() 这个方法可以一次性接收所有参数，封装一个方法，获取前端提交过来的参数，如果参数只有一个值，则存成 key-value形式 ，如果是多个值还存在key- []value形式
2. 实现用户注册功能 ，要求数据保存到数据库，模拟用户登录 （从数据库读取用户名和判断账号是否正确）
### 用户认证方法
* basic基础认证 每次请求都带上用户名和密码 （不安全，不推荐使用 ）
* cookie/session认证 (没有前端时认证方式)
* token认证 它的传递就是通过请求头传递的
## HttpServletResponse接口
**HTTP状态码**（英语：HTTP Status Code）是用以表示网页服务器[超文本传输协议](https://baike.baidu.com/item/超文本传输协议?fromModule=lemma_inlink)响应状态的3位数字代码
常用状态码：
* 200 ok 请求成功
* 404 Not Found 请求的资源不存在
* 405 请求方法不允许
* 400 Bad Request 语义有误 请求参数有误
* 500 Internal Server Error 服务器错误
常用 方法：
* setContentType(String type) 设置响应内容类型
* setCharacterEncoding(String charset) 设置响应的编码
## 软件结构
* c/s结构 client server 客户端服务器
* b/s结构 brower server 浏览器服务器 （通过浏览器访问的应用 ）
## JSP
与页面相关的设置有三条指令：
* page 指令 设置与页面相关的信息 比如 编码、内容类型 。。。
* include 指令 包含其它页面 将其它页面的内容加载到当前页面
* taglib指令 引入jstl标签库
**注意：指令必须放到文档 的最前面**
指令语法：
~~~jsp
<%@指令 %>
~~~
语法： <% java代码 %> 表达式 <%= %>
jsp: 9个内置对象
* page 代表当前页面 相当于类中的this
* pageContext 代表当前页的域对象
* request 代表请求域对象 HttpServletRequest
* session 代表会话域对象 HttpSession
* application 代表全局域对象 ServletContext
* exception 异常对象
* out 当前页面输出流
* config 配置对象
* response对象
## RequestDispatcher 接口
## 会话技术
cookie (java存储在客户端的 持久化 保存到硬盘上)---------------------
分类：
* 会话级cookie -------------------------------sessionStorage
* 技术cookie-----------------------------------localStorage
## 跨域
同源策略
协议 域名 端口号 三者一致，认为同源。
http://localhost:8080/index.jsp http://localhost/index.jsp 非同源 端口号不一致
http://localhost:8080/index.jsp https://localhost:8080/index.jsp 非同源 协议不一致
## filter 过滤器
继承HttpFilter
Spring MVC 核心控制器： DispatcherServlet
拦截器-------------- filter 过滤器
## 监听器
监听三大域对象
* 监听三大对象的创建和销毁
> * ServletContext ServletContextListener
> * HttpSession HttpSessionListener
> * request HttpSessionListener
* 监听对象属性变更的变化 （新增、修改、删除属性值 ）
> * ServletContext ServletContextAttributeListener
> * HttpSession HttpSessionAttributeListener
> * request ServletRequestAttributeListener
* 监听 HttpSession 中的对象状态改变的监听器
## JSP2.0
${表达式}---------------------<%=表达式 %>
jstl
tld : 标签库描述文件
通过标签指令
注意：默认jsp不支持el表达式 ，需要开启 isELIgnored="false"
~~~jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
~~~
