JavaWeb开发学习笔记

Darkbluelr

已于 2024-04-10 02:12:13 修改

阅读量98

点赞数

文章标签：学习笔记 javascript

于 2023-06-13 22:39:04 首次发布

本文链接：https://blog.csdn.net/m0_61940795/article/details/131131195

版权

一、Web前端的介绍

HTML、CSS和JavaScript（JS）是Web前端开发中的三个核心标准，它们分别用于定义网页的结构、样式和行为。

· HTML（Hypertext Markup Language）：负责网页的基本结构（页面元素和内容）

HTML是一种标记语言用于定义网页的结构和内容。它使用一系列的标签（例如<head>、<body>、<p>等）来标记文本、图像、链接等元素，并指定它们的层次关系和布局。HTML提供了一种结构化的方式来组织和呈现网页的内容。

· CSS（Cascading Style Sheets）：负责网页的表现效果（页面的外观，如：颜色、大小）

CSS是一种样式表语言，用于定义网页的外观和布局。通过使用CSS，可以为HTML元素应用各种样式，如颜色、字体、背景、边框等。CSS使得网页的设计与内容分离，提高了可维护性和灵活性，使得样式的修改更加简单和一致。

· JavaScript（JS）：负责网页的行为（交互效果）

JavaScript是一种脚本语言，用于实现网页的交互和动态行为。通过在网页上编写JavaScript代码，可以对用户的操作做出响应，操作DOM（文档对象模型），处理表单数据，执行动画效果，与服务器进行通信等。JavaScript为网页添加了丰富的交互性和动态性。

二、HTML

HTML的基本知识点

标签（Tags）：HTML使用标签来定义网页的不同元素，如标题、段落、链接等。标签由尖括号包围，通常成对出现，其中包括起始标签和结束标签。例如，<h1>和</h1>分别表示一个一级标题的起始和结束。
元素（Elements）：一个HTML标签及其内容称为一个元素。元素由起始标签、内容和结束标签组成。例如，<p>这是一个段落。</p>表示一个段落元素。
属性（Attributes）：HTML标签可以包含属性，属性提供有关元素的额外信息。属性以键值对的形式出现在标签中，并位于起始标签的内部。例如，<a href="https://www.example.com">链接</a>中的href是一个属性，指定了链接的目标URL。
标题（Headings）：HTML提供了6个级别的标题，从<h1>到<h6>，用于定义文档中不同级别的标题。一级标题是最高级别的标题，而六级标题是最低级别的标题。
段落（Paragraphs）：<p>标签用于定义段落。段落通常是文本的逻辑分组，浏览器会在段落之间添加一些默认的空间。
超链接（Hyperlinks）：<a>标签用于创建超链接。通过指定href属性，可以将文本或图像转换为可点击的链接。用户单击链接后，将导航到指定的URL。
图像（Images）：<img>标签用于插入图像。通过指定src属性，可以指定要显示的图像的URL。还可以使用alt属性提供图像的替代文本，以便在图像无法加载时提供描述。
列表（Lists）：HTML支持有序列表和无序列表。有序列表使用<ol>标签，无序列表使用<ul>标签。列表项使用<li>标签定义。
表格（Tables）：<table>标签用于创建表格。表格由行（<tr>标签）和单元格（<td>标签）组成，可以使用<th>标签定义表头单元格。
表单（Forms）：<form>标签用于创建交互式表单。表单可以包含输入字段、复选框、单选按钮等。通过指定不同

三、CSS

CSS举例引入：设置字体样式

内联样式

仅对当前标签有效

   <p style="color:red" >字体颜色</p>

内部样式表

对所有选中的标签有效（通过tagname、class、id进行选中），在<head>标签里面加入<style></style>标签，里面对要选中的标签进行样式调控。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
    <style>
        h1{                //by Tagname
            color: #4D4F53;
        }   
        video{             //by Tagname
            width: 100%;
        }     
        #timeTop{           //by Id
            color: #888888;
        }
        .logo{            //by Class
            width: auto;
        }
    </style>        
</head>

外部样式表

进入css文件进行控制

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

注意：以上三种控制字体样式的方法均属于CSS的使用，纯HTML是不能设置样式的：

看CSS的定义：CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。

——> “添加样式” 说明純HTML文档或XML应用是没有样式这个东西的。

css可以设置哪些样式

文本样式：
- color：设置文本颜色。
- font-size：设置字体大小。
- font-family：设置字体系列。
- text-align：设置文本对齐方式。
背景样式：
- background-color：设置背景颜色。
- background-image：设置背景图片。
- background-position：设置背景图片的位置。
- background-repeat：设置背景图片的重复方式。
盒子模型：
- width：设置元素的宽度。
- height：设置元素的高度。
- padding：设置内边距。
- margin：设置外边距。
- border：设置边框。
定位和布局：
- position：设置元素的定位方式。
- top、right、bottom、left：设置元素的定位偏移量。
- display：设置元素的显示方式。
- float：设置元素的浮动方式。
- clear：清除浮动影响。
动画和过渡：
- animation：设置动画效果。
- transition：设置过渡效果。
响应式布局：
- media queries：根据设备的不同屏幕尺寸应用不同的样式。

css盒子模型

CSS盒子模型是用于布局和定位HTML元素的一种模型。它将每个元素视为一个矩形盒子，由内容区域、内边距、边框和外边距组成。以下是CSS盒子模型的组成部分：

内容区域（Content Area）：它是盒子中用于显示文本、图像或其他内容的部分。通过设置width和height属性，可以控制内容区域的宽度和高度。
内边距（Padding）：内边距是内容区域与边框之间的空白区域。它可以通过设置padding属性来控制。内边距可以在盒子的内部创建空白区域，使内容与边框之间有一定的距离。
边框（Border）：边框是包围内容区域和内边距的线条或样式。可以使用border属性来设置边框的宽度、样式和颜色。
外边距（Margin）：外边距是盒子与相邻元素之间的空白区域。它可以通过设置margin属性来控制。外边距用于控制盒子与其他元素之间的间隔。

