vue实现Cnode具体有axios分页请求 | filters（过滤器）解决时间转秒前分钟前小时前月前年前

最新推荐文章于 2022-09-15 22:02:25 发布

nan囡315

最新推荐文章于 2022-09-15 22:02:25 发布

阅读量312

点赞数 3

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/hangnan315/article/details/118370751

版权

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>

nan囡315

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
vue实现Cnode具体有axios分页请求 | filters（过滤器）解决时间转秒前分钟前小时前月前年前

vue实现axios分页请求<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">
复制链接

扫一扫