# HTML ## HTML入门 ### 概述 HTML（超文本标记语言—HyperText Markup Language）是构成 Web 世界的基础，是一种用来告知浏览器如何组织页面的标记语言 * 超文本 Hypertext，是指连接单个或者多个网站间的网页的链接。通过链接，就能访问互联网中的内容 * 标记 Markup ，是用来注明文本，图片等内容，以便于在浏览器中显示，例如 `

` 标签表示**标题**，我们可以使用**开始标签**和**结束标签**包围文本内容，这样其中的内容就以标题的形式显示 ```html

开始学习JavaWeb

二级标题

开始学习JavaWeb

这些年

支付宝的诞生就是为了解决淘宝网的客户们的买卖问题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

• javaEE
• HTML

10. 传智播客
11. 黑马程序员

`：用于播放声音，比如音乐或其他音频流，是 HTML 5 的新标签。 常用属性： | 属性名 | 取值 | 描述 | | -------- | -------- | ------------------------------------------------------------ | | src | URL | 音频资源的路径 | | autoplay | autoplay | 音频准备就绪后自动播放 | | controls | controls | 显示控件，比如播放按钮。 | | loop | loop | 表示循环播放 | | preload | preload | 音频在页面加载时进行预加载。
如果使用 "autoplay"，则忽略该属性。 | *** ### 视频标签 `

``` *** ### 文本操作 * Text文本的操作： | 属性名 | 说明 | | --------- | -------------------------- | | innerText | 元素的文本内容，不解析标签 | | innerHTML | 元素的文本内容，解析标签 | 类似于赋值操作，同时支持取用该值 ```html

``` * 输入框文本：input元素.value; *** ## 事件 ### 事件介绍 事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行 * 常用的事件：  * 更多的事件：  *** ### 事件操作 绑定事件的方式 * 方式一：通过标签中的事件属性进行绑定 * 方式二：通过 DOM 元素属性绑定 ```html

``` *** ### 综合案例 案例介绍： 在姓名、年龄、性别三个文本框中填写信息后，添加到“学生信息表”列表（表格），点击删除后，删除该行数据，并且不需刷新  * 添加功能分析 1. 为添加按钮绑定单击事件 2. 创建 tr 元素 3. 创建 4 个 td 元素 4. 将 td 添加到 tr 中 5. 获取文本框输入的信息 6. 创建 3 个文本元素 7. 将文本元素添加到对应的 td 中 8. 创建 a 元素 9. 将 a 元素添加到对应的 td 中 10. 将 tr 添加到 table 中 * 删除功能分析 1. 为每个删除超链接添加单击事件属性 2. 定义删除的方法 3. 获取 table 元素 4. 获取 tr 元素 5. 通过 table 删除 tr * HTML ```html