盒子模型在网页布局中扮演着重要的角色，它使开发者能够通过控制各个部分的尺寸和间距来精确布局和定位元素。

四、JS（重难点）

JS引入方法

内部脚本

该标签可以放置在<head>或<body>部分。

外部脚本

动态创建脚本标签

使用JavaScript动态地创建<script></script>标签，并将其插入到HTML文档中，这种方式可以在需要的时候动态加载脚本。

JS基本语法

JavaScript的基本语法

1、变量声明：使用 var、let 或 const 关键字声明变量。

var x = 10;
let y = 'Hello';
const z = true;

2、数据类型： JavaScript支持多种数据类型，包括数字（Number）、字符串（String）、布尔值（Boolean）、对象（Object）、数组（Array）、null、undefined等。

3、运算符： JavaScript提供了各种算术、比较、逻辑和位运算符，用于进行数值计算和逻辑判断。

var sum = 5 + 3;
var isTrue = (sum > 7) && (sum < 10);

4、条件语句：使用 if、else if 和 else 来进行条件判断。

var age = 18;
if (age >= 18) {
    console.log('成年');
} else {
    console.log('未成年');
}

5、循环语句：使用 for、while 或 do...while 来进行循环操作。

for (var i = 0; i < 5; i++) {
    console.log(i);
}

var j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

6、函数：使用 function 关键字定义函数，可以接受参数并返回值。

function greet(name) {
    return 'Hello, ' + name + '!';
}
var message = greet('Alice');
console.log(message);

7、对象： JavaScript是一门面向对象的语言，可以使用对象来组织和封装数据和功能。

var person = {
    name: 'Alice',
    age: 25,
    greet: function() {
        console.log('Hello, ' + this.name + '!');
    }
};
person.greet();

JS的语法大部分都和Java类似，下面是它们不同的地方：

JS与Java的比较：

1、JavaScript是一种解释性语言，代码在运行时逐行解释执行，不需要预先编译。而Java是一种编译性语言，代码在运行之前需要通过编译器将其转换为字节码。

2、JavaScript是一种弱类型语言，变量的数据类型可以动态改变，无需显式声明类型。而Java是一种强类型语言，变量在声明时必须指定明确的数据类型，并且类型转换需要显式操作。

3、JavaScript具有动态语言的特点，可以在运行时修改对象的结构和行为，增加或删除属性、方法等。Java是一种静态语言，需要在编译时明确定义类型和结构。

JS函数

JavaScript中的函数是一段可重复使用的代码块，用于执行特定的任务或计算，并且可以接受参数和返回值。函数可以在需要时被调用，帮助组织和模块化代码。（太简单，就不写了）

JS中的对象（重难点）

1、Array

2、String

3、JSON（JavaScript Object Notation）

什么是JSON

JSON 指的是 JavaScript 对象表示法，注意，它不是一门语言，它只是一个表示方法。
JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解

优点和用途

数据交换：JSON作为一种通用的数据格式，可用于不同系统和平台之间的数据交换。它提供了一种标准的数据表示方式，使得数据可以在不同环境中进行传输和解析。
数据存储：JSON可以用于将数据存储在文件或数据库中。它可以将复杂的数据结构转换为字符串，并在需要时再将其还原为原始数据结构。
易于阅读和编写：JSON使用简单的键值对表示数据，具有良好的可读性和易于编写的特点。它使用常见的数据类型（字符串、数字、布尔值、数组和对象），使数据的表示更加直观和易于理解。
跨语言支持：JSON是一种独立于编程语言的数据格式，几乎所有的编程语言都支持JSON的解析和生成。这使得不同语言之间的数据交换更加灵活和便捷。

总结就是，数据能够更以简单的方式传递。

具体使用JSON的优势

// 使用JSON的例子
var person = {
  "name": "John",
  "age": 30,
  "city": "New York"
};

var json = JSON.stringify(person);
// json: '{"name":"John","age":30,"city":"New York"}'

// 不使用JSON的例子
var name = "John";
var age = 30;
var city = "New York";

var data = "name=" + name + "&age=" + age + "&city=" + city;
// data: 'name=John&age=30&city=New York'

JSON.stringify(person)

这是使用JSON的特有函数，它将JavaScript对象 person 转换为JSON格式的字符串表示。在这个例子中，json 变量将包含 person 对象的JSON字符串表示。

"name=" + name + "&age=" + age + "&city=" + cit

这是使用字符串拼接的方式，将 name、age 和 city 变量的值连接起来，形成一个表示数据的字符串。在这个例子中，data 变量将包含拼接后的字符串表示。

因此，通过JSON.stringify()函数，可以方便地将复杂的JavaScript对象转换为可传输和存储的JSON字符串，而不需要手动进行字符串拼接和格式化。这是JSON特有的优点之一。

注意1：在这段代码中，data 和 json 不相等，尽管它们都表示相同的数据，但它们的数据类型和格式不同。data 是一个普通的字符串，而 json 是一个符合JSON格式的字符串。JSON格式要求使用双引号来引用属性名和字符串值，并使用冒号分隔属性名和属性值，而不是使用等号和连接符号。

注意2：
如果要从上面的字符串得到数据，不能直接json.name，因为它是一个字符串:

json.name = null

