文件列表:

.babelrc (164, 2018-06-28)
.editorconfig (147, 2018-06-28)
LICENSE (1063, 2018-06-28)
bilibili-api (0, 2018-06-28)
bilibili-api\.babelrc (75, 2018-06-28)
bilibili-api\app (0, 2018-06-28)
bilibili-api\app\middlewares (0, 2018-06-28)
bilibili-api\app\middlewares\index.js (454, 2018-06-28)
bilibili-api\app\routes (0, 2018-06-28)
bilibili-api\app\routes\banner.js (259, 2018-06-28)
bilibili-api\app\routes\ding.js (266, 2018-06-28)
bilibili-api\app\routes\extra.js (1110, 2018-06-28)
bilibili-api\app\routes\index.js (600, 2018-06-28)
bilibili-api\app\routes\live.js (358, 2018-06-28)
bilibili-api\app\routes\promote.js (495, 2018-06-28)
bilibili-api\app\routes\rank.js (1181, 2018-06-28)
bilibili-api\app\routes\urlConfig.js (2098, 2018-06-28)
bilibili-api\app\server.js (1354, 2018-06-28)
bilibili-api\app\utils (0, 2018-06-28)
bilibili-api\app\utils\BaseResp.js (120, 2018-06-28)
bilibili-api\app\utils\EnCodeKey (20, 2018-06-28)
bilibili-api\app\utils\EncryptUtil.js (1197, 2018-06-28)
bilibili-api\app\utils\ExcelHandler.js (255, 2018-06-28)
bilibili-api\app\utils\resState.js (597, 2018-06-28)
bilibili-api\app\utils\smsCode.js (322, 2018-06-28)
bilibili-api\app\utils\utility.js (2089, 2018-06-28)
bilibili-api\config (0, 2018-06-28)
bilibili-api\config\config.js (386, 2018-06-28)
bilibili-api\config\database.js (110, 2018-06-28)
bilibili-api\config\development.js (207, 2018-06-28)
bilibili-api\config\production.js (313, 2018-06-28)
bilibili-api\config\test.js (186, 2018-06-28)
bilibili-api\index.js (119, 2018-06-28)
bilibili-api\package.json (910, 2018-06-28)
build (0, 2018-06-28)
build\build.js (917, 2018-06-28)
... ...

预览地址: [http://www.lybenson.com/bilibili/](http://www.lybenson.com/bilibili/) ## 技术栈 前端:vue2 + vuex + webpack + ES6/7 + stylus + nginx 后端:koa2 ## 项目运行 #### 源码地址: [https://github.com/lybenson/bilibili-vue](https://github.com/lybenson/bilibili-vue) #### 如何运行 运行前请先安装`nodejs` `clone`项目到本地 ```shell git clone https://github.com/lybenson/bilibili-vue.git ``` 前端运行 ```shell cd bilibili-vue npm install npm run dev ``` 后端运行 ```shell cd bilibili-vue/bilibili-api npm install npm run dev ``` 为了确保运行正确,请先运行后端服务。再运行前端,之后访问 http://localhost:8080 ## 组件 根据首页的各模块的功能不同,划分出了共20多个可复用的组件。具体请看下方 ```shell ├── 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`提供的动画方式。 ```javascript

``` ## 样式 样式文件使用的是`stylus`,暂未使用任何`vue`现成的UI组件。需要安装`stylus-loader`, `stylus`,由于`vue-cli`中的`webpack`已经配置好了`stylus`了,所以只需要安装就可以了。 ```shell npm install stylus-loader --save-dev npm install stylus --save-dev ``` ## 性能优化 * 图片懒加载 * 压缩`js`、`css` * 服务器开启`gzip` * 浏览器缓存 * ... ## 发布 完成项目后将发布到自己的服务器上,首先确保服务器已安装`nodejs`,具体安装步骤不再赘述。 #### 后端发布 后端采用`pm2`做项目管理 安装`pm2` ```shell npm install pm2 -g ``` 启动项目 ``` cd bilibili-api && npm install pm2 start index.js ``` #### 前端发布 1. `webpack`打包 ``` npm run build ``` 需要注意的是,直接运行此命令可能会导致资源无法找到的问题。所以需要对`webpack`配置做一定的修改。 在`webpack.base.conf.js`文件中修改`publicPath`如下 ```javascript 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`中修改 ```javascript new ExtractTextPlugin('[name].[contenthash].css') ``` 将分离的`css`打包路径分离到`static`文件夹之外。 打包完成后上传到服务器`/var/www/html/bilibili`目录下。 2. 配置nginx服务器。 ``` location /bilibili { root /var/www/html; index index.html; } ``` ## 总结 目前主要功能都已经完成的差不多。主要还差一个预览视频与弹幕的功能尚未完成,希望能把B站首页写完,并且会持续更新中,后面可能会加上直播等功能。 #### 相关截图: 首页:  轮播:  直播:   排行:  游戏:  拖拽排序与滚动效果: 

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：