仿抖音项目总结

阅读量：

仿抖音项目总结

项目介绍

该项目是仿照抖音和小红书开发的，功能主要包括视频、留言、粉丝、消息和用户等相关模块。主要是采用SpringBoot、Spring和MyBaits这三大框架来开发的。最终部署采用集群的方式。详细实现细节可以见具体后端代码，下文将从前端过渡到后端，逐步概括性的讲解应用的技术，重点在后端。

概述

该项目采用前后端分离的模式进行的开发，所谓前后端分离就是将前端和后端的项目分离开，然后各自独立部署，独立开发。这样做一方面可以前后端并行开发，独立调试，增加开发效率，而且在开发中，前后端的分工明确。

在项目中，我们也要遵守一个内网互通原则。在本地调试的过程中，内网互通往往需要我们关闭本地防火墙和Linux虚拟机的防火墙，并链接同一WiFi，保证处于同一网段。

前端

uni-app

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码就可以在多个平台上发布，并且可以进行条件编译。同时具有丰富的组件和api可以使用。

HBuilderX

HBuilderX是一个轻巧、急速的轻如编辑器，强如IDE的合体版本。具有良好的扩展性和插件市场。在此项目中使用该工具开发前端。

uniCloud

uniCloud是DCloud在阿里云和腾讯云的serverless服务上封装而成的，而serverless是目前很火的概念，是下一代真正的云。

后端

knife4j

Knife4j的前身是swagger-bootstrap-ui,前身swagger-bootstrap-ui是一个纯swagger-ui的ui皮肤项目。是为JavaMVC框架集成Swagger生成Apiece文档的增强使用方案。以下是使用入门。
首先，在创建好的项目的pom.xml文件中引入knife4j的依赖包，Maven坐标如下：

复制代码

    <!--引入Knife4j的官方start包,Swagger2基于Springfox2.10.5项目-->
    <dependency>
    <groupId>com.github.xiaoymin</groupId>
    <!--使用Swagger2-->
    <artifactId>knife4j-spring-boot-starter</artifactId>
    <version>2.0.9</version>
    </dependency>
    
    
    xml

其次，创建配置类，样板如下：

复制代码

    @Configuration
    @EnableSwagger2WebMvc // 不同版本使用的注解是不同的，应该注意
    public class Knife4jConfiguration {
    
    @Bean(value = "dockerBean")
    public Docket dockerBean() {
        //指定使用Swagger2规范
        Docket docket=new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(new ApiInfoBuilder()
                //描述字段支持Markdown语法
                .description("# Knife4j RESTful APIs")
                .termsOfServiceUrl("https://doc.xiaominfo.com/")
                .contact("xiaoymin@foxmail.com")
                .version("1.0")
                .build())
                //分组名称
                .groupName("用户服务")
                .select()
                //这里指定Controller扫描包路径
                .apis(RequestHandlerSelectors.basePackage("com.github.xiaoymin.knife4j.controller"))
                .paths(PathSelectors.any())
                .build();
        return docket;
    }
    }
    
    
    java
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-08-16/YUMWlLysiGN19Qz30KCwrThJR74t.png)

如果开发者使用的是Knife4j 2.x版本，并且Spring Boot版本高于2.4,那么需要在Spring Boot的yml文件中做如下配置：

复制代码

    spring:
    mvc:
        pathmatch:
            # 配置策略
            matching-strategy: ant-path-matcher
    
    
    yml

最后，新建一个Controller类，样例如下：

复制代码

    @Api(tags = "首页模块")
    @RestController
    public class IndexController {
    
    @ApiImplicitParam(name = "name",value = "姓名",required = true)
    @ApiOperation(value = "向客人问好")
    @GetMapping("/sayHi")
    public ResponseEntity<String> sayHi(@RequestParam(value = "name")String name){
        return ResponseEntity.ok("Hi:"+name);
    }
    }
    
    
    java
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-08-16/nDw1jTm6oHzANhKpXLkyt5dfWYeb.png)

然后，就可以启动SpringBoot项目，并在浏览器中访问如下地址：
http://localhost:8080/doc.html，localhost:8080是地址和端口号，后面要有doc.html后缀。

Lombok

Lombok是一个可以简化我们书写POJO类的项目，需要在项目中加上如下坐标：

复制代码

    <!-- lombok工具 -->
    <dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    </dependency>
    
    
    xml

然后，在相关的POJO类中添加适当的注解，就可以达到简化如geter/seter这类方法。

Redis

Redis是一个使用ANSI C编写的开源、支持网络、基于内存、分布式、可选持久性的键值对存储数据库。在该项目中使用Redis，首先要引入Maven坐标：

