json

真实的接口登录，使用post方式登录

<button onclick="login()">请先登录,再获得数据</button>
<button onclick="getUserInfo()">获取用户数据</button>
<script>
//登陆
function login() {
   let xhr = new XMLHttpRequest();
   let url = 'http://timemeetyou.com:8889/api/private/v1/login';
   xhr.open('post', url, true);
   let params = {
         username: "admin",
         password: "123456"
     }
     //post需要添加请求头
     //请求回来的内容是json格式
     //Content-type 表示请求内容的类型
     //application/json 表示请求内容的类型的具体的值
    xhr.setRequestHeader("Content-type", "application/json")
    xhr.send(JSON.stringify(params));
    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
         let res = JSON.parse(xhr.responseText)
         console.log(res);
         localStorage.token = res.data.token;
        }
      }
    }
    //获取
function getUserInfo(){
   if(!localStorage.token){
   //需要先判断有没有token 有token 就不提示直接获取数据
      没有token 就给个提示 请先登录 获取token 不执行下面的内容
   alert('请先登录,获取token！！')
    return;
    }
    let xhr = new XMLHttpRequest();
    let url = 'http://timemeetyou.com:8889/api/private/v1/users?                pagenum=1&pagesize=6';
    xhr.open('get', url, true);
    xhr.setRequestHeader('Authorization',localStorage.token)
    xhr.send();
    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
    let res = JSON.parse(xhr.responseText)
    console.log(res);
    }
  }
}

    </script> 

css内容

• -o-text-overflow: ellipsis;
• text-overflow: ellipsis;单行文本溢出显示..省略号
• display: -webkit-box;设置成谷歌内核下的弹性盒模型
• -webkit-line-clamp: 2;设置成谷歌内核下控制文字显示多少行
• word-break: break-all; 破坏英文单词的整体性
• -webkit-box-orient: vertical; 设置成谷歌内核下文字在水平线上居中对齐