WEB开发

一、HTML

1.html介绍

• html：超文本标记语言
  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
  • 标记语言：由标签构成的语言
• 网站和网页的区别
  • 网站=网页+后端（java+数据库）
  • 网页：显示给用户
• HTML运行在浏览器上，HTML标签由浏览器来解析，不需要编译。
• HTML标签都是预定义好的。例如：使用 展示图片
• 在任何地方都可以创建html文件，文件后缀名是.html或者.htm
• W3C标准：
  • 结构：HTML
  • 表现：CSS
  • 行为：JavaScript
• HTML结构标签

• HTML基础标签

• form表单

常见属性：

action：表示将收集的数据提交到具体后台服务器的地址

method：提交数据到后台的方式（请求方式）

​ get：http://www.jd.com?username=zhang&password=123(默认)

​ 不安全；有大小限制；只能传输字符数据；

​ post：http://www.jd.com

​ 安全；有大小限制；可以传输任意数据

二、CSS

1.CSS介绍

• CSS（Cascading Style Sheet）层叠样式表，是一门语言，用于控制网页表现

2.CSS导入方式

• 内联样式：在标签内部使用style属性，属性值是css属性键值对

<div style="color:red">Hello CSS</div>

• 内部样式：定义

<style type="text/css">
  div{
    color:red;
  }
</style>

• 外部样式：定义link标签，引入外部的css文件

<link rel="stylesheet" href="demo.css">

3.CSS选择器

• 元素选择器

<!--元素名称{color:red;}-->
div{color:red;}

• id选择器

<!--#id属性值{color:red;}-->
#name{color:red;}
<div id="name">hello css</div>

• 类选择器

<!--.class属性值{color:red;}-->

.cls{color:red;}
<div class="cls">helo css</div>

4.CSS属性

https://www.w3school.com.cn/cssref/index.asp

三、JavaScript

1.介绍

• JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互；
• JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似；
• JavaScript插入HTML页面后，可由所有的现代化浏览器执行。JavaScript语言不需要编译，直接由各大浏览器解析运行。学习JavaScript语言不需要单独安装软件，只需要浏览器即可。

2.浏览器

浏览器分成两部分：渲染引擎和JS引擎

• 渲染引擎：用来解析HTML和CSS，俗称内核，例如chrome浏览器的blink
• JS引擎：也成为JS解释器。用来读取网页中的JS代码，对其处理后运行，例如chrome浏览器的V8

3.js的三种输出方式

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

4.js定义变量

• 定义变量： let 变量名 = 值；
• 定义常量： const 常量名 = 值；（不能改变）

var i= 10；
let x="haha";
let y = 3.14;
//定义常量，不能改变 
const PI=3.14；

5.js数据类型

• number：数字（整数、小数、NaN）
• string：字符、字符串、单双引皆可
• boolean：布尔，true、false
• null：对象为空
• undefined：当声明的变量未初始化时，该变量的默认值是undefined
• 引用数据类型：date、Object

6.js运算符

• 一元运算符：++，–
• 算术运算符：+，-，*，/，%
• 赋值运算符：=，+=，-=
• 关系运算符：>,<,>=,<=,!=, == ,===

==：非严格比较，具有强制类型转换功能，如果两侧的数据类型不一致，转换一样的类型，然后比较数值是否相等；

===：严格比较，如果运算符两侧类型不一致，返回false，如果类型一致，在比较数值是否相等；

• 逻辑运算符：&&、||、！
• 三元运算符：条件表达式？true_value : false_value

在js中有六种假：false；0；空字 符’'、“”；NaN、null、undefined

7.全局函数

• 其他类型转为数字：
  • string：将字符串字面值转为数字。如果字面值不是数字，则转为NaN，一般使用parseInt()方法进行转换
  • boolean：true转为1，false转为0，一般使用Number()方法进行转换
• 其他类型转为boolean，使用Boolean(value)函数
  • number：0和NaN转为false，其他的数字转为true
  • string：空字符串转为false，其他字符串转为true
  • null：转为false
  • undefined：转为false

8.函数定义

• 格式一

function add(a,b){
	console.log(a+"---"+b)
	//返回
	return a+b；
}

//调用
let sum = add(10,20)
console.log(sum)

• 格式二

let add = function(a,b){
  return a + b;
}

//调用
let result = add(1,2);

• 注意事项
  • 匿名函数还可以作为另一个函数的参数传递
  • 在js中没有函数重载概念，如果存在函数名一样的函数，后出现的函数就会覆盖之前的函数名
  • 在js中调用无参函数可以传递实参，数据没有丢失会放到js的一个内置数组对象中 arguments；调用有参函数可以不传递值；

9.js数组对象

• 数组定义方式一：
  • 采用方式一定义数值时，如果只给一个number类型的值，那么此时数值表示数组长度，数组中的数据都是empty；
  • 采用方式一定义数值时，如果只给一个number类型的值，那么此时数值表示数组长度，要求不能给小数，数组长度不能是小数；
  • 采用方式一定义数值时，如果只给一个非number类型的值，那么此时数值表示数组的元素；
  • js中的数组长度是可变的；
• 数组定义方式二：
  • let arr = [10] 表示数组元素为10，长度为1；

//定义
let 变量名 = new Array(元素列表); //方式一
let arr = new Array(1,2,3);


let 变量名 = [元素列表]; //方式二
let arr = [1,2,3];

 //访问
 arr[索引] = 值;
 arr[0] = 1         

• 数组对象属性和函数：
  • length：返回数组中元素的个数即数组长度
  • push()：向数组中末尾添加一个或多个元素，返回新的长度
  • splice(index,n)：从数组中删除元素；index表示从哪个索引删除，n表示删除数据个数

10.js正则对象

• 概念：正则表达式定义了字符串组成的规则
• 定义：

//1.直接量：注意不要加引号
// var reg = /^正则表达式符号$/

//2.创建RegExp对象
var reg = new RegExp("^正则表达式符号$");

• 方法：test(str)：判断指定字符串是否符合规则，返回true或false
• 语法：

11.字符串对象

• 定义

//方式一: let 变量名 = new String(s);
let str = new String("hello");

//方式二：let 变量名 = s;
let str = "hello";
let str = 'hello';

• 属性：
  • length：字符串的长度
• 方法：
  • charAt() :返回在指定位置的字符
  • IndexOf() :检索字符串，查找字符串在指定字符串中存在的索引，如果不存在返回-1；

12.自定义对象

let 对象名称 = {
  		属性名称1：属性值1，
  		属性名称2：属性值2，
  		...
  		函数名称：function(形参列表){} 
			...
};


//例：
let person = {
  		name:"zhangsan",
  		age:23,
  eat:function(){
    alert("干饭");
  }	
};

let person={
  //属性名：属性值
  name:"liuyan",
  address:"hunan",
  age:18,
  eat:function(){
    //TODO:如果在自定义对象中使用当前自定义对象中的其他属性或者函数，格式：
    //this.属性名或this.函数名(实参);
    
    //this表示当前对象即person
    console.log("ganfanren，ganfanhun"+this.address); //柳岩
    //this表示当前对象即person
    console.log("person.age"); //18
    
    //调用函数  对象名.函数名(实参);
    person.eat();
    
  }
}

13.BOM浏览器对象模型

组成：windows：浏览器窗口对象；Navigator：浏览器对象；Screen：屏幕对象；History：历史记录对象；Location：地址栏对象

• windows：浏览器窗口对象

直接使用window调用window对象中的属性和函数，其中window.可以省略

window.alert(“abc”)

14.DOM对象

（1）Document Object Model文档对象模型

（2）将标记语言的各个组成部分封装为对象：

• img标签 ==> Image对象
• Document：整个文档对象
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
• 所有标签的父对象是Element

（3）JavaScript通过DOM，就能够对HTML进行操作

• 改变HTML元素内容
• 改变HTML元素的样式（CSS）
• 对HTML DOM事件作出反应
• 添加和删除HTML元素

（4）Element：元素对象

• 获取：使用Document对象的方法来获取
  • getElementById：根据id属性值获取，返回一个Element对象
  • getElementsByTagName：根据标签名获取，返回Element对象数组
  • getElementsByName：根据name属性值获取，返回Element对象数组
  • getElementsByClassName：根据class属性值获取，返回Element对象数组

（5）事件绑定

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

<input type="button" onclick='on()'>
 
  function on(){
  alert("我被点了");
}

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

<input type="buton" id = "btn">

  //只有是标签对象才可以绑定事件，如果是数组不能直接绑定，需要遍历数组取出
  //每个标签对象在绑定事件
  document.getElementId("btn").onclick = function (){
  alert("我被点了");
}

（6）常见事件

四、AJAX

1.es6

es6.ruanyifeng.com

• 变量声明 let
• 常量声明 const
• 模板字符串

let username="Rose";
//es5
console.log('姓名是'+username);

//es6,使用反引号，可以直接打印变量的值，表达式类似于java的el表达式
console.log(`姓名是：${username}`);

• 函数的参数默认值