应该用var obj = JSON.parse(json) (与stringify对立）来得到类数组对象，这样就可以这个对象进行取数据了

obj.name = "John"

4、BOM (Browser Object Model)

BOM的组成部分

· Window：浏览器窗口对象，它是 BOM 的顶层对象。它提供了对浏览器窗口的控制和访问，以及许多属性和方法来操作窗口、导航、定时器等。

属性：可以获取到navigator、history、location的只读对象，用法：window.xxxxx（window.可以省略）

方法：confirm() 、alert() 、setInterval() 、setTimeout()

获取：直接window.，就拿到了浏览器的Window对象，然后后面跟你要使用的属性或者方法。

· Navigator：浏览器对象，封装了关于浏览器的信息，例如浏览器的名称、版本、用户代理等。通过该对象，可以编写针对不同浏览器的特定代码逻辑。（关于这个浏览器的应用）

· Screen：提供了有关用户屏幕的信息，例如屏幕的宽度、高度、颜色深度等。通过 screen 对象，可以根据屏幕的属性进行适配和调整。

· History：提供了对浏览器历史记录的访问和操作。可以通过该对象前进、后退或在历史记录中导航，以及执行类似浏览器导航行为的操作。

· Location：提供了与浏览器当前加载的页面 URL 相关的信息和操作。通过该对象，可以获取当前 URL 的信息，也可以修改 URL，实现页面的重定向等操作。

5、DOM（Document Object MOdel）

DOM的组成部分

DOM树

DOM是什么，它能做什么？

答：将标记语言的各个组成部分封装成对象

Document（文档对象）：表示整个HTML或XML文档，是DOM的根节点。
Element（元素对象）：表示HTML或XML文档中的一个元素，如<div>、<p>、<h1>等。元素对象可以包含其他元素对象或文本节点。
Text（文本节点）：表示HTML或XML文档中的文本内容，如Hello World等。
Attribute（属性节点）：表示HTML或XML元素的属性，如id、class、src等。
Comment（注释节点）：表示HTML或XML文档中的注释部分，如。

有DOM和无DOM的比较

1.字符串操作方法（无DOM）：

HTML代码被处理为字符串，并使用字符串操作函数（例如查找、替换、分割）来操作各个组成部分。

示例代码：

// 创建新元素
var div = "<div></div>";
var p = "<p></p>";

// 修改元素属性
var pContent = "Hello, World!";

// 将元素添加到HTML字符串中
div = div.replace("</div>", p + "</div>");
p = p.replace("</p>", pContent + "</p>");

// 将HTML字符串添加到文档中
var body = document.querySelector("body");
body.innerHTML += div;

// 查找特定元素
var elements = document.querySelectorAll("p");
for (var i = 0; i < elements.length; i++) {
    if (elements[i].innerHTML === pContent) {
        // 执行相应操作
        break;
    }
}

2. 使用DOM（有DOM）：

使用浏览器提供的DOM API，可以以编程方式访问和操作HTML的组成部分。

示例代码：

// 创建新元素
var div = document.createElement("div");
var p = document.createElement("p");

// 修改元素属性
p.textContent = "Hello, World!";

// 将元素添加到DOM树中
div.appendChild(p);
document.body.appendChild(div);

// 查找特定元素
var elements = document.getElementsByTagName("p");
for (var i = 0; i < elements.length; i++) {
    if (elements[i].textContent === "Hello") {
        // 执行相应操作
        break;
    }
}

有DOM的优势：

方便的元素访问：使用DOM API，可以轻松地访问和操作HTML文档中的各个元素。可以通过元素的标签名、类名、ID等属性进行查找，以及遍历和修改元素的属性和内容。
结构化操作：DOM提供了树状结构表示HTML文档，使得可以轻松地遍历和操作文档的层级结构。可以访问父元素、子元素、兄弟元素等，对元素进行插入、删除、移动等操作。
事件处理：DOM允许添加事件处理程序，使得可以对元素的交互行为进行监听和响应。例如，可以为按钮添加点击事件处理程序，当按钮被点击时执行相应的操作。

没有DOM的劣势：

繁琐的字符串操作：没有DOM时，需要使用字符串操作函数来处理HTML代码。这可能涉及到复杂的字符串查找、替换和分割，而且代码可读性较差。
缺乏结构化操作：在没有DOM的情况下，无法方便地遍历和操作HTML文档的层级结构。这意味着在操作嵌套的元素时，可能需要编写更多的逻辑代码来处理。
事件处理的复杂性：没有DOM时，无法直接添加事件处理程序。如果需要处理交互行为，可能需要通过其他方式模拟事件处理，增加了代码的复杂性。

综上所述，DOM提供了更方便、灵活和高效的方式来访问和操作HTML文档的元素。它简化了代码编写过程，提供了更好的结构化操作和事件处理能力。没有DOM时，需要依赖字符串操作等替代方法，导致代码复杂度增加，并且缺乏便利性和可读性。

五、Vue

Vue是什么

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

它能够实现数据的双向绑定，使编程的关注点集中于数据上。

它是个框架，里面定义了很多变量、函数、数组什么的，这些对象都是用JS语言来进行编写的，编写它的目的是为了更好的对代码进行封装以及简化代码的结构。

Vue的引入方法

在head标签里面：

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

类似于c语言里面的#include包含进了一个头文件，里面定义了很多有用的工具，方便我们的使用。

Vue的使用方法

1、创建Vue实例

在JavaScript文件中，通过new Vue()来创建Vue实例，并传入一个配置对象。配置对象包含Vue实例的各种选项和属性，用于配置Vue的行为和数据。例如：

new Vue({
  el: '#app', // 指定Vue实例挂载的元素
  data: {
    message: 'Hello Vue!', // 数据属性
  },
  methods: {
    greet: function() {
      alert(this.message);
    },
  },
});

2、数据绑定

Vue支持双向数据绑定，可以将数据绑定到HTML模板中的DOM元素，实现数据的动态更新。通过在模板中使用

· {{ }} 插值语法 ——> 绑定数据 （Vue特有的语法）

或

· 指令v-bind ——> 绑定属性

例如：

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message" type="text">
</div>

<div id="app">
  <img v-bind:src="imageUrl">
</div>

3、事件处理

Vue可以响应用户的事件，通过v-on指令绑定事件处理函数，以及在方法中定义对应的事件处理逻辑。例如：

<div id="app">
  <button v-on:click="greet">Click Me</button>
</div>

new Vue({
  el: '#app',
  methods: {
    greet() {
      // 处理点击事件的逻辑
    }
  }
});

4、条件和循环

Vue提供了多种指令和语法，用于处理条件渲染和循环渲染。通过v-if、v-else、v-show等指令实现条件渲染，通过v-for指令实现循环渲染。例如：

<div id="app">
  <p v-if="showMessage">{{ message }}</p>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

5、组件化开发

Vue支持组件化开发，可以将页面拆分为多个可复用的组件，每个组件有自己的模板、样式和逻辑。通过Vue.component全局注册组件，或在Vue实例的components选项中注册局部组件。例如：

<div id="app">
  <my-component></my-component>
</div>

Vue.component('my-component', {
  template: '<p>This is my component</p>',
});

new Vue({
  el: '#app',
});

Vue对象的生命周期（重难点！）

1、创建阶段（Creation）

（1）beforeCreate：在实例被创建之前。

实例的数据观察和事件配置还未初始化。第一个钩子，这个阶段的data，methods，computed以及watch的数据和方法不能被访问

（2）created：是实例创建完成后发生的。

这个阶段完成数据观测，可以使用数据，更改数据，无法与Dom进行交互，想要的话可以通过nextTick来访问，nexttick延迟回调，更新数据后立即操作dom

2、挂载阶段（Mounting）

（3）beforeMount：在实例挂载到DOM之前调用，此时模板已经编译完成，但尚未将其渲染到页面上。

发生在页面渲染之前，当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。

（4）mounted：实例已经挂载到DOM上，此时模板已经渲染完成，可以进行DOM操作。

在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

3、更新阶段（Updating）

（5）beforeUpdate：数据更新时，在重新渲染之前调用，此时可以对更新前的状态进行操作。

发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

（6）updated：数据更新完成，重新渲染完成，此时DOM已经更新，可以进行DOM操作。

发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

4、销毁阶段（Destruction）

（7）beforeDestroy：实例销毁之前调用，此时实例仍然完全可用。
（8）destroyed：实例已经销毁，此时实例中的所有指令、观察者等已被清除，无法再访问实例。

在每个生命周期阶段，Vue提供了一系列的钩子函数（Hook Function），可以在特定的阶段执行自定义的代码逻辑。这些钩子函数可以在Vue组件中通过定义对应的方法来使用。

例如，下面是一个Vue组件的代码示例，展示了常用的生命周期钩子函数的使用：

Vue.component('my-component', {
  beforeCreate() {
    // 在实例被创建之前执行的代码
  },
  created() {
    // 在实例创建完成后执行的代码
  },
  beforeMount() {
    // 在实例挂载到DOM之前执行的代码
  },
  mounted() {
    // 在实例挂载到DOM后执行的代码
  },
  beforeUpdate() {
    // 在数据更新之前执行的代码
  },
  updated() {
    // 在数据更新完成后执行的代码
  },
  beforeDestroy() {
    // 在实例销毁之前执行的代码
  },
  destroyed() {
    // 在实例销毁后执行的代码
  }
});

问题1：一旦进入到页面或组件，会执行哪些生命周期

答：前四个生命周期，会调用前四个钩子函数：

问题2：el和data在各个阶段的值是怎么样的

答：beforeCreate：啥也没有

create：有data没有el

beforeMount：都有

mounted：都有

六、AJAX（Asynchronous JavaScript and XML）

AJAX介绍

AJAX是一种在Web应用程序中进行异步数据交互的技术。它通过在后台与服务器进行数据交换，使得网页能够实现异步更新，提升用户体验。

传统的网页交互模式中，当用户与网页进行交互时，需要刷新整个页面才能获取新的数据或更新页面内容。而使用AJAX技术，可以在不刷新整个页面的情况下，通过与服务器进行异步通信，局部更新页面的内容，使得网页变得更加动态和交互性。

AJAX依赖的技术和组件

JavaScript

AJAX使用JavaScript编写代码，通过JavaScript可以动态地修改DOM元素、发送HTTP请求、处理服务器响应等。

XMLHttpRequest

XMLHttpRequest对象是AJAX的核心，它提供了在JavaScript中与服务器进行交互的功能。通过XMLHttpRequest对象，可以发送HTTP请求并接收服务器的响应。

JSON （JavaScript Object Notation）

JSON是一种轻量级的数据交换格式，常用于在AJAX中传输数据。JSON易于解析和生成，广泛应用于Web应用程序中。

服务器端技术: 服务器端需要能够处理AJAX请求，并返回适当的响应。常见的服务器端技术包括PHP、Python、Java等，它们能够接收AJAX请求并提供相应的数据。

AJAX的优点

实时更新: 可以在不刷新整个页面的情况下，实时更新页面的内容，提升用户体验。

交互性: 可以通过AJAX与用户进行交互，根据用户的输入或操作动态地更新页面。

减少带宽消耗: 只更新页面的部分内容，减少了不必要的数据传输，节约了带宽。

提高性能: 通过异步方式进行数据交互，不会阻塞页面的加载和渲染，提高了页面的加载速度和性能。

AJAX已经成为现代Web应用程序开发中不可或缺的技术之一，它为开发者提供了更多灵活性和交互性，为用户提供了更好的体验。

AJAX使用方法

创建XMLHttpRequest对象：使用JavaScript创建XMLHttpRequest对象，它是执行AJAX请求的关键对象。可以通过new XMLHttpRequest()来创建。
定义请求：设置请求的方法（GET或POST）、URL和可选的请求头信息。
发送请求：使用XMLHttpRequest对象的open()方法来指定请求的类型和URL，然后使用send()方法发送请求。
处理响应：使用XMLHttpRequest对象的onreadystatechange事件监听器来处理响应。在事件处理程序中，可以使用readyState和status属性来判断请求的状态和响应是否成功。
处理响应数据：如果请求成功，可以使用XMLHttpRequest对象的responseText或responseXML属性来获取服务器返回的数据。根据需要进行处理，例如更新网页的某个部分。

下面是一个使用AJAX进行GET请求的示例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = xhr.responseText;
        // 处理响应数据
    }
};
xhr.open("GET", "example.com/api/data", true);
xhr.send();