``` * CSS ```css table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } ``` *** ## 对象 ### 类 * 定义格式： ```js class 类名{ constructor(变量列表){ 变量赋值; } 方法名(参数列表) { 方法体; return 返回值; } } ``` * 使用格式 ```js let 对象名 = new 类名(实际变量值); 对象名.方法名(); ``` * 字面量类 ```js ``` *** ### 继承 - 继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。 - 继承关键字：extends - 顶级父类：Object ```js ``` **** ### 内置对象 内置对象是 JavaScript 提供的带有属性和方法的特殊数据类型，常见的有普通类型、JSON和正则表达式 *** ### 普通类型 #### 数字 * Number | 方法名 | 说明 | | ----------------- | -------------------------- | | parseFloat(Sring) | 将传入的字符串转为浮点数 | | parseInt() | 将传入的字符串整数转为整数 | ```js ``` * Math | 方法名 | 说明 | | -------- | ----------------------------------------------- | | ceil(x) | 向上取整 | | floor(x) | 向下取整 | | round(x) | 四舍五入为整数 | | random() | 随机数，返回的是0.0-1.0之间的范围（含头不含尾） | | pow(x,y) | 幂运算，x的y次方 | ```js document.write(Math.pow(2,3) + "
"); // 8 ``` *** #### 日期 * Date构造方法 | 构造方法 | 说明 | | ------------------------------------------------------------ | ---------------------- | | Date() | 根据当前时间创建对象 | | Date(value) | 根据指定毫秒值创建对象 | | Date(year, month, [day, hours, minutes, seconds, milliseconds]) | 根据指定字段创建对象 | * Date成员方法 | 成员方法 | 说明 | | ---------------- | ------------------------------------------------- | | getFullYear() | 获取年份 | | getMonth() | 获取月份 | | getDate() | 获取天数，相对于月份 | | getHours() | 获取小时 | | getMinutes() | 获取分钟 | | getSeconds() | 获取秒数 | | getTime() | 返回据1970年1月1日至今的毫秒数 | | toLocaleString() | 返回本地日期格式的字符串
2021/2/3下午8:20:20 | *** #### 字符串 String * 构造方法 | 构造方法 | 说明 | | ------------------ | ---------------------- | | gengenString(vale) | 根据指定字符串创建对象 | | let s = "字符串" | 直接赋值 | * 成员方法 | 成员方法 | 说明 | | --------------------- | ---------------------------------------- | | length | 获取字符串长度 | | charAt(index) | 获取指定索引处的字符 | | indexOf(value) | 获取指定字符串出现的索引位置，找不到为-1 | | substring(start, end) | 根据指定索引范围截取字符串（含头不含尾） | | split(value) | 根据指定规则切割字符串，返回数组 | | replace(old, new) | 使用新字符替换老字符串 | *** #### 数组集合 * Array | 方法 | 说明 | | --------------- | ------------------------ | | push(value) | 添加元素到数组的末尾 | | pop() | 删除数组末尾的元素 | | shift() | 删除数组最前面的元素 | | includes(value) | 判断数组是否包含给定的值 | | reverse() | 反转数组中的元素 | | sort() | 对数组元素进行升序排序 | | length | 返回数组的长度 | **降序排序：先sort，再reverse** * Set：JavaScript中的Set集合，元素唯一，存取顺序一致 | 方法 | 说明 | | ------------- | -------------------------------- | | Set() | 创建Set集合对象 | | add(value) | 向集合中添加元素 | | size | 获取集合长度 | | keys() | 获取迭代器对象（遍历方法看实例） | | delete(value) | 删除指定元素 | ```js let s = new Set(); // add(元素) 添加元素 s.add("a");s.add("b");s.add("c");s.add("c"); // keys() 获取迭代器对象 let st = s.keys(); //遍历集合 for(let i = 0; i < s.size; i++){ document.write(st.next().value + "
"); } ``` * Map：JavaScript 中的 Map 集合，key 唯一，存取顺序一致 | 方法 | 说明 | | --------------- | ----------------- | | Map() | 创建Map集合对象 | | set(key, value) | 向集合添加元素 | | size | 获取集合长度 | | get(key) | 根据key获取value | | entries() | 获取迭代器对象 | | delete(key) | 根据key删除键值对 | *** ### JSON #### JSON入门 JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。 - 基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据 - 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言，易于人阅读和编写，同时也易于计算机解析和 生成，并有效的提升网络传输效率。 * 创建格式： **name是字符串类型**  * json常用方法 | 方法 | 说明 | | --------------- | ------------------------------ | | stringify(对象) | 将指定对象转换为json格式字符串 | | parse(字符串) | 将指定json格式字符串解析成对象 | * 入门案例 ```js //定义天气对象 let weather = { city : "北京", date : "2088-08-08", wendu : "10° ~ 23°", }; //1.将天气对象转换为JSON格式的字符串 let str = JSON.stringify(weather); document.write(str + "
"); //2.将JSON格式字符串解析成JS对象 let weather2 = JSON.parse(str); document.write("城市：" + weather2.city + "
"); ``` *** #### 转换工具 我们除了可以在 JavaScript 中来使用 JSON 以外，在 JAVA 中同样也可以使用 JSON。 JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包，可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。 Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson。 * 常用类 | 类名 | 说明 | | ------------- | ------------------------------------------------------------ | | ObjectMapper | 是Jackson工具包的核心类，提供方法来实现JSON字符串和对象之间的转换 | | TypeReference | 对集合泛型的反序列化，使用TypeReference可以明确的指定反序列化的对象类型 | * ObjectMapper常用方法 | 方法 | 说明 | | -------------------------------------------------------- | -------------------------- | | String writeValueAsString(Object obj) | 将Java对象转换成JSON字符串 | | T readValue(String json, Class valueType) | 将JSON字符串转换成Java对象 | | T readValue(String json, TypeReference valueTypeRef) | 将JSON字符串转换成Java对象 | 方法练习： * 对象转 JSON，JSON 转对象 ```java public void test01() throws Exception{ //User对象转json User user = new User("张三",23); String json = mapper.writeValueAsString(user); System.out.println("json字符串：" + json//json字符串 = {"name":"张三","age":23} //json转User对象 User user2 = mapper.readValue(json, User.class); System.out.println("user对象：" + user2);//user对象 = User{name='张三', age=23} } ``` * Map转 JSON，JSON 转 Map ```java public void test02() throws Exception{ //map转json HashMap map = new HashMap<>(); map.put("姓名","张三"); map.put("性别","男"); String json = mapper.writeValueAsString(map); System.out.println("json字符串：" + json); //json转map HashMap map2 = mapper.readValue(json, HashMap.class); System.out.println("map对象：" + map2); } //json字符串 = {"姓名":"张三","性别":"男"} //map对象 = {姓名=张三, 性别=男} ``` * Map转 JSON，JSON 转 Map<自定义类> ```java public void test03() throws Exception{ //map转json HashMap map = new HashMap<>(); map.put("sea一班",new User("张三",23)); map.put("sea二班",new User("李四",24)); String json = mapper.writeValueAsString(map); System.out.println("json字符串：" + json); //json转map HashMap map2=mapper.readValue(json, new TypeReference>(){}); System.out.println("java对象：" + map2); } //json字符串 = {"sea一班":{"name":"张三","age":23},"sea二班":{....} //map对象 = {sea一班=User{name='张三', age=23}, sea二班=User{name='李四', age=24}} ``` * List ```java public void test05() throws Exception{ //List转json ArrayList list = new ArrayList<>(); list.add(new User("张三",23)); list.add(new User("李四",24)); String json = mapper.writeValueAsString(list); System.out.println("json字符串：" + json); //json转List ArrayList list2 = mapper.readValue(json, new TypeReference>(){}); System.out.println("java对象：" + list2); } //json字符串 = [{"name":"张三","age":23},{"name":"李四","age":24}] //list对象 = [User{name='张三', age=23}, User{name='李四', age=24}] ``` *** ### 正则 #### 正则表达式 正则表达式：是一种对字符串进行匹配的规则 RegExp： * 构造方法 | 构造方法 | 说明 | | ------------------ | -------------------- | | RegExp(规则) | 根据指定规则创建对象 | | let reg = /^规则$/ | 直接赋值 | * 成员方法 | 成员方法 | 说明 | | ------------------ | ------------------------------ | | test(匹配的字符串) | 根据指定规则验证字符串是否符合 | #### 验证用户 使用 onsubmit 表单提交事件  ```html

``` *** ### Location Location地址栏对象： * href 属性：浏览器的地址栏。我们可以通过为该属性设置新的URL，使浏览器读取并显示新URL的内容 实现效果：秒数会自动变小，倒计时，5，4，3，2，1 ```html

注册成功！5秒之后自动跳转到首页...

``` *** ## 封装 封装思想： - **封装：**将复杂的操作进行封装隐藏，对外提供更加简单的操作。 - **获取元素的方法** - document.getElementById(id值)：根据 id 值获取元素 - document.getElementsByName(name值)：根据 name 属性值获取元素们 - document.getElementsByTagName(标签名)：根据标签名获取元素们 代码实现： * my.js ```js function getById(id){ return document.getElementById(id); } function getByName(name) { return document.getElementsByName(name); } function getByTag(tag) { return document.getElementsByTagName(tag); } ``` * 封装.html ```html

``` *** ## JQuery ### 简介 jQuery 是一个 JavaScript 库 - 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。 - jQuery 官网：https://www.jquery.com 引入jQ文件 ```html ``` - jQuery 的核心语法 $() *** ### 语法 #### 对象转换 jQuery 本质上虽然也是 JS，但二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换 * JS 的 DOM 对象转换成 jQuery 对象：$(JS的DOM对象); ```js // JS方式，通过id属性值获取div元素 let jsDiv = document.getElementById("div"); // 将 JS 对象转换为jQuery对象 let jq = $(jsDiv); ``` * jQuery 对象转换成 JS 对象 * jQuery对象[索引]; * jQuery对象.get(索引); ```js //jQuery方式，通过id属性值获取div元素 let jqDiv = $("#div"); //将 jQuery对象转换为JS对象 let js = jqDiv[0]; ``` *** #### 事件操作 ##### 绑定解绑 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法 * 绑定事件：`jQuery对象.on(事件名称,执行的功能);` ```js //给btn1按钮绑定单击事件 $("#btn1").on("click",function(){ alert("点我干嘛?"); }); ``` * 解绑事件：`jQuery对象.off(事件名称);` 如果不指定事件名称，则会把该对象绑定的所有事件都解绑 ```js //通过btn2解绑btn1的单击事件 $("#btn2").on("click",function(){ $("#btn1").off("click"); }); ``` ##### 事件切换 事件切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系 * 方式一：单独定义 * $(元素).事件方法名1(要执行的功能); * $(元素).事件方法名2(要执行的功能); ```js //将鼠标移到某元素，添加css样式 $("#div").mouseover(function(){ //背景色：红色 //$("#div").css("background","red"); $(this).css("background","red"); }); $("#div").mouseout(function(){ //背景色：蓝色 $(this).css("background","blue"); }); ``` * 方式二：链式定义 * $(元素).事件方法名1(要执行的功能) .事件方法名2(要执行的功能); ```js $("#div").mouseover(function(){ $(this).css("background","red"); }).mouseout(function(){ $(this).css("background","blue"); }); ``` *** #### 遍历操作 * 数据准备，实现按键后遍历无序列表 ```html

• 传智播客
• 黑马程序员
• 传智专修学院

``` * for循环 ```js for(let i = 0; i < 容器对象长度; i++){ 执行功能; } ``` * 对象.each方法 ```js 容器对象.each(function(index,ele){ 执行功能; }); ``` ```js $("#btn").click(function(){ let lis = $("li"); lis.each(function(index,ele){ alert(index + ":" + ele.innerHTML); }); }); ``` * $.each()方法 ```js $.each(容器对象,function(index,ele){ 执行功能; }); ``` ```js $("#btn").click(function(){ let lis = $("li"); $.each(lis,function(index,ele){ alert(index + ":" + ele.innerHTML); }); }); ``` * for of语句 ```js $("#btn").click(function(){ let lis = $("li"); for(ele of lis){ alert(ele.innerHTML); } }); ``` *** ### 选择器 #### 基本选择器 选择器：类似于 CSS 的选择器，可以帮助我们获取元素。 * 下面所有的A B均为标签名 | 选择器 | 语法 | 作用 | | ---------- | ------------------- | ----------------------------------- | | 元素选择器 | $("元素的名称") | 根据元素名称获取元素对象（数组） | | id选择器 | $("#id的属性值") | 根据id属性值获取元素对象 | | 类选择器 | $(".class的属性值") | 根据class属性值获取元素对象（数组） | #### 层级选择器 | 选择器 | 语法 | 作用 | | ---------- | ---------- | -------------------------- | | 后代选择器 | $("A B") | A下的所有B，包括B的子级 | | 子选择器 | $("A > B") | A下的所有B，不 包括B的子级 | | 兄弟选择器 | $("A + B") | A相邻的下一个B | | 兄弟选择器 | $("A ~ B") | A相邻的所有B | #### 属性选择器 | 选择器 | 语法 | 作用 | | ------------ | --------------------- | ------------------------------------------ | | 属性名选择器 | $("A[属性名]") | 根据指定属性名获取元素对象（数组） | | 属性值选择器 | $("A[属性名=属性值]") | 根据指定属性名和属性值获取元素对象（数组） | *** #### 过滤器选择器 | 选择器 | 语法 | 作用 | | -------------- | ---------------- | ------------------------------ | | 首元素选择器 | $("A:first") | 获取选择的元素中的第一个元素 | | 尾元素选择器 | $("A:last") | 获取选择的元素中的最后一个元素 | | 非元素选择器 | $("A:not(B)") | 不包括指定内容的元素 | | 偶数选择器 | $("A:even") | 偶数，从0开始计数 | | 奇数选择器 | $("A:odd") | 奇数，从0开始计数 | | 等于索引选择器 | $("A:eq(index)") | 指定索引的元素 | | 大于索引选择器 | $("A:gt(index)") | 大于指定索引的元素 | | 小于索引选择器 | $("A:lt(index)") | 小于指定索引的元素 | ```html

``` *** #### 表单属性选择器 | 选择器 | 语法 | 作用 | | ----------------------- | --------------- | --------------------------- | | 可用选择器 | $("A:enabled") | 获得可用元素 | | 不可用元素选择器 | $("A:disabled") | 获得不可用元素 | | 单选/复选框被选中的元素 | $("A:checked") | 获取单选/复选框被选中的元素 | | 下拉框被选中的元素 | $("A:selected") | 获取下拉框被选中的元素 | ```html

``` *** ### DOM #### 文本操作 | 方法 | 作用 | | ----------- | ---------------------------- | | html() | 获取标签的文本 | | html(value) | 设置标签的文本内容，解析标签 | ```js //获取div标签的文本内容 let value = $("#div").html(); //设置div标签的文本内容 $("#div").html("我是div"); ``` *** #### 对象操作 | 方法 | 作用 | | ------------------ | ---------------------------------------------------------- | | $("元素") | 创建指定元素 | | append(element) | 添加成最后一个子元素，由添加者对象调用 | | appendTo(element) | 添加成最后一个子元素，由被添加者对象调用 | | prepend(element) | 添加成第一个子元素，由添加者对象调用 | | prependTo(element) | 添加成第一个子元素，由被添加者对象调用 | | before(element) | 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用 | | after(element) | 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用 | | remove() | 删除指定元素（自己移除自己） | | empty() | 清空指定元素的所有子元素（自己还在） |

• 北京
• 上海

• 加油

```js // 按钮一：添加一个span到div $("#btn1").click(function(){ let span = $("span"); $("#div").append(span); }); //按钮二：将加油添加到城市列表最下方 $("#btn2").click(function(){ $("#city").append($("#jy")); }); //按钮三：将加油添加到城市列表最上方 $("#btn3").click(function(){ $("#jy").prependTo($("#city")); }); //按钮四：将加油添加到北京下方 $("#btn4").click(function(){ $("#bj").after($("#jy")); }); ``` *** #### 样式操作 | 方法 | 作用 | | ------------------ | -------------------------------------- | | css(name) | 根据样式名称获取css样式 | | css(name,value) | 设置css样式 | | addClass(value) | 给指定的对象添加样式类名 | | removeClass(value) | 给指定的对象删除样式类名 | | toggleClass(value) | 没有样式类名就添加，有就删除，循环如此 | ```css .cls{ background: pink; } ``` ```html

``` ```js // 1.css(name) 获取css样式 $("#btn1").click(function(){ alert($("#div").css("border")); //1px solid rgb(255, 0, 0) }); // 2.css(name,value) 设置CSS样式 $("#btn2").click(function(){ $("#div").css("background","blue"); }); // 3.addClass(value) 给指定的对象添加样式类名 $("#btn3").click(function(){ $("#div").addClass("cls"); //cls是一个css样式 }); // 4.toggleClass(value) 如果没有样式类名，则添加。如果有，则删除 $("#btn5").click(function(){ $("#div").toggleClass("cls"); }); ``` *** #### 属性操作 | 方法 | 作用 | | ------------------ | -------------------------------------- | | attr(name,[value]) | 获得/设置属性的值 | | prop(name,[value]) | 获得/设置属性的值（checked, selected） |

```html ``` *** # AJAX ## 概述 - AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。 - 不是一种新技术，而是多个技术综合，用于快速创建动态网页的技术。 - 一般的网页如果需要更新内容，必需重新加载个页面。而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行**局部更新**。  *** ## 实现AJAX ### JS方式 - 核心对象：XMLHttpRequest * 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 - 打开链接：open(method,url,async) - method：请求的类型 GET 或 POST - url：请求资源的路径 * async：true(异步) 或 false(同步)。 - 发送请求：send(String params) - params：请求的参数(POST 专用) - 处理响应：onreadystatechange - readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。 * status：200-响应已全部 OK。 - 获得响应数据形式 * responseText：获得字符串形式的响应数据。 * responseXML：获得 XML 形式的响应数据。 鼠标移出输入框，判断用户名是否被注册： * Servlet ```java @WebServlet("/userServlet") public class UserServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //设置请求和响应的乱码 req.setCharacterEncoding("UTF-8"); resp.setContentType("text/html;charset=UTF-8"); //1.获取请求参数 String username = req.getParameter("username"); //模拟服务器处理请求需要1秒钟 Thread.sleep(5000); //2.判断姓名是否已注册 if ("zhangsan".equals(username)) { resp.getWriter().write("用户名已注册"); } else { resp.getWriter().write("用户名可用"); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } } ``` * html文件

``` *** ### JQ方式 **核心语法：**`$.ajax({name:value,name:value,…}); ` - url：请求的资源路径。 - async：是否异步请求，true-是，false-否 (默认是 true)。 - data：发送到服务器的数据，可以是**键值对或者 js 对象**形式。 - type：请求方式，POST 或 GET (默认是 GET)。 - dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。 - success：请求成功时调用的回调函数。 - error：请求失败时调用的回调函数。 ```html ``` *** ## 分页知识  *** # VUE ## 概述 Vue是一套构建用户界面的渐进式前端框架。 Vue只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。 通过尽可能简单的API来实现**响应数据的绑定和组合的视图组件**。 特点： * 易用：在有HTMLCSSJavaScript的基础上，快速上手。 * 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 * 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。 *** ## 基本语法 * Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。 ```js let vm = new Vue({ 选项列表; }); ``` * 选项列表 * el选项：用于接收获取到页面中的元素（根据常用选择器获取） * data选项：用于保存当前Vue对象中的数据，在视图中声明的变量需要在此处赋值 * methods选项：用于定义方法，方法可以直接通过对象名调用，this代表当前Vue对象 * 数据绑定：在视图部分获取脚本部分的数据 ```html {{遍变量名}} ``` ```html

``` *** ## 常用指令 ### 指令介绍 指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义 使用方法：通常编写在标签的属性上，值可以使用 JS 的表达式  *** ### 文本插值 v-html：把文本解析为 HTML 代码 ```html

``` *** ### 绑定属性 v-bind：为 HTML 标签绑定属性值 ```html

``` *** ### 条件渲染 v-if：条件性的渲染某元素，判定为真时渲染，否则不渲染 v-else：条件性的渲染 v-else-if：条件性的渲染 v-show：根据条件展示某元素，区别在于切换的是display属性的值 ```html

``` *** ### 列表渲染 v-for：列表渲染，遍历容器的元素或者对象的属性 ```html

``` **** ### 事件绑定 v-on：为 HTML 标签绑定事件，有简写方式 ```html

``` *** ### 表单绑定 - **表单绑定** v-model：在表单元素上创建双向数据绑定 - **双向数据绑定** 更新data数据，页面中的数据也会更新；更新页面数据，data数据也会更新 - **MVVM模型(ModelViewViewModel)：是MVC模式的改进版** 在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。 将Model和View关联起来的就是ViewModel，它是桥梁。 ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。  ```html

``` *** ## Element Element：网站快速成型工具，是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，使用Element前提必须要有Vue 组件：组成网页的部件，例如超链接、按钮、图片、表格等等 - Element官网：https://element.eleme.cn/#/zh-CN * 开发步骤： 1. 下载 Element 核心库 2. 引入 Element 样式文件 3. 引入 Vue 核心 js 文件 4. 引入 Element 核心 js 文件 5. 编写按钮标签 6. 通过 Vue 核心对象加载元素 * 代码实现 ```html

``` ***** ## 自定义 对组件的封装 * 定义格式 ```vue Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 }) ``` * 代码实现 ```html