在js中如果定义的函数有参数，调用的时候可以不传递实参，那么形参变量名就是undefined，为了解决这个问题，es6后引入函数参数默认值。如果调用函数时不传递实参，那么使用默认值，如果传递实参那么使用实参。

//es6前
function show(username){
  console.log(username);
}
show();   //undefined

//es6
function show(username='Jack'){ //默认值Jack
  console.log(username);
}
show(); 

• 箭头函数

//es5
let add = function(a,b){
  return a+b;
}

//es6
let add2=(a,b) =>{
  retturn a+b;
}
//如果函数只有一句话，可以省略大括号和return
var add3=(a,b) => a+b;
//如果只有一个参数 省略小括号
var add4 = a => a+10; 

2.Asynchronous JavaScript and XML

（1）异步的JavaScript和XML；

（2）ajax就是一项通过js技术发送异步请求的技术。异步请求，局部更新，不是整个网页更新，可以完成前端和后台服务器的数据交互。

• 说明：

异步：就是不同步。例如我们向后台发送请求，同步的方式是后台必须返回响应数据才可以在浏览器上进行下一步操作，而异步方式可以在不需要等待后台服务器响应数据，之间可以进行其他操作。

• Ajax不是新的编程语言，而是一种使用现有标准的新方法；
• Ajax是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。

（3）同步请求存在的问题：

• 阻塞：请求发出后必须得等到响应结束后才能操作页面信息。
• 全部更新：整个页面更新。

（4）异步请求好处：

• 非阻塞：请求发出后不用等到响应结束才能操作页面信息。随时可以操作。
• 局部更新：页面的局部位置更新

3.交互模型

• 传统交互模型：

浏览器客户端向服务器直接发送请求数据，然后后台服务器接收到请求，处理请求数据，期间浏览器客户端只能等待服务器处理数据，并响应数据，最后服务器将响应数据响应给浏览器客户端，浏览器接收到响应之后才可以继续下一步操作。

• AJAX的交互模型：

浏览器内部多了一个ajax引擎，浏览器客户端向服务器发送请求的数据，都是先由浏览器将请求数据交给ajax引擎，注意，ajax引擎位于浏览器内部，是由js编写的一个软件。然后接下来都是由ajax引擎和服务器进行交互，此时用户可以在浏览器上进行其他操作，如果再次向服务器发送请求，那么依然是交给ajax引擎处理，并且服务器响应的数据也是交给ajax引擎处理，由ajax引擎来分配浏览器的操作。

注意：ajax引擎内部具有一个核心对象：XMLHttpResquest。都是由该对象进行异步请求交互数据的。new XMLHttpRequest() 启用ajax引擎。

4.axios

说明网站（https://www.kancloud.cn/yunye/axios/234845）

• 原生ajax请求的代码编写太过繁琐，我们可以使用axios这个库来简化操作！
• 使用步骤

1.引入axios核心js文件

<!--
			TODO:引入axios核心js文件
-->
<script src="js/axios-0.18.0.js"></script>

2.使用axios对象调用方法来发起异步请求。

3.使用axios对象调用方法来处理响应的数据。

• axios常用方法

**回调函数：回过头来调用的函数，回调函数都是我们负责书写，不负责调用，都是底层帮助我们调用。**例： setInterval(function(){},1000);

//备注: then函数的参数response是一个json对象,
//我们重点只需要了解response.data即可
{
    // `data` 由服务器提供的响应 (重要!) response.data
    data: {},

    // `status` 来自服务器响应的 HTTP 状态码 response.status
    status: 200,

    // `statusText` 来自服务器响应的 HTTP 状态信息
    statusText: 'OK',

    // `headers` 服务器响应的头
    headers: {},

    // `config` 是为请求提供的配置信息
    config: {}
}
                        

• 代码实现
  • get请求
    • axios使用说明

 	/*
        *  # axios的api介绍
        *  1. get(参数) 建立和服务器的连接
        *       get参数 : 是请求地址+请求参数  ---url?key=value&key=value...
        *  2. then(fn) 处理服务器响应
        *       fn(response) : 响应成功的回调函数
        *       response.data : 响应体数据
        *
        *  3. catch(fn)
        *       fn(error) : 响应失败的的回调函数
        *       error : 错误信息
        *
        *  4. finally(fn)
        *       fn : 响应结束的回调函数(无论响应成功与否,都会执行)
        * */
整体代码,链式编程：
// /AjaxServlet 表示后台服务器地址 url
// name=zs&age=18 表示向后台提交的数据，get请求数据位于url后面，携带数据格式：url?key=value&key=value
axios.get("/AjaxServlet?name=zs&age=18")
     .then(function (response) {
            // 回调函数的函数体,处理后台服务器的响应的代码，所有的数据都放到response对象中了，注意response只是一个对象标识符，名字随便定义,我们只负责编写匿名函数体代码
        })
     .catch(function (error) {
            // 回调函数的函数体，如果后台服务器出现异常就在这里处理，所有的错误信息放到error对象中
        };)
     .finally(function () {
          // 回调函数的函数体，必须执行的代码
        };);

=================使用es6的箭头函数简================================================
    ()=>{}
axios.get("/AjaxServlet?name=zs&age=18")
     .then(response=>{
            // 回调函数的函数体,处理后台服务器的响应的代码，所有的数据都放到response对象中了，注意response只是一个对象标识符，名字随便定义,我们只负责编写匿名函数体代码
        })
     .catch(error=>{
            // 回调函数的函数体，如果后台服务器出现异常就在这里处理，所有的错误信息放到error对象中
        };)
     .finally(() => {
          // 回调函数的函数体，必须执行的代码
        };);

代码实现：

步骤：

1.导入axios的js库到当前项目webapp文件夹下

2.创建html页面

3.在html页面中导入axios的js库

4.在html页面向后台发送axios的ajax异步请求

5.创建Servlet，接收请求数据，处理业务逻辑和响应数据

6.在html页面中处理服务器的响应数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用axios发送异步请求</title>
</head>
<body>
<!--  不能在文本中书写js代码-->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    //1.使用axios对象调用函数向后台服务器发送ajax异步请求
    /*
        整体： axios.get().then().catch().finally();
          1）get()函数表示两后台服务器发送get请求，格式：
              get(url?key=value&key=value...);===axios.get("/axiosDemo01Servlet?username=锁哥&password=1234")
          2)then() 处理后台服务器响应的，格式：
                then(function(接收响应数据的对象名){
                    处理响应的代码
                });

                then(function (resp){
                 console.log(resp);
             })
             后台响应数据：
                resp={
                        data: 'axios实现ajax异步get请求,username=锁哥',
                        status: 200,
                        statusText: '',
                        headers: {…},
                        config: {…},
                    }

                resp.data就可以获取 数据： axios实现ajax异步get请求,username=锁哥

          3)catch() :处理异常
                catch(function (error) {
                    console.log(error);
                })

                let person ={
                    username:"锁哥",
                    age:18
                }
        小结：
          1.get函数：建立和服务器的连接，在参数中书写连接服务器的url和请求参数
          2.then函数：书写处理响应数据的，在该函数的参数位置书写回调函数
          3.catch函数：书写处理响应错误信息数据的，在该函数的参数位置书写回调函数
          4.finally函数：无论响应成功还是失败都要执行的代码，在该函数的参数位置书写回调函数
     */
    axios.get("http://localhost:8080/axiosDemo01Servlet?username=锁哥&password=1234")
         .then(function (response) {
             //处理响应数据的回调函数体代码，response表示接受服务器响应数据的对象，该对象中具有重要属性是data
            console.log(response);
            console.log(response.data);
          })
        .catch(function (error) {
            //书写处理响应错误信息数据的，在该函数的参数位置书写回调函数
            console.log(error);
         })
        .finally(function () {
             //无论响应成功还是失败都要执行的代码，在该函数的参数位置书写回调函数
             console.log('我是必须执行的...');
         });
</script>
</body>
</html>

• axios发送异步的请求步骤：

【1】导入库

<script type="text/javascript" src="js/axios-0.18.0.js"></script>

【2】书写异步请求代码

axios.get("后台服务器地址?参数名=参数值&参数名=参数值")
  .then(resp=>{
  				//后台响应成功执行这里，接收后台的数据：resp.data
	})
  .catch(error=>{
  				//后台有异常
	})
  .finally(()=>{
  				//必须执行的
	});

axios.post("后台服务器地址","参数名=参数值&参数名=参数值")
  	 .then()
  	 .catch()
  	 .finally();

5.JSON

JavaScript对象文本表示形式（JavaScript Object Notation : js对象简写）

json是js对象；json是目前 前后端交互的主要格式之一；

(1)JSON语法：

//json的语法主要有两种:
        1. 对象 { }
        2. 数组 [ ]
        
1. 对象类型
		{name:value,name:value,....}
		
2. 数组类型
		[
            {name:value,name:value}, 
            {name:value,name:value},
            {name:value,name:value}
		]
		
3. 复杂对象
		{
            name:value,
            wives:[{name:value},{},{}],
            son:{name:value}
		}
