前端笔记之Vue（六）分页排序酷表单实战Vue-cli ⼀、分页排序案例
后端负责提供接⼝（3000）
前端负责业务逻辑（8080）
接⼝地址：从8080跨域到3000拿数据
分页排序接⼝：
127.0.0.1:3000/shouji?page=1&pagesize=5&sortby=price&sortdirection=dao
代理跨域回来的数据接⼝地址：
127.0.0.1:8080/api/shouji?page=1&pagesize=5&sortby=price&sortdirection=dao
后端app.js
var express = require("express");
var url = require("url");
var app = express();
var arr = [
{"id" : 1 , "title" : "苹果A" , "price" : 1699},
{"id" : 2 , "title" : "苹果B" , "price" : 1999},
...
{"id" : 14 , "title" : "苹果N" , "price" : 8888}
];
<("/shouji" , function(req,res){
var obj = url.parse(req.url, true).query;
var page = obj.page; //页码
var pagesize = obj.pagesize; //每页显⽰的数量
var sortby = obj.sortby; //排序条件
var sortdirection = obj.sortdirection; //排序条件（正序或倒序）
//按照id或价格排序
arr = arr.sort(function(a,b){
if(sortdirection == "zheng"){
return a[sortby] - b[sortby];
}else if(sortdirection == "dao"){
return b[sortby] - a[sortby];
}
})
//提供数据给前端
res.json({
"number" : arr.length , //商品总数量
"results": arr.slice((page - 1) * pagesize, page * pagesize) //显⽰多少条数据
})
});
app.listen(3000);
⽰例代码
前端main.js
import Vue from "vue";
import Vuex from "vuex";
import App from "./App.vue";
import store from "./store";
Vue.use(Vuex);
new Vue({
el : "#app",
store,
render : (h) => h(App)
})
⽰例代码
新建taobao⽂件夹存放三要素，然后在⽂件夹的index.js中引⼊三要素：
state.js、action.js、mutations.js三个⽂件：
export default {
.
..
}
store/index.js
import Vue from "vue";
import Vuex from "vuex";
import createLogger from "vuex/dist/logger";
import counterState from "./counter/state.js"
import counterMutations from "./counter/mutations.js"
import counterActions from "./counter/actions.js"
import taobaoState from "./taobao/state.js"
import taobaoMutations from "./taobao/mutations.js"
import taobaoActions from "./taobao/actions.js"
Vue.use(Vuex);
//全局数据
const store = new Vuex.Store({
state : {
counterState,
taobaoState
},
//同步的（commit）
mutations : {
...counterMutations,
.
..taobaoMutations
},
//异步的（dispatch）
actions : {
...counterActions,
...taobaoActions
},
plugins : [createLogger()]
});
export default store;
⽰例代码
state.js存储默认数据：
export default {
page : 1,
pagesize: 5,
sortby : "id",
sortdirection:"zheng",
number : 0,
results :[]
}
⽰例代码
App.vue
<template>
<div>
<table>
<tr>
<th>编号</th>
<th>商品</th>
<th>价格</th>
</tr>
</table>
</div>
</template>
<script>
export default {
created(){
//⽣命周期，当组件被创建时触发，发出⼀个异步请求接⼝数据
this.$store.dispatch("init");
}
}
</script>
⽰例代码
actions.js
export default {
async init({commit,state}){
var page = state.taobaoState.page;
var pagesize = state.taobaoState.pagesize;
var sortby = state.taobaoState.sortby;
var sortdirection = state.taobaoState.sortdirection;
//发出异步的get请求拿数据
var {results,number} = await fetch(`/api/shouji?page=${page}&pagesize=${pagesize}
&sortby=${sortby}&sortdirection=${sortdirection}`).then(data => data.json());
//数据从后端拿回来后，改变results和number
//改变state只能通过mutations
commit("changeResults", {results})
commit("changeNumber", {number})
}
}
⽰例代码
mutations.js，此时可以从控制台logger中查看请求数据成功，然后回到App.vue的结构显⽰数据。export default {
changeResults(state , payload){
sults = sults;
},
changeNumber(state, payload) {
state.taobaoState.number = payload.number;
}
}
⽰例代码
回到App.vue显⽰数据和换页：
<template>
<div>
<table>
<tr v-for="item in $store.sults">
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.price}}</td>
</tr>
</table>
<button v-for="i in allPage()" @click="changePage(i)">{{i}}</button>
</div>
</template>
<script>
export default {
created(){
//⽣命周期，当组件被创建的时候触发
this.$store.dispatch("init");
},
computed:{
allPage(){
//计算总页码数：总数量 / 每页数量，向上取整
var _state = this.$store.state.taobaoState;
il(_state.number / _state.pagesize)
}
},
methods : {
//分页页码跳转
changePage(page){
this.$store.dispatch("changePage", {page});
}
}
}
</script>
⽰例代码
actions.js
export default {
async init({commit,state}){
...
},
//其他都和init⼀样，只改名字即可
async changePage({commit,state},{page}){
/
/改变page
commit("changePage", {page})
//凑齐4个数据
var page = state.taobaoState.page;
var pagesize = state.taobaoState.pagesize;
var sortby = state.taobaoState.sortby;
var sortdirection = state.taobaoState.sortdirection;
//发出请求和init⽅法的⼀样
var {results, number} = await fetch(`/api/shouji?page=${page}&pagesize=${pagesize} &sortby=${sortby}&sortdirection=${sortdirection}`).then(data => data.json());
//改变state只能通过mutations
commit("changeResults", {results})
commit("changeNumber", {number})
}
}
⽰例代码
mutations.js
export default {
changeResult(state , payload){
sults = sults;
},
changeNumber(state, payload) {
state.taobaoState.number = payload.number;
},
//页码跳转
changePage(state , payload){
state.taobaoState.page = payload.page;
}
}
⽰例代码
App.vue下⾯实现每页显⽰多少条：
<template>
<div>
<table>
<tr v-for="item in $store.sults">
<td>{{item.id}}</td>
sort函数 js<td>{{item.title}}</td>
<td>{{item.price}}</td>
</tr>
</table>
<button v-for="i in allPage()" @click="changePage(i)">{{i}}</button>
<select v-model="pagesize">
<option value="3">每页3条</option>
<option value="5">每页5条</option>
<option value="10">每页10条</option>
</select>
</div>
</template>
<script>
export default {
data(){
return {
pagesize : this.$store.state.taobaoState.pagesize
}
},
created(){
/
/⽣命周期，当组件被创建的时候触发
this.$store.dispatch("init");
},
methods : {
changePage(page){
this.$store.dispatch("changePage" , {page});
}
},
//v-mode的值不能加圆括号，所以不能直接计算，先通过data(){}中计算，再⽤watch监听变化//Vue提供⼀种更通⽤的⽅式来观察和响应Vue实例上的数据变动：侦听属性。
//以V-model绑定数据时使⽤的数据变化监测
//使⽤watch允许我们执⾏异步操作
watch : {
pagesize(v){ //当pagesize改变，发出⼀个请求，去改变pagesize
this.$store.dispatch("changePageSize" , {pagesize : v});
}
}
}
</script>
⽰例代码
actions.js
export default {
async init({commit,state}){
.
..
},
async changePageSize({commit,state},{pagesize}){
//改变page
commit("changePageSize", {pagesize:pagesize})
//凑齐4个数据
var page = state.taobaoState.page;
var pagesize = state.taobaoState.pagesize;
var sortby = state.taobaoState.sortby;
var sortdirection = state.taobaoState.sortdirection;
//发出请求
var {results,number} = await fetch(`/api/shouji?page=${page}&pagesize=${pagesize}
&sortby=${sortby}&sortdirection=${sortdirection}`).then(data => data.json());
//改变state只能通过mutations
commit("changeResults", {results})
commit("changeNumber", {number})
}
}
⽰例代码
mutations.js
export default {
//...省略
changePage(state , payload){
state.taobaoState.page = payload.page;
},
changePageSize(state, payload) {
state.taobaoState.pagesize = payload.pagesize;
}
}
⽰例代码
下⾯实现id和价格的排序
App.vue
<template>
<div>
<table>
<tr>
<th>
id：
<button @click="changeSort('id','dao')">↓</button>
<button @click="changeSort('id','zheng')">↑</button>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论