I learned Git and github in the first two days of this week. See the previous article for related content.
After that, I learned some knowledge about JSON, jQuery's Ajax request, and the usage of Sass.
JSON (JavaScript Object Notation JS Object Notation)
In JS everything is an object.
Therefore, all types supported by JS can be represented by JSON, such as strings, numbers, objects, arrays, etc.
JSON syntax format:
Objects are represented as key-value pairs
data separated by commas
Curly braces hold objects
Square brackets hold arrays
JSON key-value pairs are a way to save JS objects. They are written in much the same way as JS objects. The key name in the key and value pair combination is written in front and wrapped in double quotes " ", separated by colon:, and then followed by the value.
JSON is the string representation of JS objects. It uses text to represent the information of a JS object, which is essentially a string.
Convert between JSON and JS objects
JSON-->JS uses JSON.parse() method
JS-->JSON uses JSON.stringify() method
JSON classification 1. Object {} 2. Array []
varobj='{"name":"孙悟空","age":18,"gender":"男"}';
vararr='[1,2,3,"Hello",true]';Values allowed in JSON
string
numerical value
Boolean value
null
object
array
<!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
Asynchronous refreshless technology
Ajax (Asynchronous Javascript And XML) is asynchronous JavaScript and XML. Ajax is actually an asynchronous communication method between the browser and the server.
Asynchronous JavaScript
It can send requests to the server asynchronously without blocking the current page while waiting for a response. In this case, the browser can do its own thing. The browser does not start processing the response data until the response is successfully obtained.
<!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
(English full name: Syntactically Awesome Stylesheets) is a cascading style sheet language
Sass is a CSS preprocessor.
Sass is a CSS extension language that can help us reduce CSS duplicate code and save development time.
Sass is fully compatible with all versions of CSS.
Sass extends CSS3, adding features such as rules, variables, mixins, selectors, inheritance, built-in functions, and more.
Sass generates well-formatted CSS code that is easy to organize and maintain.
Sass files have the suffix .scss .
Sass variables
Variables are used to store some information, which can be used repeatedly.
Sass variables can store the following information:
string
number
color value
Boolean value
list
null value
Sass variables use the $ symbol:
$variablename: value;Sass scope
The scope of Sass variables can only have an effect at the current level. As shown below, the style of h1 is green defined internally, and the p tag is red.
!global
Of course, in Sass we can use the !global keyword to set variables to be global:
Note: We generally define all global variables in the same file, such as: _globals.scss , and then we use @include to include the file.
The difference between GET and POST methods:
1. Amount of data sent
In GET, only a limited amount of data can be sent because the data is sent in the URL.
In POST, large amounts of data can be sent because the data is sent in the body of the text.
2. Security
The data sent by the GET method is not protected because the data is exposed in the URL field, which increases the risk of vulnerabilities and hacker attacks.
The data sent by the POST method is safe because the data is not exposed in the URL bar and can use a variety of encoding techniques, which makes it resilient.
3. Add to bookmarks
The result of a GET query can be bookmarked because it exists in the form of a URL; the result of a POST query cannot be bookmarked.
4. Encoding
When using the GET method in a form, only ASCII characters are accepted in the data type.
On form submission, the POST method does not bind the form data type and allows binary and ASCII characters.
5. Variable size
The variable size in the GET method is approximately 2000 characters.
The POST method allows a variable size of up to 8 Mb.
6. Cache
The data of the GET method is cacheable, but the data of the POST method is not cacheable.
7. Main function
The GET method is mainly used to obtain information. The POST method is mainly used to update data.
Summary: What I have learned in the past two days is still a bit confusing.