//注意: 
	1. 其中name必须是string类型
		json在js中,name的双引号可以省略,建议加双引号
	2. value必须是以下数据类型之一：
		字符串
		数字
		对象（JSON 对象）
		数组
		布尔
		Null
	3. JSON 中的字符串必须用双引号包围。
  (单引号不行!主要是涉及到后期在后端java代码中操作)	

五、VUE

1.基础入门

导入vue.js

<script src="js/vue.js"></script>

视图

<body>
       <!--TODO: vue第一部分：视图--> 
       <div id="app">
        <!--在vue中有个插值表达式，简称插值，可以获取数据模型中的数据并显示到页面中{{数据模型中的冒号左边的标识}}-->
        {{msg}}
       </div>
</body>

js代码存放数据

<script>
        //TODO:vue第二部分：脚本js代码用来存放数据的
        new Vue({
            //1.作用的视图
            //TODO:el是element元素的简写，
          //通过视图即html标签的id属性值进行关联，这里的app是上述视图中div
            //标签的id属性值
            el:"#app",
            //2.存放的数据
            /*
                数据模型：
                    1)data:{
                        name:value,
                        name:value
                        ......
                    }
            */
            data:{
                msg:"vue基础入门"
            }，
          methods:{
          		show:function(){
 
       		 }
        }

        });
</script>

2.vue常用指令

(1)vue指令介绍

在vue中指令是作用在视图中的即html标签，可以在视图中增加一些指令来设置html的标签的某些属性和文本。

指令都是以带有v-前缀的特殊属性。

(2)使用vue指令

使用指令时，通常编写在标签的属性上，值可以使用JS表达式。

(3)常见的vue指令

v-html

需求：使用文本插值v-html和插值表达式**{{}}**获取vue中data数据

<标签名 v-html="vue中data的key"></标签名>
说明：文本插值v-html通过data的key获取value显示标签的文本中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本插值</title>
</head>
<body>
<!--视图-->
<div id="div">
    <div>{{msg}}</div>
    <!--使用文本插值指令：v-html-->
    <div v-html="msg"></div>
    <div v-text="msg"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    //脚本
    new Vue({
        el:"#div",
        data:{
            msg:"<h1>Hello Vue</h1>"
        }
    });
</script>
</html>

v-bind

需求：给html标签绑定属性

完整写法
<标签名 v-bind:属性名="data中key"></标签名>
简写：常用 *****
<标签名 :属性名="data中key"></标签名>

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="div">
        <!--
            插件表达式不能写在属性中
        -->
        <a href="{{url}}">百度一下</a>

        <br>
        <!--
            v-bind：为 HTML 标签绑定属性值
        -->
        <a v-bind:href="url">百度一下</a>
        <br>
        <!--
            v-bind 可以省略不写
        -->
        <a :href="url">百度一下</a>
        <br>
        <!--
            也可以绑定其他属性
            给当前div标签绑定一个class属性，属性值通过data中的keycls获取到my，
            这里相当于
             <div class="my">我是div</div>
        -->
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"http://www.baidu.com",
            cls:"my"
        }
    });
</script>
</html>

v-if

需求：判断vue中data的某个变量的值，对3取余，余数为0显示div1，余数为1显示div2，否则显示div3

<标签名 v-if="条件表达式">满足条件显示的内容</标签名>
<标签名 v-else-if="条件表达式">满足条件显示的内容</标签名>
.......
<标签名 v-else>上述条件都不满足执行的内容</标签名>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余
            余数为0显示div1
            余数为1显示div2
            余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <!--注意：如果不满足上述条件，则执行v-else，这里不用书写判断条件-->
        <div v-else>div3</div>


    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:2,
           flag:true
        }
    });
</script>
</html>

v-show

需求：获取Vue中data的布尔类型数据并显示

<标签名 v-show="data中的key">文本</标签名>
说明：
1.如果data中的key的值是true，则显示标签文本内容，如果是false则不显示标签文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
<div id="div">
    
    <!--v-show指令-->
    <div v-show="flag">div4</div>

    <!--
       v-if  v-show 他们俩虽然都是控制元素是否显示，但是底层的原理不一样
           v-if 如果条件为false，页面中根本没有这个元素
           v-show如果条件为false，页面中有这个元素只不过它的display属性值为none
   -->
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#div",
        data: {
            num: 2,
            flag: false
        }
    });
</script>
</html>

v-show和v-if区别：

1.v-if：如果条件不满足，那么在页面中没有任何标签内容，直接删除

2.v-show:如果条件不满足，是通过设置css样式的属性display，设置属性值为none来隐藏标签，标签还在页面中，只是我们看不见

v-for

遍历数组或者对象

增强for循环：掌握
for(int x : arr){}
<标签名 v-for="x in 数组或者对象名或者集合名">
     {{x}} 使用插值表达式获取元素
</标签名>

普通for循环：了解
<标签名 v-for="(x,index) in 数组或者对象名">
   元素:{{x}},索引:{{index}}
</标签名>
说明：x和index属于标识符


<li v-for="(元素,索引) in 容器名或者对象名">
	{{元素}}
</li>
如果遍历的是对象，那么会将对象中的key作为索引返回。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
</head>
<body>
    <div id="div">
        <ul>
            <!--
               类似于增强for循环
               1. element是遍历得到的每一个元素(变量名可以自定义)
                   有一个作用域,它的作用于在当前的这个循环中
               2. names 是被遍历的数组或对象
               3.我们在标签文本中使用插值表达式根据遍历数组的每个元素的变量element获取对应数据
              -->
            <!--需求：遍历names数组-->
            <li v-for="element in names">
                {{element}}
            </li>
            <!--需求：遍历对象student-->
            <!--
                1.stu 表示对象中的每组数据 :张三 23
                2.student表示遍历的对象名
            -->
            <li v-for="stu in student">
                {{stu}}
            </li>
            <!--
                类似于普通for循环(了解)
            -->
            <!--需求：遍历names数组-->
            <!--
                1.element表示数组的元素
                2.index表示数组中的索引
            -->
            <li v-for="(element,index) in names">
                元素:{{element}},索引:{{index}}
            </li>
            <!--需求：遍历对象student-->
            <!--
                结果：
                元素:张三,索引:name
                元素:23,索引:age
                注意：在vue中使用v-for遍历对象时，使用普通for循环遍历，索引是对象中的key或者变量
            -->
            <li v-for="(element,index) in student">
                元素:{{element}},索引:{{index}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            //数组
            names:["张三","李四","王五"],
            //对象
            student:{
                name:"张三",
                age:23
            }
        }
    });
</script>
</html>

v-on

给视图绑定事件

<标签名 v-on:事件名="调用的是vue中的js函数"></标签名>
简写：掌握
<标签名 @事件名="调用的是vue中的js函数"></标签名>
说明：
1.在vue中绑定的事件名都是将原生js的事件名去掉on:click  blur...

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>

<body>
    <div id="div">
        <div>{{name}}</div>

        <!--
            v-on：为 HTML 标签绑定事件
        -->
        <button onclick="fn();">以前方式_单击_改变div的内容</button>
        <!--
            1.v-on:click="change();" 给当前标签即视图绑定一个单击事件，在事件的属性值中直接调用vue中的函数change()
        -->
        <button v-on:click="change();">单击_改变div的内容</button>
        <button v-on:dblclick="change();">双击_改变div的内容</button>

        <button @click="change();">简写_改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let ve = new Vue({
        el:"#div",
        data:{
            name:"黑马程序员"
        },
        methods:{
            change(){
                this.name = "传智播客";
            }
        }
    });

    //定义原生js函数
    function fn() {
        //调用vue中的函数change
        ve.change();
    }
</script>
</html>

v-model

可以实现双向数据绑定：

• vue中的data数据更改，然后视图中的显示内容也会随着改变
• 视图中的内容改变，vue中的data数据也会随着改变

单向数据绑定：

• vue中的data数据更改，然后视图中的显示内容也会随着改变

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
            <!--
                单向绑定
            -->
            <!--
                :value="username" 表示给当前input标签绑定value属性，username是vue中data的key
            -->
            姓名_单向绑定：<input type="text" name="username" :value="username">
            <br>
            <!--
                双向绑定
                1.v-model="username":表示给当前input标签进行双向数据绑定，显示到输入框中，
                直接根据key即username获取value
            -->
            姓名_双向绑定：<input type="text" name="username" v-model="username">
            <br>
            年龄：<input type="number" name="age" v-model="age">
            性别:<input type="text" name="gender" v-model="gender">

        </form>
            {{username}}
        <hr>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:23,
            gender:"男"
        }
    });
</script>
</html>

v-model表单绑定实现双向数据绑定的原理：

MVVM模型(Model,View,ViewModel)：是MVC模式的改进版
在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel，它是桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。

