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

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

项目仓库地址，欢迎 Star

---

实现效果

---

前面几个章节已经将该 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 
      

      2. 编写 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 之 父子组件通信与事件触发（最全实用总结）

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

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

   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。

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