区块链技术博客
www.b2bchain.cn

vue实战 实现视频类webapp:(十三) 从零开发数据层求职学习资料

本文介绍了vue实战 实现视频类webapp:(十三) 从零开发数据层求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

仓库传送门
到这个章节 视频类webApp 最最重要的视频播放功能基本完成了 ,不过之前都是写死在vue文件中,现在我们要做数据的mock数据层的开发了。
由于没有现成可用的抖音app后端接口(这个不影响我们的实~~战),我们可以借助axios请求本地的json数据来实现
我们假设服务器返回的视频列表数据格式如下:

        {           id: '1', // 当前视频列表组件           url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',           perLikes: '7008', // 视频点赞数           perComments: '81', // 视频评论数           perForward: '391', // 视频转发数           perName: '@小孟儿', // 视频作者           perDesc: '女柚子的比赛之路,报告大家,目前一路顺畅', // 视频描述           perMusicName: '@小孟儿创作的原生', // 视频背景音乐名称         },

axios 请求封装

首先安装:

yarn add  axios 

现在在src/request目录下创建http.js,里面编写axios的配置如下:

/* eslint-disable prefer-promise-reject-errors */ 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.response.use(   (response) => {     // store.dispatch('setOverlay', { load: false });     if (response.status === 200) {       return response.data;     }     return Promise.reject(response);   },   (error) => {     // store.dispatch('setOverlay', { load: false });     if (error.code === 'ECONNABORTED' || error.message.indexOf('timeout') !== -1) {       tip('请求超时');     }     return Promise.reject({});   }, );  export function post(url, bodyParam = '') {   return new Promise((resolve, reject) => {     Axios.post(url, JSON.stringify(bodyParam))       .then((res) => {         if (res.infocode && res.infocode === 1) {           resolve(res.data);         } else {           reject({ msg: '数据出错请重试!' });         }       })       .catch((err) => {         reject(err);       });   }); }  export function get(url) {   return new Promise((resolve, reject) => {     Axios.get(url)       .then((res) => {         resolve(res);       })       .catch((err) => {         reject(err);       });   }); }

请求数据

  • vue-cli 3之后 在不修改vue.config.js 配置文件的情况下 本地资源放到public才能被正确的加载
    在public下创建static目录,并创建我们要请求的json数据 data.json
{   "list": [     {         "id": "1",         "url": "http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4",         "perLikes": "7008",         "perComments": "81",         "perForward": "391",         "perName": "@小孟儿",         "perDesc": "女柚子的比赛之路,报告大家,目前一路顺畅",         "perMusicName": "@小孟儿创作的原生"       },       {         "id": "2",         "url": "http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4",         "perLikes": "238",         "perComments": "6",         "perForward": "",         "perName": "@克拉拉ClaraLee",         "perDesc": "你进今天健身了吗",         "perMusicName": "@克拉拉创作的原生"       },       {         "id": "3",         "url": "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",         "perLikes": "5.4w",         "perComments": "1401",         "perForward": "784",         "perName": "@普通闲话",         "perDesc": "普通百姓买房子是资产保值增值的最好方面是吗",         "perMusicName": "@普通闲话创作的原生"       },       {         "id": "4",         "url": "http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4",         "perLikes": "2640",         "perComments": "734",         "perForward": "43",         "perName": "@萌宠动漫社",         "perDesc": "这哪还是龙啊,就是一只二哈",         "perMusicName": "@萌宠动漫社创作的原生"       }   ] }

`

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

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

父子组件间数据传递

props:属性官方链接

  • rightBar.vue

rightBar数据应该由VideoList通过props属性传递进去, 这就涉及到了vue的父子组件属性值传递
rightBar.vue代码作如下改动
“` javasript

仓库传送门
到这个章节 视频类webApp 最最重要的视频播放功能基本完成了 ,不过之前都是写死在vue文件中,现在我们要做数据的mock数据层的开发了。
由于没有现成可用的抖音app后端接口(这个不影响我们的实~~战),我们可以借助axios请求本地的json数据来实现
我们假设服务器返回的视频列表数据格式如下:

        {           id: '1', // 当前视频列表组件           url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',           perLikes: '7008', // 视频点赞数           perComments: '81', // 视频评论数           perForward: '391', // 视频转发数           perName: '@小孟儿', // 视频作者           perDesc: '女柚子的比赛之路,报告大家,目前一路顺畅', // 视频描述           perMusicName: '@小孟儿创作的原生', // 视频背景音乐名称         },

axios 请求封装

首先安装:

yarn add  axios 

现在在src/request目录下创建http.js,里面编写axios的配置如下:

/* eslint-disable prefer-promise-reject-errors */ 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.response.use(   (response) => {     // store.dispatch('setOverlay', { load: false });     if (response.status === 200) {       return response.data;     }     return Promise.reject(response);   },   (error) => {     // store.dispatch('setOverlay', { load: false });     if (error.code === 'ECONNABORTED' || error.message.indexOf('timeout') !== -1) {       tip('请求超时');     }     return Promise.reject({});   }, );  export function post(url, bodyParam = '') {   return new Promise((resolve, reject) => {     Axios.post(url, JSON.stringify(bodyParam))       .then((res) => {         if (res.infocode && res.infocode === 1) {           resolve(res.data);         } else {           reject({ msg: '数据出错请重试!' });         }       })       .catch((err) => {         reject(err);       });   }); }  export function get(url) {   return new Promise((resolve, reject) => {     Axios.get(url)       .then((res) => {         resolve(res);       })       .catch((err) => {         reject(err);       });   }); }

请求数据

  • vue-cli 3之后 在不修改vue.config.js 配置文件的情况下 本地资源放到public才能被正确的加载
    在public下创建static目录,并创建我们要请求的json数据 data.json
{   "list": [     {         "id": "1",         "url": "http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4",         "perLikes": "7008",         "perComments": "81",         "perForward": "391",         "perName": "@小孟儿",         "perDesc": "女柚子的比赛之路,报告大家,目前一路顺畅",         "perMusicName": "@小孟儿创作的原生"       },       {         "id": "2",         "url": "http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4",         "perLikes": "238",         "perComments": "6",         "perForward": "",         "perName": "@克拉拉ClaraLee",         "perDesc": "你进今天健身了吗",         "perMusicName": "@克拉拉创作的原生"       },       {         "id": "3",         "url": "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",         "perLikes": "5.4w",         "perComments": "1401",         "perForward": "784",         "perName": "@普通闲话",         "perDesc": "普通百姓买房子是资产保值增值的最好方面是吗",         "perMusicName": "@普通闲话创作的原生"       },       {         "id": "4",         "url": "http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4",         "perLikes": "2640",         "perComments": "734",         "perForward": "43",         "perName": "@萌宠动漫社",         "perDesc": "这哪还是龙啊,就是一只二哈",         "perMusicName": "@萌宠动漫社创作的原生"       }   ] }

`

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

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

父子组件间数据传递

props:属性官方链接

  • rightBar.vue

rightBar数据应该由VideoList通过props属性传递进去, 这就涉及到了vue的父子组件属性值传递
rightBar.vue代码作如下改动
“` javasript

仓库传送门
到这个章节 视频类webApp 最最重要的视频播放功能基本完成了 ,不过之前都是写死在vue文件中,现在我们要做数据的mock数据层的开发了。
由于没有现成可用的抖音app后端接口(这个不影响我们的实~~战),我们可以借助axios请求本地的json数据来实现
我们假设服务器返回的视频列表数据格式如下:

        {           id: '1', // 当前视频列表组件           url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',           perLikes: '7008', // 视频点赞数           perComments: '81', // 视频评论数           perForward: '391', // 视频转发数           perName: '@小孟儿', // 视频作者           perDesc: '女柚子的比赛之路,报告大家,目前一路顺畅', // 视频描述           perMusicName: '@小孟儿创作的原生', // 视频背景音乐名称         },

axios 请求封装

首先安装:

yarn add  axios 

现在在src/request目录下创建http.js,里面编写axios的配置如下:

/* eslint-disable prefer-promise-reject-errors */ 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.response.use(   (response) => {     // store.dispatch('setOverlay', { load: false });     if (response.status === 200) {       return response.data;     }     return Promise.reject(response);   },   (error) => {     // store.dispatch('setOverlay', { load: false });     if (error.code === 'ECONNABORTED' || error.message.indexOf('timeout') !== -1) {       tip('请求超时');     }     return Promise.reject({});   }, );  export function post(url, bodyParam = '') {   return new Promise((resolve, reject) => {     Axios.post(url, JSON.stringify(bodyParam))       .then((res) => {         if (res.infocode && res.infocode === 1) {           resolve(res.data);         } else {           reject({ msg: '数据出错请重试!' });         }       })       .catch((err) => {         reject(err);       });   }); }  export function get(url) {   return new Promise((resolve, reject) => {     Axios.get(url)       .then((res) => {         resolve(res);       })       .catch((err) => {         reject(err);       });   }); }

请求数据

  • vue-cli 3之后 在不修改vue.config.js 配置文件的情况下 本地资源放到public才能被正确的加载
    在public下创建static目录,并创建我们要请求的json数据 data.json
{   "list": [     {         "id": "1",         "url": "http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4",         "perLikes": "7008",         "perComments": "81",         "perForward": "391",         "perName": "@小孟儿",         "perDesc": "女柚子的比赛之路,报告大家,目前一路顺畅",         "perMusicName": "@小孟儿创作的原生"       },       {         "id": "2",         "url": "http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4",         "perLikes": "238",         "perComments": "6",         "perForward": "",         "perName": "@克拉拉ClaraLee",         "perDesc": "你进今天健身了吗",         "perMusicName": "@克拉拉创作的原生"       },       {         "id": "3",         "url": "http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4",         "perLikes": "5.4w",         "perComments": "1401",         "perForward": "784",         "perName": "@普通闲话",         "perDesc": "普通百姓买房子是资产保值增值的最好方面是吗",         "perMusicName": "@普通闲话创作的原生"       },       {         "id": "4",         "url": "http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4",         "perLikes": "2640",         "perComments": "734",         "perForward": "43",         "perName": "@萌宠动漫社",         "perDesc": "这哪还是龙啊,就是一只二哈",         "perMusicName": "@萌宠动漫社创作的原生"       }   ] }

`

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

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

父子组件间数据传递

props:属性官方链接

  • rightBar.vue

rightBar数据应该由VideoList通过props属性传递进去, 这就涉及到了vue的父子组件属性值传递
rightBar.vue代码作如下改动
“` javasript

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » vue实战 实现视频类webapp:(十三) 从零开发数据层求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们