3.vue声明周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Vue的生命周期'
        },
        //vue对象创建前，所有内容都是未定义类型
        beforeCreate: function () {
            console.group('------beforeCreate创建前状态------');
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
            console.log("%c%s", "color:red", "message: " + this.message);//undefined
        },
        //表示vue对象创建完毕
        //我们可以在该生命周期中先准备好数据，然后视图此时还没准备好
        created: function () {
            console.group('------created创建完毕状态------');
            //el的值是undefined说明视图还没有准备好
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            //说明在该生命周期中数据已经准备好了，
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        //就是vue挂载视图前，还没有将数据挂载到视图中
        beforeMount: function () {
            console.group('------beforeMount挂载前状态------');
            console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        //就是vue挂载视图后，vue中的data数据已经挂载到视图中了
        mounted: function () {
            console.group('------mounted 挂载结束状态------');
            console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        //表示更新前 必须有数据的更新才会执行该生命周期
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            let dom = document.getElementById("app").innerHTML;
            console.log(dom);
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        //更新完成
        updated: function () {
            console.group('updated 更新完成状态===============》');
            let dom = document.getElementById("app").innerHTML;
            console.log(dom);
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        //销毁前
        //必须执行销毁方法才可以执行该生命周期
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        //销毁后
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        }
    });


    // 更新data中message数据值
    vm.message = "hehe";

    // 销毁Vue对象
    vm.$destroy();
    vm.message = "hehe";// 销毁后 Vue 实例会解绑所有内容,更新无效
</script>
</html>

六、ElementVue脚手架

1.Element UI

(1)lement介绍

• Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库；
• 使用Element前必须要有Vue；
• 组件：组成网页的部件，例如超链接、按钮、图片、表格等；
• Element官网：https://element.eleme.cn/#/zh-CN

(2)快速入门

• 下载element组件库
• 在当前前端项目中引入组件库
• 创建页面，在页面中引入组件库和样式

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <!-- 引入VUE -->
     <script src="../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../element-ui/lib/index.js"></script>

(3)基础布局

将页面分成最多 24 个部分，自由切换。并且支持响应式布局。

(4)容器布局

注意：<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

(5)表单组件

由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的 表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

(6)表格组件

用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作。

(7)导航栏组件

导航菜单默认为垂直模式(就是不写)，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color(菜单的背景色)、text-color(菜单的文字颜色)和active-text-color(当前激活菜单的文字颜色).

小结：

• 使用步骤：

1.下载Element核心库。
2.引入Element样式文件。
3.引入Vue核心js文件。
4.引入Element核心js文件。
5.借助常用组件编写网页。

• 常用组件：

网页基本组成部分，布局、按钮、表格、表单等等~~~
常用组件不需要记住，只需要在Element官网中复制并学会修改使用即可。

2.Node.js

• 学习

官网：https://nodejs.org/zh-cn/ 
中文学习网：http://nodejs.cn/learn

• 介绍

1.Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用了一个
事件驱动、非阻塞式I/O模型，使其轻量又高效。
2.前端的底层html，css和js这些都不需要编译，由浏览器解释运行（解释型语言）
3.Node.js的包管理器npm，是全球最大的开源库生态系统

• 安装

下载对应你系统的Node.js版本:[https://nodejs.org/en/download/](https://nodejs.org/en/download/)

历史版本：https://nodejs.org/zh-cn/download/releases/

• 测试

测试，在命令提示符下输入命令 `node -v`

会显示当前node的版本

3.nodejs的包管理器npm

(1)使用npm进行初始化

npm init

(2)使用npm在本地即当前模块下安装软件

npm install 安装的技术

(3)全局安装

【1】查看你的电脑存放依赖的全局位置

npm root -g

【2】向全局位置安装依赖

npm install 安装的技术 -g  =====> g:global全局的意思
举例：向全局位置安装vue
npm install vue -g

(4)淘宝NPM镜像【建议使用】

【1】下载步骤：

1.更换成淘宝的源

npm config set registry https://registry.npm.taobao.org

2.降低版本

npm install [email protected] -g

【2】验证是否安装成：

【3】使用cnpm安装软件：

cnpm install -g axios

【4】使用npm下载淘宝镜像报错问题：

参考：

4.webpack

【1】什么是webpack

webpack 是一个现代 javascript 应用程序的 静态模块打包器 (module bundler)

待会要学的 vue-cli 脚手架环境, 集成了 webpack, 所以才能对各类文件进行打包处理。

webpack是一个 静态模块 打包器,可以做以下的这些工作：

1. 语法转换(主要是浏览器兼容)
   • less/sass转换成css
   • ES6转换成ES5
   • …
2. html/css/js 代码压缩合并 (打包)；
3. webpack可以在开发期间提供一个开发服务器；

【2】Webpack安装

全局安装

cnpm install [email protected] -g
cnpm install [email protected] -g

安装后查看版本号

webpack -v
webpack-cli -v

【3】快速入门

方式一：webpack原始方式

（1）新建文件夹 work3，在创建src文件夹，创建 bar.js

exports.info=function(str){
   document.write(str);
}

（2）src下创建logic.js

exports.add=function(a,b){
	return a+b;
}

（3）src下创建main.js

var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));

说明：上述具有多个js文件，那么我们在实际开发中使用的时候会导入过多的js文件，使用起来不方便，那么我们可以将上述多个js文件打包成一个js文件。

（4）创建配置文件webpack.config.js ，该文件与src处于同级目录

var path = require("path"); // 导入 node.js 中专门操作路径的模块，固定写法
//执行webpack命令的时候会读取到module.exports中的内容
module.exports = {
    //执行webpack命令的时候,读取入口main.js，由于main.js关联bar.js和logic.js，所以会将这三个js文件合并到一个js文件中
	entry: './src/main.js', // 打包入口文件的路径
    //输出文件位置
	output: {
        //__dirname表示当前工程目录
		path: path.resolve(__dirname, './dist'),  // 输出文件的存放路径
		filename: 'bundle.js'  // 输出文件的名称
	}
};

以上代码的意思是：读取当前目录下src文件夹中的main.js（入口文件）内容，把对应的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

webpack 的 4.x 版本中默认约定：

• 打包的入口文件为 src -> main.js
• 打包的输出文件为 dist -> index.js

（5）执行编译命令

webpack

执行后查看bundle.js 会发现里面包含了上面两个js文件的内容

（6）创建index.html ,引用bundle.js

<!doctype html>
<html>
  <head>  
  </head>
  <body>   
    <script src="dist/bundle.js"></script>
  </body>
</html>`

创建完毕,完整目录如下：

测试调用index.html，会发现有内容输出：Hello world!300

方式二：基于NPM方式

1. 新建项目空白目录，并运行npm init –y 命令，初始化包管理配置文件package.json

   -y 可以直接跳过配置

1. 新建 src 源代码目录,并且把 bar.js 和 logic.js 和 main.js 文件复制到 src目录

2. 创建index.html ,引用bundle.js

   <!doctype html>
   <html>
     <head>  
     </head>
     <body>   
       <script src="dist/bundle.js"></script>
     </body>
   </html>
   

3. 运行 npm install webpack webpack-cli 命令，安装webpack相关的包

   如果全局安装过webpack 和 webpack-cli工具, 此步骤可跳过

4. 在项目根目录中，创建名为webpack.config.js 的 webpack配置文件同上

   var path = require("path");
   module.exports = {
   	mode: 'development', // mode 用来指定构建模式development、production
   	entry: './src/main.js',
   	output: {
   		path: path.resolve(__dirname, './dist'),
   		filename: 'bundle.js'
   	}
   };
   

   mode: ‘development’ //mode 用来指定构建模式、production：生产模式（压缩）

5. 在 package.json 配置文件中的scripts节点下，新增dev脚本如下：

   {
     "name": "work4",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "dev": "webpack"  //script 节点下的脚本，可以通过 npm run 执行
     },
     "keywords": [],
     "author": "",
     "license": "ISC"
   }
   
   

   完整代码结构：

在终端中运行 npm run dev 命令，启动webpack进行项目打包。

注意是在package.json 包下运行该命令

点击index.html文件查看结果, 会发现有内容输出：`Hello world!300

说明：使用npm命令运行的原因是后期使用webpack命令的时候，命令会很多，不仅仅只有webpack几个字母，不好记，而使用：npm run dev命令执行无论webpack命令有多少都会执行。

(1)作用

**将前端的文件进行打包。**可以将打包后的文件发布到前端服务器上；

(2)webpack打包应用

webpack.config.js

var path = require("path"); // 导入 node.js 中专门操作路径的模块，固定写法
//执行webpack命令的时候会读取到module.exports中的内容
module.exports = {
    //执行webpack命令的时候,读取入口main.js，由于main.js关联bar.js和logic.js，
	//所以会将这三个js文件合并到一个js文件中
	entry: './src/main.js', // 打包入口文件的路径
    //输出文件位置
	output: {
        //__dirname表示当前工程目录
		path: path.resolve(__dirname, './dist'),  // 输出文件的存放路径
		filename: 'bundle.js'  // 输出文件的名称
	}
};

在终端执行webpack命令

(3)基于npm方式打包

记住命令：

npm run dev 启动项目

(4)webpack-dev-server开发服务器

作用：当更改打包的源码的js文件时会自动更新 ====> 资源热更新。