``` * 效果

*** ## 生命周期 * 生命周期  * 生命周期八个阶段  *** ## 异步操作 在Vue中发送异步请求，本质上还是AJAX，使用axios这个插件来简化操作 * 使用步骤： 1.引入axios核心js文件 2.调用axios对象的方法来发起异步请求 3.调用axios对象的方法来处理响应的数据 * axios常用方法： | 方法 | 作用 | | ------------------------------------ | ------------------------------------------------ | | get(请求的资源路径与请求的参数) | 发起GET方式请求 | | post(请求的资源路径**,** 请求的参数) | 发起POST方式请求 | | then(response) | 请求成功后的回调函数，通过response获取响应的数据 | | catch(error) | 请求失败后的回调函数，通过error获取错误信息 | * 代码实现 Servlet类： ```java @WebServlet("/testServlet") public class TestServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp){ //设置请求响应编码 req.setCharacterEncoding("UTF-8"); resp.setContentType("text/html;charset=UTF-8"); //获取请求参数 String name = req.getParameter("name"); System.out.println(name); //响应客户端 resp.getWriter().write("请求成功"); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp){ doGet(req, resp); } } ``` HTML文件： ```html

``` *** # Nginx ## 安装软件 Nginx 是一个高性能的 HTTP 和[反向代理 ](https://baike.baidu.com/item/反向代理/7793488)Web 服务器，同时也提供了 IMAP/POP3/SMTP 服务 Nginx 两个最核心的功能：高性能的静态 Web 服务器，反向代理 * 安装指令：sudo apt-get install nginx * 查看版本：nginx -v * 系统指令：systemctl / service start/restart/stop/status nginx 配置文件安装目录：/etc/nginx 日志文件：/var/log/nginx *** ## 配置文件 nginx.conf 文件时 Nginx 的主配置文件 * main 部分 * events 部分 * server 部分 root 设置的路径会拼接上 location 的路径，然后去最终路径寻找对应的文件 *** ## 发布项目 1. 创建一个 toutiao 目录 ```sh cd /home mkdir toutiao ``` 2. 将项目上传到 toutiao 目录 3. 解压项目 unzip web.zip 4. 编辑 Nginx 配置文件 nginx.conf ```shell server { listen 80; server_name localhost; location / { root /home/seazean/toutiao; index index.html index.htm; } } ``` 5. 重启 Nginx 服务：systemctl restart nginx 6. 浏览器打开网址：http://127.0.0.1:80 *** ## 反向代理 > 无法访问 Google，可以配置一个代理服务器，发送请求到代理服务器，代理服务器经过转发，再将请求转发给 Google，返回结果之后，再次转发给用户，这个叫做正向代理，正向代理对于用户来说，是有感知的 **正向代理（forward proxy）**：是一个位于客户端和目标服务器之间的代理服务器，为了从目标服务器取得内容，客户端向代理服务器发送一个请求并指定目标，然后代理服务器向目标服务器转交请求并将获得的内容返回给客户端，**正向代理，其实是"代理服务器"代理了当前"客户端"，去和"目标服务器"进行交互** 作用： * 突破访问限制：通过代理服务器，可以突破自身 IP 访问限制，访问国外网站，教育网等 * 提高访问速度：代理服务器都设置一个较大的硬盘缓冲区，会将部分请求的响应保存到缓冲区中，当其他用户再访问相同的信息时， 则直接由缓冲区中取出信息，传给用户，以提高访问速度 * 隐藏客户端真实 IP：隐藏自己的 IP，免受攻击 **反向代理（reverse proxy）**：是指以代理服务器来接受 Internet 上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给 Internet 上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器，**反向代理，其实是"代理服务器"代理了"目标服务器"，去和当前"客户端"进行交互** 作用： * 隐藏服务器真实 IP：使用反向代理，可以对客户端隐藏服务器的 IP 地址 * 负载均衡：根据所有真实服务器的负载情况，将客户端请求分发到不同的真实服务器上 * 提高访问速度：反向代理服务器可以对于静态内容及短时间内有大量访问请求的动态内容提供缓存服务 * 提供安全保障：反向代理服务器可以作为应用层防火墙，为网站提供对基于 Web 的攻击行为（例如 DoS/DDoS）的防护，更容易排查恶意软件等 区别： * 正向代理其实是客户端的代理，帮助客户端访问其无法访问的服务器资源；反向代理则是服务器的代理，帮助服务器做负载均衡，安全防护等 * 正向代理一般是客户端架设的，比如在自己的机器上安装一个代理软件；反向代理一般是服务器架设的，比如在自己的机器集群中部署一个反向代理服务器 * 正向代理中，服务器不知道真正的客户端到底是谁，以为访问自己的就是真实的客户端；反向代理中，客户端不知道真正的服务器是谁，以为自己访问的就是真实的服务器 * 正向代理和反向代理的作用和目的不同。正向代理主要是用来解决访问限制问题；而反向代理则是提供负载均衡、安全防护等作用；二者均能提高访问速度