这周前两天学习了Git，github，相关内容见上一篇文章。
之后学习了JSON的一些知识，jQuery的Ajax请求，Sass的用法。
JSON（JavaScript Object Notation JS对象表示法）
在JS 中一切皆是对象。
因此JS支持的类型都可以通过JSON来表示，例如字符串、数字、对象、数组等。
JSON语法格式：
对象表示为键值对
数据由逗号隔开
花括号保存对象
方括号保存数组
JSON键值对使用来保存JS对象的一种方式，和JS对象的写法大同小异，键、值对组合中的键名写在前面并用双引号“ ”包裹，使用冒号：分割，然后紧接着值
JSON是JS对象的字符串表示法，他使用文本表示一个JS 对象的信息，本质是一个字符串。
JSON和JS对象互转
JSON-->JS 使用JSON.parse()方法
JS-->JSON 使用JSON.stringify()方法
JSON分类1.对象{}2.数组[]
varobj='{"name":"孙悟空","age":18,"gender":"男"}';
vararr='[1,2,3,"Hello",true]';JSON中允许的值
字符串
数值
布尔值
null
对象
数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
var user ={
name:"马思纯",
age:18,
sex:"女"
}
console.log(user);
var str=JSON.stringify(user);
console.log(str);
console.log(JSON.parse(str));
//JSON分类
//1.对象{}
//2.数组[]
//创建一个对象
var obj ='{"name":"孙悟空","age":18,"gender":"男"}';
var arr ='[1,2,3,"Hello",true]';
var obj66='{"arr":[1,2,3]}';
//在JS中，为我们提供了一个工具类，就叫JSON
//JSON.parse( )
console.log(JSON);
var obj2=JSON.parse(obj);
var arr2=JSON.parse(arr);
console.log(obj2);
console.log(obj2.name);
console.log(obj2.age);
console.log(arr2[0]);
console.log(arr2[1]);
console.log(arr2[2]);
console.log(arr2[3]);
console.log(arr2[4]);
//JSON.stringify()
arr3=JSON.stringify(arr2);
obj3=JSON.stringify(obj2);
console.log(arr3);
console.log(obj3);
//函数eval()
//这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
//如果使用eval()执行的字符串中含有{}，他会将{}当成是代码块
//如果不希望将其当成代码块解析，则需要在字符串前后各加一个（）
//这个函数的功能很强大，可以直接执行一个字符串中的JS代码
//但在开发中不建议使用。安全性能低
/* var str2="alert('Hello')";
eval(str2);
console.log(alert("警告")); */
var test=eval ("("+obj+")");
console.log(obj);
</script>
</body>
</html>
JQuery Ajax
异步无刷新技术
Ajax（Asynchronous Javascript And XML），即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式
异步的JavaScript
它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。
<!DOCTYPE html>
<html>
<head>
<!-- jquery调用ajax方法:
格式:$.ajax({0);
参数：
type:请求方式GET /POST
url:请求地址url
async:是否异步，默认是true表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType:设置请求头
success:请求成功时调用此函数
error:请求失败时调用此函数
-->
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="div"></ul>
</body>
<script src="./js/jquery-3.4.1.js"></script>
<script type="text/javascript">
var div=document.getElementById('div')
function getDataPage(page,per_page){
$.ajax({
type:"post",//请求方式
url:"http://118.195.129.130:3000/food/getInfoByPage", //请求地址
params:{//请求数据，JSON对象
page:page,//如果没有参数，则不需要设置
per_page:per_page
},
//请求成功时调用的函数
success:function(data){//data是一个形参名，代表的是返回的数据
console.log(data.data);//字符串
// //将字符串转换成JSON对象
// var obj =JSON.parse(data);
// console.log(data);
let res=data.data
for(let i =0;i<res.length;i++){
console.log(res[i].name);
div.innerHTML+=`<li>${res[i].name}</li>`
}
}
});
}
getDataPage(1,10)
</script>
</html>Sass
(英文全称：Syntactically Awesome Stylesheets) 是一个层叠样式表语言
Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 .scss。
Sass 变量
变量用于存储一些信息，它可以重复使用。
Sass 变量可以存储以下信息：
字符串
数字
颜色值
布尔值
列表
null 值
Sass 变量使用 $ 符号：
$variablename: value;Sass 作用域
Sass 变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标签则是为 red。
!global
当然 Sass 中我们可以使用 !global 关键词来设置变量是全局的：
注意：所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件。
GET 和 POST 方法的区别：
1、发送的数据数量
在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。
在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。
2、安全性
GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。
POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。
3、加入书签中
GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。
4、编码
在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。
在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。
5、可变大小
GET 方法中的可变大小约为 2000 个字符。
POST 方法最多允许 8 Mb 的可变大小。
6、缓存
GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。
7、主要作用
GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。
总结：这两天学习的内容目前还有些迷