• 介绍：

修改main.js代码如下：

需要每次在修改源码之前需要重新打包：

每次修改代码, 都需要重新打包, 才能看到最新的效果, 且实际工作中, 打包非常费时 (30s - 60s) 之间

为什么费时?

1. 构建依赖
2. 读取对应的文件, 才能加载
3. 用对应的 loader 进行处理
4. 将处理完的内容, 写入到 dist 目录

简而言之就是我们希望修改源码完毕之后，不用再每次重新打包，运行的结果直接是修改后的结果。

解决方案：我们可以开启一个开发服务器webpack-dev-server, 在电脑内存中打包, 缓存一些已经打包过的内容, 只重新打包修改的文件 (热更新)

• 使用：

如果模块(work3)下，没有package.json 文件，那么需要在模块下初始化命令：npm init即可

1. 修改 package.json -> scripts 中的 dev, dependencies, devDependencies如下：

   devDependencies这是开发时依赖, 上线不依赖

{
  "name": "work4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": { 
    "webpack-dev-server": "^3.11.2"
  }
}

然后运行 cnpm install 指令,安装webpack,webpack-cli 和 webpack-dev-server

1. 修改 webpack.config.js 文件,添加 devServer

var path = require("path");
module.exports = {
	mode: 'development', // mode 用来指定构建模式development、production
	entry: './src/main.js',
	devServer: {
		port: 8099,// 服务器占用8099端口
		open: true  // 自动打开浏览器
	},
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
};

1. 删除之前的dist目录

2. 将 index.html 中，script 脚本的引用路径

   <!doctype html>
   <html>
     <head>  
     </head>
     <body>   
       <!-- 内存中读取 -->
       <script src="/bundle.js"></script>
     </body>
   </html>
   

3. 运行 npm run dev 命令

4. 在浏览器中访问 http://localhost:8099地址，查看自动打包效果

webpack-dev-server 会启动一个实时打包的 http 服务器

webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，基于内存

(5)小结

vue脚手架之前安装的软件：

• 安装node.js
• 安装淘宝镜像 cnpm
• 安装打包器：webpack

5.vue-cli脚手架（掌握）

(1)常见命令

# 1.启动项目
npm run dev
# 2.安装当前项目所有的依赖
cnpm i

(2)vue脚手架入门

• 安装脚手架到全局位置

cnpm install vue-cli -g

• 使用脚手架命令初始化工程（开发中都是前端工程师做的）

cnpm install vue-cli -g //只需安装一次，可以使用cnpm安装，通过
  
//Windows使用 ‘vue init’ 的运行效果将会跟 ‘[email protected]’ 相同
// work5 是模块名字
vue init webpack work5

• vue-cli脚手架常见的目录结构

#1.main.js :表示入口文件
#2.App.vue :表示根组件，在脚手架中只要以.vue结尾的都是组件
	<template>
  		书写html标签的，只能书写一个根标签
  		<div>
  		
  		</div>
	</template>

    <script>
		书写js代码的
    </script>

    <style>
		书写css样式
    </style>
    例如：
    	<template>
              <div id="app">
                <!-- 脚手架的logo图片 -->
                <!-- <img src="./assets/logo.png"> -->
                <!-- 组件输出位置，欢迎页面输出的文字是由下面的标签输出的 -->
                <!-- <router-view/> -->
                <h1>{{msg}}</h1>
              </div>

            </template>

            <script>
            export default {
               data(){
                 return {
                    msg:"vue架手架挺难的"
                 }
               }
            }
            </script>

            <style>
            /* #app {
              font-family: 'Avenir', Helvetica, Arial, sans-serif;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
              text-align: center;
              color: #2c3e50;
              margin-top: 60px;
            } */
            </style>

    
#3.index.html后期不会修改

• 路由

【1】概念：在vue脚手架中路由表示浏览器地址栏输入的路径和组件的映射关系。

• 脚手架总结

【1】config/index.js

【2】main.js

【3】根组件

【4】路由

注意：前端工程师会在src下面创建一个文件夹:views。存放自己创建的组件即以.vue结尾

6.vue-cli脚手架练习

(1)模拟网易云音乐

【1】在根组件App.vue添加超链接

<template>
  <div id="app">
    <!-- 脚手架的logo图片 -->
    <img src="./assets/logo.png">
    <!-- 访问vue ,必须加#-->
    <a href="#/">访问vue</a>
    <a href="#/friend">访问好友</a>
    <!-- 组件输出位置，欢迎页面输出的文字是由下面的标签输出的 -->
    <router-view/>
    <!-- <h1>{{msg}}</h1> -->
  </div>

</template>

<script>
export default {
  //  data(){
  //    return {
  //       msg:"vue架手架挺难的"
  //    }
  //  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

【2】在路由中配置访问的路径和组件的关系

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// @表示src目录 ==>src/views/friend.vue
//http://localhost:8080/#/friend===> path: '/friend'===> component: friend===>import friend from===>src/views/friend.vue
import friend from '@/views/friend'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/friend',
      name: 'haha',
      component: friend
    }
  ]
})

【3】创建组件

<template>
    <div id="app">
        {{username}}
    </div>
</template>

<script>
export default {
    data(){
        return{
            username:"柳岩"
        }
    }
}
</script>

<style>

</style>

(2)将Element-UI组件库添加到vue脚手架中

【1】安装

1.在当前工程下安装element

cnpm i element-ui -S

2.在main.js文件中引入element内容

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//导入element
import ElementUI from 'element-ui';
// 导入element的css样式
import 'element-ui/lib/theme-chalk/index.css';
// 导入App.vue根组件
import App from './App'
// 导入路由
import router from './router'
// 让vue对象使用ElementUI
Vue.use(ElementUI);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

【2】代码实现

1.在App.vue根组件中书写超链接

<template>
  <div id="app">
    <!-- 脚手架的logo图片 -->
    <img src="./assets/logo.png">
    <!-- 访问vue ,必须加#-->
    <a href="#/">访问vue</a>
    <a href="#/friend">访问好友</a>
    <a href="#/element">访问element</a>
    <!-- 组件输出位置，欢迎页面输出的文字是由下面的标签输出的 -->
    <router-view/>
    <!-- <h1>{{msg}}</h1> -->
  </div>

</template>

<script>
export default {
  //  data(){
  //    return {
  //       msg:"vue架手架挺难的"
  //    }
  //  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.在路由中配置路径和组件的关系

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// @表示src目录 ==>src/views/friend.vue
import friend from '@/views/friend'
import element from '@/views/element'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/friend',
      name: 'haha',
      component: friend
    },
    {
      path: '/element',
      name: 'element',
      component: element
    }
  ]
})

3.创建组件

 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

<style>

</style>

7.vue脚手架综合案例

(1)环境搭建

【1】后端环境（day04）

• 执行sql语句

CREATE DATABASE dbvue2;

USE dbvue2;

-- 创建学生表
CREATE TABLE student(
	number VARCHAR(10) UNIQUE,   -- 学号
	NAME VARCHAR(10),            -- 姓名
	birthday DATE,               -- 生日
	address VARCHAR(200)         -- 地址
);
INSERT INTO student VALUES ('hm001','张三','1995-05-05','北京市昌平区');
INSERT INTO student VALUES ('hm002','李四','1996-06-06','北京市海淀区');
INSERT INTO student VALUES ('hm003','王五','1997-07-07','北京市朝阳区');
INSERT INTO student VALUES ('hm004','赵六','1998-08-08','北京市丰台区');
INSERT INTO student VALUES ('hm005','周七','1999-09-09','北京市顺义区');
INSERT INTO student VALUES ('hm006','孙悟空','2000-01-01','花果山水帘洞');
INSERT INTO student VALUES ('hm007','猪八戒','2001-02-02','高老庄翠兰家');
INSERT INTO student VALUES ('hm008','沙和尚','2002-03-03','流沙河河底');
INSERT INTO student VALUES ('hm009','唐玄奘','2003-04-04','东土大唐');

• 修改连接数据库的参数
• 启动后端项目

【2】前端环境

将work8.zip前端项目放到vscode的工作空间，然后解压

• 安装依赖：cnpm i

• 启动项目 npm run dev

七、web

1.内容介绍

Web（World Wide Web）即全球广域网，也称万维网。它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图像信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

简而言之就是我们平时上网浏览的网页，玩的网页游戏，上网下载资源。对于程序员而言就是前段知识、web服务器知识和数据库知识的结合就是web。

web发展历程：

• web1.0

1994年在中国第一个web网站是中国黄页，由马云。属于静态网页。只能看，不能交互。发布租赁信息。

• web2.0

动态网站。网站数据是时时更新的。数据来自于数据库的。登录网站显示用户名，天气预报，微博头条。

可以实现前后台数据的交互

注意：

网站：前端知识、web服务器知识和数据库知识。包括网页
网页：前端页面html页面

2.软件架构模式

• BS：browser server 浏览器服务器
  • 优点：
    • 只需要服务器，用户下载浏览器，维护方便
    • 减少用户的磁盘空间
  • 缺点：
    • 给服务器造成压力
    • 用户观看体验不友好

