文章目录
MK的前端精华笔记
第一阶段：前端基础入门
1、HTML标签
标签折叠现象
文字与文字之间的额多个空格，被折叠成一个
标签壁和 文字间的空格是会被忽略掉的
转义符
HTML注释
2、列表标签
3、多媒体与语义转化标签
1、图片标签
Ajax技术 Axios
Axios 官网：http://www.axios-js.com/zh-cn/docs/vue-axios.html
1、如何在Axios中发送 get 和 post请求
引入 Axios 案例 ：点击按钮 请求接口返回数据 ，并把想要的数据显示出来
1 JSON的介绍
JSON是什么？
JSON，全称为JavaScript Object Notation，即JavaScript对象表示法，是一种轻量级的数据交换格式。它基于JavaScript语言的一个子集，但JSON是完全独立于语言的，这意味着它可以被许多不同的编程语言所解析和生成。
用途
JSON在现代Web开发中扮演着极其重要的角色。它广泛应用于以下领域：
Web API：前后端分离的Web应用通常使用JSON作为数据交换格式。
配置文件：许多应用程序使用JSON作为配置文件的格式。
数据存储：一些NoSQL数据库（如MongoDB）使用JSON或类似的格式来存储数据。
json示例
为了更好地理解JSON，让我们通过一个简单的示例来展示它的结构和用法。
{
"name": "John Doe",
"age": 30,
"isEmployed": true,
"address": {
"street": "123 Main St",
"city": "Anytown",
"zip": "12345"
},
"phoneNumbers": [
{
"type": "home",
"number": "555-1234"
},
{
"type": "office",
"number": "555-5678"
}
]
}
在这个示例中，我们定义了一个包含个人信息的JSON对象。它包括字符串、数字、布尔值、嵌套对象和数组。这种结构使得JSON非常适合表示复杂的数据。
结论
通过今天的学习，我们已经对JSON有了基本的了解。我们学习了JSON的定义、特点和用途，并通过一个示例看到了它的实际应用。在接下来的课程中，我们将深入探讨JSON的语法，并学习如何在不同的编程环境中使用它。
2JSON语法基础
JSON语法概述
JSON的语法非常简单，它主要基于两种结构：对象（Object）和数组（Array）。对象是键值对的集合，而数组则是值的有序集合。我们将从这两个概念开始，逐步构建更复杂的JSON数据结构。
对象
对象在JSON中用花括号{}表示，它包含了一系列的键值对。每个键值对由一个键（key），一个冒号:，和一个值（value）组成。对象中的键值对通过逗号,分隔。
示例：简单的JSON对象
{
"name": "Alice",
"age": 25,
"isStudent": false
}
在这个示例中，我们定义了一个包含三个键值对的对象。每个键后面跟着一个值，键和值的类型可以是字符串、数字、布尔值等。
数组
数组在JSON中用方括号[]表示，它是一个有序的值集合。数组可以包含任意类型的值，包括其他对象和数组。
示例：简单的JSON数组
[
"apple",
"banana",
"cherry"
]
❤ 数据类型
JSON支持以下几种数据类型：
1、字符串（String）：用双引号"括起来的文本。
2、数字（Number）：不带引号的数值，可以是整数或浮点数。
3、布尔值（Boolean）：true或false。
4、null：表示空值的特殊关键字。
5、数组（Array）：有序集合，用方括号[]括起来。
6、对象（Object）：键值对集合，用花括号{}括起来。
嵌套
JSON支持嵌套，这意味着对象可以包含其他对象或数组，数组也可以包含对象或其他数组。
示例：嵌套的JSON
{
"name": "Bob",
"age": 30,
"education": {
"university": "MIT",
"degree": "Masters in Computer Science"
},
"hobbies": ["reading", "cycling", "hiking"]
}
在这个示例中，education是一个嵌套的对象，而hobbies是一个数组。
结论
通过今天的学习，我们掌握了JSON的基础语法，包括对象、数组、数据类型和嵌套的概念。这些是构建复杂JSON数据结构的基石。在接下来的课程中，我们将学习如何在实际编程环境中使用JSON，以及如何与JavaScript等语言进行交互。
3 数据类型
数据类型概览
在JSON中，数据的表达方式和数据类型有着严格的规定。掌握JSON支持的数据类型对于创建有效且语义清晰的JSON数据至关重要。今天，我们将深入了解JSON支持的几种基础数据类型：字符串、数字、布尔值、null。
字符串（String）
字符串是JSON中最常见的数据类型之一，用于表示文本数据。在JSON中，字符串由双引号（"）包围。
{
"greeting": "Hello, World!",
"name": "John Doe",
"city": "New York"
}
在上述示例中，greeting、name和city都是字符串类型的键，对应的值也是字符串。
数字（Number）
数字在JSON中表示为数值，可以是整数或浮点数。与大多数编程语言一样，JSON中的数字没有引号。
{
"age": 30,
"height": 175.5,
"temperature": -4
}
这里，age、height和temperature都是数字类型的值。
布尔值（Boolean）
布尔值用于表示逻辑值，它只有两个可能的值：true和false。
{
"isStudent": true,
"isMarried": false
}
在这个例子中，isStudent和isMarried是布尔类型的键。
null
null在JSON中表示一个空值或不存在的值。它常用于标记一个字段的存在但值的缺失。
{
"username": "kimi",
"email": null
}
这里，email字段被赋值为null，表示用户没有提供电子邮件地址。
数据类型的应用
理解每种数据类型的用途和适用场景对于编写清晰的JSON数据至关重要。例如，当你需要存储一个人的姓名时，应使用字符串类型；当你需要存储年龄时，应使用数字类型；当你需要表示一个开关状态时，布尔值是最佳选择。
深入理解
每种数据类型在JSON中都有其特定的规则和限制。例如，字符串中可以包含转义字符，如\n表示换行，\t表示制表符。数字类型在JSON中没有前导零或负号的规则，且不允许使用科学计数法或任何形式的引号。
结论
通过今天的学习，我们对JSON支持的数据类型有了全面的了解。我们学习了字符串、数字、布尔值和null的概念和用法，并通过示例加深了理解。这些知识将帮助你在实际开发中正确地使用JSON数据类型。
4、对象和数组的深入
嵌套概览
在JSON中，对象和数组可以相互嵌套，形成复杂的数据结构。这种特性使得JSON非常适合表示层次化的数据，如用户信息、组织结构等。今天，我们将深入探讨对象和数组的嵌套，以及如何使用它们来构建复杂的数据模型。
对象的嵌套
对象的嵌套意味着在一个对象中包含另一个对象。这使得我们可以创建包含多个层次的数据结构。
示例：嵌套对象
{
"person": {
"name": "Alice",
"age": 30,
"contact": {
"email": "alice@example.com",
"phone": "123-456-7890"
},
"education": {
"university": "Example University",
"degree": "Bachelor's"
}
}
}
在这个示例中，person对象包含了contact和education两个嵌套对象。
数组的嵌套
数组的嵌套意味着在数组中的某个元素是一个对象或另一个数组。这使得我们可以创建列表中包含复杂数据项的数据结构。
示例：数组嵌套对象
{
"company": {
"name": "Example Corp",
"employees": [
{
"name": "Bob Smith",
"role": "Developer",
"age": 28
},
{
"name": "Carol White",
"role": "Designer",
"age": 32
}
]
}
}
在这个示例中，employees数组包含了多个对象，每个对象代表一个员工的信息。
混合嵌套
在实际应用中，我们经常需要混合使用对象和数组的嵌套，以表示更复杂的数据结构。
示例：混合嵌套
{
"company": {
"name": "Tech Innovations",
"departments": [
{
"name": "Engineering",
"manager": "Alice",
"team": [
{
"name": "Bob",
"role": "Senior Developer"
},
{
"name": "Carol",
"role": "QA Engineer"
}
]
},
{
"name": "Design",
"manager": "Dave",
"team": [
{
"name": "Eve",
"role": "UX Designer"
}
]
}
]
}
}
在这个示例中，departments数组中的每个对象都包含了一个team数组，而每个team数组又包含了多个对象。
嵌套的用途
嵌套在JSON中非常有用，因为它允许我们以一种结构化的方式表示复杂的数据。例如，在Web API中，嵌套可以用来表示一个用户的所有信息，包括个人资料、联系方式、教育背景等。
结论
通过今天的学习，我们深入了解了JSON对象和数组的嵌套，以及如何使用它们来构建复杂的数据结构。我们通过示例学习了嵌套对象、嵌套数组以及混合嵌套的概念和应用。
5、JSON与JavaScript
概述
今天我们将探索JSON与JavaScript之间的紧密关系。作为JSON的起源语言，JavaScript提供了内置的方法来解析和生成JSON格式的数据。在今天的课程中，我们将学习如何使用JavaScript来处理JSON数据，包括解析JSON字符串为JavaScript对象，以及将JavaScript对象转换为JSON字符串。
JSON解析
在JavaScript中，解析JSON数据是一个简单的过程，使用JSON.parse()方法可以将JSON格式的字符串转换为JavaScript对象。
示例：解析JSON
var jsonString = '{"name": "John Doe", "age": 30}';
var obj = JSON.parse(jsonString);
console.log(obj.name); // 输出: John Doe
console.log(obj.age); // 输出: 30
在这个示例中，我们定义了一个包含个人信息的JSON字符串，使用JSON.parse()方法将其转换为JavaScript对象，并访问其属性。
JSON生成
与解析相对应，JavaScript提供了JSON.stringify()方法，用于将JavaScript对象或数组转换为JSON格式的字符串。
示例：生成JSON
var person = {
name: "Jane Doe",
age: 25,
isStudent: false
};
var jsonString = JSON.stringify(person);
console.log(jsonString);
// 输出: {"name":"Jane Doe","age":25,"isStudent":false}
在这个示例中，我们创建了一个JavaScript对象，并使用JSON.stringify()方法将其转换为JSON格式的字符串。
理解JSON与JavaScript的对应关系
对象：在JavaScript中，对象通过键值对存储数据，这与JSON对象的结构完全一致。
数组：JavaScript中的数组可以存储任何类型的数据，包括其他数组或对象，这与JSON数组的灵活性相似。
基本数据类型：JavaScript的基本数据类型（字符串、数字、布尔值、null）与JSON的数据类型直接对应。
深入解析与生成
复杂数据结构：JavaScript可以解析包含嵌套对象和数组的复杂JSON结构。
函数和日期：由于JSON规范的限制，JavaScript中的函数和日期对象在转换为JSON时不会被直接序列化。对于这些特殊情况，需要特别的处理方法。
循环引用：如果对象中存在循环引用，JSON.stringify()方法将抛出错误。
示例：处理循环引用
var obj = {};
obj.self = obj; // 创建循环引用
try {
var jsonString = JSON.stringify(obj);
} catch (e) {
console.error("不能序列化对象，因为它包含循环引用", e);
}
在这个示例中，我们创建了一个包含循环引用的对象，并尝试将其转换为JSON字符串，结果是捕获了一个错误。
结论
通过今天的学习，我们掌握了如何在JavaScript中解析和生成JSON数据。我们学习了JSON.parse()和JSON.stringify()方法的使用，以及它们在处理JSON数据时的重要性。我们还了解了JSON与JavaScript之间的对应关系，以及在处理复杂数据结构时需要注意的问题。
6、JSON解析工具
概述
在处理JSON数据时，解析工具和在线验证服务是开发者的重要助手。它们不仅可以帮助我们格式化和验证JSON数据，还能在开发过程中快速识别语法错误。今天，我们将介绍一些常用的JSON解析工具和在线验证服务，以及如何使用它们来提高我们的开发效率。
JSON格式化工具
JSON格式化工具可以帮助我们以更易读的方式展示JSON数据。这些工具通常会添加缩进和换行，使得嵌套的数据结构一目了然。
示例：使用JSON格式化工具
假设我们有以下未格式化的JSON字符串：
{"name":"JSON Tutorial","length":14,"topics":["JSON Syntax","Data Types","JSON and JavaScript"]}
通过JSON格式化工具，它可以被转换成以下易读的形式：
{
"name": "JSON Tutorial",
"length": 14,
"topics": [
"JSON Syntax",
"Data Types",
"JSON and JavaScript"
]
}
在线JSON验证服务
在线JSON验证工具允许我们输入JSON字符串，并即时检查其语法正确性。如果JSON数据有误，这些工具通常会提供错误信息和建议的修复方案。
示例：使用在线JSON验证服务
访问一个在线JSON验证器，如JsonTool.cn。
输入或粘贴您的JSON数据。
验证器会分析数据并指出任何潜在的错误。
JSON美化工具
JSON美化工具不仅格式化JSON数据，还可能提供语法高亮和其他功能，使得数据更加易于理解。
示例：使用JSON美化工具
使用JsonTool.cn等工具，输入JSON数据。
工具会显示格式化并美化后的JSON数据，可能包括颜色编码和折叠/展开功能。
JSON解析工具的选择
选择JSON解析工具时，考虑以下因素：
易用性：工具是否简单易用，是否支持拖放或粘贴数据。
功能：工具是否提供额外的功能，如JSON路径查询、数据过滤等。
兼容性：工具是否支持所有主流浏览器和操作系统。
安全性：如果是在线工具，确保它不会存储您提交的数据。
结论
通过今天的学习，我们了解了JSON解析工具和在线验证服务的重要性和使用方法。这些工具不仅可以帮助我们格式化和验证JSON数据，还可以提高我们的开发效率和代码质量。
7、JSON与Web开发
概述
JSON在Web开发中的应用无处不在，特别是在数据交换和配置方面。今天，我们将探讨JSON在Web开发中的应用，重点关注它如何与APIs和Web服务协同工作，以及它对现代Web应用程序的影响。
JSON在APIs中的应用
应用程序接口（API）是软件组件之间通信的桥梁。在Web开发中，APIs常用于客户端和服务器之间的数据交换。
RESTful APIs
表现层状态转移（REST）是一种API设计风格，它使用标准的HTTP方法，如GET、POST、PUT和DELETE来获取或发送数据。JSON是RESTful APIs中最常用的数据格式之一。
示例：使用JSON的RESTful API
假设我们有一个获取用户信息的API：
GET /api/users/123
这个响应是一个JSON对象，包含了用户的详细信息。
JSON在Web服务中的应用
Web服务允许不同的应用程序通过网络进行交互。JSON作为一种轻量级的数据交换格式，在Web服务中得到了广泛应用。
SOAP和JSON
简单对象访问协议（SOAP）是一种常用的Web服务协议，它通常使用XML作为数据格式。然而，由于JSON的简洁性，许多现代Web服务也开始支持JSON。
JSON与AJAX
异步JavaScript和XML（AJAX）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。JSON是AJAX请求中常用的响应格式。
示例：AJAX请求使用JSON
var xhr = new XMLHttpRequest();
xhr.open('GET', 'api/data', true);
xhr.onload = function() {
if (this.status === 200) {
var data = JSON.parse(this.responseText);
console.log(data);
}
};
xhr.send();
JSON与前端框架
现代前端框架，如React、Angular和Vue.js，经常与JSON数据一起使用，以支持组件化和数据绑定。
示例：React组件使用JSON
function UserComponent({ user }) {
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}
// 假设我们从API获取了用户数据
ReactDOM.render(<UserComponent user={userData} />, document.getElementById('app'));
在这个示例中，我们使用从API获取的JSON数据来渲染React组件。
结论
通过今天的学习，我们了解了JSON在Web开发中的广泛应用，特别是在APIs、Web服务、AJAX请求和前端框架中。JSON作为一种高效的数据交换格式，对于构建现代Web应用程序至关重要。
8、错误处理
概述
在处理JSON数据时，我们经常会遇到各种错误。这些错误可能源于格式问题、数据类型不匹配、编码问题等。今天的课程将教授大家如何识别和处理JSON数据中的常见错误，确保我们的程序能够稳定运行并正确处理异常情况。
常见的JSON错误类型
语法错误
缺少逗号、引号、花括号或方括号。
错误的使用单引号代替双引号。
数据类型错误
尝试将字符串解析为数字或布尔值。
编码错误
错误的字符编码，如UTF-8编码错误。
运行时错误
在JavaScript中尝试访问未定义的JSON属性。
识别JSON错误
使用JSON解析工具
利用第6天课程中介绍的JSON解析工具，可以帮助我们快速识别JSON数据中的语法错误。
示例：使用Json解析工具识别错误
在JsonTool.cn中输入以下错误的JSON字符串：
{"name": "JSON Tutorial", "length": "十四天", "topics": ["JSON Syntax", "Data Types"]
Json解析工具将指出缺少一个方括号来闭合数组。
处理JSON错误
语法错误处理
确保所有对象和数组都有相应的开闭括号。
检查所有的键名和字符串值是否都用双引号包围。
数据类型错误处理
在JavaScript中，使用合适的函数来转换数据类型，如parseInt()、parseFloat()、Boolean()。
编码错误处理
确保文件保存时使用正确的字符编码，通常为UTF-8。
运行时错误处理
在访问JSON属性之前，检查它们是否存在。
使用try-catch块来捕获并处理异常。
示例：在JavaScript中处理JSON错误
var jsonString = '{"name": "JSON Tutorial", "length": 14, "topics": ["JSON Syntax", "Data Types"]';
try {
var obj = JSON.parse(jsonString);
} catch (e) {
console.error("解析错误:", e);
// 进行错误处理，例如记录错误、通知用户等
}
在这个示例中，我们尝试解析一个不完整的JSON字符串，并在捕获到异常时处理它
最佳实践
验证数据：在处理JSON数据之前，验证其格式和数据类型是否符合预期。
错误日志：记录错误信息，以便于调试和追踪问题源头。
用户反馈：在应用程序中提供清晰的错误信息反馈给用户。
结论
通过今天的学习，我们掌握了识别和处理JSON数据中常见错误的方法。我们学习了如何使用JSON解析工具来识别语法错误，以及如何在JavaScript中处理数据类型错误和运行时错误。
明天，我们将了解JSON Schema，这是一种用于描述和验证JSON数据结构的强大工具。这将帮助我们确保数据的完整性和正确性。
扫一扫
485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
