NotionNext BLOG

🗒️ Java web

Agoinnnnnn

Java web|2024-5-27|Last edited: 2024-6-6|
type
status
date
slug
summary
tags
category
icon
password

2024.5.27

1.HTML

超文本标记语言，标签都是定义好的，由浏览器解析。
w3school.com.cn是官方文档

1.1基础标签和样式

1.1.1标题排版：

图片标签：<img>
  • src：制定图片的url（绝对路径/相对路径）
  • width：图像的宽度（像素（单位是px）/相对于父元素的百分比）
  • height：图像的高度（像素（单位是px）/相对于父元素的百分比）
标题标签：<h1>-<h6>
水平分割线：<hr>
相对路径：./：表示当前目录，是可以省略的；../：表示的是上一级目录，不能省略的

1.1.2标题样式：

css引入方式：
  • 行内样式：写在标签的style属性中（不推荐）
  • 内嵌样式：写在style标签中（可以写在页面的任何地方，但一般写在head里）
  • 外联样式：写在一个单独的.css文件中（通过link标签在网页中引入）
颜色表示方式：
表示方式
表示含义
取值
关键字
预定义的颜色
red，green，blue…
rgb表示法
红绿蓝三种颜色，每项取值范围为0-255
rgb(0,0,0),rgb(255,55,255)
十六进制表示法
#开头，将数字转化为16进制来表示
#000000,#ff0000
css选择器：
  • 元素选择器：根据元素来判定选择的对象
  • id选择器：可以给元素设置id，然后根据id来判定要选择的元素是哪个：
  • 类选择器：根据class的值来判定要选择的元素
如果三种选择器都存在的话，id选择器的优先级是最高的，其次是类选择器

1.1.3超链接

标签：

1.1.4正文排版

视频标签：<video>
  • src：视频的url
  • controls：显示播放控件
  • width：宽度
  • height：高度
音频标签：<audio>
  • src：视频的url
  • controls：显示播放控件
段落标签：<p>
文本加粗标签：<b><strong>
换行标签：<br>

1.1.5页面布局

盒子模型：内容区域(content)，内边距区域(padding)，边框区域(border)，外边距区域(margin) 从小到大被包围起来，就可以设计宽度高度了。
布局标签：
  • div标签：一行只显示一个；宽度默认是父元素的宽度，高度默认由内容撑开；可设置宽高
  • span标签：一行可以显示多个；宽高默认由内容撑开，不可设置宽高
如果只需要设置某一个位置的边框，内边距，外边距，可以在属性名后加上 -位置。比如：padding-top,padding-left,padding-right

1.2表格和表单标签

1.2.1表格标签

<table>
定义表格整体，可以包裹多个<tr>
border：规定表格边框的宽度width：规定宽度 cellspacing：规定单元之间的空间
<tr>
定义表格的行，可包裹多个<td>
ㅤ
<td>
表格单元格，可以包裹内容
如果是表头单元格，可替换为<th>,可以加粗加宽

1.2.2表单标签

负责数据的采集，比如像登陆，注册这些场景
标签：<form>
每一个要输入的内容就是一个表单项：有不同类型的input元素，下拉列表，文本域等等。
  • <input>：定义表单项，通过type属性控制输入形式
  • <select>：定义下拉列表,<option>来定义列表项
  • <textarea>：定义文本域
标签属性：
  • action：规定当提交表单的时候向何处发送表单数据：URL
  • method：规定用于发送表单请求的方式：GET，POST

2.JavaScript

使网页可交互

javascript引入方式：

  • 内部脚本：将js代码定义在html页面当中
    • 位于<script></script>中间
    • 任意位置，可以放置任意数量的js代码
    • 一般把js脚本放在body标签底部
  • 外部脚本：定义在js文件中，然后再引入
    • js文件中只包含js代码，不用包含script标签
    • <script>标签不能自闭和

2.1js基础语法

2.1.1输出语句

  • window.alert()写入警告框
  • document.write()写入html输出
  • console.log()写入浏览器控制台

2.1.2变量