• CS：client server 客户端 服务器
  • 优点：
    • 具有客户端和服务器端，减轻服务器的压力
    • 用户观看体验友好
  • 缺点：
    • 维护成本大
    • 版本升级麻烦，占用户磁盘空间

3.B/S和C/S通信模式特点

• 先有请求
• 后有响应
• 请求和响应是成对出现的

4.web资源

• 资源：

计算机中数据文件

• 分类：

  • 静态资源：

    html、css、js。只能书写静态网站，静态网站的数据永远不会发生改变。

  • 动态资源：

    使用一些语言(JAVAEE)可以实现数据的变化，例如：java语言。

5.URL请求路径

【1】作用：通过资源路径可以访问到具体的服务器。

【2】URL （Uniform Resource Locator） ，统一资源定位符是对互联网上资源位置的一种表示，互联网上的每个文件都有一个唯一的URL。

【3】格式：

协议://服务器的ip地址:服务器的端口号/项目名/资源路径  jdbc:mysql://localhost:3306/数据库名
 https://www.jd.com/
说明：
	1）协议：是一种规范。类似于我们之前讲解的TCP UDP(传输层)，这里讲解的是应用层(http https协议)
	2）服务器的ip地址：就是访问的服务器的地址。同一个网段中服务器ip地址是唯一的。
		说明：如果我们在自己电脑上进行练习，ip地址书写127.0.0.1或者localhost
	3）服务器的端口号：访问服务器端的进程号，属于唯一标识。
	4)/项目名/资源路径

【4】浏览器通过url访问服务器的过程

https://www.baidu.com/s?ie=UTF-8&wd=java

6.服务器

【1】服务器，是提供计算服务的设备。由于服务器需要请求响应，并进行处理，因此一般来说，服务器应具备承担服务并且保障服务的能力。

【2】分类：

• 硬件服务器：

服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。

• 软件服务器:

服务器软件本质上是一个应用程序（由代码编写而成），运行在服务器设备上。能够接收请求并根据请求给客户端响应数据，发布资源(静态和动态)。数据库服务器、邮件服务器(易邮)、网页服务器（tomcat nginx发布网页）等

【3】常见的web服务器

* Tomcat: Apache软件基金开源免费的web服务器,支持JavaEE规范（Servlet/Jsp）.

* Jetty:Apache组织开源免费的小型web服务器,支持JavaEE规范.
* JBoss: RedHat红帽公司的开源免费的web服务器,支持JavaEE规范.
* Glass Fish:Sun公司开源免费的web服务器,支持JavaEE规范.

---------------------------------------------------------------------

* WebLogic: Oracle公司收费的web服务器,支持JavaEE规范.
* WebSphere:IBM公司收费的web服务器,支持JavaEE规范.

八.tomcat

1.目录结构

2.启动和关闭以及访问tomcat

• 启动
  

• 访问

在浏览器地址栏上输入：localhost:8080

• 关闭

3.解决启动tomcat失败的问题

【1】端口号冲突

打开命令行输入：netstat -nao；找到端口号为8080对应的PID

打开任务管理器—>详细信息，找到对应的PID，然后结束对应的任务。

【2】jdk环境变量

打开命令行，输入java -version，查看是否出现版本号，如果没有，请检查java_home是否有问题。

【3】删除环境变量中TOMCAT_HOME

右击此电脑—>属性—>高级系统设置---->环境变量

4.使用tomcat发布web项目

【1】在tomcat的安装目录webapps下发布web资源

(1)在webapps下创建一个文件夹作为项目名

(2)在该文件夹下创建一个静态资源html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    itcast
</body>
</html>

(3)到bin目录启动tomcat---->双击startup.bat文件

(4)在浏览器中访问

【2】在idea中创建web项目

(1)

(2)

(3)删除一些内容

pom.xml留下的内容

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.itheima.sh.heima153</groupId>
    <artifactId>day15_web02</artifactId>
    <version>1.0-SNAPSHOT</version>
    <name>day15_web02</name>
    <!--TODO:web工程的打包方式。普通java工程打包方式是jar,也是默认的。不能删除-->
    <packaging>war</packaging>

    <properties>
        <!--TODO:jdk编译版本-->
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.source>1.8</maven.compiler.source>
    </properties>

    <dependencies>
        <!--TODO:不要删除-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.3.1</version>
            </plugin>
        </plugins>
    </build>
</project>

5.使用在idea中创建的web项目发布资源

九、Servlet

之前我们使用浏览器访问的是静态资源即html。web资源除了静态资源还有动态资源，即数据可以实现变化，并且前端浏览器通过动态资源可以实现数据的交互。那么如果想客观客户端访问服务器的动态资源，需要我们在后端中定义类直接或者间接实现Servlet接口。

1.Servlet介绍

• Servlet是一个接口，即规范
• 定义的实现类必须实现接口中的所有抽象方法
• Servlet全称Server Applet服务器端的程序，是sun公司提供一套规范，用来处理客户端请求、响应给浏览器的动态web资源。其实servlet的实质就是java代码，通过java的API动态的向客户端输出内容，并且从客户端接收数据。
• 一个类要想通过浏览器被访问到，那么这个类就必须直接或间接的实现Servlet接口

2.Servlet作用：

1.接收客户端的请求

2.处理业务逻辑

3.将响应数据给浏览器

3.Servlet快速入门

【1】步骤

• 创建web项目
• 导入servlet依赖

	<!--导入依赖-->
    <dependencies>
        <!--导入servlet依赖-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
        </dependency>
    </dependencies>

• 在创建的web项目中自定义类实现Servlet接口
• 在自定义类中实现Servlet接口中所有的抽象方法
• 在实现Servlet接口的service方法体中书写代码处理业务逻辑

void service(ServletRequest req, ServletResponse res)  

• 在web项目的核心配置文件web.xml中配置访问servlet的路径。
  • 说明：这样配置是告知tomcat有具体的Servlet类需要被访问。
• 启动tomcat
• 在浏览器中访问servlet类

【2】实现

• 创建maven的web项目
• 导入servlet的依赖

 		<!--servlet-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <!--编译 测试需要，运行时不需要-->
            <scope>provided</scope>
        </dependency>

• 在创建的web项目中自定义类实现Servlet接口
• 在自定义类中实现Servlet接口中的所有的抽象方法
• 在实现Servlet接口的service方法体中书写代码处理业务逻辑

package com.itheima.sh.a_demo_01;

import javax.servlet.*;
import java.io.IOException;

/*
    2.在创建的web项目中自定义类实现Servlet接口
 */
public class HelloWorldServlet implements Servlet{
    //3.在自定义类中实现Servlet接口中的所有的抽象方法

    //4.在实现Servlet接口的service方法体中书写代码处理业务逻辑
    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        System.out.println("service....");
    }

    @Override
    public void init(ServletConfig servletConfig) throws ServletException {

    }

    @Override
    public ServletConfig getServletConfig() {
        return null;
    }



    @Override
    public String getServletInfo() {
        return null;
    }

    @Override
    public void destroy() {

    }

}

• 在web项目的核心配置文件web.xml中配置servlet的路径

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
		  http://java.sun.com/xml/ns/javaee/web-app_3_1.xsd"
           version="3.1">
    <!--
       5.在web项目的核心配置文件web.xml中配置访问servlet的路径。
	    说明：这样配置是告知tomcat有具体的Servlet类需要被访问。
    -->
    <!--
        1.<servlet> 表示将当前Servlet类注册到tomcat中，告知tomcat有一个类要被访问
    -->
    <servlet>
        <!--
            表示当前要被访问类的标识，在当前web.xml中要唯一，helloWorldServlet属于标识符
        -->
        <servlet-name>helloWorldServlet</servlet-name>
        <!--
            配置要访问 的servlet类，必须是类的全路径：包名.类名。
            说明：tomcat底层通过获取这里的类全路径使用反射技术调用当前类的无参构造方法创建对象
        -->
        <servlet-class>com.itheima.sh.a_demo_01.HelloWorldServlet</servlet-class>
    </servlet>
    <!--
        配置要访问的servlet类的映射路径
    -->
    <servlet-mapping>
        <!--这里要和上面的servlet-name文本值一致，这里找到上面的servlet-name-->
        <servlet-name>helloWorldServlet</servlet-name>
        <!--浏览器上地址栏上输入的映射路径及访问路径，这里必须加/-->
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>
</web-app>

• 启动tomcat

• 在浏览器中访问servlet类

4.Servlet的执行原理

【1】执行流程：

【2】原理

说明：

1.当我们点击run运行的时候，tomcat之所以会启动，是因为程序入口(main方法)在tomcat中

2.tomcat开始运行，会加载web项目里面的配置文件web.xml(xml解析，读取数据)

​ 主要是根据url-pattern 找到对应的servlet-class

3.然后tomcat进入等待状态(永不停止，除非手动关闭)

4.当用户在浏览器中输入地址：http://localhost:8080/hello就会定位到tomcat的访问的项目下面的某个servlet中

