jQuery在线文档
$.ajax数据请求
$.get(
'http://www.xiaolongxia.top:3006/api/getbooks',
{ id: 1 },
function (res) {
console.log(res);
}
);
$.post(
'http://www.xiaolongxia.top:3006/api/addbook',
{
id: 5,
bookname: '小雪人',
author: '小王子',
publisher: '北方雪国出版社',
},
function (res) {
console.log(res);
}
);
$.ajax({
type: 'GET',
url: 'http://www.xiaolongxia.top:3006/api/getbooks?id=1',
success: function (res) {
console.log(res);
},
});
$.ajax({
type: 'POST',
url: 'http://www.xiaolongxia.top:3006/api/addbook',
data: {
id: 6,
bookname: '小雪球',
author: '小王子',
publisher: '北方雪国出版社',
},
success: function (res) {
console.log(res);
},
});
接口测试工具postman
GET请求
POST请求
接口文档
接口留言案例
<div class="publish">
<form id="sendForm">
<span class="fabiao">发表评论</span>
<div class="comment">
<div class="comment-list">
<span>评论人：</span><br />
<input type="text" name="username" />
</div>
<div class="comment-list">
<span>评论内容：</span><br />
<textarea id="" cols="50" rows="6" name="content"></textarea>
</div>
<input type="submit" value="发表评论" />
</div>
</form>
</div>
<div class="leave-list">
<ul>
<span>留言列表</span>
</ul>
</div>
function getCommentList() {
$.ajax({
type: 'GET',
url: 'http://www.xiaolongxia.top:3006/api/cmtlist',
success: function (res) {
console.log(res);
if (res.status !== 200) return '数据请求失败';
var rows = [];
res.data.forEach(function (item) {
var li = `<li>
<div><span>${item.content}</span></div>
<div class="leave_date">
<span>评论人：${item.username}</span><span>评论时间：${item.time}</span>
</div>
</li>`;
rows.push(li);
});
$('ul').empty().append(rows.join(''));
},
});
}
getCommentList();
$(function () {
$('#sendForm').submit(function (e) {
e.preventDefault();
var data = $(this).serialize();
$.ajax({
type: 'POST',
url: 'http://www.xiaolongxia.top:3006/api/addcmt',
data,
success: function (res) {
if (res.status !== 201) {
return alert('数据请求失败');
}
getCommentList();
$('#sendForm')[0].reset();
},
});
});
});
模板引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./template-web.js"></script>
</head>
<body>
<div class="container"></div>
<script type="text/html" id="tpl-demo">
<span>{{name}}</span>
<span>
{{if flag === 0}} flag的值是0 {{else if flag === 1}} flag的值是1 {{/if}}
</span>
<ul>
{{each student}}
<li>索引是：{{$index}}， 名字是：{{$value}}</li>
{{/each}}
</ul>
<span>{{times | dateFormat}}</span>
</script>
<script>
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y + '-' + m + '-' + d;
};
var data = {
name: 'zs',
flag: 1,
student: ['小明', '小李', '小红'],
times: new Date(),
};
var htmlStr = template('tpl-demo', data);
$('.container').html(htmlStr);
</script>
</body>
</html>
模板引擎-新闻列表案例
<body>
<ul class="news_containr"></ul>
<script type="text/html" id="tpl_news">
{{each data}}
<li>
<div class="new_img">
<img src="{{'http://www.xialongxia.top:3006'+$value.img}}" alt="" />
</div>
<div class="news">
<div class="news_detail">
<h3>{{$value.title}}</h3>
<div>
{{each $value.tags}}
<span>{{$value}}</span>
{{/each}}
</div>
</div>
<div class="news_date">
<div class="news_date_fl">
<span>{{$value.source}}</span>
<span>{{$value.time}}</span>
</div>
<div class="news_date_fl">点赞: {{$value.cmtcount}}</div>
</div>
</div>
</li>
{{/each}}
</script>
<script>
$(function () {
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y + '-' + m + '-' + d;
};
function getList() {
$.get('http://www.xiaolongxia.top:3006/api/news', function (res) {
if (res.status !== 200) return alert('数据请求失败');
console.log(res);
for (var i = 0; i < res.data.length; i++) {
res.data[i].tags = res.data[i].tags.split(',');
}
var htmlStr = template('tpl_news', res);
$('.news_containr').html(htmlStr);
});
}
getList();
});
</script>
</body>
正则与字符串操作 exec、replace
var str = '<div>{{google}}</div>';
var yanzen = /{{([a-zA-Z]+)}}/;
var res = yanzen.exec(str);
console.log(res);
res = str.replace(res[0], res[1]);
console.log(res);
var str = '<div>{{hello}}</div>';
var yanz = /{{([a-zA-Z]+)}}/;
var res = yanz.exec(str);
res = str.replace(res[0], res[1]);
console.log(res);
var str = '<div>{{name}}今年{{age}}岁了</div>';
var yanz = /{{\s*([a-zA-Z]+)\s*}}/;
var res = null;
while ((res = yanz.exec(str))) {
str = str.replace(res[0], res[1]);
}
console.log(str);
var data = { name: 'zs', age: 10 };
var str = '<div>{{name}}今年{{age}}岁了</div>';
var yanz = /{{\s*([a-zA-Z]+)\s*}}/;
var res = null;
while ((res = yanz.exec(str))) {
str = str.replace(res[0], data[res[1]]);
}
console.log(str);
xhr
MDN - XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.xiaolongxia.top:3006/api/getbooks');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.xiaolongxia.top:3006/api/addbook');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('id=9&bookname=小犀牛&author=阿里巴巴&publisher=淘宝影业');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
查询字符串
JSON-数据交换格式、序列化
我们前端一般是用json格式交换数据
json 就是 jacascript object notation 就是js对象和数组的字符串表示法
JSON的本质就是字符串， 轻量级主流的数据交换格式
json的两种结构
1 对象结构： 属性必须是""引号包裹， 值如果是字符串也必须用""引号包裹， 值 除非是 布尔值和数值可以不用包裹
2 数组结构： 数组中的字符串必须用""引号包裹， 数值用逗号隔开， 一个数组中可以有多个对象， ，或者数组中嵌套数组，但是数组中的字符串还是必须""引号包裹， 数字逗号隔开
JSON语法注意事项
json 语法注意事项
1 属性名必须用""包裹
2 字符串也必须用“”包裹
3 json中不能使用' '单引号
4 json中不能有字符串
5 json外层对象，必须是[ ], 或者是 { }
6 属性值不能是 undefined ， 可以是 null ,或者6种数据类型， 6 选 1 【字符串， 数值， 布尔值，数组， 对象， null 】
json是用来传输数据的， 用字符串来表示 js 对象或数组数据
var jsonStr = '{"name":"zs", "age":"20"}';
var str = JSON.parse(jsonStr);
console.log(str);
var str1 = { name: 'zs', age: '20' };
var jsonStr1 = JSON.stringify(str1);
console.log(jsonStr1);
function getList() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.xiaolongxia.top:3006/api/getbooks');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
console.log(JSON.parse(xhr.responseText));
}
};
}
getList();
XHR Level2的新特性、ontimeout、new FormData
<body>
<form id="sendFrom">
<label>用户名：</label>
<input type="text" value="用户名" name="username" />
<br />
<label>密码：</label>
<input type="password" value="密码" name="password" />
<input type="submit" value="提交表单" />
</form>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.xiaolongxia.top:3006/api/getbooks');
xhr.send();
xhr.timeout = 30;
xhr.ontimeout = function () {
console.log('请求超时了');
};
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
var formData = new FormData();
formData.append('username', 'zs');
formData.append('userpwd', '123456');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.xiaolongxia.top:3006/api/formdata');
xhr.send(formData);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
var sendForm = document.querySelector('#sendFrom');
sendForm.addEventListener('submit', function (e) {
e.preventDefault();
var fd = new FormData(sendForm);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.xiaolongxia.top:3006/api/formdata');
xhr.send(fd);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
});
</script>
</body>
上传文件进度条
<body>
<input type="file" id="selectFile" value="选择文件" />
<br />
<button id="sendBtn">上传文件</button>
<div class="jindu"><span id="jdtWidth">0%</span></div>
<img src="" alt="" />
<script>
var btn = document.querySelector('#sendBtn');
btn.addEventListener('click', function () {
var files = document.querySelector('#selectFile').files;
if (files.length === 0) {
return alert('请先选择文件');
}
var fd = new FormData();
fd.append('avatar', files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (e) {
var jinduW = Math.ceil((e.loaded / e.total) * 100);
$('#jdtWidth')
.attr('style', 'width:' + jinduW + '%')
.html(jinduW + '%');
};
xhr.upload.onload = function () {
$('#jdtWidth').removeClass().addClass('ok');
};
xhr.open('POST', 'http://www.xiaolongxia.top:3006/api/upload/avatar');
xhr.send(fd);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
if (xhr.status === 200) {
document.querySelector('img').src =
'http://www.xiaolongxia.top:3006' + data.url;
} else {
alert('文件上传失败！' + data.message);
}
}
};
});
</script>
</body>
axios中文文档
function getMsg() {
axios({
method: 'GET',
url: 'http://www.xiaolongxia.top:3006/api/get',
params: {
name: 'zs',
age: 18,
},
}).then(function (res) {
console.log(res.data);
});
}
getMsg();
function getPost() {
axios({
method: 'POST',
url: 'http://www.xiaolongxia.top:3006/api/post',
data: {
bookname: 'ls',
price: 14,
},
}).then(function (res) {
console.log(res.data);
});
}
getPost();
同源策略 +跨域
同源策略
同源就是： 端口，域名，协议， 3者都相同，才叫同源， 如有一个不一样，都属于不同源
同源策略：是浏览器的一种安全功能，目的就是不让a操作b的cookie，和本地存储，以及数据交互。无法接触的非同源的 DOM, 无法向非同源的地址发送ajax请求
什么是跨域
端口，协议，域名，一者不同就属于跨域，浏览器是不允许跨域请求数据的
浏览器对跨域的拦截：
浏览器能发出去，服务器也会把数据返回来， 但是返回来的数据会被同源策略拦截到，所以页面无法获取数据
如何实现跨域数据请求
实现跨域的2中方式
jsonp 只支持get请求
cors 是w3c标准的，不支持低版本浏览器，跨域get和pos
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JSONP 实例</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result) {
var html = '<ul>';
for (var i = 0; i < result.length; i++) {
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script
type="text/javascript"
src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"
></script>
<script>
$.getJSON(
'https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?',
function (data) {
console.log(data);
var html = '<ul>';
for (var i = 0; i < data.length; i++) {
html += '<li>' + data[i] + '</li>';
}
html += '</ul>';
$('#divCustomers').html(html);
}
);
</script>
</body>
</html>
防抖和节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./template-web.js"></script>
</head>
<body>
<input type="text" />
<ul id="searchList"></ul>
<img src="../image/哪吒.jpg" alt="" /> // position: absolute
<script type="text/html" id="tpl-list">
{{ each result}}
<li>{{$value[0]}}</li>
{{ /each }}
</script>
<script>
var timer = null;
var cacheObj = {};
function fangdou(kw) {
timer = setTimeout(function () {
getList(kw);
}, 500);
}
$('input').on('keyup', function () {
clearTimeout(timer);
var val = $(this).val().trim();
if (val.length <= 0) {
console.log('hide1');
return $('ul').empty().hide();
}
if (cacheObj[val]) {
return rendList(cacheObj[val]);
}
fangdou(val);
});
function getList(kw) {
$.ajax({
url: 'https://suggest.taobao.com/sug?q=' + kw,
dataType: 'jsonp',
success: function (res) {
rendList(res);
},
});
}
function rendList(res) {
if (res.result.length <= 0) {
console.log('hide2');
return $('ul').empty().hide();
}
var htmlStr = template('tpl-list', res);
$('#searchList').html(htmlStr).show();
var k = $('input').val().trim();
cacheObj[k] = res;
console.log(cacheObj[k]);
}
$(function () {
var timeId = null;
$(document).on('mousemove', function (e) {
if (timeId) {
return;
}
timeId = setTimeout(function () {
$('img')
.css('top', e.pageY - 25 + 'px')
.css('left', e.pageX - 25 + 'px');
timeId = null;
}, 16);
});
});
</script>
</body>
</html>
总结：
防抖：不管点了多少次，只会触发最后一次
节流：减少事件触发的频率， 因此节流是 有选择性的 执行一部分事件
Http
响应消息
响应消息 有4部分组成
状态行 响应头部 响应体
---------------------- 状态行 ----------------------------
状态行 的 3个组成部分
协议版本 HTTP/1.1
状态码 200
状态码描述 OK
---------------------- 响应头部 ----------------------------
响应头部就是用来描述 服务器的基本信息
常见字段看图
---------------------- 响应体 ----------------------------
响应体 就是服务器响应给客户端的资源内容 【response】
HTTP请求方法
---------------------- HTTP请求方法 ----------------------------
get 查询
post 新增
put 修改
delete 删除
---------------------- HTTP响应状态码 ----------------------------
HTTP响应状态码 用来标识响应的状态
通过状态码就能知道是成功 或者失败了
状态码 200 标识成功 。 ok 状态描述
状态码是由 3个十进制的数字组成， 第一个状态码用来定义状态码类型。 后面的2个状态码用来细分。 总共分为 5种类型
1** 很少遇到
2** 成功
3** 重定向， 需要进一步操作以完成请求
4** 客户端错误， 请求语法错误，或者 无法完成请求
5** 服务器端错误， 服务器在处理请求是发生了错误
---------------------- 2xx成功相关的响应状态码 ----------------------------
2xx成功相关的响应状态码
2** 一把表示 成功
200 表示 成功，一般是get 或者 post请求
201 已创建， 一般是 修改和创建 psot和put
---------------------- 3xx重定向相关的响应状态码 ----------------------------
3xx重定向相关的响应状态码
3** 重定向相关
表示服务器要求客户端重定向， 需要客户端进一步操作完成资源的请求
301： 永久移动【资源已被移动到新的URL， 今后任何新的请求都需要使用新的URL代替】
302： 临时移动 与301类似， 但资源只是临时移动， 客户端应继续使用原有的URL
303： 未修改：所请求的资源未修改， 服务器返回此状态码时，不会返回任何资源(响应消息中不不含响应体) 客户端通常会缓存访问过的资源
---------------------- 4xx客户端错误相关的响应状态码 ----------------------------
4xx客户端错误相关的响应状态码
4** 客户端相关 错误
400 语义有误， 请求参数有误
401 当前需要用户验证
403 服务器已经理解请求， 但是拒绝执行他【比如跨域】
404： 服务器无法根据客户端的请求找到资源
405：请求超时， 服务器等待客户端发送的请求事件过长， 超时，服务器直接响应超时
---------------------- 5xx服务端错误相关的响应状态码 ----------------------------
5xx服务端错误相关的响应状态码
5** 客户端相关错误
500： 服务器内部错误， 无法完成请求
501 服务器不支持该请求方法， 只有gethead 请求方法是要求每个服务器必须支持的， 其他请求方法不支持服务器上会返回 501
503 由于超载或者系统维护， 服务器暂时的无法处理刻画单的请求
Git
.gitignore文件忽略
.gitignore使用示例
1： .gitignore文件忽略的使用参数详解
2： 在当前项目下新建.gitignore文件， 只要写在该文件里面的忽略项， 忽略项都不会被git检测到， 但是git能检测
Git 版本回退、合并冲突
回退到指定的版本
git log --pretty=oneline 提交历史记录
git reset --hard 拷贝 想要回退的版本号【回到某个年龄段，该年龄发生的文件都会删除消失】
git reflog --pretty=oneline 【注意因为回到了最初版本，通过git log --pretty=oneline中只能看到自己的提交记录， 往后发生的都已经看不到了， 只能通过reflog才能看到】
git reset --hard 拷贝要回退的版本号，【由于我们拷贝的是最后一次提交， 所以git log,能够看到该项目之前所有的提交记录了！】
遇到冲突时的分支合并
合并冲突： 冲突的形成原因（由于2条分支修改了同一个文件， 各自修改后都能提交到本地仓库中， 【冲突开始来了】在主分支上讲用户a合并能成功，因为先到， 但是在主分支上合并后一个分支：自动合并失败；请修复冲突，然后提交结果。 ）
此时打开vscode，会自动打开报错的这个文件，可以点击采用谁的， 就会保留谁的。 合并后再次提交到本地仓库中
Git 总结
git 基本使用命令：
git init 创建本地仓库
git add . 将修改的文件添加到本地存储中
git commit -m '版本记录描述信息'
git创建和维护远程仓库
1： 生成 ssh Key， 在把 ssh Key添加到github中
2：能够把本地仓库上传到 github中
能够掌握git分支的基本使用
git checkout -b 新建本地分支名称
git push -u origin 新增远程分支名称
git checkout 分支名称 【切换名称】
git branch 查看分支
github
连接远程仓库的两种方式
生成和配置SSH key秘钥
git clone
----------------------- 连接远程仓库的两种方式 ------------------------
git push命令的作用
我们再次对自己项目开发了一些功能， 第二次提交就不用像第一次提交那么麻烦了，
将本地项目提交掉本地仓库中后直接： git push 就直接推送成功了【因为已经被记住了】
----------------------- 生成和配置SSH key秘钥------------------------
生成SSH key
SSH Key 钥匙生成
打开 git bash 运行如下命令： ssh-keygen -t rsa -b 4096 -C "该github账号的注册邮箱"
再连续按 3次回车
会在 C盘/user/Administratar/.ssh/ 会生成 .ssh文件夹，里面就有 id_rsa 私钥【放电脑中】 id_rsa.pub公钥，需要配置到Github中
检查 sshkey 是否配置成功
1： 在 Git base here 中输入：ssh -T git@github.com
2： 回复 yes ， 当看到 Hi 你的用户名，就表示配置成功了
----------------------- git clone ------------------------
将远程仓库克隆到本地
将github项目克隆到自己电脑中
1； 打开项目 --> Code ---> Clone with SSH --->拷贝该地址
2： 在电脑中打开 git base here --> git clone ssh克隆地址
3： 克隆完成页面就多了该项目文件夹， 全套克隆了
下一篇：后端-Node系列一：node.js基础
