vue实现axios分页请求
【注意点】
1.可以根据 对象名[对象中的属性]
来获取相对的属性值
2.有类名还要添加类名:
:class="['tab-item',{active:activeItemIndex===index}]"
active(需要添加的类名)
:
后面是需要添加该类名所要判断的条件
3.
格式化日期
方法一:
filters: {
/*
格式化日期 输出 秒前 分钟前 小时前 月前 年前
1秒 1000
1分钟 1000 * 60 60000
1小时 1000 * 60 * 60 3600000
1天 1000 * 60 * 60 * 24 86400000
1个月 1000 * 60 * 60 * 24 * 30 2592000000
1年 1000 * 60 * 60 * 24 * 365 31536000000
*/
formatDate(val) {
// 获取当前事件和最后一次评论时间的时间差
const time = Date.now() - new Date(val)
// 创建两个数组记录需要计算的事件和时间单位
const times = [
31536000000, 2592000000, 86400000, 3600000, 60000, 1000
]
const units = [
"年前", "月前", "天前", "小时前", "分钟前", "秒前"
]
for (let i = 0; i < times.length; i++) {
const res = time / times[i];
if (res >= 1) {
return Math.round(res) + units[i]
}
}
方法二:
// 格式化日期函数 data: 时间 fmt: yyyy-MM-dd hh-mm-ss
export const formatDate = (date, fmt) => {
var date = new Date(date)
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
// 格式化日期函数2
export const dateFormatter = (row, column, cellValue) => {
// cellValue指的是我们对应单元格的值
const date = new Date(cellValue)
const Y = date.getFullYear()
const M = date.getMonth() + 1
const d = date.getDate()
return `${Y}-${M}-${d}`
}
// 格式化日期函数3 yyds
const formatTime = date => {
var date = new Date(date)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return `${[year, month, day].map(formatNumber).join('-')} ${[hour, minute, second].map(formatNumber).join(':')}`
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : `0${n}`
}
4.axios的封装
methods: {
// 对axios的封装,使用比较方便----
// this.getData({
// limit: 20
// })
getData(params) {
axios.get('https://cnodejs.org/api/v1/topics', {
params
}).then(res => {
// console.log(res.data.data);
// 把请求到的数据设置给data中的topics里
this.topics = res.data.data
})
},
}
以下代码
<body>
<div id="app">
<!-- 分类 -->
<div class="tabs">
<div :class="['tab-item',{active:activeItemIndex===index}]" v-for="(item,index) in menu"
@click="changeIndex(index)" :key="index">
{{item.title}}
</div>
</div>
<!-- 下面内容 -->
<div class="list" v-for="(item,index) in topics" :key="item.id">
<div class="item">
<div class="item-body">
{{index}}
<!-- 头像 -->
<div class="item-avatar">
<img width="36" :src="item.author.avatar_url">
</div>
<!-- 置顶 -->
<div class="item-tag">
<div :class="['tag',{active:item.top||item.good}]">
<!-- tabs[topic.tab]
在data中定义一个对象用来放与tab相匹配的内容,可以根据 `对象名[对象中的属性]`来获取相对的属性值
-->
{{item.top?"置顶":item.good?"精华":tabs[item.tab]}}
</div>
</div>
<!-- 标题、评论数 -->
<div class="item-info">
<div class="item-title">{{item.title}}</div>
<div class="item-count">
<div class="item-reply">{{item.visit_count}}</div>
<div class="line">/</div>
<div class="item-visited">{{item.reply_count}}</div>
</div>
</div>
</div>
<div class="item-right">
{{item.last_reply_at | formatDate}}
</div>
</div>
</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
// 用来接收请求的数据进行页面渲染
topics: [],
tabs: {
share: '分享',
ask: '问答',
job: '招聘',
},
// 用来与点击的下标进行绑定,当这个数与下标的值相等时,来添加类名
activeItemIndex: 0,
// 数组用来标签的便利和请求的绑定
menu: [{
title: "全部",
tab: "all"
}, {
title: "精华",
tab: "good"
}, {
title: "分享",
tab: "share"
}, {
title: "问答",
tab: "ask"
}, {
title: "招聘",
tab: "job"
},
]
},
methods: {
// 对axios的封装,使用比较方便----
// this.getData({
// limit: 20
// })
getData(params) {
axios.get('https://cnodejs.org/api/v1/topics', {
params
}).then(res => {
// console.log(res.data.data);
// 把请求到的数据设置给data中的topics里
this.topics = res.data.data
})
},
changeIndex(index) {
this.activeItemIndex = index
const tab = this.menu[index].tab
this.getData({
limite: 20,
tab
})
}
},
// 组件挂在后执行
mounted() {
this.getData({
limit: 20
})
},
computed: {
// 数据只会在第一次执行时得到并且缓存起来
now() {
return Date.now()
}
},
filters: {
/*
格式化日期 输出 秒前 分钟前 小时前 月前 年前
1秒 1000
1分钟 1000 * 60 60000
1小时 1000 * 60 * 60 3600000
1天 1000 * 60 * 60 * 24 86400000
1个月 1000 * 60 * 60 * 24 * 30 2592000000
1年 1000 * 60 * 60 * 24 * 365 31536000000
*/
formatDate(val) {
// 获取当前事件和最后一次评论时间的时间差
const time = Date.now() - new Date(val)
// 创建两个数组记录需要计算的事件和时间单位
const times = [
31536000000, 2592000000, 86400000, 3600000, 60000, 1000
]
const units = [
"年前", "月前", "天前", "小时前", "分钟前", "秒前"
]
for (let i = 0; i < times.length; i++) {
const res = time / times[i];
if (res >= 1) {
return Math.round(res) + units[i]
}
}
}
}
})
</script>
</body>
</html>
样式
<style>
.item {
display: flex;
align-items: center;
justify-content: space-between;
}
.item-body {
display: flex;
align-items: center;
}
.item-count {
display: flex;
align-items: center;
}
.tab-item {
cursor: pointer;
}
.tag {
background-color: #ddd;
color: #aaa;
font-size: 12px;
}
.tag.active {
background: rgb(00, 99, 70);
color: #fff;
}
.tabs {
display: flex;
}
.tabs .active {
color: red;
}
</style>