5.tomcat会根据 /hello 的servlet的虚拟路径 找到HelloServlet的全限定名

6.tomcat底层通过反射创建HelloServlet的对象，并调用HelloServlet的service方法：

Class clazz = Class.forName("全限定名");
Servlet servlet = clazz.newInstance();//实际上HelloServlet对象，向上转型
servlet.service();

5.Servlet生命周期

【1】生命周期：

指的是一个对象从生（创建）到死（销毁）的一个过程。

【2】生命周期的api：

// 1. servlet对象创建完毕，使用对象调用此方法，初始化方法，
//只有在第一次访问的时候执行一次
public void init(ServletConfig servletConfig);
// 2. 用户访问servlet时，调用此方法 (每次访问都会调用一次)
public void service(ServletRequest servletRequest, 
                    ServletResponse servletResponse);
// 3. servlet对象销毁时，调用此方法
public void destroy();

【3】Servlet生命周期的api执行时机图解

* 创建
	1）默认情况下
		用户第一次访问时，创建servlet，执行init方法
	
* 运行（提供服务）
		用户每次访问时，都执行service方法

* 销毁
		服务器正常关闭时，销毁servlet，执行destroy方法

【4】代码实现

package com.itheima.sh.a_servlet_01;

import javax.servlet.*;
import java.io.IOException;

public class Life01Servlet implements Servlet {
    /*
        反射调用无参构造方法创建对象
     */

    public Life01Servlet() {
        System.out.println("无参构造。。。。");
    }

    @Override
    public void init(ServletConfig servletConfig) throws ServletException {
        System.out.println("init。。。。");
    }

    @Override
    public ServletConfig getServletConfig() {
        return null;
    }

    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        System.out.println("service。。。。");
    }

    @Override
    public String getServletInfo() {
        return null;
    }

    @Override
    public void destroy() {
        System.out.println("destroy。。。。");
    }
}

【5】结果

1.何时创建servlet？

第一次访问servlet的时候创建

2.谁创建的？

tomcat服务器创建的

3.创建对象时做了什么？

调用无参构造方法创建对象，然后立刻调用init初始化方法

4.每次访问servlet执行哪个方法

service方法

5.何时销毁servlet？

关闭tomcat服务器，调用destroy方法

6.服务器启动，立刻加载Servlet对象

【1】问题：发现init默认第一次被访问的时候才调用，适合用来初始化项目数据；

​ 如果项目数据很多，加载就需要一定的时间，这样就会给用户的体验不好，因为要等比较久的时间

【2】解决：服务器一启动，就执行init方法

【3】实现：在web.xml核心配置文件中对应的servlet标签按照如下配置：

注意：

1.使用标签进行配置，表示标记容器是否应该在启动的时候加载这个servlet，(实例化并调用其init()方法)

2.它的文本值必须是一个整数，表示servlet应该被载入的顺序

3.如果文本值是负数：默认值是-1 【用户第一次访问时，创建】

4.当值大于等于0时，表示容器在应用启动时就加载并初始化这个servlet；

5.正数的值越小，该servlet的优先级越高，应用启动时就越先加载。

6.当值相同时，容器就会自己选择顺序来加载

 <servlet>
        <servlet-name>life01Servlet</servlet-name>
        <servlet-class>com.itheima.sh.a_servlet_01.Life01Servlet</servlet-class>
        <!--
            load-on-startup 标签可以让tomcat服务器启动就创建对应的servlet。标签文本值必须是整数：
            数字越小，创建servlet的优先级越高
        -->
        <load-on-startup>2</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>life01Servlet</servlet-name>
        <url-pattern>/life01</url-pattern>
    </servlet-mapping>

总结：

1.load-on-startup标签可以让tomcat服务器启动就创建对应的servlet。标签文本值必须是整数：

数字越小，创建servlet的优先级越高，建议是大于等于0的整数

<load-on-startup>2</load-on-startup>

2.配置load-on-startup标签后servlet生命周期如下：

7.Servlet实现方式

一共有三种：

快捷键：
1.ctrl + alt + u ：查看一个类的继承结构图
2.ctrl + h ：这个类的简化版继承结构

（1）实现Servlet方式二_自定义类继承GenericServlet

• 编写Servlet实现类，只要重写service方法

【1】描述问题

Servlet中使用频率最高，最重要的方法是service方法（大部分场景）
但是我们每次编写Servlet实现类，都是直接实现Servlet接口，重写5个抽象方法(太冗余)

【2】解决问题

我们可以自定义类继承GenericServlet抽象类，只在子类中重写service即可。
不用重写所有的抽象方法。

【3】步骤

1.自定义类继承GenericServlet类

2.在子类中重写service方法，处理业务逻辑

3.在web.xml中进行映射路径的配置

4.在浏览器客户端访问servlet类

【4】代码实现：

package com.itheima.sh.a_servlet_01;

import javax.servlet.GenericServlet;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import java.io.IOException;

/*
1.自定义类继承GenericServlet类
 */
public class Demo01Servlet extends GenericServlet {


    //    2.在子类中重写service方法，处理业务逻辑
    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        System.out.println("service....");
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
		  http://java.sun.com/xml/ns/javaee/web-app_3_1.xsd"
           version="3.1">

    <!--3.在web.xml中进行映射路径的配置-->
    <servlet>
        <servlet-name>demo01Servlet</servlet-name>
        <servlet-class>com.itheima.sh.a_servlet_01.Demo01Servlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>demo01Servlet</servlet-name>
        <url-pattern>/demo01</url-pattern>
    </servlet-mapping>


</web-app>

小结：方式二的好处是只需要重写service方法，在方法体内部处理业务逻辑即可。

（2）实现Servlet方式三_自定义类继承HttpServlet

根据页面不同的请求方式执行具体的请求方法

【1】问题：

我们在前端的form表单中，method属性，学习过有两种常用的请求方式（get/post）

我们现在的service方法是这样的：
用户发送请求，无论是什么请求方式，都会统一的执行service方法，我们无法很好的区别是哪一种
请求方式

【2】解决问题：

我们可以自定义类继承HttpServlet就可以根据不同的请求做不同的处理：get post

【3】步骤：

1.自定义类继承HttpServlet
2.在子类中根据不同的请求方式重写请求方式的方法：
	get请求---重写doGet方法
	post请求---重写doPost方法
3.在方法体中书写业务逻辑的代码
4.在web.xml中进行配置
5.浏览器客户端访问servlet

【4】实现

package com.itheima.sh.a_servlet_01;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/*
    1.自定义类继承HttpServlet
 */
public class Demo02Servlet extends HttpServlet {
    /*
        	2.在子类中根据不同的请求方式重写请求方式的方法：
			get请求---重写doGet方法
			post请求---重写doPost方法
     */
    //	3.在方法体中书写处理业务逻辑的代码
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("get....");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("post....");
    }
}

	<!--4.在web.xml中进行配置-->
    <servlet>
        <servlet-name>demo02Servlet</servlet-name>
        <servlet-class>com.itheima.sh.a_servlet_01.Demo02Servlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>demo02Servlet</servlet-name>
        <url-pattern>/demo02</url-pattern>
    </servlet-mapping>

小结：

1.实现servlet方式三的好处：

• 可以根据不同的请求执行对应的方法
• 处理满足http协议的请求和响应

2.对ServletRequest和HttpServletRequest接口的说明：

​ 这个对象封装了浏览器发送的所有请求数据，兼容大部分协议。HttpServletRequest是子接口，可以匹配http协议下的所有请求。

（3）实现servlet方式三_继承HttpServlet的执行流程

疑问：就是正常浏览器访问tomcat服务器需要访问servlet接口中的service方法，但是方式三在子类中没有重写servlet中的service方法，只重写了doGet和doPost方法，那么底层是如果执行呢？

小结：

当我们访问自定义类的servlet的时候，先访问HttpServlet类实现Servlet接口中的service方法，在service方法体中调用了重载的service方法，在该方法体内部获取请求方式，根据不同的请求方式执行对应的方法。

get请求---doGet（）方法
post请求---doPost()方法

注意：查看某个类的成员结构快捷键：alt+7

（4）实现servlet的三种方式总结

1.自定义类实现Servlet接口，重写所有的抽象方法，
	不能处理满足http协议的请求和响应
2.自定义类继承GenericService抽象类，该抽象类是Servlet接口的子类，
	这种方式只重写service方法即可，但是不能处理满足http协议的请求和响应，
	同时不能根据具体的请求方式执行具体的方法
3.自定义类继承HttpServlet抽象类，该抽象类是GenericServlet的子类，
	根据不同的请求方式执行对应方法：掌握
				get---doGet
				post---doPost
	可以处理满足http协议的请求和响应

8.编写servlet常见的问题

（1）遇到500错误

表示服务器内部异常

（2）遇到404错误

浏览器客户端访问服务器的资源不存在

注意：报404的根本原因是用户操作不当导致的。

（3）遇到405错误

服务器servlet没有重写doGet或者doPost方法。

