JavaWeb学习笔记

Web

Web:全球广域网，也称为万维网(www World wide Web)，能够通过浏览器访问的网站。

Web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C ( World wide Web Consortium，万维网联盟)负责制定。

三个组成部分:

HTML:负责网页的结构(页面元素和内容)。
CSS:负责网页的表现 (页面元素的外观、位置等页面样式，如: 颜色、大小等)。
JavaScript:负责网页的行为(交互效果)。

HTML

HTML (HyperText Markup Language): 超文本标记语言。
超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

标记语言:由标签构成的语言。HTML标签都是预定义好的。例如: 使用<a>展示超链接，使用<img>展示图片，<video>展示视频.HTML代码直接在浏览器中运行，HTML标签由浏览器解析

CSS

CSS(Cascading Style Sheet): 层叠式表，用于控制页面的样式(表现)，是一种用于描述网页上元素样式的标记语言。它可以控制网页的布局、字体、颜色、背景等方面的样式，使网页具有更好的可读性和视觉效果。CSS与HTML结合使用，通过选择器和属性来选择和定义网页上的元素样式。

JavaScript

JavaScript(简称:JS) 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。JavaScript和Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。JavaScript在1995年由 Brendan Eich 发明，并于1997 年成为 ECMA标准ECMAScript 6(ES6)是最新的Javacript 版本(发布于2015 年)。

JS对象

Array

String

JSON

概念:JavaScript object Notation，JavaScript对象标记法，JSON是通过Javacript 对象标记法书写的文本，由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

BOM

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

组成:

• Window:浏览器窗口对象

• 介绍:浏览器窗口对象。
  获取: 直接使用window，其中 window.可以省略
  属性
  history:对 History 对象的只读引用。请参阅History 对象location:用于窗口或框架的 Location 对象。请参阅 Location 对象navigator:对 Navigator 对象的只读引用。请参阅 Navigator 对象
  方法
  alert(): 显示带有一段消息和一个确认按钮的警告框
  confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
  setlnterval(): 按照指定的周期 (以毫秒计)来调用函数或计算表达式
  setTimeout(): 在指定的毫秒数后调用函数或计算表达式

• Navigator:浏览器对象

• Screen:屏幕对象

• History:历史记录对象

• Location:地址栏对象

• 介绍:地址栏对象。
  获取:使用 window.location 获取，其中 window.可以省略
  属性:
  href:设置或返回完整的URL

DOM

概念: Document Object Model，文档对象模型。

DOM是 W3C(万维网联盟)的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分:

1.Core DOM- 所有文档类型的标准模型

将标记语言的各个组成部分封装为对应的对象:
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象

2.XML DOM-XML文档的标准模型
3.HTML DOM-HTML 文档的标准模型
lmage:<img>
Button : <input type='button'>

获取Element元素对象

在HTML中，Element元素对象是指通过DOM（文档对象模型）API创建的表示HTML元素的对象。每个HTML元素都可以通过DOM API进行访问和操作。Element元素对象提供了一系列属性和方法，用于获取和修改元素的属性、样式、内容等。通过Element元素对象，可以动态地操作和修改HTML文档的结构和内容。HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

Document对象中提供了以下获取Element元素对象的函数：

1.根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');
2.根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
3.根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName( 'hobby');
4.根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName('cls');

