Vue.js 实战系列之实现视频类WebApp的项目开发——10. 本地mock数据实现数据请求

如果想看该实战系列的其他内容,请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。

项目仓库地址,欢迎 Star


实现效果

Vue.js 实战系列之实现视频类WebApp的项目开发——10. 本地mock数据实现数据请求_第1张图片


前面几个章节已经将该 webApp 最基本的视频播放的相关功能基本完成了 ,但是大部分数据都是写死在vue文件中,现在我们要对数据进行处理,本章节先采用 mock 数据进行开发。

功能实现

  1. 本地 mock 数据

    vue-cli 3 之后 在不修改 vue.config.js 配置文件的情况下,本地资源需要放到 public 下才能被正确的加载到。

    public 下创建 static 目录,并创建我们要请求的 json 数据。

    videoData.json

    {
           
        "list": [
          {
           
              "id": "1",
              "url": "http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4",
              "perPicture": "http://pic4.zhimg.com/50/v2-fde5891065510ef51e4c8dc19f6f3aff_hd.jpg",
              "perLikes": "7008",
              "perComments": "81",
              "perForward": "391",
              "perName": "@小孟儿",
              "perDesc": "女柚子的比赛之路,报告大家,目前一路顺畅",
              "perMusicName": "@小孟儿创作的原生"
            },
            {
           
              "id": "2",
              "url": "http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4",
              "perPicture": "https://pic1.zhimg.com/v2-ef11dd84ba38dfaa0df5576ab52436b7_r.jpg?source=1940ef5c",
              "perLikes": "238",
              "perComments": "6",
              "perForward": "0",
              "perName": "@克拉拉ClaraLee",
              "perDesc": "你进今天健身了吗",
              "perMusicName": "@克拉拉创作的原生"
            },
            {
           
              "id": "3",
              "url": "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",
              "perPicture": "https://iknow-pic.cdn.bcebos.com/d009b3de9c82d1581695ae268c0a19d8bc3e4216?x-bce-process%3Dimage%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_jpg",
              "perLikes": "5.4w",
              "perComments": "1401",
              "perForward": "784",
              "perName": "@普通闲话",
              "perDesc": "普通百姓买房子是资产保值增值的最好方面是吗",
              "perMusicName": "@普通闲话创作的原生"
            },
            {
           
              "id": "4",
              "url": "http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4",
              "perPicture": "https://pic3.zhimg.com/80/v2-17afcd4e4483ce5bbee4598ca3ca1c73_720w.jpg?source=1940ef5c",
              "perLikes": "2640",
              "perComments": "734",
              "perForward": "43",
              "perName": "@萌宠动漫社",
              "perDesc": "这哪还是龙啊,就是一只二哈",
              "perMusicName": "@萌宠动漫社创作的原生"
            }
        ]
    }
    
  2. 数据请求

    1. axios 请求封装

      1. 安装 axios
      yarn add  axios 
      
      1. 编写 axios 配置:

        src/request 目录下创建 http.js

      import Vue from 'vue';
      import Axios from 'axios';
      import {
                Toast } from 'vant';
      
      Vue.use(Toast);
      
      Axios.defaults.timeout = 120000;
      Axios.defaults.headers = {
                'Content-Type': 'application/json;charset=UTF-8' };
      
      const tip = (msg) => {
               
          Toast({
               
              message: msg,
              duration: 1500,
              forbidClick: true,
          });
      };
      
      // 添加请求拦截器
      Axios.interceptors.request.use(
          // 在发送请求之前做些什么
          (config) => config,
          // 对请求错误做些什么
          (error) => Promise.reject(error),
      );
      
      // 添加响应拦截器
      Axios.interceptors.request.use(
          // 对响应数据做点什么
          (response) => response,
          // 对响应错误做点什么
          (error) => {
               
              if (error.code === 'ECONNABORTED' || error.message.indexOf('timeout') !== -1) {
               
                  tip('请求超时');
              }
              return Promise.reject(new Error({
               }));
          },
      );
      
      export function GET(url) {
               
          return new Promise((resolve, reject) => {
               
              Axios.get(url)
                  .then((res) => {
               
                      resolve(res);
                  })
                  .catch((err) => {
               
                      reject(err);
                  });
          });
      }
      
      export function POST(url, param = '') {
               
          return new Promise((resolve, reject) => {
               
              Axios.post(url, JSON.stringify(param))
                  .then((res) => {
               
                      resolve(res);
                  })
                  .catch((err) => {
               
                      reject(err);
                  });
          });
      }
      
    2. 请求本地 json 数据

      videoList.vue

      在生命周期 created 中 请求本地 json 数据,代码片段如下:

      import {
                GET } from '../../../request/http';
      created() {
               
        GET('/static/videoData.json')
          .then((res) => {
               
            console.log(res.data.list);
            this.dataList = res.data.list;
          })
          .catch((err) => {
               
            console.log(err);
          });
      },
      

      请求到数据之后需要注意一下页面中的字段对应。

  3. 父子组件间数据传递

    如果对于 Vue 的父子组件数据传递不太熟练,请移步至:Vue 之 父子组件通信与事件触发(最全实用总结)

    在次之前我们已经对 组件进行了组件传值封装,如果忘记可以到 6. 首页视频详情实现 中查看。

    下面我们对 组件进行数据传值

    RightBar 数据应该由 VideoList 传递进去,通过 props 属性接收。

    VideoList.vue

    <RightBar
      :perPicture="item.perPicture"
      :perLikes="item.perLikes"
      :perComments="item.perComments"
      :perForward="item.perForward"
      @changeCom="showOrClose"
    >RightBar>
    

    RightBar.vue

    props: ['perPicture', 'perLikes', 'perComments', 'perForward'],
    

总结

本章节需要注意的几个点:

  • 借助 axios 请求本地的 json 数据来实现视频列表数据请求;
    • 关于 axios 的使用,请移步至 axios 官网文档
  • vue-cli 3 之后 在不修改 vue.config.js 配置文件的情况下,本地资源需要放到 public 才能被正确的加载;
  • vue 父子组件间数据传递

上一章节: 9. 视频评论列表

下一章节: 11. 注册登录

项目整体介绍:Vue.js 项目实战之实现视频播放类WebApp的项目开发(仿抖音app)


项目仓库地址,欢迎 Star。

有任何问题欢迎评论区留言讨论。

你可能感兴趣的:(Vue,实战系列,vue,ajax,json,post,javascript)