简单实现AJAX功能的库——>Axios

Axios是什么

Axios和AJAX都用于进行异步HTTP请求，但在实现和使用上有所不同。

AJAX（异步JavaScript和XML）是一种在不需要页面重新加载的情况下向服务器发送异步请求的技术。它结合了JavaScript、XML（尽管现在更常用的是JSON）和XMLHttpRequest对象。AJAX运行在后台与服务器发送和接收数据，实现网页的动态内容更新。

Axios是一个基于JavaScript的库，提供了一种简单而强大的方式来进行HTTP请求。它基于XMLHttpRequest对象或较新的Fetch API构建。Axios通过提供易于使用的API简化了HTTP请求的过程，包括请求和响应拦截、自动数据转换、错误处理等功能。

总而言之，Axios是一个库，它封装了底层的XMLHttpRequest或Fetch API，为JavaScript中的HTTP请求提供了更方便和一致的接口。而AJAX是一个更广泛的概念，指的是使用异步通信与服务器进行数据的获取或发送。Axios可以作为一种工具，用于在应用程序中实现AJAX功能。

Axios和Ajax的对比

不使用Axios

<script>
  var app = new Vue({
    el: "#app",
    data: {
      list: []
    },
    mounted: function() {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = JSON.parse(xhr.responseText);
          this.list = response.data;
        }
      };
      xhr.open("GET", "http://yapi.smart-xwork.cn/mock/169327/emp/list", true);
      xhr.send();
    }
  });