var关键字来声明一个变量，js是一门弱语言，变量可以存放不同类型的值：
特点：
  • 作用域较大，是全局变量。
  • 可以重复定义一个变量
ecmascript6中新增的内容：
  • let关键字来定义变量，与var类似，但是只能在局部的代码块中使用，且不能重复定义，是局部变量
  • const关键字声明一个只读的常量，一旦声明就不能改变改变该变量的值
通过typeof关键字可以获取到一个数据的数据类型：typeof a;

2.2js函数

格式：
调用就和Java里的一样,调用的时候可以传递多个参数。

2024.5.29

2.3js对象

2.3.1 Array对象

长度可变，类型可变
方法：
forEach()
遍历数组中的每个有值的元素，并调用一次传入的函数
push()
将新元素添加到数组的末尾，并返回新的长度
splice()
删除元素

2.3.2 String对象

方法：

2.3.3 JS自定义对象

2.3.4 JSON对象

通过js对象标记法书写的文本，多用于数据载体，在网络中进行数据传输。其实和我们自定义的对象内部格式差不多，但是json内的键对象需要双引号引起来。
定义：
  • 将json字符串转化为js对象：
  • 将js对象转化为json字符串

2.3.5 BOM对象

浏览器对象模型，使js将浏览器的各个组成部分封装成一个个对象
组成：
  • Window：浏览器窗口对象
  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象
Window对象：
获取：直接用Window.就可以调用其中的属性或者方法，Window.是可以省略的。
方法：
Location对象：
直接Location.调用就行了

2.3.6 DOM对象

文档对象模型，将标记语言的各个组成部分封装成对象。js可以通过dom对象来对html进行操作
  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象
Element对象可以通过Document对象来进行获取：

2.3.7 事件监听

js可以在事件被监测到的时候执行相应的代码
事件绑定：
常见的事件：
onclick
鼠标单击时间
onblur
元素失去焦点
onfocus
元素获得焦点
onload
某个页面或图像被完成加载
onsubmit
当表单提交的时候触发该事件
onkeydown
某个键盘的键被按下
onmouseover
鼠标被移动到某一元素上
onmouseout
鼠标从某元素移开时

3.Vue

一套前端框架，简化书写

3.1 Vue快速入门

  • 新建HTML页面，引入Vue.js文件
  • js代码区域，创建vue核心对象，定义数据模型
  • 编写视图

3.1.1常用指令

3.2生命周期

4.Ajax

  • 数据交换：可以通过ajax来给服务器发送请求，并获得服务器返回的数据
  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页
notion image
……好消息已经不用这种方法来异步获取数据了，来不及缅怀了，接下来登场的是Axios

4.1 Axios

导个包先
简化(推荐)：

5.前端工程化

5.1环境准备

Vue-cli是vue官方提供的一个脚手架，用于快速生产一个vue的项目模版。
notion image

2024.5.30

5.2 Vue项目开发流程

Vue组件以.vue结尾，每个组件有三个部分组成：
  • <template> 模版部分，生成html文件
  • <script> 控制模版的数据来源和行为
  • <style> css样式

5.3 Vue组件Element

5.3.1 快速入门

  • 安装elementui组件库，要在当前项目的目录下的命令行：
  • 引入组件库：
  • 访问官网去复制组件的代码就可以了
  • 自己创建一个新的Vue组件，输入复制下来的代码：
  • 然后再在APP.vue组件中导入这个标签就可以了，他会在script标签内自动的导入
如果要在Vue项目中使用axios：
  • 在项目目录中安装axios
  • 需要使用axios时，导入axios

5.3.2 Vue路由

前端路由：URL中的hash（#号）与组件之间的关系
Vue Router，Vue的官方路由：
  • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>:请求链接组件，解析器会解析成<a>
  • <router-view>：动态视图组件，用来渲染展示与路由路径相应的组件
在使用之前首先得安装，其次要定义路由表(在router目录下的index.js文件内定义)
要让标签绑定上这两个路由还有使用特殊的组件：

5.3.3 打包部署

