前端实现分页操作

先定义分页中需要用的三个值：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 来创建。

1. 使用 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('请求失败')
		}
  	}
}

1. 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))

最终效果