</script>

使用Axios

<script>
    new Vue({
        el: "#app",
        data:{
            list:[]
        },
        mounted :function() {       
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
                this.list = result.data.data;
            })
            }
    });

</script>

根据提供的内容，我将解释一下result、result.data和result.data.data分别表示什么：

result：是Axios响应对象，它包含了整个HTTP响应的相关信息，例如状态码、响应头和响应数据等。在这种情况下，result代表从服务器返回的完整响应。
result.data：是result对象的一个属性，它表示从服务器返回的实际响应数据。在这个示例中，响应数据是一个包含多个对象的数组，每个对象表示一个员工的信息。
result.data.data：是result.data对象的一个属性，表示实际的响应数据中的一个属性。在这个示例中，result.data.data表示包含员工信息的数组。

综上所述，根据提供的响应内容，result是整个响应对象，result.data是响应数据对象，它是网页里面的文本内容所表达的自定义对象，而result.data.data则是自定义对象中data属性所对应的数组。

接口文档

前、后端工程师开发时遵守的规范

在线、离线维护

由产品经理提供的产品原型和页面分析而来的

接口文档的管理平台：YAPI

mock地址：提供测试数据

添加项目——>前端项目1

添加分类——>管理用户

添加接口——>根据id查询用户

实际的前端开发——> 根据vue的脚手架创建工程化的前端项目

vue-cli提供了：12345 依赖node.js环境

NodeJS和VUE CLI的安装

1、下载并安装NodeJS

到官网下载一个最新的稳定版本，安装好后到cmd输入node -v查看是否安装成功

注意：一定要去官网下，下推荐的，不然后续进行不下去

2、配置npm的全局安装路径

用管理员身份打开cmd，输入 npm config set prefix + NodeJS安装路径

3、切换npm的淘宝镜像

cmd中输入：npm config set registry https://registry.npm.taobao.org

4、安装Vue-cli

命令行输入：npm install -g @vue/cli

用vue --version查看是否安装成功

Vue项目创建

命令行中输入：vue ui，会弹出页面或者根据网址自行前往

创建项目，功能多选一个Router，走完流程，然后就开始联网创建vue项目

注意：如果一直创建不出来可能需要使用VPN

创建成功就可以关闭网页了

基于vue cli创建的项目具有标准的目录结构

打开vue项目

在vs中添加创建的文件夹后，在该文件夹下cmd，npm run serve，就可以打开了

或

在vscode的npm脚本中打开项目（有可能找不到）

修改项目端口

vue组件都以.vue结尾，每个组件由三个部分组成：

<template>：指定生成的html代码格式的

vue会创建一个虚拟的dom元素，挂载到目标元素上，

vue文件由三部分

template：定义html代码，也就是视图部分

script：定义数据模型和方法

style：控制css样式

主要操作vue文件，main.js、index.html很少去操作

Vue的组件库——Element

基于Vue2.0

就是一套更好看更方便的组件系统

Element快速入门

1、安装

2、引入ElementUI组件库

3、访问官网，复制代码，调整

对组件进行该更改的时候调用某个方法，方法必须放在methods里面，methods和data平级，

size-change是这个element组件的属性，绑定到handleSzieChange方法上，这个方法名可以自定义。

