JavaWeb

发表于 更新于

image-20240305150715516

JS

1.JS引入方式

2.变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量 。

JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。

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

​ Ø组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

​ Ø数字不能开头

​ Ø建议使用驼峰命名

ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。

ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

•var：声明变量，全局作用域/函数作用域，允许重复声明

• let：声明变量，块级作用域，不允许重复声明

• const：声明常量，一旦声明，常量的值不能改变

3.数据类型

JavaScript中分为：原始类型 和 引用类型。

image-20240306105949534

var 变量名 = new Array(元素列表);

image-20240306110748714

4.BOW

Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话， JavaScript 将浏览器的各个组成部分封装为对象。

location地址对象：就是那个框

属性

history：对 History 对象的只读引用。请参阅 History 对象。

location：用于窗口或框架的 Location 对象。请参阅 Location 对象。

navigator：对 Navigator 对象的只读引用。请参阅 Navigator 对象。

方法

alert()：显示带有一段消息和一个确认按钮的警告框。

confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。

setTimeout()：在指定的毫秒数后调用函数或计算表达式。

5.DOM（概念：Document Object Model ，文档对象模型）

image-20240306111613344

6.事件监听

事件：HTML事件是发生在HTML元素上的 “事情”。比如：

1
2
3
4
5
按钮被点击

鼠标移动到元素上

按下键盘按键

事件监听：JavaScript可以在事件被侦测到时 执行代码。

事件绑定

方式一：通过 HTML标签中的事件属性进行绑定

1
2
3
4
5
6
7
<input type="button" onclick="on()" value="按钮1">

<script>
    function on(){
        alert('我被点击了!');
    }
</script>

方式二：通过 DOM 元素属性绑定

1
2
3
4
5
6
7
8
9
10
11
<input type="button" id="btn" value="按钮2">

<script>

  document.getElementById('btn').onclick=function(){

    alert('我被点击了!');

  }

</script>

常见事件

image-20240306112610533

7.Vue

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

官网： https://v2.cn.vuejs.org/

image-20240306112707334

Vue快速入门

image-20240306112754269

常用指令

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

常用指令

指令 作用
v-bind 为HTML标签绑定属性值，如设置 href , css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if
v-else
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性
指令 作用
v-bind 为HTML标签绑定属性值，如设置 href , css样式等
v-model 在表单元素上创建双向数据绑定

通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

image-20240306113353512

image-20240306113419926

生命周期

生命周期：指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

image-20240306114312596

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    new Vue({
        el: "#app",
        data: {
            
        },
        mounted() {
            console.log("Vue挂载完毕,发送请求获取数据");
        },
        methods: {
           
        },
    })
</script>

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

Maven

Maven是apache旗下的一个开源项目，是一款用于管理和构建java项目的工具。

基于项目对象模型(POM)的概念，通过一小段描述信息来管理项目的构建。

作用

依赖管理：方便快捷的管理项目依赖的资源(jar包)，避免版本冲突问题

统一项目结构：提供标准、统一的项目结构

项目构建：标准跨平台（Linux、Windows、MacOS）的自动化项目构建方式

清理、编译、测试、打包、发布

image-20240306132942342

Maven概述

image-20240306134710518

image-20240306134742641

Maven坐标

Maven 中的坐标是资源的唯一标识，通过该坐标可以唯一定位资源位置。

使用坐标来定义项目或引入项目中需要的依赖。

Maven 坐标主要组成

groupId：定义当前Maven项目隶属组织名称（通常是域名反写，例如：com.itheima）

artifactId：定义当前Maven项目名称（通常是模块名称，例如 order-service、goods-service）

version：定义当前项目版本号

image-20240306135618173

依赖配置

依赖：指当前项目运行所需要的jar包，一个项目中可以引入多个依赖。

1
2
3
4
5
6
7
1.在 pom.xml 中编写 <dependencies> 标签

2.在 <dependencies> 标签中 使用 <dependency> 引入坐标

3.定义坐标的 groupId，artifactId，version

4.点击刷新按钮，引入最新加入的坐标
1
2
3
4
5
6
7
<dependencies>
    <dependency>        
    	<groupId>ch.qos.logback</groupId>        
    	<artifactId>logback-classic</artifactId>      
    	<version>1.2.3</version>    
    </dependency>
</dependencies>
依赖具有传递性

直接依赖：在当前项目中通过依赖配置建立的依赖关系

间接依赖：被依赖的资源如果依赖其他资源，当前项目间接依赖其他资源

image-20240306140113368

排除依赖

排除依赖指主动断开依赖的资源，被排除的资源无需指定版本。

image-20240306140209596

