6、JavaWeb相关笔记

javaWeb笔记

1.相关知识

1.绝对路径:

​ 1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png

​

​ 2. 绝对网络路径: https://img-blog.csdnimg.cn/img_convert/36582400976768c783d098084c302e38.png

​

​ 相对路径:

​ ./ : 当前目录 , ./ 可以省略的

​ …/: 上一级目录

2.颜色的取值

表示方式	表示含义	取值
关键字	预定义的颜色名	red、green、blue…
rgb表示法	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，简写：#000、#ccc

3.盒子模型

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）<由内到外>

4.关于系统架构

系统架构包括什么形式？

1.C/S架构

• Client / Server（客户端 / 服务器）
• C/S架构的软件或者说系统有哪些呢？
  • QQ
  • 微信
• C/S架构的特点：需要安装特定的客户端软件。
• C/S架构的系统优点和缺点分别是什么？
  • 优点：
    • 速度快（软件中的数据大部分都是集成到客户端软件当中的，很少量的数据从服务器端传送过来，所以C/S结构的系统速度快）
    • 体验好（速度又快，界面又酷炫，当然体验好了。）
    • 界面酷炫（专门的语言去实现界面的，更加灵活。）
    • 服务器压力小（因为大量的数据都是集成在客户端软件当中，所以服务器只需要传送很少的数据量，当然服务器压力小。）
    • 安全（因为大量的数据是集成在客户端软件当中的，并且客户端有很多个，服务器虽然只有一个，就算服务器那边地震了，火灾了，服务器受损了，问题也不大，因为大量的数据在多个客户端上有缓存，有存储，所以从这个方面来说，C/S结构的系统比较安全。）
    • …
  • 缺点：
    • 升级维护比较差劲。（升级维护比较麻烦。成本比较高。每一个客户端软件都需要升级。有一些软件不是那么容易安装的。）

2.B/S架构

• B/S（Browser / Server，浏览器 / 服务器）
• http://www.baidu.com
• http://www.jd.com
• http://www.126.com
• B/S结构的系统是不是一个特殊的C/S系统？
  • 实际上B/S结构的系统还是一个C/S，只不过这个C比较特殊，这个Client是一个固定不变浏览器软件。
• B/S结构的系统优点和缺点是：
  • 优点：
    • 升级维护方便，成本比较低。（只需要升级服务器端即可。）
    • 不需要安装特定的客户端软件，用户操作极其方便。只需要打开浏览器，输入网址即可。
  • 缺点：
    • 速度慢（不是因为带宽低的问题，是因为所有的数据都是在服务器上，用户发送的每一个请求都是需要服务器全身心的响应数据，所以B/S结构的系统在网络中传送的数据量比较大。）
    • 体验差（界面不是那么酷炫，因为浏览器只支持三个语言HTML CSS JavaScript。在加上速度慢。）
    • 不安全（所有的数据都在服务器上，只要服务器发生火灾，地震等不可抗力，最终数据全部丢失。）
    • …

3.C/S和B/S结构的系统，哪个好，哪个不好？

• 并不是哪个好，哪个不好。不同结构的系统在不同的业务场景下有不同的适用场景。
• 娱乐性软件建议使用？
  • C/S 结构
• 公司内部使用的一些业务软件建议使用？
  • 公司内部使用的系统，需要维护成本低。
  • 公司内部使用的系统，不需要很酷炫。
  • 公司内部使用的企业级系统主要是能够进行数据的维护即可。
  • B/S 结构。

5.Java三大模块：

• JavaSE
  • Java标准版（一套类库：别人写好的一套类库，只不过这个类库是标准类库，先学。）
• JavaEE（WEB方向，WEB系统。）
  • Java企业版（也是一套类库：也是别人写好的一套类库，只不过这套类库可以帮助我们完成企业级项目的开发，专门为企业内部提供解决方案的一套（多套）类库。）
  • 别人写好的，用就行了，用它可以开发企业级项目。
  • 可以开发web系统。
  • Java比较火爆的就是这个JavaEE方向。
• JavaME
  • Java微型版（还是一套类库，只不过这套类库帮助我们进行电子微型设备内核程序的开发）
  • 机顶盒内核程序，吸尘器内核程序，电冰箱内核程序，电饭煲内核程序。。。。。

6.B/S结构的系统通信原理

• WEB系统的访问过程
  • 第一步：打开浏览器
  • 第二步：找到地址栏
  • 第三步：输入一个合法的网址
  • 第四步：回车
  • 第五步：在浏览器上会展示响应的结果。
• 关于域名：
  • https://www.baidu.com/ （网址）
  • www.baidu.com 是一个域名
  • 在浏览器地址栏上输入域名，回车之后，域名解析器会将域名解析出来一个具体的IP地址和端口号等。
  • 解析结果也许是：http://110.242.68.3:80/index.html
• IP地址是啥？
  • 计算机在网络当中的一个身份证号。在同一个网络当中，IP地址是唯一的。
  • A计算机要想和B计算机通信，首先你需要知道B计算机的IP地址，有了IP地址才能建立连接。
• 端口号是啥？
  • 一个端口代表一个软件（一个端口代表一个应用，一个端口仅代表一个服务）。
  • 一个计算机当中有很多软件，每一个软件启动之后都有一个端口号。
  • 在同一个计算机上，端口号具有唯一性。