复制代码

    <!-- 引入 redis 依赖 -->
    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    
    
    xml

然后再yml文件中进行相关配置：

复制代码

    spring:
      redis:
    host: 192.168.1.61  # 服务器地址
    port: 6379          # Redis服务端口号，默认是6379
    database: 0         # Redis中使用的数据库编号
    password: itzixi    # Redis的用户密码
    
    
    yml

这样就将Redis整合到SpringBoot项目中了。

Minio

MinIO 是在 GNU Affero 通用公共许可证 v3.0 下发布的高性能对象存储，是使用Golang语言实现的，可以用来云存储海量的照片、视频、音频、文件。首先要引入Maven库：

复制代码

    <!-- MinIO -->
    <dependency>
    <groupId>io.minio</groupId>
    <artifactId>minio</artifactId>
    <version>8.2.1</version>
    </dependency>
    
    
    xml

然后封装Minio工具类，详细代码见源代码。
最后在yml文件加入相关配置：

复制代码

    # MinIO 配置
    minio:
      endpoint: http://192.168.1.176:9000     # MinIO服务地址
      fileHost: http://192.168.1.176:9000     # 文件地址host
      bucketName: orders                      # 存储桶bucket名称
      accessKey: root                         # 用户名
      secretKey: 12345678                     # 密码
      imgSize: 1024                           # 图片大小限制，单位：m
      fileSize: 1024                          # 文件大小限制，单位：m
    
    
    yml

MongDB

MongoDB 是非关系型数据库，也就是nosql，存储json数据格式会非常灵活，要比数据库mysql/MariaDB更好，同时也能为mysql/MariaDB分摊一部分的流量压力。可以用于保存非事务非核心的数据，此外，mongodb提供的gridfs提供小文件存储。首先要引入Maven依赖：

复制代码

    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-mongodb</artifactId>
    </dependency>
    
    
    xml

然后在yml文件中添加如下信息：

复制代码

    spring:
      data:
    mongodb:
      uri: mongodb://root:root@192.168.1.202:27017 # 用户名：密码//@服务器地址:服务端口号
      database: imooc-red-book  # 使用的指定的数据库名
    
    
    yml

最后在启动类上加入如下注解：
@EnableMongoRepositories

RabbitMQ

RabbitMQ是由erlang语言开发的，基于AMQP（Advanced Message Queue Protocol）协议实现的，它是一种应用于应用之间的通信方法，MQ在分布式系统中应用非常广泛。主要应用于异步任务、提速、接口解耦和削峰等场景。首先，SpringBoot整合RabbitMQ需要引入以下坐标：

复制代码

    <!-- 引入 rabbitmq 依赖 -->
    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-amqp</artifactId>
    </dependency>
    
    
    xml

并且需要添加如下配置

复制代码

    spring: 
      rabbitmq: 
    host: 192.168.1.204        # 服务器地址
    port: 5672                 # 服务的端口号
    username: admin            # 用户名
    password: admin            # 密码
    virtual-host: imooc-news   # 使用的虚拟节点的名字
    
    
    yml

最终创建如下配置类：

复制代码

    package com.imooc.api.config;
    
    import com.rabbitmq.client.AMQP;
    import org.springframework.amqp.core.*;
    import org.springframework.beans.factory.annotation.Qualifier;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    
    @Configuration
    public class RabbitMQConfig {
    
    // 定义交换机的名称
    public static final String EXCHANGE_MSG = "exchange_msg";
    
    // 定义队列的名称
    public static final String QUEUE_SYS_MSG = "queue_msg";
    
    // 创建交换机，放入springboot容器
    @Bean(EXCHANGE_MSG)
    public Exchange exchange() {
        return ExchangeBuilder                      // 构建交换机
                .topicExchange(EXCHANGE_MSG)    // 使用topic类型，并定义交换机的名称。https://www.rabbitmq.com/getstarted.html
                .durable(true)                      // 设置持久化，重启MQ后依然存在
                .build();
    }
    
    // 创建队列
    @Bean(QUEUE_SYS_MSG)
    public Queue queue() {
        return new Queue(QUEUE_SYS_MSG);
    }
    
    // 队列绑定交换机
    @Bean
    public Binding binding(
            @Qualifier(QUEUE_SYS_MSG) Queue queue,
            @Qualifier(EXCHANGE_MSG) Exchange exchange) {
        return BindingBuilder               // 定义绑定关系
                .bind(queue)                // 绑定队列
                .to(exchange)               // 到交换机
                .with("sys.msg.*")   // 定义路由规则（requestMapping映射）
                .noargs();                  // 执行绑定
    }
    }
    
    
    java
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-08-16/482DurE7NnMOHRtmTbBKko6U1Sxw.png)