添加表单元素的时候一定要在script段加data，设置里面元素的初始值为空。

而表格不需要加，其中的数据可以用axios异步获取。

要实现点一个组件显示一个界面，就需要使用vue的路由功能

前端路由：URL的hash（#）和组件之间的对应关系

1、在要显示的vue文件中添加router-link，连接到一个路径，比如"/emp"

2、在Appvue中加入router-view

3、在index.js中加入路由信息，如：

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/tilas/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tilas/DeptView.vue')
  },
   {
    path: '/',
    redirect: '/emp'
  }
]

部署Web项目——Nginx

虽然可以使用 `npm run serve` 命令来启动 Web 服务器，但是这种方式只适用于开发环境。在生产环境中，我们需要使用一个高效、稳定、安全的 Web 服务器来部署我们的应用程序。Nginx 是一个流行的 Web 服务器，它可以提供高性能、负载均衡、反向代理、安全性等功能，因此在生产环境中使用 Nginx 部署 Web 应用程序是一个比较好的选择。此外，使用 Nginx 可以更好地控制访问权限、优化网络传输等，从而提高 Web 应用程序的性能和安全性。

小结：

        Vue是一款流行的JavaScript框架，用于构建用户界面。Vue提供了许多功能，包括数据绑定、组件化、路由、状态管理等。

        在Vue中，我们可以使用Ajax来进行异步数据请求。Ajax是一种在不重新加载整个页面的情况下，通过后台与服务器进行数据交换的技术。在Vue中，我们可以使用Axios库来进行Ajax请求。Axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js中。

        Element是一款基于Vue的UI框架，提供了许多常用的UI组件，如按钮、表格、表单、对话框等。Element的组件和Vue的组件是紧密结合的，可以方便地在Vue应用程序中使用。

注意：Ajax 和 Axios 都不是 Vue.js 的一部分，但它们可以与 Vue.js 一起使用。Ajax 是一种用于创建异步 HTTP 请求的技术，而 Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。Vue.js 可以与这些技术一起使用，以便在应用程序中进行数据交互。

七、Maven（管理项目的工具）

maven作用

1、依赖管理

2、统一项目结构（不管什么开发工具，项目都可以通用）

3、标准化的项目构建

maven安装

1、解压从官网下载的maven压缩包

2、修改setting文件，指定localrepository的目录以及在mirrors标签中配置阿里云私服

3、配置环境变量

导入maven工程的方法

1、从file->new->project from existing sources

2、在右侧maven面板中点+选择要导入的项目的pom文件

maven依赖管理

依赖配置

在pom文件中，添加dependencies标签，在里面添加多个dependency的子标签，说明添加依赖的坐标，如果不知道坐标信息，可以到mvnrepository.com去搜索。

依赖传递

直接依赖

间接依赖

排除依赖：在dependency里面插入——<exclusions></exlusions>中间加入exclusion

依赖范围

在dependency标签里面设置，分为四种：compile（默认）、test、provided、runtime

如图：

生命周期

maven中有三套独立的生命周期：clean、default、site

只用关注其中五个阶段

clean：清除上次生成的文件——target会被清除

compile：编译项目源代码

test：使用合适的单元测试框架运行测试

package：将编译后的文件打包，如：jar、war等

install：安装项目到本地仓库

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

八、Web后端开发——SpringBootWeb入门

基础概念

1、web服务器：对http协议进行封装，http请求有很多种情况，代码至少几万行，所以不需要手动写，用现成的就好了。如TomCat。

2、tomcat：端口号冲突，一般都是java程序使用8080端口，在任务管理器中关闭所有java进程即可（http协议默认端口：80）。

3、springboot内嵌了tomcat，不需要自己手动启动。

4、核心/前端控制器：DispacherServlet，是封装自FrameworkServlet的一个类，它是Spring MVC框架中的核心控制器，负责接收HTTP请求并将请求分发给相应的处理程序。

5、CS架构（Client-Server Architecture）是一种基于客户端和服务器之间的通信模式的架构。在这种架构中，客户端向服务器发送请求，服务器接收请求并提供相应的服务或资源。客户端和服务器之间的通信可以通过网络进行，也可以在同一台计算机上进行。

6、BS架构（Browser-Server Architecture）是一种基于浏览器和服务器之间的通信模式的架构。在这种架构中，浏览器作为客户端向服务器发送请求，服务器接收请求并提供相应的服务或资源。与CS架构不同的是，BS架构中的客户端是浏览器，而不是独立的应用程序。因此，BS架构通常用于Web应用程序和互联网应用程序。

什么是SpringBoot

Springboot是基于Spring的一种简化构建、快速开发的框架。(高版本的springboot不支持java11)

九、请求响应

总体概述

有两个Controller来分别处理请求和响应，RequestController、ResponseController类中分别写处理各种请求、响应的方法。

TomCat不识别Controller普通java类，它只识别Servlet，Spring底层提供了一个核心的Servlet类叫做DispatcherServlet，DispatcherServlet实现了Servlet，由DispatcherServlet转给Controller

请求发送过来的数据（比如请求行、请求头等数据）被封装到HttpServletRequest对象当中；响应数据被封装到HttpServletResponse中发送回去。

BS架构：客户端只需要浏览器，应用程序的逻辑和数据都存储在服务器。（维护方便，体验一般）

CS架构：需要单独安装客户端（开发、维护麻烦，体验不错）

请求——请求参数的接受

使用postman：模拟浏览器发送post请求，常用于后端测试（沒有前端的時候也可以測試）

注意：每写一个接受请求参数的方法都需要在上面加上RequestMapping，对应的资源路径

原始方式

springboot方式，@requestParam注解

简单实体参数的接收

直接在方法的形参列表中定义与参数同名的对象

复杂实体参数的接收