打包：
直接command+p然后输入npm，选第二个build就可以打包成一个文件，名为dist。
部署：
将dist包复制粘贴到nginx文件下的html文件中即可，然后双击nginx.exe就会完成部署。

6.Maven

管理和构建java项目的工具
作用：
  • 依赖管理：方便快捷的管理我们项目所依赖的jar包，避免发生版本冲突问题而导致的升级版本繁琐。
  • 统一项目结构：提供统一的，标准的项目结构
  • 项目构建：标准跨平台的自动化项目构建方式

2024.6.1

6.1 Maven坐标

资源的唯一标识，通过该坐标可以唯一定位资源位置，可以通过坐标来定义项目或引入项目中所需要的依赖
坐标组成：
  • groupid：定义当前maven项目隶属组织的名称（一般是域名反写）
  • artifactld：定义当前项目名称
  • version：定义版本号
如果要引入依赖，可以去mvnprosperity.com去查

6.2 Maven依赖管理

6.2.1 排除依赖

如果一个模块不需要他所依赖的模块所依赖的项目，就可以通过指定标签来排除依赖，这样就用不到了

6.2.2 依赖范围

依赖的jar包默认是在任何地方都可以使用的，也可以通过<scope>…</scope>来指定其作用范围
scope值
主程序
测试程序
打包（运行时）
compile（默认）
Y
Y
Y
test
-
Y
-
provided
Y
Y
-
runtime
-
Y
Y

6.2.3 生命周期

为了对所有的maven项目构建过程进行抽象和统一
常见的阶段：
  • clean：移除上一次构建生成的文件
  • compile：编译项目源代码
  • test：使用合适的单元测试框架运行测试（junit）
  • package：将编译后的文件打包
  • install：安装项目到本地仓库

7.HTTP协议

超文本传输协议
特点：
  • 基于tcp协议：面向连接安全
  • 基于请求-响应模型的：一次请求只有一次响应
  • http协议是无状态的协议：对于事物处理没有记忆能力，每次请求-响应都是独立的
    • 优点：速度更快
    • 缺点：多次请求之间不能共享数据

7.1 请求协议

7.1.1 格式

notion image

7.2 响应协议

notion image
状态码：
1xx
表示响应中：是一个临时状态码，表示请求已接收
2xx
表示成功：请求已经被成功接收，处理已完成
3xx
表示重定向：重定向到其他地方，让客户端再发起一次请求
4xx
表示客户端错误：处理发生错误，责任在客户端；比如403表示该请求被禁止，404表示该网址不存在
5xx
表示服务端错误：处理发生错误，责任在服务端，比如程序抛出异常

7.3 协议解析

通过一个web服务器来解析http协议

8.Tomcat

web服务器是一个软件程序，对http协议的操作进行封装，使web开发更加简洁。将web程序部署到服务器中，这样浏览器就可以直接去访问服务器从而得到这个web程序
开启：在终端中输入./startup.sh 如果没有就输入cd tomcat路径/bin 再输入上面的就行
关闭：./shutdown.sh
配置端口号（conf/server.xml）
使用：将web应用放在在webapps这个文件夹上就可以了

9.请求响应

  • 请求对象（HttpServletRequest）：获取请求数据
  • 响应对象（HttpServletResponse）：设置响应数据

9.1 请求

9.1.1 简单参数的接收：

9.1.2 实体参数的接收

当要传入的简单参数较多时，就会比较麻烦。所以就可以把他们封装成一个实体对象内，再把这个对象传递过来就行，这样就比较简单。！参数名得和传入名一样

9.1.3 数组集合参数

如果要封装到集合中的话，就得在集合前面加上@RequestParam注解

9.1.4 日期参数

9.1.5 Json参数

9.1.6 路径参数

9.2 响应

响应主要是通过@ResponseBody这个注解
  • 类型：方法注解，类注解
  • 位置：Controller方法上/类上
  • 作用：将方法返回值直接响应在浏览器上，如果返回值是实体对象/集合，则以json格式返回
  • 说明：@RestController=@Controller+@ResponseBody