• 一个WEB系统的通信原理？通信步骤：
  • 第一步：用户输入网址（URL）
  • 第二步：域名解析器进行域名解析：http://110.242.68.3:80/index.html
  • 第三步：浏览器软件在网络中搜索110.242.68.3这一台主机，直到找到这台主机。
  • 第四步：定位110.242.68.3这台主机上的服务器软件，因为是80端口，可以很轻松的定位到80端口对应的服务器软件。
  • 第五步：80端口对应的服务器软件得知浏览器想要的资源名是：index.html
  • 第六步：服务器软件找到index.html文件，并且将index.html文件中的内容直接输出响应到浏览器上。
  • 第七步：浏览器接收到来自服务器的代码（HTML CSS JS）
  • 第八步：浏览器渲染，执行HTML CSS JS代码，展示效果。
• 什么是URL？
  • 统一资源定位符（http://www.baidu.com）
• 什么是请求，什么是响应？
  • 请求和响应实际上说的是数据的流向不同。
  • 从Browser端发送数据到Server端，我们称为请求。英语单词：request
  • 从Server端向浏览器Browser端发送数据，我们称为响应。英语单词：response
  • B --> S （请求request）
  • S --> B （响应response）

7.关于WEB服务器软件

• WEB服务器软件都有哪些呢？（这些软件都是提前开发好的。）

  • Tomcat（WEB服务器）(轻量级服务器)
  • jetty（WEB服务器）
  • JBOSS（应用服务器）
  • WebLogic（应用服务器）
  • WebSphere（应用服务器）

• 应用服务器和WEB服务器的关系？

  • 应用服务器实现了JavaEE的所有规范。(JavaEE有13个不同的规范。)
  • WEB服务器只实现了JavaEE中的Servlet + JSP两个核心的规范。
  • 通过这个讲解说明了：应用服务器是包含WEB服务器的。
  • 用过JBOSS服务器的同学应该很清楚，JBOSS中内嵌了一个Tomcat服务器。

2.html-css-js

1.web网页构成

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

​ 三个组成部分：

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

2.HTML

​ HyperText Markup Language:<超文本标记语言>

1.html语法

​ 特点：

• ​ HTML标签不区分大小写
• ​ HTML标签属性值单双引号都可以
• ​ HTML语法松散

1.常见标签

1.图片标签：img

• ​ src：指定图像的url（绝对路径 / 相对路径）
• ​ width：图像的宽度（像素 / 相对于父元素的百分比）
• ​ height：图像的高度（像素 / 相对于父元素的百分比）

2.标题标签：h1 - h6

3.水平线标签：hr

4.span标签:

​ 是一个在开发网页时大量会用到的没有语义的布局标签

​ 特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

5.超链接标签：a

​ 属性：

​ href：指定资源访问的url

​ target：指定在何处打开资源链接

​ _self：默认值，在当前页面打开

​ _blank：在空白页面打开

6.视频标签：video

• ​ src：规定视频的url
• ​ controls：显示播放控件
• ​ width：播放器的宽度
• ​ height：播放器的高度

7.音频标签：audio

​ src：规定音频的url

​ controls：显示播放控件

8.段落标签：p

9.文本加粗标签: b / strong

10.换行：br

11.布局标签：

1. div标签：

   一行只显示一个（独占一行）

   宽度默认是父元素的宽度，

   高度默认由内容撑开可以设置宽高（width、height）

2. span标签：

   一行可以显示多个

   宽度和高度默认由内容撑开

   不可以设置宽高（width、height）

12.表格标签：table