package com.itheima.sh.d_servlet_04;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/*
    TODO:编写Servlet常见异常
        1.服务器内部出现异常===在浏览器中显示的是500:HTTP Status 500 – Internal Server Error
            解决方案：找出异常位置修改代码
        2.浏览器出现404===就是用户问题，用户操作不当，访问的资源在服务器中不存在，基本都是路径有问题。HTTP Status 404 – Not Found
            解决方案：
                1）查看你在地址栏上输入的地址路径和服务器中的资源路径是否匹配
                2）当前项目配置了虚拟路径，但是你访问的时候没有加虚拟路径
                3) 访问的路径在当前项目中存在，但是在当前项目中的target位置不存在，
                    执行maven生命周期命令===clean清除target，重启启动tomcat即可
        3.浏览器出现405===子类Servlet没有重写父类HttpServlet类中的doGet和doPost方法导致调用了父类
            HttpServlet中doGet和doPost方法 HTTP Status 405 – Method Not Allowed
            解决方案：子类重写HttpServlet的doGet和doPost方法，并且在子类方法体中不能调用父类中的doGet和doPost方法，不能书写：
                super.doGet(req, resp);
 */
public class ExceptionDemo01Servlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("哈哈呵呵嘿嘿");
        //调用父类HttpServlet类中doGet(req, resp)，那么就会报错HTTP Status 405 – Method Not Allowed

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }
}

小结：

1.500错误：服务器异常

2.404错误：找不到资源

3.405错误：

​ 如果我们不重写doGet/doPost方法，那么父类的doGet/doPost方法会执行（继承），给浏览器响应一个错误：状态码405（http1.1）。

9.Servlet映射路径理解

能够配置一个Servlet映射单个和多个url

【1】一个Servlet映射单个url

【2】一个Servlet映射多个url

注解版本：

10.Servlet映射路径配置规范

servlet映射路径一共有四种：

（1）完全路径匹配：

就是访问什么在web.xml中配置什么路径。 /hello /user

 package com.itheima.sh.a_servlet_01;
 
 import javax.servlet.GenericServlet;
 import javax.servlet.ServletException;
 import javax.servlet.ServletRequest;
 import javax.servlet.ServletResponse;
 import java.io.IOException;
 
 public class PathOneServlet extends GenericServlet {
     @Override
     public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
         System.out.println("PathOneServlet....");
     }
 }
 

  <servlet>
         <servlet-name>pathOneServlet</servlet-name>
         <servlet-class>com.itheima.sh.a_servlet_01.PathOneServlet</servlet-class>
     </servlet>
 
     <servlet-mapping>
         <servlet-name>pathOneServlet</servlet-name>
         <!--完全路径匹配-->
         <url-pattern>/user/one</url-pattern>
     </servlet-mapping>

（2）目录匹配：/user/*

 package com.itheima.sh.a_servlet_01;
 
 import javax.servlet.GenericServlet;
 import javax.servlet.ServletException;
 import javax.servlet.ServletRequest;
 import javax.servlet.ServletResponse;
 import java.io.IOException;
 
 public class PathTwoServlet extends GenericServlet {
     @Override
     public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
         System.out.println("PathTwoServlet....");
     }
 }
 

 <servlet>
         <servlet-name>pathTwoServlet</servlet-name>
         <servlet-class>com.itheima.sh.a_servlet_01.PathTwoServlet</servlet-class>
     </servlet>
 
     <servlet-mapping>
         <servlet-name>pathTwoServlet</servlet-name>
         <!--目录匹配-->
         <url-pattern>/user/*</url-pattern>
     </servlet-mapping>

（3）后缀名匹配：*.do *.action

注意这里不能书写 / ，访问以.do或者.action结尾的资源路径，后缀名都属于标识符

 package com.itheima.sh.a_servlet_01;
 
 import javax.servlet.GenericServlet;
 import javax.servlet.ServletException;
 import javax.servlet.ServletRequest;
 import javax.servlet.ServletResponse;
 import java.io.IOException;
 
 public class PathThrServlet extends GenericServlet {
     @Override
     public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
         System.out.println("PathThrServlet....");
     }
 }
 

  <servlet>
         <servlet-name>pathThrServlet</servlet-name>
         <servlet-class>com.itheima.sh.a_servlet_01.PathThrServlet</servlet-class>
     </servlet>
 
     <servlet-mapping>
         <servlet-name>pathThrServlet</servlet-name>
         <!--后缀名匹配，前面不能加/-->
         <url-pattern>*.do</url-pattern>
     </servlet-mapping>

（4）缺省路径： /

如果上述三种路径都不满足就访问缺省路径。

 package com.itheima.sh.a_servlet_01;
 
 import javax.servlet.GenericServlet;
 import javax.servlet.ServletException;
 import javax.servlet.ServletRequest;
 import javax.servlet.ServletResponse;
 import java.io.IOException;
 
 public class PathFourServlet extends GenericServlet {
     @Override
     public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
         System.out.println("PathFourServlet....");
     }
 }
 

  <servlet>
         <servlet-name>pathFourServlet</servlet-name>
         <servlet-class>com.itheima.sh.a_servlet_01.PathFourServlet</servlet-class>
     </servlet>
 
     <servlet-mapping>
         <servlet-name>pathFourServlet</servlet-name>
         <!--缺省路径匹配-->
         <url-pattern>/</url-pattern>
     </servlet-mapping>

小结：完全路径匹配 > 目录匹配 > 后缀名匹配 > 缺省路径

11.绝对路径

【1】绝对路径有两种写法：

1.带网络三要素：
			http://ip地址：端口号/资源路径
2.不带网络三要素：
			/资源路径    这里的 / 不能省略，要求访问的资源必须在同一个服务器上

【2】代码实现

html：

<a href="http://127.0.0.1:8080/pathAbso">带网络三要素的绝对路径</a><br>
<a href="/pathAbso">不带网络三要素的绝对路径</a><br>

Servlet：

package com.itheima.sh.b_servlet_02;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class PathAbso01Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("get....");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("post....");
    }
}

web.xml

 	<servlet>
        <servlet-name>pathAbso01Servlet</servlet-name>
        <servlet-class>com.itheima.sh.a_servlet_01.PathAbso01Servlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>pathAbso01Servlet</servlet-name>
        <url-pattern>/pathAbso</url-pattern>
    </servlet-mapping>

12.相对路径

【1】相对路径：不是相对当前项目，而是针对当前浏览器地址栏上的url而言。

【2】案例一：

 #假设我们在浏览器地址栏访问的页面路径： http://localhost:8080/demo01.html
 #而在demo01.html页面想使用相对路径访问servlet： 
 #http://localhost:8080/pathAbso
 	 说明：
        如果在http://localhost:8080/demo01.html 
        页面中访问 http://localhost:8080/pathAbso 该servlet，
        我们通过url观察发现只有最后一级目录不一样，
        所以在demo01.html页面中相对的路径的写法是：
        ./pathAbso  这里的./表示当前路径 可以省略不写即直接写 pathAbso
 	

demo01.html

	<a href="./pathAbso">相对路径</a><br>
  <a href="pathAbso">相对路径</a><br>

【3】案例二：

  # 如果在http://localhost:8080/aaa/demo02.html 
  # 页面中访问 http://localhost:8080/pathAbso 该servlet
    我们通过url观察发现在demo02.html也面中书写访问的servlet即pathAbso
    和当前页面的父目录aaa是同等目录，所以我这里先找该页面的父目录，
    然后在找该servlet即pathAbso
    ../pathAbso    ../表示上一级目录或者父目录，
    找到父目录之后再找servlet即pathAbso

demo02.html

<a href="../pathAbso">相对路径</a><br>

13.Servlet3.0注解开发

【1】问题

说明：之前我们都是使用web.xml进行servlet映射路径的配置。

这样配置的弊端：web.xml中具有非常多个配置信息，显得非常臃肿并且容易出错。

【2】解决问题

使用web.xml配置映射路径的方式属于servlet2.5的技术。从servlet3.0开始引入注解配置访问servlet取代了web.xml配置。

   <!--  TODO:想使用注解开发导入的Servlet依赖必须是3.0以上的      -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>

【3】配置步骤

1.在包上右键---new---servlet（create new Servlet）
2.输入类名
3.在方法体内输入逻辑代码
4.在浏览器地址栏中输入访问的路径

【4】实现

1.在包上右键—new—servlet（create new Servlet）

2.输入类名

3.在方法体内输入逻辑代码

package com.itheima.sh.c_servlet_anno_03;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/annoDemo01Servlet")
public class AnnoDemo01Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("注解开发");
    }
}

4.在浏览器地址栏中输入访问的路径

14.修改idea创建注解的servlet模板

（1）File—Settings

（2）找到servlet的模板，按照如下修改

#if (${PACKAGE_NAME} && ${PACKAGE_NAME} != "")package ${PACKAGE_NAME};#end
#parse("File Header.java")
@javax.servlet.annotation.WebServlet("/${Entity_Name}")
public class ${Class_Name} extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, java.io.IOException {
            doGet(request,response);
}

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, java.io.IOException {

}
}