lybenson/bilibili-vue

前端vue+后端koa，全栈式开发bilibili首页

技术栈

前端：vue3 + vuex + vite + stylus + nginx

后端：koa2

项目运行

源码地址: https://github.com/lybenson/bilibili-vue

如何运行

运行前请先安装nodejs

clone项目到本地

git clone https://github.com/lybenson/bilibili-vue.git

前端运行

cd bilibili-vue && yarn && yarn dev

后端运行

cd bilibili-vue/bilibili-api && yarn install && yarn dev

为了确保运行正确，请先运行后端服务。再运行前端，之后访问 http://localhost:8080

组件

根据首页的各模块的功能不同，划分出了共20多个可复用的组件。具体请看下方

├── banner  //轮播组件
│   ├── Banner.vue
│   └── BannerItem.vue
├── common  // 公共组件
│   ├── BHeader.vue
│   ├── BMenu.vue
│   ├── BMenuItem.vue
│   ├── PostMaterial.vue
│   ├── Search.vue
│   └── TopContainer.vue
├── content  // 主内容组件
│   └── BContent.vue
├── contentRow  // 单个分类的组件
│   ├── BContentRow.vue
│   ├── BRowBody.vue
│   ├── BRowHead.vue
│   ├── BRowItem.vue
│   ├── BRowRank.vue
│   └── BRowRankBody.vue
├── contentTop  // 页面顶部组件
│   ├── BContentTop.vue
│   └── BContentTopItem.vue
├── live  //直播所在的组件
│   ├── BLive.vue
│   ├── BLiveItem.vue
│   ├── BLiveRank.vue
│   └── BLiveRankItem.vue
├── nav  //右侧导航条组件
│   ├── BNavSide.vue
│   └── smooth-scroll.js
└── promote  // 推广组件
    ├── BPromote.vue
    └── BPromoteItem.vue

组件的原则就是尽量将复杂的UI布局划分成单个小的UI组件，逻辑处理也被划分成更多的单个小的逻辑。数据流动采用的单向数据流动。子组件的数据更多的是来自于父组件，父组件的数据主要是其本身发起的ajax请求。本项目中ajax请求库使用的是axios

状态管理

目前的状态管理采用vuex。由于vuex可以分多个子module。所以在不同模块下单独维护一份状态，同时对于一些公共的状态，比如发起网络请求的requesting，错误时的状态error则保存在根状态中，之后可以通过子模块中的rootState.requesting获取来赋值。

在子模块中发送网络请求获取数据是一个异步的过程，所以将网络请求放在actions。每次发起网络需要经历下面的步骤

1. 请求中

   rootState.requesting = true  //请求状态更新为true,表示请求中
   commit(TYPE.XX_REQUEST)  // 发送同步操作，请求中的数据处理
   

2. 请求成功

   rootState.requesting = false  //请求状态更新为false,表示请求结束
   commit(TYPE.XX_SUCCESS, response) //发送同步操作,处理请求成功后数据
   

3. 请求失败

   rootState.requesting = false  //请求状态更新为false,表示请求结束
   rootState.error = error
   commit(TYPE.XX_FAILURE, error) //发送同步操作,处理请求失败
   

动画

B站首页充斥着大量的动画效果。目前动画使用的主要有三种方式：

1. 以hover效果触发。

2. 通过js触发的效果，如点击轮播图的原点时，主要通过设置css属性transition: .2s;，再通过js 设置css属性this.$refs.banner.style.marginLeft = left。

3. 通过vue提供的动画方式。

   <transition name="fade">
    <div v-if="isSort">
        <div class="tip"></div>
        <div class="custom-bg"></div>
    </div>
   </transition>

样式

样式文件使用的是stylus，暂未使用任何vue现成的UI组件。需要安装stylus-loader, stylus，由于vue-cli中的webpack已经配置好了stylus了，所以只需要安装就可以了。

npm install stylus-loader --save-dev
npm install stylus --save-dev

性能优化

• 图片懒加载

• 压缩js、css

• 服务器开启gzip

• 浏览器缓存

• ...

发布

完成项目后将发布到自己的服务器上，首先确保服务器已安装nodejs，具体安装步骤不再赘述。

后端发布

后端采用pm2做项目管理

安装pm2

npm install pm2 -g

启动项目

cd bilibili-api && npm install 
pm2 start index.js

前端发布

1. webpack打包

npm run build

需要注意的是，直接运行此命令可能会导致资源无法找到的问题。所以需要对webpack配置做一定的修改。

