JavaWeb

·12984 字 ·37 分钟 ·更新于 2026-10-09

前端Web

Web标准（网页标准）–大部分由3wc来制定
主要有：

  • html-网页结构（页面元素和内容）
  • css-网页样式/表现（外观、位置）
  • js–网页行为（交互行为）

HTML、CSS

html基本骨架：

1
2
3
4
5
6
7
8
<html>
	<head>
		<title>Hello World!<\title>
	<\head>
	<body>
		<h1>Hello World!</h1>
	<\body>
<\html>

head部分（网页头部）：用来存放给浏览器看的信息，如css样式
body部分（网页主体）：用于存放给用户看的信息，如文字、图片、视频

css引入方式


一般都会选择外部样式，实现了html和css的分离。

颜色表示：直接使用颜色的英文单词（这种会比较少，一般像red，blue，black这种常见的才有），rgb表示，rgba表示（可以设置透明度），十六进制表示法

css选择器

1
2
3
4
选择器名   {
    css样式名：css样式值;
    css样式名：css样式值;
}

盒子模型

  • 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
  • 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

布局标签

  • 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
  • 标签：<div> <span>
  • 特点：
  • <div>标签：
    • 一行只显示一个（独占一行）
    • 宽度默认是父元素的宽度，高度默认由内容撑开
    • 可以设置宽高（width、height）
  • <span>标签：
    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高（width、height）
flex布局

flex是flexible box的缩写（弹性布局）
采用flex布局的元素，成为flex容器，所有子元素自动成为容器成员，称为flex项目。

  • 通过给父容器添加flex属性,来控制子元素的位置和排列方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      display: flex;
      /* justify-content: space-between; */ /* 先两边贴边，再平分剩余空间 */
      /* justify-content: flex-start;*/ /* 从头开始排列  */
      /* justify-content: flex-end; */ /* 从尾开始排列 */
      /* justify-content: center; */ /* 居中排列 */
      /* justify-content: space-around; */ /* 两边留白，中间平分，平分剩余空间 */
      flex-direction: row;
      justify-content: space-between;
      background-color: #aeea6a;
      width: 400px;
      height: 300px;
    }

    #container div {
      background-color: #e866ef;
      width: 100px;
      height: 50px; 
    }
  </style>
</head>
<body>
  <div id="container">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
  </div>
</body>
</html>

表单

比如，我们经常在访问网站时，出现的登录页面、注册页面、个人信息提交页面，其实都是一个一个的表单 。

  • 表单场景：表单在网页中负责数据采集功能
  • 表单标签：<form>
  • 表单属性：
    • action：规定表单提交时，向何处发送表单数据，表单提交的url
    • methd：规定用于发送表单数据的方式，常见为get、post
      • get：表单数据是拼接在url后面的，会限制大小
      • post：表单数据是在请求体中携带的，大小没有限制
  • 表单项标签：不同类型的input元素、下拉列表、文本域等
    • input：定义表单项，通过type属性控制输入形式
    • select：定义下拉列表
    • textarea：定义文本域

表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。 否则，无法提交该表单项。

表格标签:

最终：

JS+Vue+Ajax

JS是用于实现网页的交互的
Ajax是一种技术，允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容（使得浏览体验更加流畅）
Vue.js是用于构建用户界面的渐进式JS 框架。

JavaScript

JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。

  • 组成：
    • ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
    • BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
    • DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。

DOM 文档对象模型

通过将文档的结构以对象的形式存储在内存中，将网页与脚本or编程语言连接起来。
用来于网页内容进行交互的接口。HTML 文档被浏览器加载后，会形成一个像树一样的结构模型（逻辑树），这就是 DOM。

可以用于：

  • 改变元素内容
  • 改变样式
  • 响应用户事件
  • 动态创建、删除元素

BOM 浏览器对象模型

用来与浏览器窗口本身进行交互的接口，独立于网页内容的对象，用于操作浏览器窗口的行为。