标签	描述	属性**/**备注
	定义表格整体，可以包裹多个
border：规定表格边框的宽度
width：规定表格的宽度
cellspacing: 规定单元之间的空间。		表格两个单元格边框中间的部分
表格的行，可以包裹多个
		表格单元格(普通)，可以包裹内容	如果是表头单元格，可以替换为

13.表单标签：form

1. 标签：
2. 表单项：不同类型的 input 元素、下拉列表、文本域等。
3. • input：定义表单项，通过type属性控制输入形式
   • select：定义下拉列表
   • textarea：定义文本域
4. 属性：

• action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面

• method: 表单的提交方式

  ​ get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值

  ​ post: 在消息体(请求体)中传递的, 参数大小无限制的.

• form表单提交必须要有name属性

• type****取值	描述
  text	默认值，定义单行的输入字段
  password	定义密码字段
  radio	定义单选按钮
  checkbox	定义复选框
  file	定义文件上传按钮
  date/time/datetime-local	定义日期/时间/日期时间
  number	定义数字输入框
  email	定义邮件输入框
  hidden	定义隐藏域
  submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

3.CSS

​ Cascading Style Sheet：层叠样式表

1.CSS引入方式：

• ​ 行内样式：写在标签的style属性中（不推荐）

• 中国新闻网

• ​ 内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

• ​ 外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

• ​ h1 { xxx: xxx; xxx: xxx;}

• ​

2.CSS选择器

• ​ 元素选择器

  元素名称 { color: red;}

• ​ id选择器

  #id属性值 { color: red;}

• ​ 类选择器

  .class属性值 { color: red;}

• 后代选择器和子代选择器

  ​ 后代 a b 当前标签下面的所有层级的子标签都算

  ​ 子代 a>b 只有当前层级的子标签才算子类

• 伪类选择器

  ​ ：hover 鼠标移上去触发的样式

  选择器优先级：ID选择器 > 类选择器 > 后代 = 子代 > 标签

  如果优先级相同，则后面的更大

3.盒子模型的三大内容

margin:外边距

• ​ margin:10px 四个方向

• ​ margin:10px 20px 上下 左右

• ​ margin:10px 20px 30px 上 左右 下

• ​ margin:10px 20px 30px 40px 上 右 下 左右

  border:边框

• ​ border-width

• ​ border-style

• ​ border-color

  padding:填充

4.定位与布局：

1、定位：在页面中的一个位置

​ position:

​ 相对定位：加了之后，对自己本身，没有任何影响

​ 绝对定位：会脱离文档流，空间释放

​ 1、如果绝对定位的父级元素没有定位，那么根据网页来定位

​ 2、如果当前元素的父级元素，有定位，当前元素根据父级元素来定位

​ 固定定位：会脱离文档流，空间释放

​ z-index ：设置优先级；（越小优先级越高）

​ 当一个元素定位后，就可以使用定位元素

2、布局：浮动布局

​ float:left/right

• ​ 让块级标签在同一行显示，让行标签支持大小

• ​ 浮动会脱离文档

• ​ 注意：如果有文字，那么，文字是不能进入释放的空间的

• ​ 清除浮动带来的空间释放：

• ​ clear：both;

• ​ 定位： 相对定位 绝对定位 固定定位

• 脱离文档流：

  ​ 文档流：按照html文档 从上往下 从左往右 依次排列

  ​ 脱离文档流：不会按照这个规律 不占空间 空间释放

5.字体：

• ​ 字体颜色 color
  
• ​ 字体大小 font-size
  
• ​ 字体粗细 font-weight
  
• ​ 字体字型 font-family 设置的字体必须是电脑安装了的
  
• ​ 对齐方式 text-algin 对于行级标签没用
  
• ​ 字体描述 text-decoration underline 下划线 none 去掉下划线
  
• ​ 行高 line-height 行高大小等于自身高度时候，会垂直居中
  
• ​ 字体间距 letter-spacing
  

6. 背景：

• ​ 背景颜色 background-color

• ​ 背景图片 background-image

• ​ 背景平铺 background-repeat

• ​ 背景偏移 background-position

• ​ 背景图片大小 background-size

  基本样式：

• ​ width 宽

• ​ height 高

• ​ 宽高只对块级标签，内联标签有效，行级标签无效

7.行、块、内联块标签

• 盒子状态的转换：

  ​ 行级标签->块级标签->内联块标签

• 行级标签：不支持大小，大小由内容决定的

• 块级标签：支持大小，但是，会默认换行

• 内联块标签：又支持大小，又在同一行显示

8.CSS常用属性

• text-decoration：规定添加到文本的修饰，none表示定义标准的文本。
• color：定义文本的颜色
• line-height：设置行高
• text-indent：定义第一个行内容的缩进
• text-align：规定元素中的文本的水平对齐方式
• 空格占位符： 

4.Java Scipt

1.什么是 JavaScript?

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

2.js引入方式

内部脚本：将JS代码定义在HTML页面中

• ​ JavaScript代码必须位于标签之间
• ​ 在HTML文档中，可以在任意地方，放置任意数量的

外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

• ​ 外部JS文件中，只包含JS代码，不包含

3.js基础语法

1.输出语句

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

2.变量

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

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

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

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

• var 和 let 的区别

  var:全局变量 可重复声明

  let:局部变量 不可重复声明

3.数据类型

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

原始类型：

• number：数字（整数、小数、NaN(Not a Number)）
• string：字符串，单双引皆可
• boolean：布尔。true，false
• null：对象为空
• undefined：当声明的变量未初始化时，该变量的默认值是 undefined

使用 typeof 运算符可以获取数据类型（var a = 20;alert(typeof a);）

4.运算符

• 算术运算符：+ , - , * , / , % , ++ , –

• 赋值运算符：= , += , -= , *= , /= , %=

• 比较运算符：> , < , >= , <= , != , == , ===

• 逻辑运算符：&& , || , !

• 三元运算符：条件表达式 ? true_value: false_value

• 注意：== 会进行类型转换，=== 不会进行类型转换

  类型转换

  字符串类型转为数字：

  ​ 将字符串字面值转为数字。 如果字面值不是数字，则转为NaN。

  其他类型转为boolean：

  ​ Number：0 和 NaN为false，其他均转为true。

  ​ String：空字符串为false，其他均转为true。

  ​ Null 和 undefined ：均转为false。

4.js函数

• 介绍：函数（方法）是被设计为执行特定任务的代码块。

• 定义：JavaScript 函数通过 function 关键字进行定义，

• 语法为： function functionName(参数1,参数2…){ //要执行的代码}

• 注意：

​ 形式参数不需要类型。因为JavaScript是弱类型语言

​ 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

• 调用：函数名称(实际参数列表)
• 定义方式二：var functionName = function (参数1,参数2…){ //要执行的代码}

5.js对象

1.Array

• JavaScript 中 Array对象用于定义数组。

• 定义

  var 变量名 = new Array(元素列表); //方式一

  ​ var arr = new Array(1,2,3,4);

  var 变量名 = [ 元素列表 ]; //方式二

  ​ var arr = [1,2,3,4];

• 访问

  arr[ 索引 ] = 值;

  ​ arr[10] = “hello”;

• JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据

  属性	描述
  length	设置或返回数组中元素的数量。

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

箭头函数(ES6)：是用来简化函数定义语法的。具体形式为: (…) => { … } ，如果需要给箭头函数起名字： var xxx = (…) => { … }

//循环数组的另一种方式

​ for(let index in arr7){

​ console.log(index , arr7[index]);

​ }

//没有名字的函数：匿名函数

​ //new Thread().start();

​ arr7.forEach(function(item){

​ console.log(item);

​ });

//箭头函数 function(){} -> ()=>{}

​ arr7.forEach((item)=>{

​ console.log(item,this); //window

​ });

2.String

String字符串对象创建方式有两种：

​ var 变量名 = new String(“…”) ; //方式一

​ var str = new String(“Hello String”);

​ var 变量名 = “…” ; //方式二

​ var str = “Hello String”;

属性	描述
length	字符串的长度。

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

3.JSON

• 概念：JavaScript Object Notation，JavaScript对象标记法。

• JSON 是通过 JavaScript 对象标记法书写的文本。

• 定义:var 变量名 = ‘{“key1”: value1, “key2”: value2}’;

• 示例 :var userStr = ‘{“name”:“Jerry”,“age”:18, “addr”:[“北京”,“上海”,“西安”]}’;

• JSON字符串转为JS对象:

  var jsObject = JSON.parse(userStr);

• JS对象转为JSON字符串:

  var jsonStr = JSON.stringify(jsObject);

• value 的数据类型为：数字（整数或浮点数）字符串（在双引号中）

  ​ 逻辑值（true 或 false）数组（在方括号中）对象（在花括号中）null

4.BOM

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

• Window

  介绍：浏览器窗口对象。

  获取：直接使用window，其中 window. 可以省略。

  属性

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

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

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

  方法

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

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

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

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

• Location

  介绍：地址栏对象。

  获取：使用 window.location 获取，其中 window. 可以省略。

  属性：href：设置或返回完整的URL。

5.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 文档的标准模型

​ Image：

​ Button ：

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

• 根据id属性值获取，返回单个Element对象

  var h1 = document.getElementById(‘h1’);

• 根据标签名称获取，返回Element对象数组

  var divs = document.getElementsByTagName(‘div’);

• 根据name属性值获取，返回Element对象数组

  var hobbys = document.getElementsByName(‘hobby’);

• 根据class属性值获取，返回Element对象数组

  var clss = document.getElementsByClassName(‘cls’);

6.js事件监听

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

• 按钮被点击
• 鼠标移动到元素上
• 按下键盘按键

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

3.事件绑定:

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

​

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

4.常见事件

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

7.JavaScript自定义对象

定义格式：var 对象名 = {

​ 属性名1: 属性值1,

​ 属性名2: 属性值2,

​ 属性名3: 属性值3,

​ 函数名称: function(形参列表){

​ }};

调用格式：对象名.属性名;

​ 对象名.函数名();

8.定时器和延时器

• 定时器 规定每隔多长时间执行一次代码

​ window.setInterval(function(){

​ console.log(new Date().getTime());

​ },1000);

• 延时器 规定延迟多久后，再来执行代码

​ window.setTimeout(function(){

​ console.log(new Date().getTime());

​ },3000);

5. 清楚浏览器的默认样式

​ *{

​ padding: 0;

​ margin:0;

​ }

​ a{

​ text-decoration: none;

​ }

​ li{

​ list-style: none;

​ /* 清除li前面的点 */