依赖范围

依赖的jar包，默认情况下，可以在任何地方使用。可以通过

1
<scope>…</ scope >

设置其作用范围。

作用范围：

image-20240306140857607

image-20240306140907131

scope****值 主程序 测试程序 打包（运行） 范例
compile（默认） Y Y Y log4j
test - Y - junit
provided Y Y - servlet-api
runtime - Y Y jdbc驱动

生命周期

Maven的生命周期就是为了对所有的maven项目构建过程进行抽象和统一。

image-20240306141128223

image-20240306141920091

Maven中有3套相互独立的生命周期：

在同一套生命周期中，当运行后面的阶段时，前面的阶段都会运行。

  • clean：清理工作。
  • default：核心工作，如：编译、测试、打包、安装、部署等。
  • site：生成报告、发布站点等。
1
2
3
4
5
clean：移除上一次构建生成的文件
compile：编译项目源代码
test：使用合适的单元测试框架运行测试(junit)
package：将编译后的文件打包，如：jar、war等
install：安装项目到本地仓库

image-20240306142550365

image-20240306142605065

Spring

image-20240306142800941

Spring Framework配置比较繁琐，入门的难度比较大

Sprint Boot简化配置，快速入门

SpringBootWeb入门

Controller类

image-20240306143624478

image-20240306143813629

HTTP协议

HTTP-概述

基于请求-响应模型：一次请求对应一次响应

基于TCP协议：面向连接、安全

HTTP协议是无状态的协议：对于事务处理没有记忆能力。每次请求-响应都是独立的。

​ 缺点：多次请求间不能共享数据

​ 优点：速度快

image-20240306143950651

Hyper Text Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则。

HTTP-请求协议

get

post

image-20240306214453971

image-20240306144631222

image-20240306144652867

image-20240306144754893

HTTP-响应协议

image-20240306144904417

200 客户端请求成功。
404 请求资源不存在，般是URL输入有误，或者网站资源被删除了。
500 服务器发生不可预期的错误。

HTTP-协议解析

Web服务器-Tomcat

Web服务器 对HTTP协议操作进行封装，简化web程序开发

部署web项目，对外提供网上信息浏览服务。

Tomcat简介

一个轻量级的web服务器，支持servlet、jsp等少量javaEE规范。

也被称为web容器、servlet容器。

  • 概念： Tomcat是Apache 软件基金会一个核心项目，是一个开源免费的轻量级Web服务器，支持Servlet/JSP少量JavaEE规范。
  • JavaEE：Java Enterprise Edition，Java企业版。指Java企业级开发的技术规范总和。包含13项技术规范：JDBC、JNDI、EJB、RMI、JSP、Servlet、XML、JMS、Java IDL、JTS、JTA、JavaMail、JAF
  • Tomcat 也被称为 Web容器、Servlet容器。Servlet程序需要依赖于 Tomcat才能运行
  • 官网：https://tomcat.apache.org/

image-20240306150115020

小结

  1. 起步依赖

image-20240306150153737

  1. 内嵌Tomcat服务器

image-20240306150215953

Web后端开发-请求响应

image-20240306150713034

image-20240306150724281

image-20240306150855385

请求

Postman

前后端分离开发

当前最为流行的开发模式：前后端分离

image-20240306151151217

Postman

postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。

作用：常用于进行接口测试

简单参数

原始方式

获取请求参数，需要HttpServletRequest 对象手动获取

image-20240306151429294

SpringBoot方式

简单参数：参数名与形参变量名相同，定义形参即可接收参数。

1
2
3
4
5
@RequestMapping("/simpleParam")
public String simpleParam(String name , Integer age){
    System.out.println(name+"  :  "+age);
    return "OK";
}

简单参数：如果方法形参名称与请求参数名称不匹配，可以使用 @RequestParam 完成映射。

1
2
3
4
5
6
@RequestMapping("/simpleParam")
public String simpleParam(@RequestParam(name = "name") String username , Integer age){
	System.out.println(username + " : " + age);
	return "OK";
}

@RequestParam中的required属性默认为true，代表该请求参数必须传递，如果不传递将报错。 如果该参数是可选的，可以将required属性设置为false。

实体参数

简单实体对象：请求参数名与形参对象属性名相同，定义POJO接收即可

image-20240306152052414

1
2
3
4
5
6
7
8
9
10
11
12
@RequestMapping("/simplePojo")
public String simplePojo(User user){
	System.out.println(user);
    return "OK";
}

// 这个放在Pojo文件夹里
public class User {
    private String name;
    private Integer age;
}

复杂实体对象：请求参数名与形参对象属性名相同，按照对象层次结构关系即可接收嵌套POJO属性参数。

