代码拉取完成，页面将自动刷新
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>搜索页面</title>
<link rel="shortcut icon" href="img/foodie.ico" />
<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
<link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css" />
<link href="basic/css/demo.css" rel="stylesheet" type="text/css" />
<link href="css/seastyle.css" rel="stylesheet" type="text/css" />
<!-- 分页css -->
<link href="components/VuePaging/zpageNav.css" rel="stylesheet" />
<script type="text/javascript" src="basic/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="search">
<!--顶部导航条 -->
<div class="am-container header">
<ul class="message-l">
<div class="topMessage">
<div class="menu-hd" v-show="!userIsLogin">
<a href="login.html" target="_top" class="h">亲，请登录</a>
<a href="register.html" target="_top">免费注册</a>
</div>
<div class="menu-hd" v-show="userIsLogin">
<span style="color: #d2364c">欢迎，{{userInfo.username}}</span>
</div>
</div>
</ul>
<ul class="message-r">
<div class="topMessage home">
<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
</div>
<div class="topMessage my-shangcheng">
<div class="menu-hd MyShangcheng"><a href="javascript:void(0);" @click="goUserCenter">
<i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
</div>
</ul>
</div>
<!--悬浮搜索框-->
<div class="nav white">
<!-- <div class="logo"><img src="images/logo.png" /></div> -->
<div class="logoBig">
<li><a href="index.html"><img src="images/logobig.png" /></a></li>
</div>
<div class="search-bar pr">
<a name="index_none_header_sysc" href="#"></a>
<form>
<input id="searchInput" v-model="keywords" name="index_none_header_sysc" type="text"
placeholder="搜索" autocomplete="off">
<input id="ai-topsearch" @click="doSearch" class="submit am-btn" value="搜索" index="1">
</form>
</div>
</div>
<div class="clear"></div>
<b class="line"></b>
<div class="search">
<div class="search-list">
<div class="nav-table">
<div class="long-title"><span class="all-goods">搜索页面</span></div>
</div>
<div class="am-g am-g-fixed">
<div class="am-u-sm-12 am-u-md-12">
<div class="search-content" style="width: 100%;">
<div class="sort">
<li :class="[{'first' : sort == 'k'}]" @click="chooseSort('k')"><a title="默认" href="javascript:void(0);">默认排序</a></li>
<li :class="[{'first' : sort == 'c'}]" @click="chooseSort('c')"><a title="销量" href="javascript:void(0);">销量排序</a></li>
<li :class="[{'first' : sort == 'p'}]" @click="chooseSort('p')"><a title="价格" href="javascript:void(0);">价格优先</a></li>
</div>
<div class="clear"></div>
<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-5 boxes">
<li v-for="(item, index) in itemsList" :key="index" @click="showItemDetail(item.itemId)">
<div class="i-pic limit">
<img :src="item.imgUrl" />
<p class="title fl">{{item.itemName}}</p>
<p class="price fl">
<b>¥</b>
<strong>{{item.price / 100}}</strong>
</p>
<p class="number fl">
销量<span>{{item.sellCounts}}</span>
</p>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
<!--分页 -->
<!-- <ul class="am-pagination am-pagination-right">
<li class="am-disabled"><a href="#">«</a></li>
<li class="am-active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul> -->
<!-- 分页 start-->
<div class="wrap" id="wrap">
<zpagenav v-bind:page="page" v-bind:page-size="pageSize" v-bind:total="total"
v-bind:max-page="maxPage" v-on:pagehandler="doPaging">
</zpagenav>
</div>
<!-- 分页 end-->
</div>
</div>
<div class="footer ">
<div class="footer-hd ">
<p>
<a href="https://www.imooc.com/" target="_blank">慕课网</a><b>|</b>
<a href="https://coding.imooc.com/class/217.html" target="_blank">分布式架构仿抖音短视频</a><b>|</b>
<a href="https://coding.imooc.com/class/261.html" target="_blank">Netty仿微信聊天</a><b>|</b>
<a href="https://coding.imooc.com/class/201.html" target="_blank">Zookeeper与dubbo入门</a><b>|</b>
<a href="https://coding.imooc.com/class/293.html" target="_blank">支付宝小程序</a>
</p>
</div>
<div class="footer-bd ">
<p><em>© 2019 imooc.com 京ICP备12003892号-11 北京奥鹏文化传媒有限公司 版权所有</em></p>
</div>
</div>
</div>
</div>
<!--引导 -->
<div class="navCir">
<li><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
<li><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
<li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>
</div>
<!--菜单 -->
<div class="tip">
<div id="sidebar">
<div id="wrap">
<div id="prof" class="item ">
<a href="# ">
<span class="setting "></span>
</a>
<div class="ibar_login_box status_login " style="height: 150px">
<div class="avatar_box ">
<p class="avatar_imgbox ">
<img v-show="userIsLogin" :src="userInfo.face" />
<img v-show="!userIsLogin" src="img/default-face.png" />
</p>
<ul class="user_info">
<li v-show="!userIsLogin">用户未登录</li>
<li v-show="userIsLogin">用户昵称：{{userInfo.nickname}}</li>
<li v-show="userIsLogin" @click="logout">退出登录</li>
</ul>
</div>
<i class="icon_arrow_white "></i>
</div>
</div>
<div id="shopCart " class="item " @click="goToShopcart">
<a href="# ">
<span class="message "></span>
</a>
<p>购物车</p>
<p class="cart_num ">{{shopcartItemCounts}}</p>
</div>
<div class="quick_toggle ">
<li class="qtitem ">
<a href="#top " class="return_top "><span class="top "></span></a>
</li>
</div>
<!--回到顶部 -->
<div id="quick_links_pop " class="quick_links_pop hide "></div>
</div>
</div>
</div>
</div>
<script>
window.jQuery || document.write('<script src="basic/js/jquery-1.9.min.js"><\/script>');
</script>
<script type="text/javascript" src="basic/js/quick_links.js"></script>
<div class="theme-popover-mask"></div>
<script src="components/VuePaging/zpageNav.js"></script>
<script type="text/javascript " src="js/app.js"></script>
<script type="text/javascript">
var index = new Vue({
el: "#search",
data: {
keywords: null,
sort: "k",
page: 1, // 分页页数
pageSize: 20, // 分页每页显示数量
maxPage: 1, // 总页数
total: 1, // 总记录数
itemsList: [],
shopcartItemCounts: 0, // 购物车中商品的数量
},
created() {
// var me = this;
// 通过cookie判断用户是否登录
this.judgeUserLoginStatus();
// 从别的页面来的搜索
var keywords = app.getUrlParam("keywords");
if (keywords == null || keywords == undefined || keywords == '') {
return;
}
this.keywords = keywords;
var page = app.getUrlParam("page");
if (page == null || page == undefined || page == '') {
page = 1;
}
this.page = page;
var pageSize = app.getUrlParam("pageSize");
if (pageSize == null || pageSize == undefined || pageSize == '') {
pageSize = 20;
}
this.pageSize = pageSize;
this.searchInBackend(keywords, "k", page, pageSize);
// 从购物车中拿到商品的数量
this.shopcartItemCounts = app.getShopcartItemCounts();
},
methods: {
goUserCenter() {
// 判断用户是否登录
var userIsLogin = this.userIsLogin;
if (!userIsLogin) {
// 用户未登录，则跳转
window.location.href = "login.html?returnUrl=" + app.centerServerUrl;
} else {
window.location.href = app.centerServerUrl;
}
},
goToShopcart() {
window.location.href = "shopcart.html";
},
// 分页实现方法 跳转到page页
doPaging: function (page) {
this.page = page;
this.searchInBackend(this.keywords, this.sort, page, this.pageSize);
},
showItemDetail(itemId){
window.open("item.html?itemId=" + itemId);
},
chooseSort(sort) {
// console.log(sort);
this.sort = sort;
var keywords = this.keywords;
if (keywords == null || keywords == undefined || keywords == '') {
return;
}
this.searchInBackend(keywords, sort, 1, 20);
},
doSearch() {
var keywords = this.keywords;
// console.log(keywords);
if (keywords == null || keywords == undefined || keywords == '') {
alert("搜索内容不能为空");
return;
}
this.searchInBackend(keywords, "k", 1, 20);
},
searchInBackend(keywords, sort, page, pageSize) {
// debugger;
var serverUrl = app.serverUrl;
axios.defaults.withCredentials = true;
axios.get(serverUrl + '/items/search?keywords=' + keywords + "&sort=" + sort + "&page=" + page + "&pageSize=" + pageSize, {})
.then(res => {
if (res.data.status == 200) {
var grid = res.data.data;
var itemsList = grid.rows;
this.itemsList = itemsList;
var maxPage = grid.total; // 获得总页数
var total = grid.records; // 获得总记录数
this.maxPage = maxPage;
this.total = total;
// console.log(itemsList);
} else if (res.data.status == 500) {
alert(res.data.msg);
return;
}
});
},
getRequest() {},
postRequest() {},
// 通过cookie判断用户是否登录
judgeUserLoginStatus() {
var userCookie = app.getCookie("user");
if (userCookie != null && userCookie != undefined && userCookie != '') {
var userInfoStr = decodeURIComponent(userCookie);
// console.log(userInfo);
if (userInfoStr != null && userInfoStr != undefined && userInfoStr != '') {
var userInfo = JSON.parse(userInfoStr);
// 判断是否是一个对象
if ( typeof(userInfo) == "object" ) {
this.userIsLogin = true;
// console.log(userInfo);
this.userInfo = userInfo;
} else {
this.userIsLogin = false;
this.userInfo = {};
}
}
} else {
this.userIsLogin = false;
this.userInfo = {};
}
},
logout() {
var userId = this.userInfo.id;
var serverUrl = app.serverUrl;
axios.defaults.withCredentials = true;
axios.post(serverUrl + '/passport/logout?userId=' + userId, {})
.then(res => {
if (res.data.status == 200) {
window.location.href = "index.html";
} else if (res.data.status == 500) {
alert(res.data.msg);
return;
}
});
}
}
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