​ }

3.vue

1.什么是Vue?

• Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
• 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
• 官网： https://v2.cn.vuejs.org/
• 框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效

2.Vue快速入门

• 新建HTML页面，引入Vue.js文件

• 编写视图

{{ message }}

3.插值表达式

• 形式：{{ 表达式 }}。

• 内容可以是：

  变量

  三元运算符

  函数调用

  算术运算

4.常用指令

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

5.生命周期

• 生命周期：指一个对象从创建到销毁的整个过程。
• 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

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

6.vue-cli

• 介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。

• Vue-cli提供了如下功能：

  统一的目录结构

  本地调试

  热部署

  单元测试

  集成打包上线

• 依赖环境：NodeJS

• 安装 vue-cli

  npm install -g @vue/cli

7.Vue路由

• 介绍： Vue Router 是 Vue 的官方路由。

• 组成：

  VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件

  ：请求链接组件，浏览器会解析成

  ：动态视图组件，用来渲染展示与路由路径对应的组件

8.打包部署

• ​ Nginx

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

• 官网：https://nginx.org/

• 部署：将打包好的 dist 目录下的文件，复制到nginx安装目录的html目录下。

• 启动：双击 nginx.exe 文件即可，Nginx服务器默认占用 80 端口号

  Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。(netstat –ano | findStr 80)

• 访问：http://localhost:90

4.ajax

• 概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。

• 作用：

  数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

  异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

• 安装(创建Vue项目时已选择)

  npm install vue-router@3.5.1

1.原生Ajax

1. 准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