在webpack.base.conf.js文件中修改publicPath如下

output: {
    path: config.build.assetsRoot,
    publicPath: './',  //资源的公共路径
    // publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    filename: '[name].js'
}

这样打包后还会出现stylus中background-image 资源无法找到的问题，我采用的方式修改ExtractTextPlugin配置，在webpack.prod.conf.js中修改

new ExtractTextPlugin('[name].[contenthash].css')

将分离的css打包路径分离到static文件夹之外。

打包完成后上传到服务器/var/www/html/bilibili目录下。

2. 配置nginx服务器。

   location /bilibili {
     root /var/www/html;
     index index.html;
   }
   

总结

相关截图:

首页：

轮播：

直播：

排行：

游戏：

拖拽排序与滚动效果：

bilibili-vue's Issues

用户前端页面不能自适应手机模式吗

前后端分别起服务，前端异步请求产生跨域了吧？ nginx反响代理了？

yarn dev提示SyntaxError: Cannot use import statement outside a module

接口仍然不是node提供，只把node当做中间层

图片无法访问

console里全是报错的bug，值得2.3k？

都2023年3月26号了，你什么时候更新完？

能不能写完啊

大哥 请问如何断点调试啊/ 后端难道生产环境也是动态使用babel转码吗

Cannot find package 'koa-cors' imported from E:\project\user\vue\bilibili-vue\bilibili-api\app\server.js

npm install 之后 npm run dev 报错 Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'koa-cors' imported from E:\project\user\vue\bilibili-vue\bilibili-api\app\server.js

这个包我是有的，怎么报找不到的错误。

请问B站的公开接口哪里可以找到？

你好，看你的数据都是来自B站的接口，请问这些接口在哪里找到的？不会是你一个一个发请求记录下来的吧？

koas的疑问

后端为什么用node.js框架来做

为啥不能clone到本地呀？

clone到本地的时候报错啦：

error: RPC failed; curl 28 OpenSSL SSL_read: Connection was reset, errno 10054
fatal: expected flush after ref listing

请教下后端用什么脚手架创建的？

链接挂了

https://github.com/lybenson/bilibili-vue

Front end dev problem: UnhandledPromiseRejectionWarning: Error: Exited with code 3

When I run "npm run dev" in the frontend folder, it responds error msg:

[email protected] dev /root/bilibili-vue
> node build/dev-server.js

(node:3989) UnhandledPromiseRejectionWarning: Error: Exited with code 3
    at ChildProcess.<anonymous> (/root/bilibili-vue/node_modules/opn/index.js:83:13)
    at Object.onceWrapper (events.js:300:26)
    at ChildProcess.emit (events.js:210:5)
    at maybeClose (internal/child_process.js:1021:16)
    at Socket.<anonymous> (internal/child_process.js:430:11)
    at Socket.emit (events.js:210:5)
    at Pipe.<anonymous> (net.js:658:12)
(node:3989) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:3989) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

my nodejs is version 12.13.0

小建议

建议图片加个占位图和图片懒加载.

bilibili图片加入防盗链

请求图片资源时，由于header会带有Referer，服务器会根据Referer判断请求来源，使得其他网站加载bilibili的图片时会出现403错误（没有权限），可考虑以下解决办法：

• 暂时可以安装Chrome插件No Referer Switch去除Referer字段，正常加载图片资源
• 更改图片的链接地址，通过代理服务器（例如Nginx）请求图片资源再返回给浏览器

求教数据api哪里来的

生产环境运行效率与跨域的问题

1 请问生产环境下,后台不需要先编译生成dist吗,直接用pm2启动会导致运行效率低吗
2 我在本地运行时,好像无法跨域访问后台,去掉withCredentials: true就可以了

后端的依赖配置有点问题

后端执行 yarn dev 的时候, 提示下面两个模块没有安装, 而上面两个模块即使删掉了, 也没有影响

error /home/work/github/bilibili-vue/node_modules/phantomjs-prebuilt: Command failed

error /home/work/github/bilibili-vue/node_modules/phantomjs-prebuilt: Command failed

链接坏了

demo的链接坏了

项目启动之后里面的图片都是失效的

已解决

已解决

请问项目考虑IE8吗？

请问项目考虑IE8吗？

老哥 稳

预览地址404

不管是项目信息里写的官网 http://www.lybenson.com/bilibili/bilibili-vue//dist/index.html，
还是 README.md 里的网址 http://www.lybenson.com/bilibili/，
打开都是404。