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

2024-01-02 07:45:48

<!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>

文章来源:https://blog.csdn.net/qq_52840130/article/details/135276992
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。