2. 创建XMLHttpRequest对象：用于和服务器交换数据

3. 向服务器发送请求

4. 获取服务器响应数据

   ​

2.Axios

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

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

• Axios入门

  引入Axios的js文件

  使用Axios发送请求，并获取响应结果
  axios({

  ​ method: “get”,

  ​ url: “http://yapi.smart-xwork.cn/mock/169327/emp/list”

  ​ }).then((result) => {

  ​ console.log(result.data);

  ​ });
  ​ axios({

  ​ method: “post”,

  ​ url: “http://yapi.smart-xwork.cn/mock/169327/emp/deleteById”,

  ​ data: “id=1”

  ​ }).then((result) => {

    		console.log(result.data);
  

  ​ });

• 请求方式别名

  • axios.get(url [, config])

  • axios.delete(url [, config])

  • axios.post(url [, data[, config]])

  • axios.put(url [, data[, config]])

    发送GET请求

    axios.get(“http://yapi.smart-xwork.cn/mock/169327/emp/list”).then((result) => {

    console.log(result.data);

    });

    发送POST请求

    axios.post(“http://yapi.smart-xwork.cn/mock/169327/emp/deleteById”,“id=1”).then((result) => { console.log(result.data);

    });

5.YApi

• 介绍：YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
• 添加项目
• 添加分类
• 添加接口

6.maven

1.什么是maven?

• Maven是apache旗下的一个开源项目，是一款用于管理和构建java项目的工具。
• Apache 软件基金会，成立于1999年7月，是目前世界上最大的最受欢迎的开源软件基金会，也是一个专门为支持开源项目而生的非盈利性组织。开源项目：https://www.apache.org/index.html#projects-list

2.Maven的作用?

1. 依赖管理
   方便快捷的管理项目依赖的资源(jar包)，避免版本冲突问题
2. 统一项目结构
   提供标准、统一的项目结构
3. 项目构建
   标准跨平台（Linux、Windows、MacOS）的自动化项目构建方式
4. 官网：http://maven.apache.org/

3.仓库：

• 用于存储资源，管理各种jar包。
• 本地仓库：自己计算机上的一个目录。
• 中央仓库：由Maven团队维护的全球唯一的。 仓库地址：https://repo1.maven.org/maven2/
• 远程仓库(私服)：一般由公司团队搭建的私有仓库。

4.安装步骤：

1. 解压 apache-maven-3.6.1-bin.zip 。
2. 配置本地仓库：修改 conf/settings.xml 中的 为一个指定目录。
   E:\develop\apache-maven-3.6.1\mvn_repo
3. 配置阿里云私服：修改 conf/settings.xml 中的 标签，为其添加如下子标签：
   
   alimaven
   aliyun maven
   http://maven.aliyun.com/nexus/content/groups/public/
   central
   
4. 配置环境变量: MAVEN_HOME 为maven的解压目录，并将其bin目录加入PATH环境变量。

5.配置Maven环境(当前工程)

• 选择 IDEA中 File --> Settings --> Build,Execution,Deployment --> Build Tools --> Maven

