## 技术栈
前端:vue3 + vuex + vite + 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 && yarn && yarn dev
```
后端运行
```shell
cd bilibili-vue/bilibili-api && yarn install && yarn 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
<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`了,所以只需要安装就可以了。
```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;
}
```
## 总结
#### 相关截图:
首页:
![20170423210104.png](http://upload-images.jianshu.io/upload_images/426435-d2a3e8b1463cdd2e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
轮播:
![20170423213449.png](http://upload-images.jianshu.io/upload_images/426435-edce08bcca33c6a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
直播:
![20170423210140.png](http://upload-images.jianshu.io/upload_images/426435-c2a8412724f6a121.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![20170423210218.png](http://upload-images.jianshu.io/upload_images/426435-e0f463350b7b5f21.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
排行:
![20170423210248.png](http://upload-images.jianshu.io/upload_images/426435-6c61dcd032f80f92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
游戏:
![20170423213519.png](http://upload-images.jianshu.io/upload_images/426435-bf8786eee29a4f3a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
拖拽排序与滚动效果:
![20170423213599.png](http://upload-images.jianshu.io/upload_images/426435-1ef3ae591420a074.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
没有合适的资源?快使用搜索试试~ 我知道了~
前端vue+后端koa,全栈式开发bilibili首页.zip
共89个文件
js:36个
vue:25个
png:8个
需积分: 0 1 下载量 70 浏览量
2024-03-03
13:22:56
上传
评论
收藏 445KB ZIP 举报
温馨提示
前端vue+后端koa,全栈式开发bilibili首页.zip
资源推荐
资源详情
资源评论
收起资源包目录
前端vue+后端koa,全栈式开发bilibili首页.zip (89个子文件)
bilibili-vue-master
yarn.lock 158KB
.eslintrc.js 295B
bilibili-api
yarn.lock 129KB
app
server.js 1KB
utils
EncryptUtil.js 1KB
resState.js 621B
BaseResp.js 122B
smsCode.js 319B
EnCodeKey 20B
utility.js 2KB
routes
extra.js 952B
rank.js 1KB
promote.js 505B
urlConfig.js 2KB
live.js 368B
index.js 616B
banner.js 265B
ding.js 272B
middlewares
index.js 465B
.babelrc 258B
package.json 1008B
index.js 147B
.gitignore 49B
config
production.js 313B
database.js 106B
development.js 206B
config.js 396B
test.js 182B
src
main.ts 327B
App.vue 2KB
store
modules
rankStore.js 827B
liveStore.js 1KB
contentStore.js 3KB
promoteStore.js 998B
bannerStore.js 831B
actionType
contentType.ts 325B
liveType.ts 129B
bannerType.ts 171B
promoteType.ts 177B
rankType.ts 159B
index.js 569B
assets
logo.png 7KB
images
b-post.png 545B
app-box.png 24KB
app-link.png 917B
app-qrcode.png 1KB
icons.png 236KB
state.png 36KB
live-eye.png 1KB
api
urlConfig.js 534B
index.js 1KB
components
contentRow
BRowRank.vue 5KB
BContentRow.vue 1KB
BRowHead.vue 7KB
BRowItem.vue 5KB
BRowBody.vue 541B
BRowRankBody.vue 7KB
promote
BPromote.vue 4KB
BPromoteItem.vue 2KB
common
BHeader.vue 2KB
BMenu.vue 4KB
TopContainer.vue 8KB
Search.vue 2KB
BMenuItem.vue 2KB
PostMaterial.vue 2KB
nav
BNavSide.vue 9KB
smooth-scroll.js 1KB
banner
BannerItem.vue 531B
Banner.vue 4KB
contentTop
BContentTopItem.vue 2KB
BContentTop.vue 2KB
live
BLive.vue 5KB
BLiveRank.vue 10KB
BLiveRankItem.vue 3KB
BLiveItem.vue 4KB
content
BContent.vue 2KB
shims-vue.d.ts 168B
LICENSE 1KB
vite.config.js 780B
.babelrc 257B
package.json 1KB
index.html 818B
.gitignore 119B
tsconfig.json 764B
README.md 7KB
config
test.env.js 132B
prod.env.js 48B
index.js 1KB
dev.env.js 139B
共 89 条
- 1
资源评论
日刷百题
- 粉丝: 5326
- 资源: 951
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 课设毕设基于SSM的旅游景点线路网站 LW+PPT+源码可运行.zip
- EDA实验计数器CNT9999-DTCNT9999实验源代码
- 课设毕设基于SSM的抗疫医疗用品销售平台 LW+PPT+源码可运行.zip
- 基于Halcon的仿照VisonPro的机器视觉软件.zip
- battery-percentage-detector 使用 Javascript 的电池百分比检测器
- 毕业设计基于Qt+FFmpeg+SDL实现的音视频播放器源码.zip
- 课设毕设基于SSM的固定资产管理系统 LW+PPT+源码可运行.zip
- 课设毕设基于SSM的个人交友网站 LW+PPT+源码可运行.zip
- 课设毕设基于SSM的高校信息资源共享平台 LW+PPT+源码可运行.zip
- 课设毕设基于SSM的高校二手交易平台 LW+PPT+源码可运行.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功