整体过程
浏览器搜索网址，呈现前端部分内容，用户输入数据，会向服务器发送请求，服务器会将相应数据请求发送给数据库，数据库会将对应数据发送给前端予以响应。
一、web前端基础
组成元素
html负责网页的结构，即页面的元素与内容；css负责网页的表现，即负责各类元素的样式设计；Javascript负责网页的行为，实现一些交互效果。
1.html
超文本标记语言
- 超文本-可定义除文字信息以外的图片、音频、视频等内容。
- 标记语言-由标签构成的语言，它会由浏览器来解析。
组成元素
<html>根目录
<head>网页头部，存放浏览器看的信息
<body>网页的主体部分，存放用户看的信息，网页的主体内容
<a>超链接标题
<h1-6>h1时标题字体最大，h6字体最小。
2.css
层叠样式表
用于控制页面样式
引入方式
- 行内样式-在标签内使用style属性〈h1 style〉
- 内部样式-定义<style>标签，在标签内部定义样式，〈style〉h1
- 外部样式-定义<link>标签，通过href属性引入外部css文件，<link href=>
css选择器
选择器名｛
css样式名：css样式值；
｝
eg:用于内部样式使用：
<style>
.public-date{
color:red;
}<style>
<span class="public-date"><span>
常见标签
<p>段落标签 <br>换行标签 <b>加粗标签
<u>下划线 <i>倾斜 <s>删除线
字符实体：空格-  <-< >->
路径表示
绝对磁盘路径-src="C：\user＼desktop"
绝对网络路径-src="https:／/i2.sinaimg.cn/dy/logo.png"
相对路径：当前目录-./ 上一级目录-../
盒子模型
内容区+内边距区-padding+边框区-border+外边距区-margin(先上下，再左右)
弹性布局
在父容器-Flex Container中添加子元素-Flex item
display:flex设置弹性布局 flex-direction设置主轴 justify-content设置子元素的对齐方式
布局标签小结
<div>一行只显示一个，可设置宽高
<span>一行可显示多个，不可设置宽高
表单标签-<form>用于网页数据采集功能
表单属性：
action用url设置发送对象
method设置表单的发送方式（GET-表单数据直接拼接在url后，POST-表单数据在请求体中携带，无大小限制）
表单项标签：
<input>定义表单项，用type定义类型（text单行输入文本 password密码字段 radio单选按钮 checkbox复选框 file定义文件上传按钮 submit提交按钮 reset重置按钮 button可点击 date日期），想要采集数据必须设置name属性。placeholder-信息提示.
可通过用lable标签包裹来提高体验感,for用于设置绑定id。
<select>定义下拉列表，通过〈option〉来设置选项
<textarea>定义文本域，大号输入框
表格标签：
<table><thea>定义表头 <tr>定义一行
<t>定义表头单元格 <td>定义普通单元格 <tbody>出表头外的表格主体部分
3.JavaScript
跨平台、面向对象的脚本语言，用来控制网页行为，实现页面交互效果。
组成
- ECMScript-JS基础语法核心知识
- BOM-浏览器对象模型，用于操作浏览器
- DOM-文档对象模型，用于操作HTML文档
核心语法
引入方式
内部脚本：将JS代码定义在HTML页面中（<script>包裹）
外部脚本：将JS代码定义在外部JS文件中（通过script的src引入到HTML页面）
基础语法
- 变量声明
let 关键字，弱类型，可存放不同类型的值。
- 常量声明
const关键字，一旦声明值不能改变。
- 其它补充
alert-定义一个弹出框 console.log输出到控制台 document.write写入html的body区域中
基本数据类型
number 数字 boolean 布尔类型 null对象为空（区分大小写） undefined 未初始 string字符串（也包括反引号）
typeof获取数据类型 在反引号``中，可通过＄{}来引用变量参数，可实现简化字符串拼接。
- 函数
用来执行特定任务的代码块
通过function进行定义（匿名函数function(){}或者（）=>{}）
- 自定义对象
let 对象名＝｛
属性名：属性值，
方法名：function(形参列表){}
｝
对象名.属性名或方法名来调用。
- json
JS对象标记法
与JS对象的区别是json的键必须通过双引号引起来。多用于做数据载体，即前端浏览器与服务器之间的数据传输。
通过JSON.stringify将JS对象转换成json文本，通过JSON.parse()实现反转换。
DOM
文档对象模型
将标记语言HTML的各个组成部分封装成对应的对象（Document文档 Element元素 Attribute属性 Text 文本Comment注释）
- 操作
获取操作的DOM对象（document.querySelectorAll）,查文档API文档操作。
- 事件监听
在事件触发时，调用一个函数来做出响应,也称为时间绑定或注册事件。
- 语法
事件源.addEventListener('事件类型',事件触发执行的函数-可多次绑定同一事件，与.onclick属性的区别是onclick多个事件时会覆盖。
事件监听三要素-事件源（dom对象元素）+事件类型（触发方式）+事件触发执行的函数
- 常见事件
鼠标事件-click点击 mouseenter鼠标进入 mouseleave鼠标离开 keydown按下键盘 keyup抬起键盘 focus获得焦点触发 blur失去焦点触发 input用户输入触发 submit表单提交触发
在js文件中引用另一个js文件，通过import导入，在另一个文件中通过export将函数导出。
- Vue3
构建用户界面渐进式的JavaScript框架。实现将原始数据渲染展示出来。
vue核心包（声明式渲染和组件系统）相关插件（客户端路由-VueRouter 状态管理vuex2,pinia3 构建工具webpack2,vite3）
vue入门：基于数据来驱动视图的展示。
1.准备：引入vue模块(<script type="module">) 创建vue应用事例(调用createApp({ }).mount(指定渲染的id对象)) 指定控制的html元素(<div id="">)
2.数据来驱动视图:准备数据(在vue应用实例中调用data(){return{数据名:"数据"}}) 渲染页面(在html显示页面中通过插值表达式{{数据名}}来渲染)
vue常用指令：html上有v-前缀的属性
v-for:用于遍历元素或对象
v-for="(对象,索引) in 对象列表" :key="对象的唯一标识" 用插值表达式来显示（{{展示的对象}}）
v-bind：动态的为html标签绑定属性值
v-bind:属性名="属性值"或者:属性名="属性值"
不能用插值表达式来显示!!!
v-if或v-else-if或v-else：条件判断,成立才渲染，用于不频繁切换
v-show：由条件来展示元素，都渲染，用display来控制显示(none隐藏)，用于频繁切换。
v-if/show="表达式"
v-model：实现双向数据绑定，采集或设置表单数据，实现数据模型与表单展示同步变化
v-model="需要绑定的变量名"
v-on：为html标签绑定事件，添加事件监听
v-on：绑定的事件名="执行的方法名"或者@绑定的事件名="执行的方法名"
vue声明周期:
对象由创建到销毁的整个过程，每触发一个生命周期都会自动触发一个钩子方法。
beforeCreate创建前 created创建后 beforeMount 载入前 beforeupdate数据更新前 beforeUnmount组件销毁前
Ajax
- 入门
异步的javascript和xml(可拓展的标记语言)
- 数据交换
可给服务器发送请求，并获取服务器响应的数据
异步交换-可实现不重新加载整个页面来更新部分网页。(同步-客户端和服务端是串联进行操作的，异步-客户端和服务端是并联进行操作的)
- 工具
axios,对原生Ajax进行了封装，可简化书写。
使用：引入Axios的js文件 用Axios发送请求，并获取响应结果。axios({method-请求方式post/get url请求路径 data请求数据 params发送请求时携带的参数}).then(成功回调函数).catch(失败回调函数)
或者
axios.请求方式(url,)
- 同步化
async(用于声明异步方法)、await(等待异步任务执行)
二、web后端
Maven:管理构建java项目的工具
依赖管理（在依赖中描述jar包即可）项目构建（提供了标准的项目构建流程） 统一项目结构
1.核心
- 基于项目对象模型
pom(在pom.xml中有定义)，通过一小段描述信息来管理项目的构建。
pom.xml：pom dependency(来自仓库中，从本地到私服与中央仓库)
- maven坐标
资源的唯一标识，可通过该坐标唯一定位资源位置，用于定义或引用项目中需要的依赖。(groupid-组织名 artifactid-项目名)
- 依赖配置
配置项目需要的jar包(在pom.xml中的dependency来引入)
- 生命周期
maven项目构建的过程
clean-清理工作(移除上次构建生成的文件) default-核心工作(compile,test,package,install) site-生成报告
同一套生命周期中，运行后面的阶段时，前面阶段也会运行。
2.单元测试
鉴定软件质量过程
- 阶段划分
单元测试(对软件基本组成单元测试)，集成测试(检测单元之间协作)，系统测试(验证软件系统)，验收测试(验收标准)
白盒测试-清楚代码的逻辑结构(单元测试)
黑盒测试-验证软件的外在功能(系统与验收)
灰盒测试-逻辑代码与功能实现(集成)
junit测试
在pom.xml引入junit依赖，创建测试类，编写测试方法，并声明@Test
- 断言
帮助确定测试方法是否按照预期效果工作，Assertions.assertEquals-两值不等时报错assertNull-不为null就报错，assertTrue-不为true报错(预期结果，实际结果，提示信息)
- 常见注解
@Test单元测试 @ParameterizedTest参数化测试+@ValueSource参数化测试的参数来源 @DisplayName注解测试方法名字
- 修饰实例方法
@BeforeEach每一个测试方法前执行
@AfterEach每一个测试方法后执行
- 修饰静态方法
@BeforeAll所有测试方法前只测试一次
@AfterAll所有测试方法后只执行一次
- 内容
测试所有可能的边界值级正确值
- 依赖范围
通过在pom.xml文件中<scope>标签来设置作用范围(主程序、测试程序、打包运行;compile默认均可 test-测试程序 )
jar包爆红-下载不完整，删除lastUpdated文件(del/s *.lastUpdated删除重启)
3.web基础
架构
- BS架构
按照http协议来交互
浏览器与web服务器(静态资源-服务器上不会由用户请求而变化的数据html css js 动态资源-由用户请求与其他数据动态生成servlet jsp spring框架)
- CS架构
客户端与服务器模式，需要单独开发维护客户端qq
springboot
- spring
全世界最流行的java框架
包含项目：
springboot(简化配置) springframwork(是其他项目的基础) springdata(数据库操作) springcloud(开发微服务) springai(ai大模型)
- 开发
基于springboot开发一个web应用
创建springboot工程 定义定义类，添加方法和注解(标明当前方法的功能)
注解补充
@SpringBootApplication标记是启动类 @RestController标记是请求处理类 @RequestMapping标记方法的请求路径
连接不上：可重新设置server url地址为阿里云的地址
依赖
起步依赖springbootstarter-web包含web应用开发的依赖，test包含单元测试的依赖
http协议
超文本传输协议，规定浏览器和服务器数据传输的规则。
基于tcp协议，请求响应模型，没有记忆功能，多次请求间不能共享数据
- 请求数据格式
请求行(请求方式get/post、资源路径、协议http)
请求头(键值对形式host主机名 user-agent浏览器版本 accept接收资源类型 content-type请求主体数据类型 content-length请求主体大小) 空行
请求体(post请求!!!，存放请求参数)
请求协议
- 请求数据获取
web服务器(tomcat)对http协议的请求数据进行了解析与封装(httserletrequest),通过调用controller方法自动传递.method获取请求方法 .getrequesturl.tostring获取请求路径(uri资源的访问路径) .getprotocol获取请求协议 .getparameter获取请求参数 .gethead获取请求头
响应协议
- 响应数据格式
响应行(协议 状态码-1响应中，2请求响应成功，3重定向，4客户端错误-404请求资源不存在，5服务器端错误 描述)
响应头(键值对形式) 空行
响应体(存放响应数据)
- 响应数据接收
web服务器对http协议的响应数据进行了封装(httpservletresponse),调用controller方法时自动传递.setstatus设置响应状态码 .setheader设置响应头 .getwriter().write设置响应体
或者
使用spring中提供的responseEntity指明泛型，调用.status .header .body方法
可通过注解来代替构造方法(@Data @NoArgsConstructor无参构造 @AllArgsConstructor全参构造)
分层解藕
三层架构：利用接口加实现类实现
浏览器
- (controller)-控制层
接收请求、响应数据，接收前端发送的请求，对请求进行处理，并响应数据
- 逻辑处理(Service)
业务逻辑层，处理业务逻辑。
- 数据访问(Dao)
负责数据访问操作，数据的增删改查
数据来源
文件、数据库、网络
解藕
- 概念
耦合-衡量模块间依赖关联程度
内聚-各功能模块内部的功能联系
高内聚低耦合
控制反转(IOC)将创建控制权由自身转移到外部容器
依赖注入(DI)容器为应用程序提供依赖资源
Bean对象-IOC容器中创建与管理的对象
- 过程
要在启动类下才可被扫描！！！！！
将Dao及Service层的实现类交给IOC容器管理(在实现类上添加@component注解来创建或者用衍生注解-@controller @Service @Repository)
为controller及Service注入运行时所依赖的对象(在对象上添加@Autowired实现-对象上添加属性注入 构造函数上添加 set函数上添加 @Primary防止重复 @Qaulifier @Resource)
MySQL
数据库
DB，存储和管理数据的仓库
数据库管理系统
DBMS管理数据库的软件(oracle MySQL SQL Server)
SQL
结构化查询语言，定义了一套操作关系型数据库的统一标准
数据模型
关系型数据库-多张相互连接的二维表组成的数据库(数据库 表 记录)
种类
- DDL
数据定义语言
数据库
数据库-show database差所有 select database() use 数据库 切换 create database(if not exists) 数据库 drop database(if exists) 数据库
表
创建create table 表名(字段
字段类型(tinyint int bigint float double decimal varchar-变长 char date time datatime-now()) 约束(unsigned primary key not null unique default '' foreign key) auto_increment comment注释 字段类型(中文解释 )
查询show tables desc 表名 show create table 表名
修改alter table 表名 rename to 新表名
删除drop table if exist 表名
添加字段：alter table 表名 add 字段名 类型 约束
修改字段类型：alter table 表名 modify 字段名 新数据类型
修改字段类型和字段类型：alter table 表名 change 字段名 新字段名 字段类型
删除字段：alter table 表名 drop column 字段名
- DML
数据操作语言，对数据库表中的数据记录增删改操作
指定字段添加数据insert into 表名(字段名) values(值)
全部字段添加数据insert into 表名 values(值)
批量添加数据insert into 表名(字段名) values(值)，(值)
批量全部字段添加数据insert into 表名 values(值),(值)
修改数据update 表名 set 字段名=值 where 条件
delete from 表名 where 条件
- DQL
数据查询语言，查询数据库表中的记录
select 字段列表 from 表名列表 where 条件 group by 分组的字段 having 分组后条件列表(分组查询，可以使用聚合函数) order by 排序字段 排序方式(排序查询) limit 分页参数，查询记录数(分页查询，索引由0开始) 排序方式-asc(升序),desc(降序)
查询多个字段select 字段 from 表名
查询所有字段select * from 表名
为查询字段设置别名select 字段 as 别名 from 表名
去除重复记录select distinct 字段列表 from 表名
条件查询select 字段列表 from 表名 where 条件列表(between..and.. in.. like-_单个字符，%任意个字符 is null and or not)
分组查询-结合聚合函数(count max min avg sum)，在having后使用
- DCL
数据控制语言，创建数据库用户，控制访问权限。
客户端工具
SQLyog,Navicat,IntelliJ IFEA DataGrip
JDBC
java数据库连接，即操作所有关系型数据库的API,底层技术。
常用的框架
MyBatis MyBatisPlus Hibernate SpringDataJPA
底层原理
java程序通过JDBC接口与不同类型的数据库厂商提供的实现类(驱动)来实现对不同关系型数据库的操作。
实现步骤
创建maven项目，引入mysql依赖 编写JDBC程序(注册驱动 获取连接 获取sql语句执行对象 执行sql 释放资源)
- 查询数据
ResultSet结果集对象(.executeQuery得到，.next移动下一行 .getInt获取字段)
预编译SQL-可以防止SQL注入
preparedstatement()用问号占位符来占位 通过set来传递参数
- 修改数据
executeUpdate()返回int类型
简化JDBC开发
MyBatis持久层(Dao层)框架
- 使用步骤
创建SpringBoot,引入Mybatis依赖 准备数据库表及实体类 配置Mybatis(在application.properties中配置数据库连接信息) 编写MyBatis程序(编写持久层接口-@Mapper 定义SQL-注解来实现)
jdbc存在硬编码、繁琐、资源浪费问题
- 数据库连接池
是一个分配、管理数据库连接的容器。允许应用程序重复使用一个现有的数据库连接。
标准接口-DataSource常见连接池(DBCP Druid Hikari自带)
切换实现-引入数据库连接池依赖 配置数据库连接信息(DruidDataSource)
- 增删改
删除-@Delete("delete from user where id =#｛id｝来占位") deleteById(Integer id来设置来源) #{}占位符，会被替换为？用于参数传递 ${}拼接符，直接将参数拼接在SQL语句中，用于动态设置表名和字段名
插入-@Insert into 用户表(字段名) values(字段值-#｛｝来实现) insert(参数来源)
更新-@Update("update 表名 set 字段名=#{属性名}") update(参数来源)
查询-@select(select ＊ from 表名 where 字段名=#｛属性名｝) 对象类型 方法名(对象参数来源-@param("参数名")用于传递多个参数是，实现为参数名起名字-官方骨架创建时可省略)
通过xml映射文件来配置SQL语句，与mapper包同名。可实现代替注解来配置。
在xml文件中用<mapper namespace=指名mapper接口位置><select id=方法名 resultType=接受结果类型>包含原始select语句即可，通过标签来声明
- 辅助配置
在application.properties下指定xml文件位置location=classpath:mapper/*.xml
减少代码冗余的配置文件
用yaml/yml文件来代替properties文件
格式-用缩进(空格)来表示层级关系 数值前必须有空格作为分隔符，#表示注释 0开头用单引号引起来(顶格全输换行即可)
eg:
对象：
属性：空格 属性值
数组名：
-空格 元素名
项目环境搭建
准备
新建一个空项目 配置JDK(SDK) 配置maven路径 配置编码(file encodings-utf-8)
创建模块(module) 勾选依赖与驱动 删除多余文件(创建application.yml文件)
创建数据库表(创建数据库，建表)
配置数据库的连接(application.yml:项目名 数据库连接 mybatis)
创建基础包结构(控制层-mapper 业务层-service 数据层-mapper 实体类-pojo)
引入实体类到pojo下 在mapper下定义相应mapper接口 在service下分别定义一个接口及对应实现类，加上@service注解交给IOC容器管理 在controller下创建控制类，加上@restcontroller标识是spring中的请求处理类
接口开发
controller-@RequestMapping接收请求 @Autowired注入mapper,调用service层的方法 List集合响应结果
service-定义一个实现类的方法,@Autowired注入mapper,调用service层的方法
mapper-@select("SQL语句")
连接数据库
database---datasource---MySQL
debug运行 http://localhost:8080/controller层指定的mapping路径(在apifox里面操作)
数据封装
解决字段名与属性名不一致问题
手动结果映射-@Results及@Result进行手动结果映射(@Results(column=封装字段，property=封装属性))
起别名-在SQL语句中为列起别名，使之与实体类属性名相同(select 原名 别名)
驼峰命名-字段名和属性名符合驼峰命名规则，会自动映射(在yml文件中开启camel-true即可)
nginx是前端与后端之间的一个代理服务器(反向代理proxy)，可增加后端数据的安全性
- eg
删除部门
controller层-@RequestParam注解，将请求参数绑定给方法形参 控制前端传递参数名与服务端方法形参名一致来实现
新增部门
controller接收json格式的请求参数-@RequestBody 接收对象来实现
修改信息
查询回显
controller接收请求路径-@GetMapping(用大括号来表示路径) @PathVariable(路径)来获取
减少
controller层的代码冗余-@RequestMapping(冗余内容)
日志技术
记录应用程序运行中的信息
log4j logback-升级的日志框架 slf4j-提供日志标准接口与抽象类。
- 使用步骤
引入logback依赖 定义日志记录对象logger(通过@Slf4j来简化代替) 记录日志(log.debug(日志内容).info(内容))
配置文件logback.xml控制输出格式与位置(console控制台)
表关系
多表关系的实现
一对多-在多的一方表中添加少的一方的主键。为了实现数据同步，保证数据库的完整性，我们要为字段添加外键约束(添加-alter table 表名 add constraint 外键名 foreign key(关联的属性名))，但更加推荐逻辑外键(直接在表中引用外键id信息)
一对一-在任意一方加入唯一(unique)外键，关联另外一方的主键.
多对多-建立第三张中间表，至少包含两个外键，分别关联两方主键
多表查询
内连接-两表交集部分，隐式内连接通过在where加条件实现 ；显示内连接两表之间用inner join 连接on加条件实现(多个用and连接)
为表起别名-表名后用as加别名(as可以省略)
外连接-左外连接两表间用left join连接，查询包含左边表的所有信息及公共部分；右外连接两表间用right join连接，查询包含右边表的所有信息及公共部分。
四、学习小结
笔记网址：讲义 - 飞书云文档
java知识库补充：Java后端程序员知识库-CSDN博客
java代码练习： 哪 吒-CSDN博客
java项目练习：适合Java初学者练习的项目_java初学者练手项目-CSDN博客
这是我自己整理的学习笔记，然后我自己也是想按这种方式学习，希望能对大家有帮助，然后祝所有人找到自己心仪的工作！