事件绑定
方式一:通过HTML标签中的事件属性进行绑定
<input type="button” οnclick="on()” value="按钮1">
<script>
function on()falert(我被点击了!');</script>
通过DOM 元素属性绑定方式
<input type="button” id="btn” value="按钮2">
<script>document.getElementById('btn').οnclick=function()falert('我被点击了!');
</script>

常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

Vue

Vue 是一套前端框架，免除原生JavaScript中的DM操作，简化书写。基于MVVM(Model-View-ViewModel)思想，实数据的双向绑定，将编程的关注点放在数据上。
官网:https://v2.cn.vuejs.org/

环境准备
vue-cli

介绍:Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue的项目模板
Vue-cli提供了如下功能:
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
依赖环境:NodejS

常用指令

指令: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	列表渲染，遍历容器的元素或者对象的属性

Ajax

概念:Asynchronous JavaScript And XML，异步的JavaScript和XML。
作用:
数据交换: 通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用的校验等等。

Axios

介绍:Axios对原生的Ajax进行了封装，简化书写，快速开发E

官网:https://www.axios-http.cn/

YApi

介绍:YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
地址:http://vapi.smart-xwork.cn/

Element

Element:是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

组件:组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等
官网: https://element.eleme.cn/#/zh-CNListener

Nginx

介绍:Nginx是一款轻量级的web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
官网: https://nginx.org/

注意：Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。(netstat-anolfindStr 80)

Maven

Maven是apache旗下的一个开源项目，是一款用于管理和构建java项目的工具。它基于项目对象模型(POM)的概念，通过一小段描述信息来管理项目的构建。

作用:
方便的依赖管理
统一的项目结构
标准的项目构建流程
官网: http://maven.apache.org/


Apache 软件基金会，成立于1999年7月，是目前世界上最大的最受欢迎的开源软件基金会入也是一个专门为支持开源项目而生的非盈利性组织。开源项目: https://www.apache.org/index.html#projects-list

Spring

官网: spring.io
Spring发展到今天已经形成了一种开发生态圈，Spring提供了若干个子项目，每个项目用于完成特定的功能。

Spring Boot

Spring Boot可以帮助我们非常快速的构建应用程序、简化开发、提高效率.

HTTP

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

特点:
1.基于TCP协议:面向连接，安全
2.基于请求-响应模型的:一次请求对应一次响应
3.HTTP协议是无状态的协议:对于事务处理没有记忆能力。每次请求-响应都是独立的。

优点:速度快 缺点:多次请求间不能共享数据

Web 服务器

Web服务器是一个软件程序，对HTTP协议的操作进行封装，使得程序员不必直接对协议进行操作，让Web开发更加便捷主要功能是“提供网上信息浏览服务”

Tomcat

概念:Tomcat是Apache 软件基金会一个核心项目，是一个开源免费的轻量级Web服务器，支持Servlet/ISP少量javaEE规范，Tomcat 也被称为 Web容器、Servlet容器。Servlet程序需要依赖于Tomcat才能运行。官网: https://tomcat.apache.org/

Postman

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

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

学习web开发请求参数的接收部分非常重要，因为在实际的web开发中，我们经常需要从前端页面获取用户输入的数据，并将其传递给后端进行处理。 了解如何接收请求参数可以帮助你完成以下任务： 1. 获取用户输入：通过接收请求参数，你可以获取用户在前端页面中输入的数据，例如表单提交的数据、URL中的查询参数等。 2. 数据验证和处理：接收请求参数后，你可以对数据进行验证和处理，确保数据的合法性和完整性。例如，你可以验证用户输入的邮箱地址是否符合规范，或者对用户输入的密码进行加密处理。 3. 数据传递和存储：接收到请求参数后，你可以将数据传递给后端的业务逻辑进行处理，或者将数据存储到数据库中。 4. 安全性考虑：了解如何接收请求参数也有助于你提高应用程序的安全性。你可以对用户输入的数据进行过滤和转义，以防止恶意攻击，如SQL注入、跨站脚本攻击等。 总之，学习web开发请求参数的接收部分可以帮助你更好地处理用户输入的数据，提高应用程序的功能性、安全性和用户体验。

数据库: DataBase (DB)，是存储和管理数据的仓库。

数据库管理系统: DataBase Management System (DBMS)，操纵和管理数据库的大型软件。
SOL:Structured OueryLanquaqe，操作关系型数据库的编程语言，定义了一套操作关系型数据库统一标准。

关系型数据库(RDBMS):建立在关系模型基础上，由多张相互连接的二维表组成的数据库。

DataGrip

介绍: DataGrip是JetBrains旗下的一款数据库管理工具，是管理和开发MySOL、Oracle、PostqresOL的理想解决方案官网:https://wwwjetbrains,com/zh-cn/datagrip/
安装:参考资料中提供的《DataGrip安装手册》

MyBatis

MyBatis是一款优秀的持久层框架,用于简化JDBC的开发MyBatis本是Apache的一个开源项目iBatis,2010年这个项目由apache迁移到了google code，并且改名为MyBatis。2013年11月迁移到Github。
官网: https://mybatis.org/mybatis-/zh/index.html

JDBC

JDBC: (Java DataBase Connectivity )，就是使用Java语言操作关系型数据库的一套API。

sun公司官方定义的一套操作所有关系型数据库的规范，即接口。各个数据库厂商去实现这套接口，提供数据库驱动jar包我们可以使用这套接口(DBC)编程，真正执行的代码是驱动iar包中的实现类。

Lombok

Lombok是一个实用的Java类库，能通过注解的形式自动生成构造器、getter/setter、equals、hashcode、toString等方法，并可以自动化生成日志变量，简化java开发、提高效率。

注解	作用
@Getter/@Setter	为所有的属性提供get/set方法
@ToString	会给类自动生成易阅读的 toString 方法
@EqualsAndHashCode	根据类所拥有的非静态字段自动重写 equals 方法和 hashCode 方法
@Data	提供了更综合的生成代码功能（@Getter + @Setter + @ToString + @EqualsAndHashCode）
@NoArgsConstructor	为实体类生成无参的构造器方法
@AllArgsConstructor	为实体类生成除了static修饰的字段之外带有各参数的构造器方法。