Nacos

Nacos是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。主要用于服务的注册和配置中心。使用过程中需要引入以下坐标：

复制代码

    <dependency>
    <groupId>com.alibaba.cloud</groupId>
    <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
    </dependency>
    
    
    xml

然后，进行如下配置：

复制代码

    spring:
      cloud:
    nacos:
      discovery:
        server-addr: 192.168.1.159:8848   # nacos 所在地址
      application:
    name: imooc-red-book                  # 注册的名字
    
    # 打开监控
    management:
      endpoint:
    web:
      exposure:
        include: '*'
    
    
    yml
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-08-16/gWN29rukC4Gf5JePjbcDxZmEnFSL.png)

若是用于配置中心，需要如下配置：
pom.xml:

复制代码

    <!-- Nacos 配置管理 -->
    <dependency>
    <groupId>com.alibaba.cloud</groupId>
    <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
    </dependency>
    
    <!-- 微服务bootstrap配置 -->
    <dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-bootstrap</artifactId>
    </dependency>
    
    
    xml
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-08-16/Fw3UM0OqkPKT9zQb1xlCiB64rNXa.png)

yml文件：

复制代码

    spring:
      cloud:
    nacos:
      config:
        server-addr: 192.168.1.159:8848   # 配置中心的地址
        file-extension: yaml              # 指定配置的文件格式
    
    
    yml

可以添加如下注解，进行自动刷新：
${prefix}-${spring.profiles.active}.${file-extension}

Nginx

ndency>

复制代码

    yml文件：
    ```yml
    spring:
      cloud:
    nacos:
      config:
        server-addr: 192.168.1.159:8848   # 配置中心的地址
        file-extension: yaml              # 指定配置的文件格式

可以添加如下注解，进行自动刷新：
${prefix}-${spring.profiles.active}.${file-extension}

Nginx

Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用。

全部评论 (0)

还没有任何评论哟~

仿抖音项目总结

仿抖音项目总结项目介绍该项目是仿照抖音和小红书开发的，功能主要包括视频、留言、粉丝、消息和用户等相关模块。主要是采用SpringBoot、Spring和MyBaits这三大框架来开发的。最终部署采...

音频项目总结

Audio系统是竞争资源，因为在只有一个音频输出，2.2引入了称作AudioFocus的机制来管理对Audio资源的竞争的管理与协调。按照AudioFocus的机制，在使用Audio之前，需要申请A...

音响项目总结

引子拖拖拉拉几个月的时间，随着今天3台音箱样机的拼装完成，音箱项目在今天算是进行到了一个新的阶段。该项目从无到有几乎是我全部负责，虽说简单，但是麻雀虽小五脏俱全，我从中学到了很多的知识，主要是两方面...

抖音短视频项目

1、产品开发流程 2、项目概述抖音实战（1）资讯类产品永不过时，新闻类.... （2）资讯类产品应用广泛，任何产品都离不开资讯（3）当下热门的现象级资讯类产品抖音 \ 1、抖音诞生 2、抖音的雏...

全栈仿抖音小程序--总览

最近做了一个全栈的仿抖音小程序的项目，做个总结、记录一下吧项目亮点：后端开发技术：SpringBoot/SpringMvc 视频处理技术：Ffmpeg处理视频+BGM 中间件：Redis 数据库：...

[项目] 网易云音乐项目总结

最近准备把之前做的一个仿网易云音乐的自制音乐网页播放器项目做一个总结。相关功能如下： 1. 通过后台页面上传歌曲、编辑歌曲功能。 2. 前端页面自动更新播放热度高的歌曲 3. 在线听歌、查看歌词。且...

仿牛客网项目总结

环境搭建直接使用idea提供的模板进行创建工程值得注意的是初始化模板的时候有几个自定义配置架构 Spring介绍简介 Spring是一款开源的轻量级Java开发框架，旨在提高开发人员的开发效率...

仿牛客网项目总结

项目总结第一章开发社区核心功能开发社区首页？社区首页分为最新最热，数据库利用动态sql，0和1代表最新最热排序规则，利用@Requestparam注解默认访问最新，手动封装分页信息类，设置分页的...

html5仿抖音php,H5+Jquery 仿抖音视屏切换

整体思路： jQuery\touch事件之滑动判断，当上划超过30px切换下一个视屏，调换中的src。错误思路：原本想用swiper循坏显示，视觉效果可以达到，但是会把所有的视屏都加载出来，虽然界面...

是否确定退出登录?

仿抖音项目总结