Front-end vue + back-end koa, full-stack development bilibili homepage (with source code)

technology stack

Frontend: vue3 + vuex + vite + stylus + nginx

Backend: koa2

Source code download:

Source code download link: https://wwb.lanzouy.com/iwSVW0bpr4be

project run

how to run

Please install before runningnodejs

cloneproject to local

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

front run

cd bilibili-vue && yarn && yarn dev

backend running

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

To ensure correct operation, please run the backend service first. Run the front end again, and then visit http://localhost:8080

components

According to the different functions of each module on the homepage, a total of more than 20 reusable components are divided. See below for details

├── 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

The principle of components is to divide the complex UI layout into a single small UI component as much as possible, and the logic processing is also divided into more single small logic. One-way data flow adopted by data flow. The data of the child component comes more from the parent component, and the data of the parent component is mainly ajaxthe request initiated by itself. ajaxThe request library used in this project isaxios

If you need to open the genuine WebStorm, you can contact me, 56 yuan a year, the genuine authorization is activated, and the validity period can be checked on the official website. If you need it, add me on WeChat: poxiaozhiai6, Remarks: 915.

state management

The current state management adopts vuex. Because vuexit can be divided into multiple children module. Therefore, a separate state is maintained under different modules. At the same time, for some public states, such as those that initiate network requests requesting, the state when an error occurs is stored in the root state, and can be assigned later through acquisition errorin sub-modules .rootState.requesting

Sending a network request to obtain data in a submodule is an asynchronous process, so put the network request in the submodule actions. Every time you initiate a network, you need to go through the following steps

1. requesting

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

2. successful request

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

3. Request failed

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

animation

The homepage of Station B is filled with a lot of animation effects. There are three main ways to use animation at present:

1. Triggered by hoveran effect.

2. By jstriggering the effect, such as clicking the origin of the carousel, mainly by setting the css attribute transition: .2s;, and then by jssetting the css attribute this.$refs.banner.style.marginLeft = left.

3. Through vuethe provided animation methods.

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

style

The style file is used stylus, and no vueready-made UI components are used yet. It needs to be installed stylus-loader, stylusbecause vue-cliit webpackhas already been configured stylus, so it only needs to be installed.

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

performance optimization

• Image lazy loading

• compression js,css

• server ongzip

• browser cache

• …

release

After the project is completed, it will be published on its own server. First, ensure that the server has been installed nodejs, and the specific installation steps will not be repeated.

backend release

The backend pm2adopts project management

Installpm2

npm install pm2 -g

Startup project

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

front-end publishing

1. webpackPack

npm run build

It should be noted that running this command directly may cause problems that resources cannot be found. So you need to webpackmake some changes to the configuration.

webpack.base.conf.jsModify the file as publicPathfollows

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

In this way, after packaging, there will be a problem that the resources stylusin the medium background-image cannot be found. I use the method to modify ExtractTextPluginthe configuration and webpack.prod.conf.jsmodify it in

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

Separated csspackaging paths out of staticfolders.

After the packaging is complete, upload it to the server /var/www/html/bilibilidirectory.

2. Configure the nginx server.

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

Summarize

Related screenshots:

front page:

Carousel:

live streaming:

ranking:

game:

Drag and drop sorting and scrolling effects:

Like it! ! !