！我们需要统一响应结果

2024.6.2

10.分层解耦

10.1 三层架构

  • controller：控制层：接收前端发来的请求，对请求进行处理，并响应数据
  • service：业务逻辑层：处理具体的业务逻辑
  • dao：数据访问层：负责数据的访问操作，包括数据的增删改查

10.2 分层解耦

  • 内聚：软件中各个功能模块内部的功能联系
  • 耦合：衡量软件中各个层/模块之间的依赖，关联程度
  • 软件设计原则：高内聚低耦合
!!!
  • 控制反转：简称IOC：对象的创建控制权由程序自身转移到外部（容器内）
  • 依赖注入：简称DI：容器为应用程序提供运行时，所依赖的资源成为依赖注入
  • Bean对象：IOC容器内创建的对象称为bean

10.3 IOC&DI

10.3.1 IOC

在类前面加上@Component注解就表示要把这个类交给IOC容器管理
在创建对象的上面加上@Autowired就表示要依赖注入的是这个类
使用四大注解声明的bean，要想生效，还需要被组件扫描注解@ComponentScan扫描 @ComponentScan注解虽然没有显式配置，但是实际上已经包含在了引导类声明注解 @SpringBootApplication 中，==**默认扫描的范围是SpringBoot启动类所在包及其子包**==。

10.3.2 DI

如果向容器中传入了多个类型相同的bean的话，autowired就会报错，找不到应该要注入的依赖。此时就有三个注解了：
  • 使用@Primary注解：当存在多个相同类型的Bean注入时，在Service注解上加上@Primary注解，来确定默认的实现。
  • 使用@Qualifier注解：指定当前要注入的bean对象。在autowired注解上加，在@Qualifier的value属性中，指定注入的bean的名称。
  • 使用@Resource注解：是按照bean的名称进行注入。通过name属性指定要注入的bean的名称。就不用autowired了
！！！面试题
@Autowired是spring框架提供的，@Resource是jdk提供的 @Autowired默认是根据类型注入的，@Resource是根据名称注入的

11.MySQL

11.1 SQL

  • DDL：定义数据库对象
  • DML：对数据进行增删改查
  • DQL：查询数据库中表的记录
  • DCL：创建数据库用户，控制数据库的访问权限

11.1.1 DDL语句

database可以换成schema
表操作：
约束
描述
关键字
非空约束
ㅤ
not null
唯一约束
ㅤ
unique
主键约束
主键是一行数据的唯一标识，要求非空且唯一
primary key
默认约束
保存数据时，如果未指定该字段的值，那么采用默认值
default
外键约束
让两张表的数据建立连接，保证数据的一致性和完整性
foreign key
数据类型
  • 数值类型：
类型
大小(byte)
有符号(SIGNED)范围
无符号(UNSIGNED)范围
描述
备注
tinyint
1
(-128，127)
(0，255)
小整数值
ㅤ
smallint
2
(-32768，32767)
(0，65535)
大整数值
ㅤ
mediumint
3
(-8388608，8388607)
(0，16777215)
大整数值
ㅤ
int
4
(-2147483648，2147483647)
(0，4294967295)
大整数值
ㅤ
bigint
8
(-2^63，2^63-1)
(0，2^64-1)
极大整数值
ㅤ
float
4
(-3.402823466 E+38，3.402823466351 E+38)
0 和 (1.175494351 E-38，3.402823466 E+38)
单精度浮点数值
float(5,2)：5表示整个数字长度，2 表示小数位个数
double
8
(-1.7976931348623157 E+308，1.7976931348623157 E+308)
0 和 (2.2250738585072014 E-308，1.7976931348623157 E+308)
双精度浮点数值
double(5,2)：5表示整个数字长度，2 表示小数位个数
decimal
ㅤ
ㅤ
ㅤ
小数值(精度更高)
decimal(5,2)：5表示整个数字长度，2 表示小数位个数
  • 字符串类型：
