VIP20/12_Ajax/day-3/code/case/js/index.js

//! 主页
//TODO 分页显示用户列表
/**
 ** 给服务器传递消息，告知 当前页码以及每页显示条目
 *! 实现方案：2种
 **  1. 通过search 查询字符串 方式 传递数据
 **     什么是查询字符串，"?id=1&r=2" 这就是一个查询字符串，其中id 和 r都是查询参数，使用=给其赋予一个参数值。多个查询参数 使用 & 符号拼接。使用时必须拼接到url上，才能将数据传递给服务器。
 **  2. 通过 请求体request-body 传递数据

 *! get 与 post 请求的区别
 ** 语义上 
    1、get是从服务器上获取数据。
    2、post是向服务器传送数据。
** 传数据
   1、 get请求没有 请求体，因此只能通过查询字符串给服务器传递数据，而查询字符串会拼接到请求地址URL中，因此 对任何人数据都是可见
   2、 post请求，有请求体 可将发送给服务器的数据放到请求体中，这样一般用户是看不见数据的。
** 数据量
   1、 get请求传数据时，url地址长度收到浏览器地址栏限制，理论最大值为 4K。实际上不能超过 2K。
   2、 post传送的数据量较大，一般被默认为不受限制。
** 安全性
  1、get安全性非常低。
  2、post安全性较高。
** 效率上
  1、 get 更简单 速度更快
  2、 post 会复杂一点，效率较低。
** 缓存
  1、get可以缓存
  2、post刷新后数据不会缓存
 **/
let page = 1; // 当前页码， 默认第一页
const pageSize = 2; // 每页条目， 默认每页显示2条数据
let total = 0; // 数据总数
let pages = 0; // 总页数

const tBodyEle = document.getElementById('listBody');
const totalSp = document.querySelector('#totalSp');
const prevlSp = document.querySelector('#prevlSp');
const nextSp = document.querySelector('#nextSp');
const newUserBtn = document.querySelector('#newUserBtn');

function loadData() {
  axios({
    url: 'http://localhost:3000/users/page',
    method: 'get', // method默认值 也是 ‘get’
    params: {
      // 属性名 就是 查询参数名
      // page: page,
      // pageSize: pageSize,
      // ES6 对象简洁写法
      page,
      pageSize,
    }, // params 用来指定 查询参数 可以为对象类型。自动拼接到  请求地址
  })
    .then((result) => {
      // 由于是分页显示数据，因此每一次添加数据行时，清空上一次tbody中显示数据
      tBodyEle.innerHTML = '';
      // axios 得到的响应 result 是什么
      console.log(result);
      let { code, msg, data } = result.data;

      console.log(msg);

      // 2 校验数据的正确性，只有code == 200时 数据是正确的
      if (code !== 200) {
        return;
      }

      var tr, td;
      data.list.forEach((user) => {
        // 每循环一次，就新建一个tr DOM对象
        tr = document.createElement('tr');
        // 字符串拼接，在原生js操作dom中会频繁发生，但是存在一个问题 就是代码可读性 太低
        //  因此 在ES6 对字符串进行了一个扩展。叫做 模板字符串。
        //   模板字符串 中 可以 换行；也可以通过${}语法 将外部表达式的值 嵌入字符串中的指定位置
        td = `
          <td>
            <img class="avatar" src="${user.avatar}" alt="avatar" />
          </td>
          <td>${user.name}</td>
          <td>${user.password}</td>
          <td>${user.age}</td>
          <td>${user.sex === '0' ? '女' : '男'}</td>
          <td data-id="${user.id}">
            <span
              class="iconfont icon-edit edit"
              title="编辑"
              data-name="edit"
            ></span>
            <span
              class="iconfont icon-delete delete"
              title="删除"
              data-name="delete"
            ></span>
          </td>
        `; // 这就是模板字符串
        tr.innerHTML = td;
        // 下次循环开始前，记得将新建tr添加给tbody元素
        // 处理 点击 删除或者编辑按钮
        tr.addEventListener('click', function (e) {
          console.log(e.target);
          // 区分是 点击删除 还是 编辑
          // data-* 自定义属性，通过DOM对象的dataset属性来获取
          let { name } = e.target.dataset;
          let uid = e.target.parentNode.dataset.id;

          // console.log(uid);

          if (name === 'edit') {
            // 是编辑
          } else {
            // 是删除
            // 为了防止 用户 误触点击
            if (confirm('您确定删除该行数据吗？')) {
              // 用户确认了删除操作，接下来就可以 实现删除了
              // 发起网络请求，将服务器中 数据删除掉
              axios
                .delete('http://localhost:3000/users/delete', {
                  data: {
                    id: uid,
                  },
                })
                .then((result) => {
                  let { code, msg } = result.data;

                  alert(msg);

                  if (code == 200) {
                    // 一旦 删除成功后，要刷新页面数据
                    loadData();
                  }
                });
            }
          }
        });
        tBodyEle.append(tr);
      });

      // 将分页信息 保存起来
      total = data.page.total;
      totalSp.innerHTML = ` ${total} `;
      pages = data.page.pages;
    })
    .catch((err) => {
      console.log(err);
    });
}

prevSp.addEventListener('click', () => {
  if (page === 1) {
    alert('已经在首页了亲！');
    // 如果是 第一页，这里表示没有上一页
    return;
  }

  page--;
  // 页码 减一后，重新获取数据
  loadData();
});
nextSp.addEventListener('click', () => {
  if (page === pages) {
    alert('已经到尾页了亲！');
    // 如果是 最后页，这里表示没有下一页
    return;
  }

  page++;
  // 页码 加一后，重新获取数据
  loadData();
});

newUserBtn.addEventListener('click', () => {
  // 页面跳转时，此时该js文件被引入到 index.html中，因此下面路径 需要以index.html文件为参照
  window.location = 'pages/user.insert.html';
});

loadData();