学习项目movie-web:构建本地电影、电视视频中心 - 教程

news/2025/10/3 11:23:58/文章来源:https://www.cnblogs.com/wzzkaifa/p/19124411

官网:https://github.com/movie-web/movie-web

但是这个官网需要github账号才能访问(存疑,因为没测试)

国内镜像:https://gitcode.com/GitHub_Trending/mo/movie-web

这个国内镜像可以访问,不过代码有些老了,是一年前的。

国内镜像:movieWeb: movie-web react+vite

这个镜像代码最新了。

安装

下载源代码

git clone https://gitcode.com/GitHub_Trending/mo/movie-web

进入源代码目录,cd movie-web ,安装

pnpm install
pnpm run dev

启动绑定到0.0.0.0

 pnpm dev --host 0.0.0.0

如果pnpm没有安装,那么可以先安装pnpm

npm install pnpm -g

如果npm没有安装,那么可以参考这里:https://skywalk.blog.csdn.net/article/details/149314275

使用

启动后显示

 pnpm dev --host 0.0.0.0
> app@0.0.0 dev /home/skywalk/work/movie-web
> vite --mode dev --host 0.0.0.0VITE v4.5.14  ready in 397 ms➜  Local:   http://localhost:5173/➜  Network: http://192.168.0.16:5173/➜  Network: http://192.168.0.100:5173/➜  press h to show help

浏览器打开5173端口网页

http://192.168.0.16:5173/

显示如图:

但是没法登录和注册,显示Network error

先搁置,就先弄到这里吧。

调试