可以用于：

  • 弹出窗口
  • 操作地址栏
  • 操作浏览器历史记录
  • 获取浏览器信息
  • 定时器

JS核心语法

JS引入方式

js也写在html中，HTML引入js的方法：

  • 内部脚本，将js代码定义在html页面中（直接内嵌在里面–放在同一个文件下）
    • 必须被 <script></script>标签包裹
    • 一般把脚本置于<body>元素的底部，可以加快显示
  • 外部脚本，将js代码定义在单独的 .js 文件中，然后引入到HTML页面中
    • 在 .html 文件中，通过 <script src="js/demo.js"></script> 引入
    • .js文件中只能存在js代码，没有 <script> 标签
    • 通过<script></script>标签引入外部JS文件时，标签不能自闭合，如：<script src="js/demo.js" />

书写规范：

  • 以分号结尾，但是这个分号可有可无（同一个文件or项目中统一）
  • 注释方式同java

JS基础语法

输出语句


window.alert会弹出一个警告框
document.write则会写入浏览器的body区域
console.log则会在控制台打印


变量

通过 let 关键字来声明变量。
js是一门弱类型语言，变量可以存放不同类型的值。

变量名需要遵循如下规则：

  • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$），且数字不能开头
  • 变量名严格区分大小写，如：name和Name是不同的变量
  • 不能使用关键字作为变量名，如：let、if、for等
常量

const关键字，一旦声明，常量的值就不可变了。

数据类型

JS中的数据类型分为 ：原始数据类型 和 引用数据类型。

  • 使用typeof关键字可以返回变量的数据类型

对于字符串类型的数据，除了可以使用双引号（”…”）、单引号（’…’）以外，还可以使用反引号 。 而使用反引号引起来的字符串，也称为 模板字符串。

  • 模板字符串可以用于拼接字符串和变量
  • 内容拼接时，使用 ${}来引用变量。
1
2
3
4
5
6
  <script>
    let name = 'Tom';
    let age = 18;
