Project Introduction

Chunyu is a system designed for quickly building film and television websites. Its user-end is based on nuxt3 and element-ui, the management-end on vue3 and element-ui, the backend on Node's framework nestjs, using MySQL for the database, and Redis for caching.

Online Experience

• User-end Demo
• Management-end Demo
• Source Code: GitHub | Gitee
• Nuxt3 Tutorial Documentation
• Nuxt3 Video Tutorial

Technical Requirements

• Vue
• Element-ui
• TypeScript
• Nestjs
• TypeORM
• MySQL
• Redis

Technology Selection

1. Front-end Technology

• nuxt @3.6.5
• vue @3.2.45
• element-plus @2.2.21
• axios @0.24.0
• vuex @3.6.0
• vue-router @3.4.9
• sass-loader @10.1.1

2. Backend Technology

• nest @8.0
• mysql2 @2.3.3
• swagger-ui-express @4.2.0
• typeorm @0.2.41
• ioredis @4.28.2

Before Development

If you have not installed MySQL and Redis, please do so first. MySQL 8 and Redis 7 are recommended. Installation Guide

If nest-cli is not installed, execute npm install -g @nestjs/cli to install it globally.

For local development and service startup, see: Related Video

Deployment

Building the Server:

First, modify the database connection configuration in Nest-server/src/config/config.production.ts, then execute:

cd Nest-server
yarn
yarn build

Building the User-end:

Create a .env file in the Nuxt-web directory and write BASE_URL=server request address

cd Nuxt-web
yarn
yarn build

After building, deployment can be done using pm2. If not installed, execute npm install -g pm2 to install.

Execute the following command to start the service:

pm2 start pm2.config.cjs

Building the Management-end

Execute the following commands to generate the dist directory, which can be pointed to using nginx:

cd Vue3-admin
yarn
yarn build:prod

Single File Packaging

If you need to package into a single file or a pkg package, enter Nest-server and execute yarn ncc:pkg. Since the bull library does not support single-file execution, you must remove the modules that imported the bull library before packaging!

Updates

• Support for back-end configuration of friendly links
• User film and television rating
• User check-in
• User earns coins for check-in
• Support for paid viewing of videos
• Support for uploading images and videos to Alibaba Cloud OSS

To Be Completed

• User purchases coins
• Video sending bullet comments

Related Links

Windows Docker Installation: https://zhuanlan.zhihu.com/p/441965046

Docker Installation of Redis：https://www.yinchunyu.com/other/redis.html

Docker Installation of MySQL：https://www.runoob.com/docker/docker-install-mysql.html

Solving Navicat Database Connection Issue client does not support authentication：https://blog.csdn.net/lovedingd/article/details/106728292

For Any Questions, Add WeChat:

How to Use Alibaba Cloud OSS for Uploading Files

Step One Modify pm2.config.cjs or directly modify the corresponding configuration file in the Nest-server/src/config directory:

// 1、pm2.config.js module.exports = { apps : [ { env: { // ... // Fill in the region where the Bucket is located. For example, for East China 1 (Hangzhou), fill in oss-cn-hangzhou for Region: REGION: '', // The Aliyun account AccessKey has access to all APIs and is very high risk. It is strongly recommended that you create and use a RAM user for API access or routine operations, please log in to the RAM console to create a RAM user: ACCESS_KEY_Id: '', ACCESS_KEY_SECRET: '', // Fill in the Bucket name: BUCKET: '', // Whether to support uploading with a custom domain: CNAME: false, // OSS access domain: ENDPOINT: '' } } ] };

**Step Two** Go to the back-end system management - parameter configuration, and change the Whether to enable file upload to Alibaba Cloud parameter key value to `1`

> Note: The management-end has a cross-origin issue when capturing video covers, so you need to configure Alibaba Cloud to allow cross-origin.