AliveSeven's Blog

项目：Bilibili Pro 从0到1写一个仿B站写的一个项目，采用前后端分离，人不分离的方式来开发 Web端分为客户端和后台管理，项目也写了PC端，采用Electron 23开发，均由当前最新版Vite搭建 预览地址： https://www.bilibili.com/video/BV1nF411y7Pc/ 技术栈 前端（Web端） Vue3 + TypeScript + Vue-Router + Pinia（Vuex） + Naive UI + Tailwindcss + Scss + Echarts等 后端（服务端） SpringBoot + Mybatis-Plus + WebSocket + JWT等 数据库 MySql + Redis 开发环境 NodeJs: 16.15.0 + JDK: 1.8.2 项目预览 项目功能首页 首页视频推荐、 Banner、 推荐类型 滚动分页、 骨架屏优化加载 搜索框获取热搜、 搜索历史、 热搜统计 视频动态、 综合动态展示 消息标记、 彩色图标 收藏夹、 收藏视频展示 历史观看视频展示 用户登陆、 注册 视频页 ...

前言：TS是JS的超集，所以JS基础的类型都包含在内 首先安装 npm install typescript -g 安装完之后，运行tsc -v可以看到当前ts的版本号 nodejs环境执行ts文件 npm i @types/node –save-dev（node环境支持的依赖必装） npm i ts-node –g 基础类型基础类型：Boolean、Number、String、null、undefined 以及 ES6 的 Symbol 和 ES10 的 BigInt。 字符串类型 用string来定义，其中可以用`来定义ES6中的模板字符串，${expr}用来表示在模板字符串中的嵌入表达式。 12345let str : string = '123'let str2 : string = `web ${str}`console.log(str2) 数字类型 支持十六进制、十进制、八进制和二进制； 1234567let notANumber : number = NaN;//Nanlet num : number = 1234;/ ...

前言：flex就是flexible box的缩写，意为弹性布局，任何一个容器都可以指定为flex布局 Webkit内核的浏览器，必须加上-webkit前缀。 1234.box{ display: -webkit-flex; /* Safari */ display: flex;} 注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 🌀Flex布局与传统布局对比： 传统布局： 兼容性好 布局繁琐 局限（不能在移动端很好的布局） FLex布局： 操作方便，布局简单，移动端广泛应用 PC端浏览器支持较差 IE11或更低版本不支持或部分支持 🌀Flex布局原理： –通过给父元素添加flex属性来控制子元素的位置和排列方式 基本概念容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end 项目默认沿主轴排列 ...

前言：这里呢主要针对ElementUI的上传进行优化，上传之后是做假上传，然后进行本地预览， 可以避免服务端资源的浪费和不必要的接口请求。当然，这里只针对图片这种类型。 之所以这样做的原因呢，主要是为了避免服务端（后端）资源的浪费，因为有些用户他上传之后，可能不是真的上传，或者上传错了，此时就把资源发到服务端，这样就很不好，我看目前网上很多方案还是这样做，非常不建议 另一方面，基于图片本身的特性，可以转为base64，然后进行预览，JS是有这部分的功能的，但是对于大尺寸或高分辨率的图片可能会导致性能下降和内存占用增加，这里还是要视情况而定 直接上代码吧 HTML，需要用自定义上传http-request 1234567891011<el-upload drag action :http-request="previewUpload" multiple :limit="5" :on-exceed="exceed"> <el-icon class="el-icon--upload&qu ...

前言：新年接到公司的第一个需求就是要写一个H5，里面类似电商那种扫描枪之类的，用H5扫条形码拿到其中的信息，初步实现是想搞简单一点，直接调H5的相机，把拍到的照片传给后端做解析，但是这样做效果并不好，后来还是决定让前端来做扫描。 H5直接调用摄像头 代码如下（类名是Tailwind CSS） 1234<div class="flex relative w-27 h-27"> <input type="file" accept="image/*" capture="user" class="w-27 h-27 z-10 opacity-0"> <van-icon class="cursor-pointer scanCode" size="27" style="font-weight: bold;" name="scan" @click="scanCode ...

前言：由于electron的特性，将代码分为主进程和渲染进程，由于安全原因，渲染进程不能直接访问操作系统资源，如文件系统、网络等，需要通过主线程提供的API来进行操作。同时，为了保证性能和稳定性，应该避免在渲染进程中执行耗时的操作，例如大量的计算、数据处理等。 Naive UI的上传组件在electron中使用 简单的上传可以直接用其封装好的钩子函数即可，但是如果要自定义上传后的操作，需要写一个函数进一步解决相关的需求 自定义上传函数 一开始的时候是用自定义上传的钩子函数custom-request来对上传后的文件流进行编辑 1234567891011121314// 上传文件的函数async function uploadFileRequest(data: any) { let FormDatas = new FormData() // 上传文件的需要formdata类型;所以要转 FormDatas.append('file', data.file.file); await Api.File.uploadFile(For ...

前言：开发的时候遇到一个进度条实现的问题，和普通的进度条不一样，不是那种常规的进度条。形状有点不规范。如下 常规的进度条可以直接用组件库来实现，而像这种进度条，最好的方法就是让UI把进度条满格的整条切出来，并且把底图全部切出来，利用一个变量来控制要显示的进度的width。 实现方法 先看html相关的代码，css用到了tailwind的写法。 主要有三个盒子，最外层的div是底图，为第一层 然后是其第二层，控制进度主要通过控制第二层的width的百分比+overflow-x-hidden来实现 然后是第三层，也就是最底层，是固定width和height的进度条，也就是上图中的黄色那条 架构简图 实例代码12345678910111213<!-- 这里是进度 --><div class="w-619 h-29 mt-8 progress relative"> <!-- 这里才是要变化的长度， --> <div class="max-w-605 h-full relative overflow-h ...

前言：移动端H5开发的时候有时需要H5里面的图片或者说是盒子（div）实现，随着用户的手机晃动，里面的盒子也跟着一起晃动 实现方法通过deviceorientation 的浏览器API处理方法具体来说，可以先在组件的 setup 函数中监听 deviceorientation 事件，并在回调函数中获取设备的 beta 和 gamma 值，它们分别表示手机前后倾斜和左右倾斜的角度。然后根据这两个值计算出需要移动的距离，通过修改图片或盒子的 transform 属性来实现平移的效果。 deviceorientation的浏览器兼容性 可以看出来这个API的在各个浏览器兼容性还是相当可以的。 检测 可以尝试使用以下代码来检查设备是否支持deviceorientation事件 12345if(window.DeviceOrientationEvent) { console.log("Device orientation is supported");} else { console.log("Device orienta ...

前言：有些时候，我们在做了某些回调方法或者说是作了某些修改数据的操作之后，会发现数据在视图上没有立即更新，出现这种情况如何解决，就用到了$nextTick了。 作用：它可以在下次dom更新循环结束之后执行延迟回调，在修改数据之后立即使用该方法，就可以获取更新之后的dom。 实现原理在 Vue 的文档中，说明了 Vue 是异步执行 dom 更新的。然后异步任务的执行机制，是等所有同步任务执行完之后，浏览器读取任务队列中的异步任务，开始执行。当任务队列中的任务执行完毕之后，算一轮事件循环，这个时候Vue才会进行dom视图更新。 Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。 使用场景 在vue的生命周期 created() 钩子函数中进行 dom 操作，一定要放在 $nextTick() 函数中执行。在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的代码放进 nextTick() 的回调函数中。 在数据变化后要执行某个操作，而这个操作 ...

前言：最近在开发一个通用组件排行榜的时候，需要展示多条数据，数据量虽然不大，但是开发的组件需要嵌入到PC、安卓、IOS多端适配。适配的时候需要处理一下这些数据量，不然会产生性能问题。然后在浏览谷歌的时候就发现虚拟列表这个东西 虚拟列表 虚拟列表是指对列表的 可视区域 进行渲染，对 非可见区域 不渲染或部分渲染，从而极大提高渲染性能的一种技术。 相关库 目前我觉得比较好用的库是**vue-virtual-scroller** 此外还有vue*-*virtual-scroll-list、react-virtualized等 Vue-Virtual-Scroller的使用 官方教程：https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md 官方的较为详细哦 安装12345npm install --save vue-virtual-scroller@nextyarn add vue-virtual-scroller@nextnpm instal ...