程序员经验分享-hwhale

Vue.js全家桶仿哔哩哔哩动画 (移动端APP)

2023-11-04

项目地址

· 由于项目是移动端,电脑访问时可以切换成手机端
· 播放页面其实没有根据B站移动端来, 比较粗糙?
· ?源码地址 （欢迎Star）
· ?在线预览

项目描述

前端部分

  • 实现的Swiper, Toast, Indicator组件 来自Mint-ui

  • 使用了Vue.js做单页应用

  • 使用了Vue Router处理路由请求

  • 使用了Axios做ajax请求

  • 使用了Vuex管理组件间的状态，实现非父子组件之间的通信

  • 皮肤状态通过localstorage存储

后端部分

  • 开发环境下使用了express处理路由

待更新的功能

  • Video标签的优化

  • 直播界面的优化

  • 视频的弹幕加载

  • 将Vuex管理优化

  • 一些bug的解决

小提示

运行项目的时候注意一下网络, 一不小心会耗费一小波流量? (´･_･`)
遇到在线预览显示不出来的情况，可以戳源码本地运行

实现的功能

  • B站首页（轮播图、直播、推荐、番剧、排行榜、分区）

  • 切换主题（黑色和粉色的主题）

  • 搜索视频

  • 播放页面（简介、评论显示、发表评论、点赞、番剧选集）

详情

由于项目做的比较仓促，也比较粗糙. 项目中还有很多bug, 请见谅. 欢迎大家提issue，pr. 欢迎Star, 嘻嘻?

原文地址?https://youhonglian.github.io...

关于我?RESUME

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

后端

前端

ViewUI

Vue.js全家桶仿哔哩哔哩动画 (移动端APP) 的相关文章

  • 如何将 Live API for Contacts 的响应中的哈希值转换为文本

    我集成了 Live JS api 来获取用户的实时联系人 它以哈希格式 email hash 返回电子邮件 我如何使用 javascript 或 c net 转换为可读文本 非常感谢 我遇到了同样的问题 并且找到了解决方案 您所需要做的就是

  • 更改样式表 JavaScript

    我得到了这个 HTML 代码

  • Javascript图像编辑插件

    在哪里可以找到 Javascript 或 jQuery 图像编辑器插件 用户可以单击图像进行编辑 并且该插件允许他们进行裁剪 调整大小 旋转 翻转等 Pixastic http pixastic com lib 不再活跃 和CamanJS

  • 选择多选选项最多 2 个

    我正在对不同主题使用多重选择 我想将选择限制为最多 2 个 并且如果用户取消选择 则以相同的方式禁用其他选项 同样 该选项必须可供用户使用

  • 开玩笑错误意外的令牌...（ES6）

    每当我在命令行中运行 jest 时 都会收到以下错误 Test suite failed to run Users

  • 节点异步循环 - 如何使该代码按顺序运行？

    我知道有几个关于此的帖子 但根据我发现的那些帖子 这应该可以正常工作 我想在循环中发出 http 请求 并且不希望循环迭代 直到触发请求回调 我正在使用异步库 如下所示 const async require async const req

  • 应该使用encodeURI吗？

    javascript 的encodeURI 函数有任何有效用途吗 据我所知 当您尝试发出 HTTP 请求时 您应该 完整的 URI 您想要放入 URI 中的某些片段 可以是 unicode 字符串或 UTF 8 字节序列 在第一种情况下 显

  • 在 d3 中应用转换时出现错误

    我正在尝试对我在 d3 中设计的条形图应用一些过渡效果 这是我的代码 svg selectAll bar data data enter append g attr class bar append rect attr rx barRadi

  • ECMAScript 6 类中的 getter 和 setter 有何用途？

    我对 ECMAScript 6 类中 getter 和 setter 的意义感到困惑 什么目的 下面是我参考的一个例子 class Employee constructor name this name name doWork return

  • 如何从左向右滑动文本和图像并具有滑动效果[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • 当key未知时如何获取js对象中的属性值

    我有一个对象数组 a 81 25 p 81 25 81 26 p 81 26 我想循环遍历数组并获取值p在每个元素中 for var key in a console log a key outputs 81 25 Object How d

  • 如何将数据从 JavaScript 发送到 Python

    我正在 jinja2 和 python2 7 上使用 GAE 进行 Web 开发 我可以从Python获取数据 但我无法将数据从 JavaScript 发送到 Python 这是 JavaScript 代码 function toSave

  • 单击 btn 而不触发 div 单击未按预期工作

    代码沙盒 https codesandbox io s currying breeze depdc9 file package json https codesandbox io s currying breeze depdc9 file

  • 2 个 SVG 路径的交集

    我需要检查两个 SVG Path 元素是否相交 检查边界框与 getBBox 太不准确了 我目前正在做的是迭代两条路径 getTotalLength 然后检查是否有两个点 getPointAtLength 是平等的 下面是一个片段 但正如您

  • React setState回调返回值

    我是 React 新手 我希望实现这种流程 set the state execute a function f an async one which returns a promise set the state again return

  • JavaScript 中的安全数据

    我必须为 Web 测试创建生成器 使用 HTML 和 JavaScript 测试必须离线和在线进行 正确答案和分数评估必须是生成的测试的一部分 最终用户的分数仅发送到服务器 无法在服务器上进行评估 并且服务器对问题一无所知 它只保存最终分数

  • 数据表 - 从 AJAX 源过滤数据

    我有一个数据表 正在从 api 获取数据 现在我的状态是活动的 非活动的 如果标志是活动的 那么我需要在数据表中显示 否则我不应该显示过期的 这是我的fiddle https jsfiddle net lakshmipriya001 qLp

  • 如何使用node.js获取屏幕分辨率

    我需要使用 node js 获取屏幕分辨率 但以下代码不起作用 var w screen width var h screen height 这也行不通 var w window screen width var h window scre

  • 如何将函数导入到Vue组件中？

    我正在尝试将单个函数导入到我的 Vue 组件中 我为我的函数创建了一个单独的 js 文件 randomId js exports randomId gt My function 在我的 Vue 组件中 我导入了 Random js let

  • 了解客户端文件的对象 URL 以及如何释放内存

    我在用createObjectURL获取本地图像文件的引用 URL 当我完成文件 图像后 我打电话revokeObjectURL释放该内存 一切对我来说都很好 但我只是想确保我释放了我能释放的所有内存 我检查后出现了我的担忧chrome b

随机推荐

  • element-plus dialog #header无效

    这是官方文档的一个坑 来看下官方的案例 他这里使用的是 header来标记title插槽 正确应该是 title 而官网案例打开后也是看不到的自定义的标题内容的 标题这一栏是空白的 而看文档说明也是叫使用的header 这里下面还标注了ti

  • 神秘AI换脸软件入侵全球社交网络！马斯克秒变文艺复兴贵族

    人工智能学习离不开实践的验证 推荐大家可以多在FlyAI AI竞赛服务平台多参加训练和竞赛 以此来提升自己的能力 FlyAI是为AI开发者提供数据竞赛并支持GPU离线训练的一站式服务平台 每周免费提供项目开源算法样例 支持算法能力变现以及快

  • Vue3中自定义指令监听元素尺寸变化

    vue对元素的宽高变化看了一下 基本都是用的定时器解决的 刚好看到JS的一个属性方法 可以专门监测元素的尺寸变化 MDN地址 https developer mozilla org zh CN docs Web API ResizeObse

  • JSON数据格式解析库(cJSON、Jansson)的使用&在STM32上移植和使用

    json json c使用入门 这篇讲的也不错 抽空看下 网络传输json数据 https www bilibili com video av669454528 p 3 spm id from pageDriver 目录 轻量级C语言JSO

  • 步骤教学 ：安装下载Oracle VM VirtualBox + 安装win7 win10镜像文件

    网上一大堆资料 发现搜不到安装镜像文件的步骤 在自己捣鼓完了之后 决定自己写一篇 1 官网下载Oracle VM VirtualBox Downloads Oracle VM VirtualBox 2 安装好Oracle VM Virtua

  • 更改ElementUI默认样式的方法

    1 添加没有scoped的样式 页面中可以有多个 2 有scoped css原生写法 用 gt gt gt gt gt gt 前面可以是父元素或祖先元素 3 项目中用到了scss sass less 都可以使用 deep

  • TCP连接的建立与释放

    一 TCP连接的建立 1 先搭建一个合适的拓扑建立连接 这是一个已经连接好的拓扑 2 PC1 客户端 发送请求建立TCP的请求报文 图为客户端发送的TCP连接建立请求报文 此时的SEQUENCE NUMBER和ACK NUMBER的值均为0

  • 初识服务发现及Consul框架的简单使用

    1 什么是服务发现 服务发现组件记录了 大规模 分布式系统中所有服务的信息 人们或者其它服务可以据此找到这些服务 DNS 就是一个简单的例子 当然 复杂系统的服务发现组件要提供更多的功能 例如 服务元数据存储 健康监控 多种查询和实时更新等

  • 调研：暴恐识别（图像识别）by_xxzcc

    调研 暴恐识别 一 方法 分类 目标检测 人体姿态分析 1 腾讯优图 接口 https ai qq com doc imageterrorism shtml 图片分类 属性 13类 terrorists 恐怖分子 normalarmy 普通

  • 十大排序算法-桶排序（c语言实现）

    1 原理 桶排序 Bucket sort 或所谓的箱排序 是一种分块的排序算法 工作的原理是将数组分到有限数量的桶里 每个桶的大小都相等 每个桶再个别排序 有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序 把待排序序列 数组 中

  • SQL注入原理-万能密码注入

    一 学习目的 1 理解 万能密码 原理 2 学习 万能密码 的使用 二 实验环境 本机 192 168 1 2 目标机 192 168 1 3 三 举例说明 1 输入一个存在漏洞的网站 例如 http 192 168 1 3 8009 2

  • 浏览器无痕模式有什么作用，手机浏览器开启无痕模式的方法

    在我们的手机基本上都安装了浏览器 当我们在上网过程中 不想浏览记录被留下 那么开启无痕模式是非常有必要的 那么 浏览器的无痕模式有什么作用 手机浏览器如何开启无痕模式呢 下面教大家如何在手机浏览器中开启无痕模式 赶紧学一学吧 关键时刻能用上

  • 机械臂正运动学标准DH参数建立技巧

    1 切记 i 坐标系建立在i 1关节轴上 如 0 坐标系建立在关节1轴上 依次类推 6 坐标系与 5 坐标系姿态一致 固连在法兰盘接口末端 2 坐标系原点建立 若1 2轴垂直或异面垂直 则坐标系 1 原点在1轴与2轴的交点 0 坐标系原点建

  • 2.2.1 数据通信系统的模型

    一个数据通信系统分为三大部分 1 源系统 或发送端 发送方 2 传输系统 或传输网络 3 目的系统 或接收端 接收方 数据通信系统模型如下 上图中调制解调器有2个功能 1 调制 将计算机发出的低频 数字信号 转换成传输媒介可以传输的 模拟信

  • fetch中断请求, 和再次恢复使用

    业务场景 当时用fetch 建立长连接请求 在不使用时需要将其断掉 以缓解带宽压力和浏览器运行压力 等再次需要建立长链接时 再次启用 1 外层定义controller 一旦中止 AbortController就会被消耗 每次调用都必须创建新

  • Python基础学习-简要记录

    目录 快捷键 基础 1 字符串 2 变量 3 序列 4 列表 5 元组 6 字典 7 集合 8 time 模块 9 datetime 模块 date time datetime 类 10 calendar 模块 Calendar 类 Tex

  • 在1行上输入5个数字，数字之间用英文半角逗号分隔。输出其中最小的数字。 结果保留2位小数。

    题目描述 在1行上输入5个数字 数字之间用英文半角逗号分隔 输出其中最小的数字 结果保留2位小数 输入 6 4 5 2 3 输出 2 00 样例输入 Copy 12 22 2 32 42 样例输出 Copy 2 00 a map eval

  • undo表空间故障恢复

    time 2008 04 15author skate 参考文档 http blog chinaunix net u 7667 showart 163271 html undo表空间故障恢复 ORA 00376 file 2 cannot

  • mysql查询排名前5的语句_MySQL语句实现排名

    首先我们创建一张city popularity表 CREATE TABLEcity popularity regionint 10 NOT NULL COMMENT 1 国内 2 海外 city nameVARCHAR 64 NOT NUL

  • Vue.js全家桶仿哔哩哔哩动画 (移动端APP)

    项目地址 由于项目是移动端 电脑访问时可以切换成手机端 播放页面其实没有根据B站移动端来 比较粗糙 源码地址 欢迎Star 在线预览 项目描述 前端部分 实现的Swiper Toast Indicator组件 来自Mint ui 使用了Vu

热门标签