如何在前端定义一个简单的监听器 用于监听某一个对象进行变化
首先 在 前端引入 js 规范
第二步构建 一个 vue 模板
var vm = new Vue({
el: “#app”,
data: {
goodsList: [],
totalPage: 0,
search: {
key: “”,
pageNo: 1
}
},
created() {
let search = Qs.parse(location.search.substring(1));
if (!search.key) {
return;
}
if (!search.pageNo) {
search.pageNo = 1;
}
if (!search.pageSize) {
search.pageSize = 10;
}
this.search = search;
axios({
url: "http://localhost:2000/search/" + search.key + "/" + search.pageNo + "/" + search.pageSize,
method: "get"
}).then(({data}) => {
this.goodsList = data.items;
this.totalPage = data.totalPage;
console.log(this.goodsList)
})
},
methods: {
pageNo(i) {
//1.固定前5页
if (this.search.pageNo <= 3 || this.totalPage <= 5) {
return i;
}
//2.中间页码
else if (this.search.pageNo > 3 && this.search.pageNo <= this.totalPage - 2) {
return this.search.pageNo - 3 + i;
}
//3.固定最后5页
else {
return this.totalPage - 5 + i;
}
},
searchGoods() {
let key = this.$refs["key"].value;
this.search.key = key;
},
prePage() {
let page=this.search.pageNo;
if (page > 1) {
page--;
this.search.pageNo = page ;
}else{
alert("这是第一页");
}
},
nextPage() {
let page=this.search.pageNo;
if (page < this.totalPage) {
page++;
this.search.pageNo = page ;
}
else {
alert("这是最后一页");
}
}
},
watch:{
search:{
deep:true,
handler(oVal, nVal) {
if (nVal.key == "") {
return ;
}
location.href="http://127.0.0.1:55744/seaqiandaunrch.html?"+Qs.stringify(this.search);
}
}
}
})
前端物品的基本数据的基本渲染具体语句:
这个是页面的基本的页码进行遍历
最后这个是对于数据搜索项目上面进行安排