js获取用户详细信息服务器请求，实现商品列表的搜索，价格升序和降序，页数跳转

最新推荐文章于 2024-10-02 05:39:15 发布

- 瑾♛年

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量346

点赞数 11

文章标签： javascript 服务器开发语言

本文链接：https://blog.csdn.net/qq_52840130/article/details/135276992

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link rel="stylesheet" href="../code/css/bootstrap.min.css">
       <style>

           *{
           margin: 0;
           padding: 0;
           }
           body{
           background-color: #e5e5e5;
           }
           #btn{
           margin: 20px;
           }
           .card{
           margin: 20px;
           padding: 10px;
           float: left;
           height: 430px;
           }
           .card img{
           height: 230px;
           }
           .card h5{
           font-weight: normal;
           font-size: 16px;
           }
           .card .card-text{
           color: red;
           }
           .hide{
           /* 英文换行 */
           word-break: break-all;
           /* 溢出隐藏 */
           overflow: hidden;
           /* 弹性盒兼容写法 */
           display: -webkit-box;
           /* 出现几行省略号 */
           -webkit-line-clamp: 2;
           /* 行与行之间是垂直排列的 */
           -webkit-box-orient: vertical;
           }
           .container{
           max-width: 1350px;
           margin: 50px auto;
           }
           h1{
           text-align: center;
           margin: 30px 0;
           }
           .end{
               position: absolute;
               top: 190%;
               left: 5%;
           }
           input{
               width: 80px;
           }
           .searched{
               margin-left: 100px;
               width: 120px;
           }

       </style>
   </head>
   <body>

   <div class="username"></div>
   <hr>
   <input type="text" class="searched"/>
       <button type="button" class="btn btn-primary next" style="margin: 10px;" id="search">搜索</button>
       <div class="container"></div>
       <div class="end">
       <button type="button" class="btn btn-primary next" style="margin: 10px;" id="prev">上一页</button>
       <button type="button" class="btn btn-primary next" style="margin: 10px;" id="next">下一页</button>
       <input type="text" class="txt" placeholder="跳转的页数">
       <button type="button" class="btn btn-primary next" style="margin: 10px;" id="go">跳转</button>
       <button type="button" class="btn btn-primary next" style="margin: 10px;" id="add">升序</button>
       <button type="button" class="btn btn-primary next" style="margin: 10px;" id="sub">降序</button>
       </div>
   </nav>
   <script src='../code/js/axios.min.js'></script>
   <script>
       username=document.querySelector('.username')
       container=document.querySelector('.container')
       text=document.querySelector('.txt')
       next=document.querySelector('#next')
       prev=document.querySelector('#prev')
       go=document.querySelector('#go')
       add=document.querySelector('#add')
       sub=document.querySelector('#sub')
       searched=document.querySelector('.searched')
       insearch=document.querySelector('#search')
       var {token,id}=JSON.parse(sessionStorage.getItem('info'))
       async function Request(){
           const { data } = await axios.get('http://localhost:8888/users/info', {
           params: {id},
           headers: {
           'authorization': token
           }
           })
                       const { info: {nickname} } = data
                       username.innerHTML=`欢迎:${nickname}`
       console.log(data)
       }
       Request()
       async function pag(current,pagesize,sortType,sortMethod){
           let params={
               current,
               pagesize,
               sortType,
               sortMethod,
               // sortMethod: 'DESC'
           }
           const { data,data:{list} } = await axios.get('http://localhost:8888/goods/list',{ params})
           console.log(data)
           container.innerHTML=''
           list.forEach(item=>{

               container.innerHTML+=`
               <div class="card" style="width: 18rem;">
               <img src="${item.img_big_logo}" class="card-img-top" alt="...">
               <div class="card-body">
               <h5 class="card-title hide">${item.title}</h5>
               <p class="card-text">${item.price}元</p>
               <a href="#" class="btn btn-primary">加入购物车</a>
               </div>
               </div>
               `
           })
           }
           async function search(current,pagesize,search){
               let params={
                   current,
                   pagesize,
                   search
                   // sortMethod: 'DESC'
               }
               const { data,data:{list} } = await axios.get('http://localhost:8888/goods/list',{ params})
               console.log(data)
               container.innerHTML=''
               list.forEach(item=>{

                   container.innerHTML+=`
                   <div class="card" style="width: 18rem;">
                   <img src="${item.img_big_logo}" class="card-img-top" alt="...">
                   <div class="card-body">
                   <h5 class="card-title hide">${item.title}</h5>
                   <p class="card-text">${item.price}元</p>
                   <a href="#" class="btn btn-primary">加入购物车</a>
                   </div>
                   </div>
                   `
               })
               }
           var num=1,a=0
               text.value=num
           pag(num,12)
           next.οnclick=()=>{
               num++
               if(a==0){
               pag(num,12)
               text.value=num
               }
               if(a>0){
                   pag(num,12,'price')
                   text.value=num
               }
               if(a==-1){
                   pag(num,12,'price','DESC')
                   text.value=num
               }
               if(a==-2){
                   search(num,12,searched.value)
                       text.value=num
               }
           }
           prev.οnclick=()=>{
               num--
               if(num==0){
                   num=1
               }
               if(a==0){
           pag(num,12)
               text.value=num
               }
               if(a>0){
                   pag(num,12,'price')
                   text.value=num
               }
               if(a==-1){
                   pag(num,12,'price','DESC')
                   text.value=num
               }
               if(a==-2){
                   search(num,12,searched.value)
                       text.value=num
               }
           }

           go.οnclick=()=>{
               if(a==0){
               pag(text.value,12)
               num=text.value
               }
               if(a>0){
                   pag(text.value,12,'price')
                       num=text.value
               }
               if(a==-1){
                   pag(text.value,12,'price','DESC')
                       num=text.value
               }
               if(a==-2){
                   search(num,12,searched.value)
                       num=text.value
               }
           }
           add.οnclick=()=>{
               num=1
               pag(num,12,'price')
               a=1
               text.value=num
           }
           sub.οnclick=()=>{
               num=1
               pag(num,12,'price','DESC')
               a=-1
               text.value=num
           }
           insearch.οnclick=()=>{
               num=1
               search(num,12,searched.value)
               a=-2
               text.value=num
           }

   </script>
   </body>
</html>