RequestController类中的方法直接传入一个类对象，那个类中还有一个类的对象，那么两个类中的setter和getter方法一定要生成！

 @RequestMapping("/complex")
    public String complexController(User user){
        System.out.println(user);
        return "ok";
    }

数组参数

使用数组封装，数组名等于参数名

集合参数

使用集合封装，集合名等于参数名，并且加上注解：@RequestParam List<String> hobby

时间日期类型

直接使用LocalDateTime类接受，前面加上注解说明日期的格式：@DateTimeFormat（pattern=”yyyy-MM-dd HH:mm:ss“）

 @RequestMapping("/time")
    public String date(@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")LocalDateTime time){
        System.out.println(time);
        return "ok";
    }

json参数

用实体对象来接受，需要使用@RequestBody标识

postman中要在body中发送，记得把格式改成json

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

路径参数

用Integer类型接收，注解@PathVariable

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

总结

响应——ResponseBody&统一响应结果

１、ResponseController里面的方法就是功能接口，上面绑定的路径就是功能的访问路径，开发文档就是说明功能接口的路径、参数、返回值等。

２、给客户端浏览器返回值需要依赖一个注解＠ResponseBody（与之对应的是@DataTimeFormat等注解），而＠RestController已经包含了这个注解，所以不需要显式地包含。

３、开发文档中要统一响应结果　——＞

result｛

private Integer code;

private String msg;

private Object data;

......

｝

需要加入result类，定义需要返回的参数以及需要用到的方法，如success。

案例

４、解析XML文件

XML（可扩展标记语言）文件是一种用于存储和传输数据的文本文件格式。它是一种通用的标记语言，用于描述数据的结构和内容。XML文件可以用于在不同的应用程序之间传输数据，也可以用于存储数据。XML文件的结构是由标签、属性和值组成的，这些标记可以描述数据的层次结构和关系。XML文件可以被许多编程语言解析和处理，因此它被广泛应用于Web开发、数据交换、配置文件等领域。

1、在pom.xml中引入dom4j依赖，用于解析XML文件

2、引入解析XML文件的工具类：XMLParserUtils、对应的实体类Emp、XML文件emp.xml

3、引入静态页面文件，放在resources下的static下目录下

4、编写Controller程序，处理请求，响应数据（EmpController）

靜態加載的時候（直接給路徑）會導致文件一移動就需要更改代碼，所以動態加載emp.xml文件：

String file = this.getclass().getclassLoader().getResource("emp.xml").getFile();

十、分层耦合

三层架构

Controller——控制层：接受请求，响应数据

Service——逻辑处理：业务逻辑层，处理具体的业务

Dao——数据访问（持久层）：数据的增删改查

分层解耦

解耦：使用容器，創建的對象存在容器裏面，需要用的層從容器裏面拿

IOC详解（Inversion Of Control）控制反轉

問題1：如何把對象交給容器管理？

直接在類定義上面@Component（工具類，不屬於三大類中）

衍生注解：@Controller、@Service、@Repository

Beans組件掃描：要想bean的四大注解聖廟還必須被注解@ComponentScan掃描

雖然沒有顯示配置，但是已經包含在了啓動類聲明注解@SpringBootApplication中，默認掃描的範圍是啓動類所在包及其子包。

所以三個層的包要寫在啓動類同級目錄下。

DI详解（Dependency Injection）依賴注入

問題2：容器如何提供資源？

@Autowired

多個同類型的Bean，需要用@Primary、@Qualifier、@Resource來解決。（後兩個指定bean的名字而不是類名）

十一、MySQL

數據庫設計

MySQL概述

MySQL是一种开源的关系型数据库管理系统，它可以在服务器上运行。服务器是一台计算机或者计算机网络，用于提供各种服务，包括存储和管理数据。在服务器上安装和配置MySQL，可以通过客户端应用程序连接到MySQL数据库，并进行数据的读取、写入和管理操作。服务器提供了一个运行环境，使得MySQL能够在多个客户端之间共享和管理数据。因此，MySQL和服务器之间存在着密切的关系，服务器提供了MySQL数据库的运行环境和访问接口。

SQL（结构化查询语言）是一种用于管理和操作关系型数据库的语言。它包含了四种主要的语句类型：

1. DQL——数据查询语句（SELECT）：用于从数据库中检索数据

2. DML——数据操作语句（INSERT、UPDATE、DELETE）：对数据库的数据进行增删改。

3. DDL——数据定义语句（CREATE、ALTER、DROP）：用于创建、修改和删除数据库对象，如表、索引、视图等。

4. DCL——数据控制语句（GRANT、REVOKE）：创建用户，管理用户权限

數據庫設計-DDL

查詢數據庫：show databases;

select database();

表操作：creat table 表名（

字段1 字段類型【約束】【comment 字段注釋】，

字段2 字段類型【約束】【comment 字段注釋】

）【comment 表注釋】；

數據類型

數值類型、字符串類型、日期類型

多表設計

數據庫操作

數據庫操作-DML

數據庫操作-DQL

基本查詢

條件查詢

聚合函數

select count(字段，常量，*) from 表名

select min/max() from

select avg(字段) from

select sum() from

分組查詢

排序查詢

分頁查詢

事務

多表查詢

數據庫優化

索引

十二、Mybatis

Mybatis簡介

MyBatis是持久層框架，用於簡化JDBC的開發。

要使用MyBatis，你需要在你的项目中添加MyBatis的依赖。你可以通过Maven或Gradle来管理依赖。

使用Mybatis的操作步驟

1、準備工作（創建工程，數據庫表user、實體類User）