类型
大小
描述
ㅤ
ㅤ
ㅤ
ㅤ
char
0-255 bytes
定长字符串
char(10): 最多只能存10个字符,不足10个字符,占用10个字符空间
AB
性能高
浪费空间
varchar
0-65535 bytes
变长字符串
varchar(10): 最多只能存10个字符,不足10个字符, 按照实际长度存储
ABC
性能低
节省空间
tinyblob
0-255 bytes
不超过255个字符的二进制数据
ㅤ
ㅤ
ㅤ
ㅤ
tinytext
0-255 bytes
短文本字符串
ㅤ
ㅤ
ㅤ
ㅤ
blob
0-65 535 bytes
二进制形式的长文本数据
ㅤ
ㅤ
ㅤ
ㅤ
text
0-65 535 bytes
长文本数据
phone char(11)
ㅤ
ㅤ
ㅤ
mediumblob
0-16 777 215 bytes
二进制形式的中等长度文本数据
username varchar(20)
ㅤ
ㅤ
ㅤ
mediumtext
0-16 777 215 bytes
中等长度文本数据
ㅤ
ㅤ
ㅤ
ㅤ
longblob
0-4 294 967 295 bytes
二进制形式的极大文本数据
ㅤ
ㅤ
ㅤ
ㅤ
longtext
0-4 294 967 295 bytes
极大文本数据
ㅤ
ㅤ
ㅤ
ㅤ
  • 日期类型：
类型
大小(byte)
范围
格式
描述
date
3
1000-01-01 至 9999-12-31
YYYY-MM-DD
日期值
time
3
-838:59:59 至 838:59:59
HH:MM:SS
时间值或持续时间
year
1
1901 至 2155
YYYY
年份值
datetime
8
1000-01-01 00:00:00 至 9999-12-31 23:59:59
YYYY-MM-DD HH:MM:SS
混合日期和时间值
timestamp
4
1970-01-01 00:00:01 至 2038-01-19 03:14:07
YYYY-MM-DD HH:MM:SS
混合日期和时间值，时间戳

2024.6.3

11.1.2 DML语句

insert语句：
update语句：
delete语句：

11.1.3 DQL语句

select语句：
  • 基本查询语法
    • 查询多个字段：select 字段1,字段2,字段3 from 表名;
    • 查询所有字段：select * from 表名
    • 设置别名：select 字段1[as 别名1],字段2[as 别名2] from 表名;
    • 去除重复记录：select distinct 字段列表 from 表名;
  • 条件查询语法：
    • select 字段1,字段2,字段3 from 表名 where 条件列表;
  • 分组查询语法：
语法：select 字段列表 from 表名[where 条件] group by 分组字段名[having 分组后过滤条件];
例子：
where和having的区别：
  1. 执行时机不同：where是对分组之前的数据进行过滤，不满足条件的话是不会参与分组的；having是分组之后对结果进行过滤
  1. 判断条件不同：where不能对聚合函数进行判断，而having可以
  • 排序查询语法：
  • 分页查询语句：
起始索引 = （页码-1）*每页展示记录数

11.2 多表设计

11.2.1 一对多（多对一）

一对多关系的实现：在数据库表多的一方，添加字段来关联另一方的主键
像上面的代码是不能保证数据的完整性和一致性的，如果在部门表中把一些部门给删除后，员工表中归属于这些部门的字段还是存在的。所以我们就得使用外键约束(物理外键)：
物理外键的缺点（一般都不用了）：
  • 影响增删改的效率
  • 仅用于单节点数据库，不适用于分布式，集群场景。
  • 容易引发数据库死锁问
  • 推荐使用逻辑外键：是在业务层逻辑中解决外键关联

11.2.2 一对一和多对多

一对一：
关系：一对一关系，多用于多表拆分，将一张表中常用的字段拆分到一个表中，其他的字段拆分到另一个表中，可以提高查询效率。和一对多一样在任意一方添加外键就行，并设为唯一性
多对多：
建立第三张中间表，中间表中至少包含两个外键，分别关联两方的主键

2024.6.4

11.3 多表查询

语法：

11.3.1 内链接查询

查询的是两张表交集的部分

