构建一个综合视频社区网站的设计与实现-CSDN博客

本文链接：https://blog.csdn.net/qq_75101787/article/details/147189497

引言

在当今数字娱乐时代，视频内容平台已经成为人们日常生活中不可或缺的一部分。本文将介绍如何设计和实现一个综合性的视频社区网站，包含首页内容分类、个人主页和视频互动等核心功能模块。

一、网站整体架构

1.1 前端技术栈

Javascript、Node.js
SCSS 样式预处理器

1.2 后端技术栈

Node.js + Express 服务端框架
MySQL

二、核心功能模块实现

2.1 吸顶导航

// 吸顶导航
const nav = document.querySelector('.nav')
document.addEventListener('scroll', function () {
    const n = document.documentElement.scrollTop
    nav.style.top = n > 90 ? 0 : '-50px'
})

2.2 输入框文本提示轮播

 // 搜索栏内容变换
    const sousuo = document.querySelector('#sousuo')
    // 搜索关键词轮播数组
    let arr = ['跟我走吧', '少年白马醉春风', '遇见你的那天', '闪亮星电音', '寻护者', '抓娃娃']

    // 设置一个定时器，每5秒更换一下placeholder
    let i = 0
    function changeValue() {
        if (i === arr.length) {
            i = 0
        } else {
            sousuo.placeholder = arr[i]
        }
        i++
    }
    // 开启定时器
    setInterval(changeValue, 5000)

2.3 面包屑导航

// 封装面包屑设置函数
function updateBreadcrumb(text) {
    const breadcrumbContainer = document.querySelector('.breadcrumb');
    // 面包屑结构：首页 > 分类 > 当前页
    breadcrumbContainer.innerHTML = `
        <a href="/">首页</a> > 
        <a href="/category">分类</a> > 
        <span>${text}</span>
    `;
    
    // 更新搜索关键词
    currentKeyword = text;
    performSearch(currentKeyword);
}

// 在导航点击事件中调用
normalNavLinks.forEach(function(link) {
    link.addEventListener("click", function() {
        updateBreadcrumb(this.textContent);
    });
});

2.4 视频播放与互动

const danmu_btn = document.querySelector('#danmu_btn');
let flag = true;
danmu_btn.addEventListener('click', function () {
    if (flag) {
        danmu_btn.style.background = 'url(../../icon/tanmuclose.png) no-repeat center';
        danmu_btn.style.backgroundSize = 'cover';
        danmakuContainer.style.opacity = '0';
        flag = false;
    } else {
        danmu_btn.style.background = 'url(../../icon/tanmuopen.png) no-repeat center';
        danmu_btn.style.backgroundSize = 'cover';
        danmakuContainer.style.opacity = '1';
        flag = true;
    }
});

三、关键技术点

3.1 性能优化方案

图片懒加载：图片滚动到可视区再加载
数据分页加载：滚动到底部自动加载更多
视频预加载：提前加载下一段视频内容

四、项目部署

1.项目文件结构 (务必按照这个文件结构放置)

2.然后用VScode或者其他编辑器打开 (目录结构保持一致)

3.然后打开终端

4.输入命令安装 express框架和一些库

npm i express mysql body-parser cors

但是你发现报错了

原因是你并未安装 npm 包管理工具。如何安装呢？你可以去csdn上搜索node.js的安装教程，安装node.js的同时也会安装npm包管理工具。
node.js和npm 安装过了之后，再重新执行命令即可。

5.库安装成功、执行以下命令启动服务

node server.js

但是你发现报错了

原因是你并未设置对应的数据库。如何解决呢？你可以去csdn上搜索 mysql的安装教程，同时可以安装一个免费的 mysql 可视化工具 mysql workBench。

假设这时你已经安装好了mysql和mysql可视化工具

创建videoweb数据库、创建alldate数据表

 -- 创建数据库
 create database videoweb;
 
 -- 使用数据库
 use videoweb;
 
 -- 创建数据表
 create table alldate(
	id int primary key auto_increment,
 	crumbs varchar(20) not null,
    url varchar(255) not null,
    src varchar(255) not null,
	uname varchar(255) not null
 );

注意：MySQL连接池中的password ，需要修改成自己的mysql密码，其他按照教程来就行。

这些都弄好之后、执行 node server.js 启动 server.js。

6.启动之后、你打开index.html发现、文件数据都是undefined

这是为什么呢？

因为我将index.html所在的文件夹设置为了静态资源、直接打开index.html肯定是不对的。

我们需要如何解决呢？

我们要找自己的本地计算机的ipv4、很多小伙伴问怎么找，直接菜单 + R 输入cmd ，打开命令终端，输入ipconfig ，找到无线局域网适配器 WLAN 下的 ipv4 ,将这个ip复制。

打开浏览器，粘贴到地址栏后面要加上端口 3000，例如你的ip 为 192.168.64.20 ，那么完整的地址就是 192.168.64.20:3000。

为啥是3000 而不是其他呢？

因为我们服务监听的是3000端口

7.完成上述步骤你会发现，确实能访问到，而且和你在同一局域网的伙伴也能访问到了。

五、项目总结

多分类内容展示与导航
个性化用户主页
视频播放与实时互动
社交功能（评论、弹幕等）

六、项目链接

通过网盘分享的文件：陌染视频网站.zip
链接:https://pan.baidu.com/s/156GbqzUtSDf8I1ltamtGxg 提取码: aaaa