Plooks 一个大型视频一起看网站源码-初一小盏
Plooks 一个大型视频一起看网站源码
此内容为免费资源,请登录后查看
积分
技术支持
一对一服务
安装调试
功能定制
免费资源

Plooks 一个大型视频一起看网站源码

相关截图

Web端
Web端登录Web端首页
Web端上传Web端视频
Web端个人中心Web端一起看
后台管理端
后台管理端登录后台管理用户管理
后台管理视频审核智能后台

开发背景

Plooks的名称灵感来自于”people + look”,强调了人们一起观看视频的理念。 我们的目标是满足那些分隔两地、异地恋情侣或任何需要一起观看电影、视频的用户的需求。跨越地理障碍,一起看视频,一起聊天,一起分享快乐。

项目介绍

在前段时间,因为想和异地的朋友一起看电影,但是发现有电影的地方没有一起看功能,有一起看功能的视频网站没有电影,所以就想自己做一个一起看网站,于是就有了Plooks。

Plooks是一个完整的视频网站,其中包括了视频网站基本的功能和一起看功能,旨在公用,功能齐全

我的另一个项目Plook是一个纯粹的一起看网站,只有通过提供视频链接实现一起看功能。旨在私用,方便快捷

技术栈

Plooks 一起看网站是一个基于Spring Boot+Vue的前后端分离项目。

Web 端使用 : Vue + Vue Router + Pinia + Axios + Vite + TypeScript + Naive UI + Vue-i18n + WebSocket

后端使用 Spring Boot + Spring Security + MyBatis-Plus + Redis + Qiniu云存储 + JJWT + Druid连接池 + EasyCaptcha + WebSocket

其他

QQ交流群:486601640

接口文档

后端部署

TIP

后端使用springboot开发,需要安装好java,Maven环境,数据库使用mysql,redis需要安装好mysql和redis。其中mysql的sql文件位于docs/data/sql

部署前准备

  1. 该项目使用了七牛云的对象存储,需要在七牛云上创建一个对象存储空间
  2. 该项目使用了邮箱验证码功能,需要在邮箱中开启smtp服务,获取邮箱的授权码

配置后端文件

打开 sercver/src/main/resources/application.yml文件,根据其中的注释修改配置文件并保存

打包

# 进入server目录
cd server
# 打包
mvn package

运行

直接运行jar包 其中后端默认端口为2023,如需修改请修改application.yml中的server.port属性

b

# 进入server目录
cd server
# 运行jar包
java -jar target/server-1.0-SNAPSHOT.jar

Docker部署

TIP

在使用docker安装之前,需要安装好docker docker镜像可能会更新慢

直接使用docker镜像部署

docker run -e MY_MAIL_HOST=smtp.exmail.qq.com \ 
           -e MY_MAIL_USERNAME=xxx@qq.com \
           -e MY_MAIL_PASSWORD=xxxxxxxx \
           -e MY_MAIL_PORT=465 \
           -e MY_QINIU_ACCESS=xxxxxxxxxxxxxx \
           -e MY_QINIU_SECRET=xxxxxxxxxxxxxxxxxx \
           -e MY_QINIU_BUCKET=xxxx \
           -e MY_QINIU_PATH=http://xxx.xxx/ \
           -p 2023:2023 -d schuanhe/plooks-api

环境变量说明

环境变量说明
MY_MAIL_HOST邮箱smtp地址
MY_MAIL_USERNAME邮箱用户名
MY_MAIL_PASSWORD邮箱授权码
MY_MAIL_PORT邮箱端口
MY_QINIU_ACCESS七牛云accessKey
MY_QINIU_SECRET七牛云secretKey
MY_QINIU_BUCKET七牛云存储空间名称
MY_QINIU_PATH七牛云存储空间域名

前端部署

TIP

前端使用vue3开发,需要安装好nodejs和pnpm环境

配置前端文件

前端文件位于client\utils\src\config.ts,修改domain为后端域名+端口,如xxx.xxx.xxx.xxx:2023,如果是本地部署可以使用localhost:2023

打包

前端分为web-client、manage-client两个项目,分别对应web端、后台管理端:

先安装依赖

# 进入client目录
cd client
# 安装依赖
pnpm i

如果没有安装pnpm,可以使用npm代替或者安装pnpm

# 安装pnpm
npm i -g pnpm

打包web-client

# 进入web-client目录
cd packages/web-client
# 打包
pnpm run build

打包manage-client

# 进入manage-client目录
cd packages/manage-client
# 打包
pnpm run build

部署

项目使用可以使用nginx部署,需要先将打包好的文件复制到nginx的html目录下,然后配置nginx nginx配置文件如下:

server {
    listen       80;
	server_name  localhost; #有域名可以把localhost替换为域名
	client_max_body_size 1024M;

    location / {
        root /usr/share/nginx/html/web;
        index index.html index.htm;
        try_files $uri $uri/ @web;
    }

    # 解决history路由问题
    location @web {
        rewrite ^.*$ /index.html;
    }

    #后台管理
    location /manage/ {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ @manage;
    }

    # 解决后台管理history路由问题
    location @manage {
        rewrite ^.*$ /manage/index.html;
    }

}

常见问题解答

后台管理404

后台管理地址为 域名/manage/,最后以/结尾,没有/可能会出现404

sql文件导入失败

sql文件中有字段使用json格式,需要版本大于5.7.8,如果版本低于5.7.8,可以将json字段改为text

修改默认管理员密码

使用默认账号(账号:schuanhe 密码: 123456)登录后台管理, 修改邮箱为自己的邮箱,进入到前端登录页面,点击找回密码修改密码

修改网站配色

找到主题文件

  • web端 web\packages\web-client\src\theme\index.ts
  • 后台管理端 web\packages\manage-client\src\theme\index.ts

修改以下颜色并重新打包

j

const defaultTheme: Theme = {
    primaryColor: "#ffc90c",
    primaryHoverColor: "#f8df72" 
}

修改后台管理路径

后台管理默认/manage/,如需修改须按照以下步骤:

  1. 打开web\packages\manage-client\vite.config.ts,修改base为想要的路径, (像/manage前面有/后面没有/),修改build.outDir,需要与base相对应(没有/
  2. 配置nginx时,找到以下部分内容,并将manage替换掉。
location /manage/ { 
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ @manage;
}

# 解决后台管理history路由问题
location @manage {
    rewrite ^.*$ /manage/index.html;
}
© 版权声明
THE END
点赞15赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容