pnpm run dev启动后报错

 ERROR(ESLint)  Insert `(` (prettier/prettier)FILE  /home/skywalk/github/movie-web/src/components/player/atoms/settings/SettingsMenu.tsx:34:732 |33 |   const selectedLanguagePretty = selectedCaptionLanguage> 34 |     ? getPrettyLanguageNameFromLocale(selectedCaptionLanguage) ??|       ^35 |       t("player.menus.subtitles.unknownLanguage")36 |     : undefined;37 |ERROR(ESLint)  Insert `)` (prettier/prettier)FILE  /home/skywalk/github/movie-web/src/components/player/atoms/settings/SettingsMenu.tsx:35:4933 |   const selectedLanguagePretty = selectedCaptionLanguage34 |     ? getPrettyLanguageNameFromLocale(selectedCaptionLanguage) ??> 35 |       t("player.menus.subtitles.unknownLanguage")|                                                 ^36 |     : undefined;37 |38 |   const source = usePlayerStore((s) => s.source);ERROR(ESLint)  Replace `"volumechange",·videoElement?.muted·?·0·:·videoElement?.volume·??·0` with `⏎········"volumechange",⏎········videoElement?.muted·?·0·:·(videoElement?.volume·??·0),⏎······` (prettier/prettier)FILE  /home/skywalk/github/movie-web/src/components/player/display/base.ts:187:12185 |     videoElement.addEventListener("waiting", () => emit("loading", true));186 |     videoElement.addEventListener("volumechange", () =>> 187 |       emit("volumechange", videoElement?.muted ? 0 : videoElement?.volume ?? 0),|            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^188 |     );189 |     videoElement.addEventListener("timeupdate", () =>190 |       emit("time", videoElement?.currentTime ?? 0),ERROR(ESLint)  Delete `⏎···········` (prettier/prettier)FILE  /home/skywalk/github/movie-web/src/components/player/internals/StatusCircle.tsx:36:9534 |       className={classNames(35 |         {> 36 |           "p-0.5 border-current border-[3px] rounded-full h-6 w-6 relative transition-colors":|                                                                                               ^> 37 |             true,| ^^^^^^^^^^^^38 |           "text-video-scraping-loading": props.type === "loading",39 |           "text-video-scraping-noresult text-opacity-50":40 |             props.type === "waiting",ERROR(ESLint)  Delete `⏎···········` (prettier/prettier)FILE  /home/skywalk/github/movie-web/src/pages/onboarding/utils.tsx:17:9215 |       className={classNames(16 |         {> 17 |           "bg-onboarding-card duration-300 border border-onboarding-border rounded-lg p-7":|                                                                                            ^> 18 |             true,| ^^^^^^^^^^^^19 |           "hover:bg-onboarding-cardHover transition-colors cursor-pointer":20 |             !!props.onClick,21 |         },ERROR(ESLint)  Delete `⏎···········` (prettier/prettier)FILE  /home/skywalk/github/movie-web/src/pages/parts/player/ScrapingPart.tsx:106:82104 |       
106 | "absolute transition-[transform,opacity] opacity-0 dir-neutral:left-0":| ^> 107 | true,| ^^^^^^^^^^^^108 | "!opacity-100": renderedOnce,109 | })}110 | ref={listRef}ERROR(ESLint) Delete `⏎···············` (prettier/prettier)FILE /home/skywalk/github/movie-web/src/pages/parts/settings/SetupPart.tsx:162:87160 |
162 | "rounded-full h-12 w-12 flex bg-opacity-15 justify-center items-center":| ^> 163 | true,| ^^^^^^^^^^^^^^^^164 | "text-type-success bg-type-success": globalState === "success",165 | "text-type-danger bg-type-danger":166 | globalState === "error" || globalState === "unset", [ESLint] Found 12 errors and 0 warning

这是用的gitcode的代码,可能是版本太老的缘故,换gitee的代码试试。

报错Ignored build scripts: esbuild.

╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│   Ignored build scripts: esbuild.                                                          │
│   Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.   │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯

先不管它。

报错Error: The following dependencies are imported but could not be resolved:

Error: The following dependencies are imported but could not be resolved:

  react-photo-view (imported by /home/skywalk/work/movie-web/src/pages/Photo.jsx)
  react-photo-view/dist/react-photo-view.css (imported by /home/skywalk/work/movie-web/src/pages/Icon.jsx)

Are they installed?
    at file:///home/skywalk/work/movie-web/node_modules/.pnpm/vite@4.5.14/node_modules/vite/dist/node/chunks/dep-827b23df.js:45783:23
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async file:///home/skywalk/work/movie-web/node_modules/.pnpm/vite@4.5.14/node_modules/vite/dist/node/chunks/dep-827b23df.js:45191:38

安装所需的包react-photo-view

pnpm add react-photo-view

问题解决

网站启动后,同局域网无法登录

原来默认是本地登录,用--host来加上0.0.0.0的绑定

 pnpm dev --host 0.0.0.0

网站启动后,无法注册、登录,显示Network error

这怎么办呢?是不是需要配置啥的,大约需要配置.env文件,

VITE_API_BASE_URL=https://api.example.com
VITE_TMDB_API_KEY=your_tmdb_key_here

VITE_TMDB_API_KEY需要去网站申请

注册 TMDB 账号

  • 访问 TMDB 官网。
  • 点击右上角 ‌"Join TMDB"‌ 注册新账号,或使用现有账号登录。

 申请 API 密钥

  • 登录后,点击右上角头像,选择 ‌"Settings"‌(设置)。
  • 在左侧导航栏中,选择 ‌"API"‌。
  • 点击 ‌"Request an API Key"‌ 下的 ‌"click here"‌ 链接。
  • 选择 API 类型:‌Developer‌(个人项目通常选此项)。

填写申请信息

  • 应用名称‌:填写项目名称(如 movie-web)。
  • 应用描述‌:简要说明用途(例如:“用于电影数据查询”)。
  • 网站 URL‌:可填写个人网站或占位符(如 http://localhost)。
  • 提交申请后,系统会向注册邮箱发送验证链接,点击邮件中的链接完成验证。

没再弄,先搁置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/925821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust泛型详解 - 实践

Rust泛型详解 - 实践pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "…

网站建设课程的感想在线考试系统网站开发

算法提高课整理 CSDN个人主页:更好的阅读体验 原题链接 题目描述 给定一个长度为 n n n 的数组,数组中的第 i i i 个数字表示一个给定股票在第 i i i 天的价格。 设计一个算法来计算你所能获取的最大利润,你最多可以完成 k k k 笔交易…

怎么做自己的购物网站怎么给自己建网站

文章目录树状数组lowbit线段树与树状数组单点修改区间查询区间修改区间求和二维树状数组离线树状数组例题POJ:starsMooFest[SDOI2009]HH的项链Turing TreeCounting SequencesZip-line树状数组 用于快速高效的计算与前缀和相关的信息 lowbit int lowbit( int i ) …

有个做搞笑视频的网站桂林市天气预报15天准确

在开发项目过程中,为了方便调试代码,经常会向stdout中输出一些日志,默认的这些日志就直接显示在了终端中。而一般的应用服务器,第三方库,甚至服务器的一些通告也会在终端中显示,这样就搅乱了我们想要的信息…

番禺 大石网站建设建筑模板制作过程

是什么 官网:Redis cluster specification | Redis 由于数据量过大,单个Master复制集难以承担,因此需要对多个复制集进行集群,形成水平扩展每个复制集只负责存储整个数据集的一部分,这就是Redis的集群,其作…

AT_abc205_e [ABC205E] White and Black Balls

本质上就是将卡特兰数的 \(y = x\) 这条限制线移到了 \(y = x + k\) 这条限制线,格路计数即可。

transformers音频实战01-音频概念 - 教程

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

做发包业务网站wordpress主题谁的最好

说明 本文根据B站up主唐老狮的课程所学所记 目录 说明本文根据B站up主唐老狮的课程所学所记 UML面向对象七大原则总体实现目标单一职责原则(SRP,Single Responsibility Principle)开闭原则(OCP,Open-Closed Principle…

网站建设介绍大全杭州网络推广专员

浅谈web应用的负载均衡、集群、高可用(HA)解决方案转载于:https://www.cnblogs.com/hfultrastrong/p/7887420.html

Python 自动化导出PDF表格:List、Dictionary、Pandas DataFrame和数据库实例演示 - 指南

Python 自动化导出PDF表格:List、Dictionary、Pandas DataFrame和数据库实例演示 - 指南pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !importan…

Rust Slint库达成桌面萌宠源码分享(包含拖动、右键菜单效果)

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

Redis 持久化机制 - 教程

Redis 持久化机制 - 教程pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", &q…

行业seo网站优化方案厦门优化公司

文章目录 背景介绍 问题描述 分析排查 解决方案 总结归纳 背景介绍 在一个嵌入式软件项目中,有一段使用C语言写的嵌入式代码,功能是把CAN总线上的几帧报文接收进来,并解析出数据。示例如下: 乍一看感觉挺简单,想着…

网站建站图片汉滨区住房和城乡建设局网站

在进行绘图时必须考虑这两种坐标。 世界坐标是整个区域的坐标,而页面坐标是可视区的坐标。这两种坐标是通过滚动条来体现出来的。 页面坐标的原点始终是窗口可视区的坐上角,世界坐标的原点始终不变,这两种坐标和VC中的屏幕坐标和客户坐标很…

2025染井吉野樱公司 TOP 种植服务推荐排行榜,染井吉野樱花苗,五公分染井吉野樱,十公分染井吉野樱,染井吉野樱批发,染井吉野樱基地,染井吉野樱花树公司推荐

引言在樱花苗木采购与景观工程实施过程中,分枝点规格的把控已成为行业突出痛点。当前市场上,染井吉野樱苗木分枝点标准混乱,从 0.5 米到 3 米不等的规格随意标注,缺乏统一规范,导致采购方难以精准匹配绿化需求。部…

网站建设如何定价广州网站制作怎样

Facebook广告是海外营销的一大利器,但是随着互联网的发展,有部分不法分子正在利用他进行盈利,导致Facebook官方安全审核日益严格,不少卖家遭遇封号问题!这篇文章就来教你如何更好地管理 Facebook广告帐户,实…

如何建立自己的摄影网站做电商网站用什么框架

来源:AI前线 作者:Jiang Chen,Moveworks 机器学习副总裁译者:王强策划:刘燕从 Siri 到 Alexa 再到谷歌助手,今天我们已经被各种人工智能系统包围了。它们的设计目标只有一个:理解我们。我们已经…

鄂州网站建设与设计乐器网站模板

windows2003-建立域 Active Directory建立DNS建立域查看日志xp 加入域 Active Directory 活动目录是一个包括文件、打印机、应用程序、服务器、域、用户账户等对象的数据库。 常见概念:对象、属性、容器 域组件(Domain Component,DC&#x…

glazewm_windows平铺窗口管理器使用方法

1.在github上寻找预构建版本 2.双击安装 3.关闭与zebra有关的命令 配置文件在 C:\Users{yourname}.glzr\glazewm\config.yaml 打开这个文件 默认这条指令是没有注释的,我这边直接注释掉这样软件启动就不会报错了4.添加…

详细介绍:LeetCode热题100(1-7)

详细介绍:LeetCode热题100(1-7)pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco&…