• 设置 IDEA 使用本地安装的 Maven，并修改配置文件及本地仓库路径

  maven home path （maven的安装目录）

  user setting file (conf 下面的setting.xml目录）

  local repository

  maven-runner 的JRE （配置jdk版本）

​ Build,Execution,Deployment -->compiler --> java compiler --> project bytecode version (配置要与jdk版本一致)

6.IDEA 创建 Maven 项目

• 创建模块，选择Maven，点击Next
• 填写模块名称，坐标信息，点击finish，创建完成
• 编写 HelloWorld，并运行

7.Maven坐标

• 什么是坐标？

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

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

• Maven 坐标主要组成
  groupId：定义当前Maven项目隶属组织名称（通常是域名反写，例如：com.itheima）
• artifactId：定义当前Maven项目名称（通常是模块名称，例如 order-service、goods-service）
• version：定义当前项目版本号

8.IDEA 导入 Maven 项目

方式一：打开IDEA，选择右侧Maven面板，点击 + 号，选中对应项目的pom.xml文件，双击即可。
方式二：打开IDEA，选择右侧Maven面板，点击 + 号，选中对应项目的pom.xml文件，双击即可

9.依赖配置

• 依赖：指当前项目运行所需要的jar包，一个项目中可以引入多个依赖。
• 配置：
  在 pom.xml 中编写 标签

​ 在 标签中 使用 引入坐标

​ 定义坐标的 groupId，artifactId，version

​ 点击刷新按钮，引入最新加入的坐标

• 如果引入的依赖，在本地仓库不存在，将会连接远程仓库/中央仓库，然后下载依赖。（这个过程会比较耗时，耐心等待）
• 如果不知道依赖的坐标信息，可以到https://mvnrepository.com/中搜索。

10.依赖传递

依赖具有传递性

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

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

排除依赖

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

​ com.itheima

​ maven-projectB

​ 1.0-SNAPSHOT

加入exclusions来排除依赖

​

​

​ junit

​ junit

​

​

11.依赖范围

依赖的jar包，默认情况下，可以在任何地方使用。可以通过 …</ scope > 设置其作用范围。

作用范围：

​ 主程序范围有效。（main文件夹范围内）

​ 测试程序范围有效。（test文件夹范围内）

​ 是否参与打包运行。（package指令范围内）

12.生命周期

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

​ clean：清理工作。

​ default：核心工作，如：编译、测试、打包、安装、部署等。

​ site：生成报告、发布站点等。

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

7.Spring

1.SpringBoot

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

入门程序开发步骤：

• ①. 创建springboot工程，并勾选web开发相关依赖。
• ②. 定义HelloController类，添加方法 hello，并添加注解。
• ③. 运行测试

1.springboot请求响应

1.springboot请求

• 原始方式

  在原始的web程序中，获取请求参数，需要通过HttpServletRequest 对象手动获取。

  @RequestMapping("/simpleParam")
  public String simpleParam(HttpServletRequest request){    
  	String name = request.getParameter("name");    
  	String ageStr = request.getParameter("age");
      int age = Integer.parseInt(ageStr);    
      System.out.println(name+"  :  "+age);    
      return "OK";
      }
  
  

• SpringBoot方式

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

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

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

    @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接收即可

    @RequestMapping("/simplePojo")
    public String simplePojo(User user){    
    	System.out.println(user);    
    	return "OK";
    }
    

    public class User {    
    	private String name;    
    	private Integer age;
    }
    

  • 数组参数

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

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

  • 集合参数

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

    @RequestMapping("/listParam")
    public String listParam(@RequestParam List<String> hobby){    
    	System.out.println(hobby);    
    	return "OK";
    	}
    

  • 日期参数

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

    @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 标识

    @RequestMapping("/jsonParam")
    public String jsonParam(@RequestBody User user){    
    	System.out.println(user);    
    	return "OK";
    }
    

  • 路径参数

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

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

2.springboot响应

• 响应数据

  • 类型：方法注解、类注解

  • 位置：Controller方法上/类上

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

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

• 统一响应结果

  public class Result {    
  	//响应码，1 代表成功; 0 代表失败    
  	private Integer code;    
  	//提示信息    
  	private String msg;    
  	//返回的数据    
  	private Object data;     
  	//…….
  }
  

• 三层架构

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

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

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

• 分层解耦

  内聚：软件中各个功能模块内部的功能联系。

  耦合：衡量软件中各个层/模块之间的依赖、关联的程度。

  软件设计原则：高内聚低耦合。

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

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

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

• IOC详解

  • 要把某个对象交给IOC容器管理，需要在对应的类上加上如下注解之一：

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

​ 注意：

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

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

​ Bean组件扫描

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

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

• DI详解

  • 依赖注入的注解

    @Autowired：默认按照类型自动装配。如果同类型的bean存在多个：@Primary@Autowired + @Qualifier(“bean的名称”)@Resource(name=“bean的名称”)

  • @Autowired 是spring框架提供的注解，而@Resource是JDK提供的注解。

  • @Autowired 默认是按照类型注入，而@Resource默认是按照名称注入。

8.HTTP

• 概念：Hyper Text Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则。
• 特点：
  基于TCP协议：面向连接，安全

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

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

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

​ 优点：速度快

• HTTP的请求协议包括：4部分

  • 请求行

  • 请求头

  • 空白行

  • 请求体

1.HTTP-请求数据格式

Host	请求的主机名
User-Agent	浏览器版本，例如Chrome浏览器的标识类似Mozilla/5.0 … Chrome/79，IE浏览器的标识类似Mozilla/5.0 (Windows NT …) like Gecko
Accept	表示浏览器能接收的资源类型，如text/*，image/或者/*表示所有；
Accept-Language	表示浏览器偏好的语言，服务器可以据此返回不同语言的网页；
Accept-Encoding	表示浏览器可以支持的压缩类型，例如gzip, deflate等。
Content-Type	请求主体的数据类型。
Content-Length	请求主体的大小（单位：字节）。

• Web 服务器

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

2.请求内容

请求行

• 包括三部分：

  • 第一部分：请求方式（7种）
    • get（常用的）
    • post（常用的）
    • delete
    • put
    • head
    • options
    • trace
  • 第二部分：URI
    • 什么是URI？ 统一资源标识符。代表网络中某个资源的名字。但是通过URI是无法定位资源的。
    • 什么是URL？统一资源定位符。代表网络中某个资源，同时，通过URL是可以定位到该资源的。
    • URI和URL什么关系，有什么区别？
      • URL包括URI
      • http://localhost:8080/servlet05/index.html 这是URL。
      • /servlet05/index.html 这是URI。
  • 第三部分：HTTP协议版本号

• 请求头

  • 请求的主机
  • 主机的端口
  • 浏览器信息
  • 平台信息
  • cookie等信息
  • …

• 空白行

  • 空白行是用来区分“请求头”和“请求体”

• 请求体

  • 向服务器发送的具体数据。

3.GET请求和POST请求有什么区别？

• • get请求发送数据的时候，数据会挂在URI的后面，并且在URI后面添加一个“?”，"?"后面是数据。这样会导致发送的数据回显在浏览器的地址栏上。（get请求在“请求行”上发送数据）
    • http://localhost:8080/servlet05/getServlet?username=zhangsan&userpwd=1111
  • post请求发送数据的时候，在请求体当中发送。不会回显到浏览器的地址栏上。也就是说post发送的数据，在浏览器地址栏上看不到。（post在“请求体”当中发送数据）
  • get请求只能发送普通的字符串。并且发送的字符串长度有限制，不同的浏览器限制不同。这个没有明确的规范。
  • get请求无法发送大数据量。
  • post请求可以发送任何类型的数据，包括普通字符串，流媒体等信息：视频、声音、图片。
  • post请求可以发送大数据量，理论上没有长度限制。
  • get请求在W3C中是这样说的：get请求比较适合从服务器端获取数据。
  • post请求在W3C中是这样说的：post请求比较适合向服务器端传送数据。
  • get请求是安全的。get请求是绝对安全的。为什么？因为get请求只是为了从服务器上获取数据。不会对服务器造成威胁。（get本身是安全的，你不要用错了。用错了之后又冤枉人家get不安全，你这样不好（太坏了），那是你自己的问题，不是get请求的问题。）
  • post请求是危险的。为什么？因为post请求是向服务器提交数据，如果这些数据通过后门的方式进入到服务器当中，服务器是很危险的。另外post是为了提交数据，所以一般情况下拦截请求的时候，大部分会选择拦截（监听）post请求。
  • get请求支持缓存。
    • https://n.sinaimg.cn/finance/590/w240h350/20211101/b40c-b425eb67cabc342ff5b9dc018b4b00cc.jpg
    • 任何一个get请求最终的“响应结果”都会被浏览器缓存起来。在浏览器缓存当中：
      • 一个get请求的路径a 对应 一个资源。
      • 一个get请求的路径b 对应 一个资源。
      • 一个get请求的路径c 对应 一个资源。
      • …
    • 实际上，你只要发送get请求，浏览器做的第一件事都是先从本地浏览器缓存中找，找不到的时候才会去服务器上获取。这种缓存机制目的是为了提高用户的体验。
    • 有没有这样一个需求：我们不希望get请求走缓存，怎么办？怎么避免走缓存？我希望每一次这个get请求都去服务器上找资源，我不想从本地浏览器的缓存中取。
      • 只要每一次get请求的请求路径不同即可。
      • https://n.sinaimg.cn/finance/590/w240h350/20211101/7cabc342ff5b9dc018b4b00cc.jpg?t=789789787897898
      • https://n.sinaimg.cn/finance/590/w240h350/20211101/7cabc342ff5b9dc018b4b00cc.jpg?t=789789787897899
      • https://n.sinaimg.cn/finance/590/w240h350/20211101/7cabc342ff5b9dc018b4b00cc.jpg?t=系统毫秒数
      • 怎么解决？可以在路径的后面添加一个每时每刻都在变化的“时间戳”，这样，每一次的请求路径都不一样，浏览器就不走缓存了。
  • post请求不支持缓存。（POST是用来修改服务器端的资源的。）
    • post请求之后，服务器“响应的结果”不会被浏览器缓存起来。因为这个缓存没有意义。

  GET请求和POST请求如何选择，什么时候使用GET请求，什么时候使用POST请求？

  • 怎么选择GET请求和POST请求呢？衡量标准是什么呢？你这个请求是想获取服务器端的数据，还是想向服务器发送数据。如果你是想从服务器上获取资源，建议使用GET请求，如果你这个请求是为了向服务器提交数据，建议使用POST请求。
  • 大部分的form表单提交，都是post方式，因为form表单中要填写大量的数据，这些数据是收集用户的信息，一般是需要传给服务器，服务器将这些数据保存/修改等。
  • 如果表单中有敏感信息，还是建议适用post请求，因为get请求会回显敏感信息到浏览器地址栏上。（例如：密码信息）
  • 做文件上传，一定是post请求。要传的数据不是普通文本。
  • 其他情况都可以使用get请求。

• 不管你是get请求还是post请求，发送的请求数据格式是完全相同的，只不过位置不同，格式都是统一的：

  • name=value&name=value&name=value&name=value
  • name是什么？
    • 以form表单为例：form表单中input标签的name。
  • value是什么？
    • 以form表单为例：form表单中input标签的value。

4.状态码大类

状态码分类	说明
1xx	响应中——临时状态码，表示请求已经接受，告诉客户端应该继续请求或者如果它已经完成则忽略它
2xx	成功——表示请求已经被成功接收，处理已完成
3xx	重定向——重定向到其它地方：它让客户端再发起一个请求以完成整个处理。
4xx	客户端错误——处理发生错误，责任在客户端，如：客户端的请求一个不存在的资源，客户端未被授权，禁止访问等
5xx	服务器端错误——处理发生错误，责任在服务端，如：服务端抛出异常，路由出错，HTTP版本不支持等

5.常见的响应状态码

状态码	英文描述	解释
200	OK	客户端请求成功，即处理成功，这是我们最想看到的状态码
302	Found	指示所请求的资源已移动到由Location响应头给定的 URL，浏览器会自动重新访问到这个页面
304	Not Modified	告诉客户端，你请求的资源至上次取得后，服务端并未更改，你直接用你本地缓存吧。隐式重定向
400	Bad Request	客户端请求有语法错误，不能被服务器所理解
403	Forbidden	服务器收到请求，但是拒绝提供服务，比如：没有权限访问相关资源
404	Not Found	请求资源不存在，一般是URL输入有误，或者网站资源被删除了
405	Method Not Allowed	请求方式有误，比如应该用GET请求方式的资源，用了POST
428	Precondition Required	服务器要求有条件的请求，告诉客户端要想访问该资源，必须携带特定的请求头
429	Too Many Requests	指示用户在给定时间内发送了太多请求（“限速”），配合 Retry-After(多长时间后可以请求)响应头一起使用
431	Request Header Fields Too Large	请求头太大，服务器不愿意处理请求，因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。
500	Internal Server Error	服务器发生不可预期的错误。服务器出异常了，赶紧看日志去吧
503	Service Unavailable	服务器尚未准备好处理请求，服务器刚刚启动，还未初始化好

状态码大全：https://cloud.tencent.com/developer/chapter/13553

9.Tomcat

• Tomcat服务器要想运行，需要先有jre，所以要先安装JDK，配置java运行环境。

  • JAVA_HOME=C:\Program Files\Java\jdk-17.0.1
  • PATH=%JAVA_HOME%\bin
  • 目前JAVA_HOME没有配置，思考一个问题，这样行不行呢？目前只运行java程序是没问题的。真的没问题吗？

• 启动Tomcat： startup

• 关闭Tomcat：stop （shutdown.bat文件重命名为stop.bat，为什么？原因是shutdown命令和windows中的关机命令冲突。所以修改一下。）

• 怎么测试Tomcat服务器有没有启动成功呢？（启动Tomcat： startup.dat文件运行似乎不能关闭）

  • 打开浏览器，在浏览器的地址栏上输入URL即可：
    • http://ip地址:端口号（8080）

• 解决Tomcat服务器在DOS命令窗口中的乱码问题（控制台乱码）

​ 将CATALINA_HOME/conf/logging.properties文件中的内容修改如下：

​ java.util.logging.ConsoleHandler.encoding = GBK

• 启动窗口一闪而过：检查JAVA_HOME环境变量是否正确配置

1.Tomcat下载

• apache官网地址：https://www.apache.org/
• tomcat官网地址：https://tomcat.apache.org
• tomcat开源免费的轻量级WEB服务器。
• tomcat还有另外一个名字：catalina（catalina是美国的一个岛屿，风景秀丽，据说作者是在这个风景秀丽的小岛上开发了一个轻量级的WEB服务器，体积小，运行速度快，因此tomcat又被称为catalina）
• tomcat的logo是一只公猫（寓意表示Tomcat服务器是轻巧的，小巧的，果然，体积小，运行速度快，只实现了Servlet+JSP规范）
• tomcat是java语言写的。
• tomcat服务器要想运行，必须先有jre（Java的运行时环境）

2.Tomcat服务器的安装：

• 绿色版本的安装很简单，直接zip包解压即可。解压就是安装。

• 启动Tomcat

  • bin目录下有一个文件：startup.bat,通过它可以启动Tomcat服务器。
    • xxx.bat文件是个什么文件？bat文件是windows操作系统专用的，bat文件是批处理文件，这种文件中可以编写大量的windows的dos命令，然后执行bat文件就相当于批量的执行dos命令。
    • startup.sh，这个文件在windows当中无法执行，在Linux环境当中可以使用。在Linux环境下能够执行的是shell命令，大量的shell命令编写在shell文件当中，然后执行这个shell文件可以批量的执行shell命令。
    • tomcat服务器提供了bat和sh文件，说明了这个tomcat服务器的通用性。
    • 分析startup.bat文件得出，执行这个命令，实际上最后是执行：catalina.bat文件。
    • catalina.bat文件中有这样一行配置：MAINCLASS=org.apache.catalina.startup.Bootstrap （这个类就是main方法所在的类。）
    • tomcat服务器就是Java语言写的，既然是java语言写的，那么启动Tomcat服务器就是执行main方法。
  • 我们尝试打开dos命令窗口，在dos命令窗口中输入startup.bat来启动tomcat服务器。
  • 启动Tomcat服务器只配置path对应的bin目录是不行的。有两个环境变量需要配置：
    • JAVA_HOME=JDK的根
    • CATALINA_HOME=Tomcat服务器的根

• 关闭

  直接×掉运行窗口：强制关闭

  bin\shutdown.bat：正常关闭

  Ctrl+C：正常关闭

3.关于Tomcat服务器的目录

• bin ： 这个目录是Tomcat服务器的命令文件存放的目录，比如：启动Tomcat，关闭Tomcat等。
• conf： 这个目录是Tomcat服务器的配置文件存放目录。（server.xml文件中可以配置端口号，默认Tomcat端口是8080）
• lib ：这个目录是Tomcat服务器的核心程序目录，因为Tomcat服务器是Java语言编写的，这里的jar包里面都是class文件。
• logs: Tomcat服务器的日志目录，Tomcat服务器启动等信息都会在这个目录下生成日志文件。
• temp：Tomcat服务器的临时目录。存储临时文件。
• webapps：这个目录当中就是用来存放大量的webapp（web application：web应用）
• work：这个目录是用来存放JSP文件翻译之后的java文件以及编译之后的class文件。

4.配置Tomcat服务器需要哪些环境变量？

• JAVA_HOME=JDK的根
• CATALINA_HOME=Tomcat服务器的根
• PATH=%JAVA_HOME%\bin;%CATALINA_HOME%\bin