image-20240306152643855

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@RequestMapping("/complexPojo")
public String complexPojo(User user){
	System.out.println(user);
    return "OK";
}
public class User {
    private String name;
    private Integer age;
    private Address address;
}
public class Address {
    private String province;
    private String city;
}


数组集合参数

数组参数

数组参数：请求参数名与形参数组名称相同且请求参数为多个，定义数组类型形参即可接收参数

image-20240306153107242

1
2
3
4
5
@RequestMapping("/arrayParam")
public String arrayParam(String[] hobby){
    System.out.println(Arrays.toString(hobby));
    return "OK";
}

集合参数@RequestParam

集合参数：请求参数名与形参集合名称相同且请求参数为多个，@RequestParam 绑定参数关系

image-20240306153320104

1
2
3
4
5
6
@RequestMapping("/listParam")
public String listParam(@RequestParam List<String> hobby){
    System.out.println(hobby);
    return "OK";
}

总结

==数组：请求参数名与形参中数组变量名相同，可以直接使用数组封装==

==集合：请求参数名与形参中集合变量名相同，通过@RequestParam绑定参数关系==

日期参数@DateTimeFormat

日期参数：使用 @DateTimeFormat 注解完成日期参数格式转换

image-20240306153733135

1
2
3
4
5
6
@RequestMapping("/dateParam")
public String dateParam(@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") LocalDateTime updateTime){
    System.out.println(updateTime);
    return "OK";
}

Json参数

JSON参数：JSON数据键名与形参对象属性名相同，定义POJO类型形参即可接收参数，需要使用 @RequestBody 标识

image-20240306154922588

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@RequestMapping("/jsonParam")
public String jsonParam(@RequestBody User user){
    System.out.println(user);
    return "OK";
}
public class User {
    private String name;
    private Integer age;
    private Address address;
}
public class Address {    
    private String province;    
    private String city;
}

路径参数

路径参数：通过请求URL直接传递参数，使用{…}来标识该路径参数，需要使用 @PathVariable 获取路径参数

1
2
3
4
5
6
@RequestMapping("/path/{id}/{name}")
public String pathParam2(@PathVariable Integer id, @PathVariable String name){
    System.out.println(id+ " : " +name);
    return "OK";
}

image-20240306202824520

响应

@ResponseBody

位置：Controller类上/方法上

作用：将方法返回值直接响应，若返回值类型是 实体对象/集合 ，转JSON格式响应

说明：@RestController = @Controller + @ResponseBody ;

image-20240306204830544

统一响应结果

如果一个个的响应，不方便管理和维护

image-20240306204605470

分层解耦

三层架构

image-20240306205013500

controller：控制层，接收前端发送的请求，对请求进行处理，并响应数据。

service：业务逻辑层，处理具体的业务逻辑。

dao：数据访问层(Data Access Object)（持久层），负责数据访问操作，包括数据的增、删、改、查。

可能有很多类型的数据，比如是xml的、数据库的、或者是别人给的

image-20240306205150673

定义Dao层的接口，增强扩展性

image-20240307112932230

控制反转：

Inversion Of Control，简称IOC。对象的创建控制权由程序自身转移到外部（容器），这种思想称为控制反转。

依赖注入：

Dependency Injection，简称DI。容器为应用程序提供运行时，所依赖的资源，称之为依赖注入。

Bean对象：IOC容器中创建、管理的对象，称之为bean。

1
1: Service层和Dao层的实现类，交给IOC容器管理

image-20240307113836905

如果要切换service，只需要把component修改了就行

image-20240307113929291

IOC详解

IOC对象 又称为bean对象

注解 说明 位置
@Component 声明bean的基础注解 不属于以下三类时，用此注解
@Controller @Component的衍生注解 标注在控制器类上
@Service @Component的衍生注解 标注在业务类上
@Repository @Component的衍生注解 标注在数据访问类上（由于与mybatis整合，用的少）

声明bean的时候，可以通过value属性指定bean的名字，如果没有指定，默认为类名首字母小写。

使用以上四个注解都可以声明bean，但是在springboot集成web开发中，声明控制器bean只能用@Controller。

Bean组件扫描

前面声明bean的四大注解，要想生效，还需要被组件扫描注解@ComponentScan扫描。

@ComponentScan注解虽然没有显式配置，但是实际上已经包含在了启动类声明注解 @SpringBootApplication 中，默认扫描的范围是启动类所在包及其子包。

image-20240307115056516

Bean注入

@Autowired注解，默认是按照类型进行，如果存在多个相同类型的bean，将会报出如下错误：

image-20240307115609120