11.3.2 外链接查询

分为左外链接和右外链接：左外链接表示包含左边的表和两表交集的部分；右外链接表示包含右边的表和两表交集的部分

11.3.3 子查询

在sql语句内嵌套查询语句

11.4 事务

事务是一组操作的集合，他是一个不可分割的工作单位。会把所有操作作为一个整体向系统提交或者撤销操作请求，即这些操作要么同时成功，要么就同时失败
事务控制：
  • 开启事务：start transaction; / begin;
  • 提交事务：commit; //成功就执行这个
  • 回滚事务：rollback; //失败就执行这个
事务的四大特性：
  • 原子性（Atomicity）：原子性是指事务包装的一组sql是一个不可分割的工作单元，事务中的操作要么全部成功，要么全部失败。
  • 一致性（Consistency）：一个事务完成之后数据都必须处于一致性状态。
    • 如果事务成功的完成，那么数据库的所有变化将生效。
    • 如果事务执行出现错误，那么数据库的所有变化将会被回滚(撤销)，返回到原始状态。
  • 隔离性（Isolation)：多个用户并发的访问数据库时，一个用户的事务不能被其他用户的事务干扰，多个并发的事务之间要相互隔离。
    • 一个事务的成功或者失败对于其他的事务是没有影响。
  • 持久性（Durability）：一个事务一旦被提交或回滚，它对数据库的改变将是永久性的，哪怕数据库发生异常，重启之后数据亦然存在。

11.5 索引（提升查询效率）

索引是帮助数据库高效获取数据的数据结构
  • 优点：
    • 提高查询数据的效率，降低数据库的io成本
    • 通过索引列对数据进行排序，降低数据排序的成本，降低cpu的消耗
  • 缺点：
    • 索引会占据内存空间
    • 索引大大提升了查询效率，但是同时也降低了insert，update，delete的效率

11.5.1 索引结构

支持的索引结构有很多，比如：Hash索引，B+Tree索引，Full-Text索引等。如果没有特别声明一般都是b+树结构的索引
B+树：
  • 每一个节点可以存储多个key（有n个key就会有n个指针）
  • 所有的数据都存储在叶子节点中，非叶子节点仅用于索引数据
  • 叶子节点形成了一个双向链表，便于数据的排序及区间范围查询

2024.6.5

11.5.2 索引操作语法

  • 创建索引：create [unique] index 索引名 on 表名 (字段名…);
  • 查看索引：show index from 表名;
  • 删除索引：drop index 索引名 on 表名;
主键字段在建表时会自动创建主键索引 给一个字段添加唯一约束时，数据库实际上会给他创建唯一索引

12.Mybatis

12.1 入门

12.1.1 JDBC

使用java语言来操作关系型数据库的一套API

12.1.2 数据库连接池

一个容器，负责分配，管理数据库链接（Connection）

12.1.3 lombok工具

简化java开发，提高效率
引入依赖：

12.2 Mybatis基础

12.2.1 删除：

如果使用占位符来传递参数，这个过程会被称为预编译，此时的id值是？，然后再传递参数。 优势：1.性能更高；2.更安全，防止sql注入

12.2.2 新增

!主键返回：在数据添加成功后，需要获取插入数据库的主键

12.2.3 更新

12.2.4 查询

concat(str1,str2,…) 拼接字符串

12.3 xml映射文件

规范：
  • xml映射文件的名称要和mapper接口名称一致，并且两个文件要放在相同包下（同包同名）
  • xml映射文件的namespace属性与mapper接口的全类名一致
  • xml映射文件中sql语句的id与mapper接口的的方法名一致，并保持返回类型一致

12.4 动态sql

随着用户的输入或外部条件的变化而变化的sql语句

12.4.1 <if>动态sql标签

在更新的时候也会出现上面and的情况，会出现多余的”,”这时就可以使用<set></set>标签了

12.4.2 <foreach>动态sql标签

12.4.3 <sql>/<include>标签

当在代码中有太多相同的代码时，此时的复用性就不高，这时候就可以把他们抽取出来：