开启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
前端实现分页操作
先定义分页中需要用的三个值：currentPage（当前页码）、total（总条数）、pageSize（每页展示的数据量）
分页的思路：
把所有的数据请求回来后，
1.通过arr.slice(开始索引，结束索引)来进行截取每一页的数据；假设当前页是currentPage = 1，pageSize = 5
2.应该从(currentPage-1) * pageSize开始截取，到currentPage* pageSize结束，自己验证下，找到这样的规律后，就可以截取每一页的数据了；
const tabelList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
// 刚开始显示的是第一页，所以先截取第一页的数据
pageList = tabelList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
//点击分页按钮获得当前的 newCurrentPage
newpageList = tabelList.slice((newCurrentPage - 1) * pageSize, newCurrentPage * pageSize)
在vue中的使用
getmaterial() {
let a = (this.pageSize * (this.currentPage - 1))
let b = (this.pageSize * this.currentPage)
this.tableData = table.slice(a, b)
this.total = table.length
}
handleCurrentChange(val) {
this.currentPage = val;
this.getmaterial()
console.log("当前页", val)
}
使用原生网络请求
在工作中使用Ajax axios 请求
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求。
而 ajax 的核心就是我们今天要学的的原生请求，XMLHttpRequest对象。
一. XMLHttpRequer 对象
创建： 通过 new 来创建。
- 使用 XHR
open: 接收三个参数，分别为请求类型，请求的URL，请求是否异步，该方法为发送请求做好准备
send: 接收一个参数，请求体发送的内容，如果不发送，必须写入null，该方法开始发送请求
status: 相应的 HTTP 状态码，当位于 200~300 或者 等于 304 时，说明响应成功返回。
responseText: 作为响应体返回的文本
statuesText: 响应 HTTP 的状态描述
abort: 该方法用来取消异步请求，会停止触发事件，调用该方法后应该取消对XHR对象的引用，不要重用XHR对象。
onreadystatechange: 用来监听请求位于哪个阶段，该方法应该在open前调用，该事件不会接收到event对象
readyState: 表示当前请求位于哪个阶段
0： 未初始化，尚未调用 open
1：已经调用open，尚未调用 send
2：已经送，已经调用send，未收到响应
3：接收中，已经收到部分响应
4：完成，接收到所有响应
let xhr = new XMLHttpRequest(); // 创建XMLHttpRequest 实例
xhr.open("get", "http://127.0.0.1:8080/index", false); //设置为同步get请求
xhr.send(null); // 开始发送请求，并且阻塞后续代码执行，直到拿到响应
// readyState请求准备状态, 共有4个值1-4,
//1,表示xhr创建 2,表示数据处理完成
//3,表示请求已发送 4,表示服务器返回结果,请求完成
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ // 监听请求完成
if((xhr.status >=200 && xhr.status <300) || xhr.status == 304){
console.log(xhr.responseText)
}else{
console.log('请求失败')
}
}
}
- HTTP 头部
① 默认头部信息
每个HTTP 请求和响应都会携带头部信息，我们来看一下默认的一些请求头部
Accept: 浏览器可以处理的内容类型
Accept-Charset：浏览器可以显示的字符集
Accept-Encoding： 浏览器可以压缩的编码类型
Connection: 浏览器与服务的连接类型
Cookie：页面中设置的Cookie
Host： 发送请求页面所在的域
Referrer：发送请求的页面URL
User-Agent: 浏览器的用户代理字符串
②设置自定义头部信息
setRequestHeader(): 该方法接收两个参数，头部字段的名称和值，该方法必须在open之后，send 之前调用
getResponseHeader(): 从XHR对象获取响应头部，只需要传入获取头部的名称即可
getAllResponeHeaders(): 获取所有响应头信息
let xhr = new XMLHttpRequest();
xhr.open("get", "http://127.0.0.1:8080/index", false);
xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); // 请求头
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ // 监听请求完成
if((xhr.status >=200 && xhr.status <300) || xhr.status == 304){
console.log(xhr.responseText)
}else{
console.log('请求失败')
}
}
}
get 请求：
1，创建一个xhr变量
var xhr=new XMhttpRequest();
2,设置请求方式和请求地址
xhr.open('url','http//192.168.213.77:5000/login?username=" + str+ "&password=" + str')
3，把请求发出去；
xhr.send();
4,监听readystatechage
xhr.onreadystatechange = function () {
// readyState请求准备状态, 共有4个值1-4,
//1表示xhr创建 2表示数据处理完成
//3表示请求已发送 4表示服务器返回结果,请求完成
if (xhr.readyState == 4) {
console.log(xhr.responseText)
document.body.append(xhr.responseText)
}
}
}
post请求：
1，创建一个xhr变量
var xhr=new XMhttpRequest();
2,设置请求方式和请求地址
xhr.open('url','http//192.168.213.77:5000/register)
在请求发之前,设置请求头中的数据类型为表单数据类型,否则服务器无法解析数据
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
第四步: 把请求发出去, 参数是post请求的请求体, 也是键值对结构
xhr.send("username=" + acc + "&password=" + pas)
第五步: 监听readystatechange
xhr.onreadystatechange = function () {
// readyState请求准备状态, 共有4个值1-4,
1表示xhr创建 2表示数据处理完成
3表示请求已发送 4表示服务器返回结果,请求完成
if (xhr.readyState == 4) {
console.log(xhr.responseText)
document.body.append(xhr.responseText)
}
}
json数据转树形结构
数据结构
json数据转成树形结构
var jsonList =[
{ id: 0, name: "崂山" },
{ id: 6, name: "狂欢" },
{ id: 2, name: "普斯", pid: 1 },
{ id: 4, name: "暴雪", pid: 0 },
{ id: 1, name: "光辉", pid: 0 },
{ id: 3, name: "例会", pid: 2 },
{ id: 7, name: "公益", pid: 2 },
{ id: 5, name: "森林", pid: 1 },
{ id: 8, name: "毫克", pid: 6 },
],
封装函数
代码实现封装函数
function trans_tree(jsonData){
//temp为临时对象，将json数据按照id值排序.
var result = [], temp = {}, len = jsonData.length
for(var i = 0; i < len; i++){
// 以id作为索引存储元素，可以无需遍历直接快速定位元素
temp[jsonData[i]['id']] = jsonData[i]
}
for(var j = 0; j < len; j++){
var list = jsonData[j]
// 临时变量里面的当前元素的父元素，即pid的值，与找对应id值
var sonlist = temp[list['pid']]
// 如果存在父元素，即如果有pid属性
if (sonlist) {
// 如果父元素没有children键
if (!sonlist['children']) {
// 设上父元素的children键
sonlist['children'] = []
}
// 给父元素加上当前元素作为子元素
sonlist['children'].push(list)
}
// 不存在父元素，意味着当前元素是一级元素
else {
result.push(list);
}
}
return result;
}
console.log(trans_tree(jsonList))
最终效果
