草庐IT

nodejs_vue

全部标签

vue分片上传视频并转换为m3u8文件并播放

开发环境:基于若依开源框架的前后端分离版本的实践,后端java的springboot,前端若依的vue2,做一个分片上传视频并分段播放的功能,因为是小项目,并没有专门准备文件服务器和CDN服务,后端也是套用的若依的上传功能实现思路:前端根据视频文件计算出文件md5值前端按照指定大小截取视频,执行分片上传(可优化,先使用文件MD5检查文件是否已上传)后端实现接收分片的接口,当已上传分片数等于总分片数时执行合并分片,得到原视频文件后端使用ffmpeg按照时间进行视频分割,切割时间根据视频清晰度不同而不同,得到m3u8文件和ts文件列表后端保存视频信息和文件实际保存地址,并提供查询接口前端使用流播放

前端vue3实现本地及在线文件预览(含pdf/txt/mp3/mp4/docx/xlsx/pptx)

一、仅需实现在线预览,且文件地址公网可访问(一)微软office免费预览(推荐)支持doc/docx/xls/xlsx/ppt/pptx等多种office文件格式的免费预览//示例代码//​在https://view.officeapps.live.com/op/view.aspx?src=后面拼接需要预览的地址,如下:\leturl="http://xxx.com/files/demo.doc"window.open("​https://view.officeapps.live.com/op/view.aspx?src="+encodeURIComponent(​url))(二)XDOC文档

【vue2】vue生命周期的理解

🥳博       主:初映CY的前说(前端领域)🌞个人信条:想要变成得到,中间还有做到!🤘本文核心:vue生命周期的介绍、vue生命周期钩子函数详解,vue生命周期的执行顺序目录一、生命周期介绍二、生命周期的构成1.生命周期的四个阶段:2.八大钩子作用:1.beforeCreate():2.created()3.beforeMont()4.monted()5.beforeUpdata()6.updated()7.beforeDestroy()8.destroyed()三、执行顺序一、生命周期介绍概念:即一个组件从创建到销毁的一个完整的过程二、生命周期的构成钩子概念: vue从创建到销毁过程中,

【vue3】踩坑日记,vite与node版本对应(mac环境)

创建vue3+vite+ts项目时,报错Therequestedmodule‘vue’doesnotprovideanexportnamed‘computed’;node版本问题,Vite需要Node.js版本14.18+,16+;升级node版本步骤:先查看node的版本:node-v;安装n:npminstall-gnsudonlatest//升级到最新版本sudonstable//升级到稳定版本sudonxx.xx//升级到具体版本号我采用的是升级到14.18.2sudon14.18.2n切换之后的node默认装在/usr/local/bin/node,先用whichnode检查一下当前

vue3项目导入异常Error: @vitejs/PLUGIN-vue requires vue (>=3.2.13)

vue3项目导入异常1、异常提示如下:failedTOLOADconfigFROMD:\ws-projects\vite.config.jserrorWHENSTARTINGdevSERVER:Error:@vitejs/PLUGIN-vuerequiresvue(>=3.2.13)OR@vue/compiler-sfcTObepresentINthedependencytree.2、解决办法:具体命令如下:npminstallvue@3.2.13--save-dev一般都是开发者捐赠支持的提示,打开一个github的链接之后,会显示需要打赏捐赠的信息,此时如果不想npminstall--no

基于Java+SpringBoot+vue+node.js的智能农场管理系统详细设计和实现

博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅Java项目精品实战案例《100套》​​​​​​​Java微信小程序项目实战《100套》​​​​​​​​​​​​​​​​​​​​​感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人 研究背景意义    

【自定义列表头】vue el-table表格自定义列显示隐藏,多级表头自定义列显示隐藏,自由搭配版本和固定列版本【注释详细】

前言功能介绍最近遇到一个功能,需要的是把表格的列可以配置,用户可以根据自己想要看的数据来改变表头列显示哪些隐藏哪些。于是我做了两个版本。第一个版本是自由搭配的。就是提前顶号所有的列,然后自己可以拖拽到想要位置顺序。也可以自己新增一个二级表头自定义一个名称把表头都拖进去组成多级表头表格。不过这种的毕竟复杂。第二个版本就简单一些了,是固定的列,比如十列写好了,然后用户只能在这十列里面选择显示或隐藏哪些。位置不能动,文字也不能动。就是单纯的显示隐藏列效果图外面的表格样子,点击右边的小齿轮开始设置打开后是这样的。左边可以勾选需要的列,会添加到右边。然后右边可以拖拽到想要的顺序。也可以添加一个蓝色表头自

vue插槽之插槽的用法及作用域插槽详解

目录前言一,插槽的基本使用1.1引出插槽1.2插槽的基本使用1.3默认插槽1.4插槽样式二,具名插槽2.1引出具名插槽2.2具名插槽的使用三,template标签3.1引出template标签3.2template标签的使用四,作用域插槽4.1引出作用域插槽4.2作用域插槽后记前言插槽是vue中一个很有用的工具。本篇文章将讲解vue插槽的基本用法,并详细讲解作用域插槽。希望能对读者有所帮助!一,插槽的基本使用1.1引出插槽我们对组件进行复用的时候,虽可以通过父子传值改变组件的数据,但页面的结构还是取决于组件本身。那么,如何不改变组件本身的结构,且能够在组件本身结构的基础上再添加想加的内容呢?使

【Vue.js】Vue3全局配置Axios并解决跨域请求问题

系列文章目录文章目录系列文章目录背景一、部署Axios1.npm安装axios2.创建request.js,创建axios实例3.在main.js中全局注册axios4.在页面中使用axios二、后端解决跨域请求问题方法一解决单Contoller跨域访问方法二全局解决跨域问题背景对于前后端分离项目,前端和后端端口不能重复,否则会导致前端或者后端服务起不来。例如前端访问地址为:http://localhost:8080/,后端访问地址为http://localhost:8081/。后端写好Controller,当用Axios访问该接口时,将会报错:AccesstoXMLHttpRequestat

【vue实战项目】通用管理系统:api封装、404页

前言本文为博主的vue实战小项目系列中的第三篇,很适合后端或者才入门的小伙伴看,一个前端项目从0到1的保姆级教学。前面的内容:【vue实战项目】通用管理系统:登录页-CSDN博客【vue实战项目】通用管理系统:封装token操作和网络请求-CSDN博客目录1.api封装2.404页面3.探讨1.api封装由于一个项目里api是很多的,随处都在调,如果按照之前的写法,在每个组件中去调api,一旦api有改动,遍地都要去改,所以api应该也要封装一下,将api的调用封装在函数中,将函数集中在一起便于管理。在src下面建一个api目录,用来放api,在api目录里建一个api.js,在其中封装各个a