今天跟大家唠唠我搞的这个“鱼鱼影院”，说白了就是个个人练手项目，从想法到实现，磕磕绊绊搞了好几天，总算是有个能看的雏形了。
起初：想法的萌芽
这事儿还得从我最近老剧荒说起。想找点老电影老电视剧看看，结果不是要会员就是要收费，烦都烦死了。当时就冒出一个念头，干脆自己搞一个得了，反正闲着也是闲着。当时的想法很简单，就是做一个资源聚合站，把网上能搜到的免费资源都整合过来，方便自己也方便大家。
第一步：技术选型
想法是有了，接下来就是选技术。我之前稍微了解过一些前端框架，比如 Vue 和 React。考虑到 Vue 上手快，社区资源也比较丰富，就决定用 Vue 来搭建前端界面。后端的话，一开始想用 Python 的 Flask 框架，但后来一想，为了练手，还是挑战一下自己，用了 * 的 Express 框架。数据库就选了 MongoDB，主要看中它灵活，不用一开始就定义好表结构。
第二步：开工！前端界面搭建
前端部分，我先用 Vue CLI 搭建了一个项目框架。然后就开始一点一点地写页面。首页肯定要有一个搜索框，方便用户搜索电影电视剧。然后是分类导航，比如电影、电视剧、动漫、综艺等等。还得有个轮播图，放一些热门推荐。
在写前端的时候，我主要参考了一些现有的视频网站的界面设计。我也没完全照搬，而是加入了一些自己的想法。比如，我做了一个“随便看看”的功能，用户点击一下，就能随机播放一部影片，省得用户纠结看什么。
第三步：后端接口开发
后端部分，我用 Express 搭建了一个简单的 API 服务。主要提供以下几个接口：
- /api/search：用于搜索电影电视剧
- /api/category：用于获取分类列表
- /api/detail：用于获取影片详情
- /api/play：用于获取播放地址
这些接口主要就是从网上抓取数据，然后进行一些简单的处理，返回给前端。抓取数据这部分，我用了 * 的 request 库。
第四步：数据抓取与处理
这部分是最麻烦的。因为不同的视频网站的数据结构都不一样，所以需要针对不同的网站编写不同的抓取脚本。我只抓取了几个比较容易抓取的网站的数据。后来随着时间的推移，我慢慢地增加了抓取的网站数量。
抓取到的数据，需要进行一些处理，比如清洗掉一些无用的 HTML 标签，提取出影片的标题、封面、简介、播放地址等等。
第五步：播放器的选择与集成
播放器我选了 DPlayer，一个开源的 HTML5 播放器。集成起来也很简单，只需要在前端页面引入 DPlayer 的 JavaScript 和 CSS 文件，然后创建一个 DPlayer 实例即可。
第六步：上线部署
代码写完之后，我就想着把它部署到网上，让更多的人可以使用。我用的是阿里云的服务器，系统是 Ubuntu。
我在服务器上安装了 * 和 MongoDB。然后，把前端代码和后端代码上传到服务器。启动 MongoDB 数据库，启动 * 服务。
我用 Nginx 配置了一个反向代理，把用户的请求转发到 * 服务。
遇到的坑和解决方案
最终效果
虽然现在“鱼鱼影院”还比较简陋，功能也比较简单，但总算是一个能用的版本了。用户可以搜索电影电视剧，可以按分类浏览，可以观看影片。
未来计划
增加更多的资源网站
优化搜索功能
改进用户体验
增加用户评论功能
美化界面
总结
这回做“鱼鱼影院”，我学到了很多东西。不仅巩固了之前学到的前端和后端知识，还学会了如何抓取数据，如何部署项目。虽然过程中遇到了很多坑，但最终都克服了。这回经历非常有意义。希望我的分享能对大家有所帮助！