console.log('大家好, 我是新入职的' + name + ', 今年' + age + '岁了, 请多多关照'); //原始方式 , 手动拼接字符串
    console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`); //使用模板字符串方式拼接字符串
  </script>
函数

方式一：

1
2
3
function 函数名(参数1,参数2..){
    要执行的代码
}
  • 形参不需要声明类型，并且JS中不管什么类型都是let去声明，加上也没有意义。
  • 返回值也不需要声明类型，直接return即可
    在js中，函数的调用只需要保证名称正确，参数列表不管。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。

方式二：匿名函数
匿名函数： 是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。
匿名函数定义可以通过两种方式：函数表达式 和 箭头函数。

函数表达式：

1
2
3
var add = function (a,b){
    return a + b;
}

箭头函数：

1
2
3
var add = (a,b) => {
    return a + b;
}

声明好匿名函数后，会讲这个函数赋值给add变量，就可以直接通过add函数直接调用

自定义对象
1
2
3
4
5
6
let 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名称: function(形参列表){}
};

调用属性：对象名.属性名
调用函数：对象名.方法名

JSON

json（JavaScript Object Notaion)，javascript对象标记法

1
2
3
4
5
{
    "key":value,
    "key":value,
    "key":value
}

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

JSON.stringify(…)：作用就是将js对象，转换为json格式的字符串。
JSON.parse(…)：作用就是将json格式的字符串，转为js对象。

JS DOM

文档对象模型（DOM） - Web API | MDN
JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM操作

讲网页的内容当作对象来处理，标签的所有属性在该对象上都可以找到，并且修改这个对象的属性，就会自动映射到标签身上。

document对象：Document - Web API | MDN

  • 网页中所有内容都封装在document对象中
  • 它提供的属性和方法都是用来访问和操作网页内容的。

DOM操作步骤:

  • 获取DOM元素对象
  • 操作DOM对象的属性或方法 (查阅文档)

获取DOM元素的方式：

  1. 根据css选择器来获取DOM元素，获取匹配到的第一个元素： document.querySelector('css选择器')
  2. 根据css选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('CSS选择器');

获取到的所有元素，会封装到一个NodeList节点集合中

JS事件监听

事件介绍

HTML事件是发生在HTML元素上的事情

  • 按钮被点击,鼠标移到元素上,输入框失去焦点,按下键盘按键…
    而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能，这就是事件监听。

事件监听语法

1
事件源.addEventListener('事件类型', 要执行的函数);

在上述的语法中包含三个要素:

  • 事件源: 哪个dom元素触发了事件, 要获取dom元素
  • 事件类型: 用什么方式触发, 比如: 鼠标单击 click, 鼠标经过 mouseover
  • 要执行的函数: 要做什么事

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>

<body>
    <input type="button" id="btn1" value="点我一下试试1">
    <input type="button" id="btn2" value="点我一下试试2">
        
    <script>
        document.querySelector("#btn1").addEventListener('click', ()=>{
            alert("按钮1被点击了...");
        })
    </script>
</body>
</html>

对事件的绑定:

  • 通过html标签中的事件属性进行绑定
  • 通过DOM中element元素的事件属性进行绑定
    html中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性。

addEventListener 与 on事件 区别:

常见事件

Vue

一款用于构建用户界面的渐进式的JavaScript框架.
简介 | Vue.js
1). 构建用户界面
在vue中,可以基于数据渲染出用户看到的界面.

例如:

1
2
3
4
userList: [
    {"id": 1, "name": "谢逊", "image": "1.jpg", "gender": 1, "job": "班主任"},
    {"id": 2, "name": "韦一笑", "image": "2.jpg", "gender": 1, "job": "班主任"}
]

可以使用vue中提供的操作,将原始数据遍历、解析出来,从而渲染呈现出用户能看懂的界面:

2). 渐进式
Vue生态中的语法呢是非常多的，比如声明式渲染、组件系统、客户端路由（VueRouter）、状态管理（Vuex、Pinia）、构建工具（Webpack、Vite）等等

所谓渐进，指的是我们使用Vue框架呢，我们不需要把所有的组件、语法全部学习完毕才可以使用Vue。 而是，我们学习一点就可以使用一点了.

3). 框架

  • 框架：就是一套完整的项目解决方案，用于快速构建项目 。这是我们接触的第一个框架，那在我们后面的学习中，我们还会学习很多的java语言中的框架，那通过这些框架呢，就可以来快速开发java项目，提高开发效率。
  • 优点：大大提升前端项目的开发效率 。
  • 缺点：需要理解记忆框架的使用规则 。（参照官网）

入门

我们希望呈现:

步骤

准备工作
  • 准备一个html文件，并在其中引入Vue模块 （参考官方文档，复制过来即可）【注意：模块化的js，引入时，需要设置 type="module"】
  • 创建Vue程序的应用实例，控制视图的元素
  • 准备元素（div），交给Vue控制

    这里采用的是CND ES模块导入的方法

官网更推荐的是构建工具

数据驱动视图
  • 准备数据。 在创建Vue应用实例的时候，传入了一个js对象，在这个js对象中，我们要定义一个data方法，这个data方法的返回值就是Vue中的数据。
    • vue中定义数据,必须通过data方法来定义,data方法返回值是一个对象,在这个对象中定义数据
    • 插值表达式中编写的变量，一定是Vue中定义的数据，如果插值表达式中编写了一个变量，但是在Vue中未定义，将会报错
    • Vue应用实例接管的区域是 ‘#app’，超出这个范围，就不受Vue控制了，所以vue的插值表达式，一定写在 <div id="app">...</div> 的里面 。
  • 通过插值表达式渲染页面。 插值表达式的写法：{{...}}

Vue指令

概述

指的是HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义，可以实现不同的功能 。例如：v-if，v-for…

形式:

1
<p v-xxx="...">...</p>
指令详解

v-for
作用:列表渲染,遍历容器的元素或者对象的属性
语法：<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>
参数：

  • items 为遍历的数组
  • item 为遍历出来的元素
  • index 为索引/下标，从0开始 ；可以省略，省略index语法： v-for = "item in items"
    key：
  • 作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
  • 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）
    注意：遍历的数组，必须在data中定义； 要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

v-bind
作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
语法：v-bind:属性名="属性值" <img v-bind:src="item.image" width="30px">
简化：:属性名="属性值" <img :src="item.image" width="30px">
注意：v-bind 所绑定的数据，必须在data中定义/或基于data中定义的数据而来。

Axios

原生的Ajax请求的代码编写比较繁琐,所以我们使用更简单的Axios(发送Ajax请求的技术)
起步 | Axios中文文档 | Axios中文网

入门

1). 引入Axios文件（如果网络不通畅，可以使用离线的已经下载好的js文件，资料中已经提供）

1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2). 点击按钮时，使用Axios发送请求

请求方法别名

axios.请求方式(url [, data [, config]])

Vue生命周期

vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

Web后端

Maven基础

maven是用于管理和构建java项目的工具。
核心功能：构建项目和管理依赖

依赖管理

使用maven进行项目依赖管理，只需要在maven项目的pom.xml文件中添加：

1
2
<dependency> //用于声明一个依赖项
<\dependency>

例如，我们引入一个hutool库：

1
2
3
4
5
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.27</version>
</dependency>
  • <groupId>cn.hutool</groupId>： 定义项目所属的组织或团体唯一标识符，通常是公司或组织的域名反写。这里表示 Hutool 库。
  • <artifactId>hutool-all</artifactId>： 定义项目的唯一标识符。hutool-all表示这是 Hutool 的完整全功能包，包含了所有模块。
  • <version>5.8.27</version>： 指定要使用的依赖版本号。这里指定使用 5.8.27 版本。
项目构建

maven会提供一套简单的命令来完成项目构建（跨平台）

Maven模型


构建生命周期/阶段（整个框起来的部分，就是用来完成标准化构建流程）
项目对象模型POM：将我们的项目抽象成一个对象模型，有自己的专属坐标。

  • 坐标，就是资源(jar包)的唯一标识，通过坐标可以定位到所需资源(jar包)位置
  • 坐标的组成部分：
    • groupId：组织名
    • artifactId：模块名
    • Version：版本号
      依赖管理模型
      使用坐标来描述当前项目依赖哪些第三方jar包

      在中央仓库查询依赖：
      Maven Repository: Search/Browse/Explore

Maven仓库

用于存储资源，管理各种jar包

  • 本地仓库（我们主机上一个目录，用于存放jar包）
  • 中央仓库
  • 远程仓库

当项目中使用坐标引入对应依赖jar包后，

  • 首先会查找本地仓库中是否有对应的jar包
    • 如果有，则在项目直接引用
    • 如果没有，则去中央仓库中下载对应的jar包到本地仓库
  • 如果还可以搭建远程仓库(私服)，将来jar包的查找顺序则变为： 本地仓库 –> 远程仓库–> 中央仓库

安装


bin：存放可执行命令（重点：mvn）
conf：存放Maven的配置文件（settings.xml后面需要修改）
lib：存放maven依赖的jar包（maven也是java开发的）

配置本地仓库

  • 在本地新建一个目录，用于存储jar包
  • 进入到conf目录修改 settings.xml
    • 将我们的本地仓库地址加入配置文件

配置阿里云私服

1
2
3
4
5
6
<mirror>
    <id>alimaven</id>
    <name>aliyun maven</name>
    <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
    <mirrorOf>central</mirrorOf>
</mirror>

pom文件

pom指的是项目对象模型，用来描述当前的maven项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <!-- POM模型版本 -->
    <modelVersion>4.0.0</modelVersion>

    <!-- 当前项目坐标 -->
    <groupId>com.itheima</groupId>
    <artifactId>maven-project01</artifactId>
    <version>1.0-SNAPSHOT</version>
    
    <!-- 项目的JDK版本及编码 -->
    <properties>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

</project>

pom文件详解：

  • <project> ：pom文件的根标签，表示当前maven项目
  • <modelVersion>：声明项目描述遵循哪一个POM模型版本
    • 虽然模型本身的版本很少改变，但它仍然是必不可少的。目前POM模型版本是4.0.0
  • 坐标 ：
    • <groupId> <artifactId> <version>
    • 定位项目在本地仓库中的位置，由以上三个标签组成一个坐标
  • <maven.compiler.source> ：编译JDK的版本
  • <maven.compiler.target> ：运行JDK的版本
  • <project.build.sourceEncoding> : 设置项目的字符集

Maven坐标

  • 资源的唯一标识符
  • 使用坐标来定义项目或引入项目依赖

导入Maven项目

只需要选择pom.xml文件就可以导入

  • 约定优于配置，pom.xml包含了项目的完整定义

    或

依赖管理

依赖配置

基本配置

依赖：当前项目允许需要的jar包
在pom.xml中找到 <dependencies> 标签，在标签体里加入 <dependency> 标签来引入坐标，定义坐标的 groupId、artifactId、version。

依赖的引入是会传递的，有时候这个依赖依赖了另一个依赖，会同时引入，但是我们使用到的功能不需要用到，就可以排除依赖。

依赖范围

依赖的jar包，默认情况下在main目录和test目录都快可以使用
如果要进行限制，可以通过 <scope><\scope> 设置作用范围

生命周期

Maven的生命周期就是为了对所有的构建过程进行抽象和统一。 描述了一次项目构建，经历哪些阶段。

Maven对项目构建的生命周期划分为3套（相互独立）

  • clean：清理工作
  • default：核心工作。如编译、测试、打包、安装、部署等
  • site：生成报告、发布站点等

后面的会依赖前面的（也就是要执行后面的，前者也必须执行）
常用的：

  • clean：移除上一次构建生成的文件
  • compile：编译项目源代码
  • test：使用合适的单元测试框架运行测试(junit)
  • package：将编译后的文件打包，如：jar、war等
  • install：安装项目到本地仓库

执行

当我们要执行指定的生命周期时，有两种方法

  • IDEA工具右侧的maven工具栏中，选择对应的生命周期，双击执行
  • 在dos命令行中，通过maven命令执行
    • 打开项目目录
    • 进到cmd
    • 然后允许对应的指令 mvn xxx

单元测试

测试： 是一种用来促进鉴定软件的正确性、完整性、安全性和质量的过程。
阶段划分： 单元测试、集成测试、系统测试、验收测试。

1). 单元测试

  • 介绍：对软件的基本组成单位进行测试，最小测试单位。
  • 目的：检验软件基本组成单位的正确性。
  • 测试人员：开发人员

2). 集成测试

  • 介绍：将已分别通过测试的单元，按设计要求组合成系统或子系统，再进行的测试。
  • 目的：检查单元之间的协作是否正确。
  • 测试人员：开发人员

3). 系统测试

  • 介绍：对已经集成好的软件系统进行彻底的测试。
  • 目的：验证软件系统的正确性、性能是否满足指定的要求。
  • 测试人员：测试人员

4). 验收测试

  • 介绍：交付测试，是针对用户需求、业务流程进行的正式的测试。
  • 目的：验证软件系统是否满足验收标准。
  • 测试人员：客户/需求方

测试还分为：白盒、黑盒和灰盒

注意：

  • 测试类的命名规范为：XxxxTest
  • 测试方法的命名规定为：public void xxx(){…}

断言和注解

学习笔记后端javaWeb