node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 RDS MySQL,高可用系列 2核4GB
简介: node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染

⭐前言

大家好,我是yma16,本文分享关于 node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染。

技术选型

前端:vite+vue3+antd

后端:node koa

数据库:mysql

koa是一个现代的Node.js框架,可以用来构建Web应用程序。

Node.js的mime库

Node.js的mime库是用于根据文件扩展名获取对应的MIME类型的库。MIME类型是用于标识文件类型的一种标准,它在互联网通信中起到了非常重要的作用。MIME库使得开发者可以方便地根据文件扩展名获取对应的MIME类型,从而在处理文件时能够正确地设置Content-Type头。

mime库的发展可以追溯到2010年,最早由TJ Holowaychuk创建。最初版本的mime库是一个简单的JavaScript对象,其中包含了一些常见文件扩展名和对应的MIME类型。用户可以通过调用mime.lookup()方法,传入文件扩展名来获取对应的MIME类型。

随着时间的推移,mime库得到了越来越多的贡献和改进。根据用户的反馈和需求,mime库逐渐添加了更多的文件扩展名和对应的MIME类型。同时,mime库还提供了一些其他的方法,如mime.extension()用于通过MIME类型获取对应的文件扩展名,mime.getType()用于根据文件名获取MIME类型等。

近年来,随着Web技术的发展和Node.js的流行,mime库的使用越来越广泛。它被大量应用于Web开发中,特别是在处理静态文件时。由于mime库的简单易用性和快速性能,它逐渐成为了Node.js开发者的首选库之一。

目前,mime库已经发展到了较为成熟的阶段。它在GitHub上拥有超过2万的星标,表明了它的受欢迎程度和广泛使用。同时,mime库也在不断更新和维护,以适应新的需求和文件类型的变化。

该系列往期文章

前端vite+vue3结合后端node+koa——实现代码模板展示平台(支持模糊搜索+分页查询)

node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查

⭐ 功能设计与实现

文件映射表:

记录文件的位置,方便读取

file_map的表结构

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for file_map
-- ----------------------------
DROP TABLE IF EXISTS `file_map`;
CREATE TABLE `file_map`  (
  `id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 'id',
  `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '类型',
  `path` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '路径',
  `create_user` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '创建人',
  `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;

表结构

💖 node上传文件写入file_map映射表

限制上传的类型,用户名根据jwt的请求头获取

上传视频接口编写如下:

// upload mv
router.post('/upload/mv', async (ctx) => {
   
    try{
   
        // authorization是 Bearer + ' ' + jwt字符串
        const parts = ctx.header.authorization.trim().split(' ');
        const token = parts[1];
        const payload = jwtToken.verify(token, appKey);
        const {
   username} =payload;
        const usernamePath=username? 


相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助     相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
目录
相关文章
|
25天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
44 1
|
16天前
|
Web App开发 JavaScript 前端开发
Node.js开发
Node.js开发
32 13
|
14天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
23天前
|
存储 JavaScript 前端开发
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
20天前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
|
23天前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
在这篇文章中,我们将一起探索Node.js的奇妙世界。无论你是刚接触后端开发的新手,还是希望深化理解的老手,这篇文章都适合你。我们将从基础概念开始,逐步深入到实际应用,最后通过一个代码示例来巩固所学知识。让我们一起开启这段旅程吧!
|
19天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带领读者从零基础开始,一步步深入到Node.js后端开发的精髓。我们将通过通俗易懂的语言和实际代码示例,探索Node.js的强大功能及其在现代Web开发中的应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的见解和技巧,让你的后端开发技能更上一层楼。
|
22天前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
23天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带你走进Node.js的世界,从基础到进阶,逐步解析Node.js在后端开发中的应用。我们将通过实例来理解Node.js的异步特性、事件驱动模型以及如何利用它处理高并发请求。此外,文章还会介绍如何搭建一个基本的Node.js服务器,并探讨如何利用现代前端框架与Node.js进行交互,实现全栈式开发。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和深入的理解。
17 4
|
1月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第40天】在这篇文章中,我们将一起探索Node.js的奥秘,从基础概念到实际应用,逐步揭示如何利用Node.js构建高效、可扩展的后端服务。通过实际案例分析,我们将了解Node.js在现代Web开发中的应用,以及如何克服常见的开发挑战。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供宝贵的见解和实用的技巧,帮助你在Node.js的道路上更进一步。
29 4