2、引入Mybatis依賴（Framework、Driver），在application.properties裏面配置Mybatis(數據庫連接信息）

3、寫SQL語句

根據Maven結構，單元測試代碼不寫在Main裏面，而是在test文件裏面的測試類裏面。

JDBC的介紹

JDBC：是由sun公司開發的操作關係型數據庫的接口

JDBC原生的操作非常麻煩，所以使用對JDBC進行簡化封裝的Mybatis進行操作

JDBC vs Mybatis

Mapper負責持久層和數據庫的操作

Lombok

Lombok是一个Java库，它通过注解的方式简化了Java代码的编写。它提供了一系列的注解，可以自动生成一些常用的代码，如getter和setter方法、构造函数、equals和hashCode方法等，从而减少了开发人员的工作量。

要使用Lombok，你需要在项目的构建文件（如Maven或Gradle）中添加相应的依赖。对于Maven项目，你可以在pom.xml文件中添加以下依赖：

```xml
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.20</version>
<scope>provided</scope>
</dependency>
```

对于Gradle项目，你可以在build.gradle文件中添加以下依赖：

```groovy
dependencies {
compileOnly 'org.projectlombok:lombok:1.18.20'
annotationProcessor 'org.projectlombok:lombok:1.18.20'
}
```

添加完依赖后，你就可以在Java类中使用Lombok的注解来简化代码的编写了。

预编译SQL

预编译SQL的好处有以下几点：

1. 提高性能：预编译SQL可以将SQL语句编译成可执行的二进制代码，减少了每次执行SQL语句时的解析和编译时间，从而提高了数据库的性能。

2. 防止SQL注入攻击：预编译SQL可以将用户输入的数据作为参数传递给SQL语句，而不是直接拼接到SQL语句中。这样可以有效地防止SQL注入攻击，提高了系统的安全性。

3. 代码可读性和维护性：预编译SQL可以将SQL语句与应用程序的代码分离，使代码更加清晰和易于维护。同时，预编译SQL还可以提供更好的错误处理和调试功能，方便开发人员进行代码调试和排查问题。

4. 跨数据库兼容性：预编译SQL可以提供对不同数据库的兼容性，使得应用程序可以在不同的数据库平台上运行，而不需要修改SQL语句。

总的来说，预编译SQL可以提高数据库的性能、安全性和可维护性，是开发中常用的技术手段之一。

SQL注入

#{}和${}的區別

在MyBatis中，#{}和${}是两种不同的参数占位符语法。

1. #{}：这是一种安全的占位符语法，它会将传入的参数值进行预编译处理，防止SQL注入攻击。在SQL语句中，#{}会被替换为一个占位符，然后通过预编译的方式将参数值安全地传递给数据库。

例如，假设有以下的SQL语句：
SELECT * FROM user WHERE id = #{userId}
当使用#{}作为占位符时，MyBatis会将传入的userId参数值进行预编译处理，生成安全的SQL语句，类似于：
SELECT * FROM user WHERE id = ?
这样可以有效地防止SQL注入攻击。

2. ${}：这是一种简单的占位符语法，它会直接将传入的参数值拼接到SQL语句中，不进行预编译处理。这种语法的使用需要谨慎，因为它存在SQL注入的风险。

例如，假设有以下的SQL语句：
SELECT * FROM user WHERE id = ${userId}
当使用${}作为占位符时，MyBatis会直接将传入的userId参数值拼接到SQL语句中，类似于：
SELECT * FROM user WHERE id = 1
这样的语法存在安全隐患，如果传入的参数值不可信，可能会导致SQL注入攻击。

Mybatis基础操作

刪

在mapper類中寫一個delete方法，加上注釋

@delete（“delete from 表名 where id = #{id}”）

public void delete（Integer id）；

增

改

查

知识点梳理

要实现将表单提交按钮提交的数据发送给Mapper类进行数据库的增添，你需要使用一个后端框架来处理表单提交和数据库操作。以下是一个简单的示例，使用Spring Boot和MyBatis框架来实现：

1. 创建一个表单页面（HTML或JSP），包含需要提交的表单字段。

2. 创建一个Controller类，用于处理表单提交请求。

```java
@Controller
public class FormController {

@Autowired
private YourMapper yourMapper; // 注入你的Mapper类

@PostMapping("/submitForm")
public String submitForm(@ModelAttribute YourFormModel formModel) {
// 在这里执行数据库操作，调用Mapper类的方法
yourMapper.insertData(formModel);

// 返回一个结果页面或重定向到其他页面
return "resultPage";
}
}
```

3. 创建一个Mapper接口，定义数据库操作的方法。

```java
@Mapper
public interface YourMapper {

void insertData(YourFormModel formModel);
}
```

4. 创建一个FormModel类，用于封装表单数据。

```java
public class YourFormModel {

private String field1;
private String field2;
// 其他表单字段的getter和setter方法

// 构造方法和其他方法
}
```

5. 配置Spring Boot和MyBatis，确保正确连接到数据库。

这样，当用户在表单页面点击提交按钮时，表单数据将被发送到`submitForm`方法，然后调用Mapper类的`insertData`方法将数据插入数据库中。你可以根据实际需求进行调整和扩展。

       mapper和controller都是后端

        Mapper是指数据访问层的组件，主要负责数据库的操作，包括查询、插入、更新和删除等。它通常与数据库表进行映射，将数据库中的数据转化为对象，或者将对象转化为数据库中的数据。

        Controller是指控制层的组件，主要负责接收用户的请求，处理请求参数，调用相应的服务或业务逻辑，并返回处理结果给前端。它是前后端交互的桥梁，负责将用户的请求转发给相应的业务逻辑进行处理。

        在后端开发中，Mapper和Controller通常是分离的，Mapper负责数据的持久化操作，Controller负责业务逻辑的处理和请求的转发。它们共同协作，完成整个后端的功能。