前端
前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,最新的高级版本HTML5、CSS3,以及SVG等。
飘逸者打瞌睡
我还只是个小白
展开
-
【Web IDE】WebContainer容器在浏览器中启动运行nodejs并使用vite启动项目
web在线IDE原创 2024-08-18 15:09:27 · 676 阅读 · 0 评论 -
【JS】纯web端使用ffmpeg实现的视频编辑器-视频合并
这次主要添加了一个函数,实现了视频合并的操作。实现效果,把时间线上的视频合并成一个视频。接上篇ffmpeg文章。原创 2024-07-02 22:42:58 · 712 阅读 · 0 评论 -
【JS】canvas实现的类似选择框的效果界面
用的canvas实现的效果 ,点击获取或重点的颜色信息。原创 2023-04-26 14:33:02 · 411 阅读 · 1 评论 -
【vue】v-viewer图片查看器的使用和通过函数直接打开图片预览
直接通过函数打开图片,不用通过用户点击。引入v-viewer依赖包。原创 2023-04-23 16:15:45 · 1102 阅读 · 0 评论 -
【JS】web端实现图片生成缩略图,纯js函数实现
主要函数generateThumbnails,传入一个File对象,生成的缩略图返回一个base64.web端实现图片生成缩略图,纯js函数实现。原创 2023-04-20 11:10:25 · 2289 阅读 · 0 评论 -
【JS】纯web端使用ffmpeg实现的视频编辑器
废话不多,先上视频。ffmpeg编辑器这是一个纯前端实现的视频编辑器,用的ffmpeg的wasm,web框架用的vue3。界面手撸。原创 2023-04-04 16:07:26 · 10041 阅读 · 10 评论 -
【echarts】多条X轴 多条Y轴显示
【代码】【echarts】多条X轴 多条Y轴显示。原创 2023-02-23 10:14:18 · 1757 阅读 · 0 评论 -
Naive UI 文档特别慢 本地存了个离线文档 2.34.3
文件地址 https://gitee.com/piaoyizhe666666/naive-ui-document。原创 2023-02-15 09:16:38 · 706 阅读 · 0 评论 -
【前端】之MEMFS实现简单的文件管理器
使用的是ffmpeg里的fs模块fs的api可以参考emscripten的。原创 2022-12-15 16:49:00 · 627 阅读 · 0 评论 -
【前端】之IndexedDB实现简单的文件管理器
使用indexedDB数据库作为数据存储实现的一个网页文件管理器。原创 2022-12-14 14:05:25 · 494 阅读 · 0 评论 -
【前端】之IndexedDB实现增删改查,包含简单示例
【代码】【前端】之IndexedDB实现增删改查,包含简单示例。原创 2022-12-13 16:28:31 · 1273 阅读 · 0 评论 -
【vue3】vue-router远程页面加载
在不同的服务器上加载页面组件,可以配合路由生成,实现整个项目的远程加载和路由权限控制,同样的可以在加载文件上面做权限校验,来防止未授权的页面加载。也可以给组件文件用CDN加速。router,js添加路由。loadPage函数实现。原创 2022-11-15 15:50:53 · 2008 阅读 · 0 评论 -
【ffmpeg】vue3报错TypeError: Failed to construct ‘URL‘: Invalid URL at node_modules/@ffmpeg/ffmpeg/s
在使用"@ffmpeg/ffmpeg"和“@ffmpeg/core”时候报错。在vite.config.js中添加。原创 2022-11-08 14:51:35 · 3861 阅读 · 0 评论 -
【vue3】自定义插件-全屏加载插件实现
先简单的实现一个全屏加载的组件。随手写了个界面,很丑很简单。index.vue{title : {type : String , default : '标题' } }) < / script > < style lang = "scss" scoped > . box {left : 0;top : 0;from {} to {插件自身实现index.js/*** 全屏加载* 加载。原创 2022-10-20 15:25:02 · 845 阅读 · 0 评论 -
【vue3】远程组件加载
添加remote目录,存放远程组件添加rollup.config.js,用来打包配置远程组件修改package.json。原创 2022-10-10 13:43:53 · 5394 阅读 · 13 评论 -
【JavaScript】一个稍微增强一下的增强型数组List
是原始Array的增强,支持原生的各种方法,支持链式调用。原创 2022-09-27 09:32:33 · 230 阅读 · 0 评论 -
【Wails】快速搭建与启动
进入到项目文件夹,在文件夹中运行wails dev,第一次运行会自动安装前端依赖,等待一段时间后,会先启动前端项目,在启动app,成功运行界面如下。首先需要准备好node和go的安装包,这里用了node v14和go1.18。安装好后运行命令行查看是否安装成功并且添加到了环境变量,运行。运行wails doctor检查是否安装了正确的依赖项。若果下载速度慢或者安装不成功,这里就需要go镜像加速。下一步就是安装Wails,用powershell运行。至此,安装运行环境部分结束。原创 2022-08-23 14:12:17 · 1896 阅读 · 0 评论 -
【Go】【WebAssembly】【wasm】基于go打包的网页wasm
基于web wasm 的一个实现demo,go实现的wasm.原创 2022-07-27 00:01:45 · 993 阅读 · 0 评论 -
【tauri】tauri的启动、运行与打包
tauri 启动运行打包原创 2022-06-29 13:11:44 · 2838 阅读 · 0 评论 -
【JavaScript】硬件通讯数据校验 BCC异或校验生成 按位取反 十六进制数据格式化
硬件通讯数据生成校验 BCC校验 异或校验 十六进制数据格式化原创 2022-06-15 15:25:00 · 859 阅读 · 0 评论 -
【JavaScript】JS加载JS获取加载进度
代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>index<button onclick="add()">添加</button><button onclick="getBoot2()">加载</原创 2022-04-13 21:02:42 · 1465 阅读 · 0 评论 -
【JavaScript】史上最短,中文转utf8编码
话不多说上代码 encodeUTF8(str) { let utf8Str='' for (let i=0; i<str.length;i++){ let t = str[i] let text = '' if(encodeURIComponent(t).length < 4){ text = t.charCodeAt(0).toString(16); }else{原创 2022-01-13 09:11:28 · 1441 阅读 · 0 评论 -
【JavaScript】electron-vue创建启动运行
前提环境安装了python2.x安装了Visual Studio 和生成工具开始创建# 安装 vue-cli 和 脚手架样板代码npm install -g vue-clivue init simulatedgreg/electron-vue my-projectcd my-projectyarn # 或者 npm install这里使用cnpm i安装依赖比较快开发运行yarn run dev # 或者 npm run dev...原创 2021-09-24 23:37:24 · 264 阅读 · 1 评论 -
【GIT】前端使用Commitizen规范git commit 内容 全中文汉化
安装commitizensudo npm install -g commitizen或sudo cnpm install -g commitizenpackage.json如果没有package.json文件,先生成 package.json 文件 :npm init --yes初始化commitizen init cz-conventional-changelog --save --save-exact提交git add .git commit 改为 git cz执行后出现这个界面原创 2021-09-08 11:18:23 · 2589 阅读 · 6 评论 -
【JavaScript】数据类型检查函数,接口数据前置后置验证
JavaScript类型检查函数直接上代码传入一个数据对象和验证规则检查规则里定义的字段类型通过返回true 未通过返回false 并抛出异常let data = { name: new Date()}let rule = { name: { type: Number }}let status = checkData(rule,data)console.log("验证结果", status)/* * 类型检查器 * @params原创 2021-07-28 10:07:18 · 202 阅读 · 0 评论 -
【JavaScript】链式调用
JavaScript链式调用``// 链式调用class User {constructor() {this.height = 0this.weight = 0}info() {console.log(“信息”,this.height,this.weight)return this}setHeight(val) {this.height = valreturn this}}let user = new User()user.info().setHeight(10).inf原创 2021-07-19 14:08:12 · 124 阅读 · 2 评论 -
【Webpack】webpack版本对应 Error: Cannot find module ‘webpack/bin/config-yargs‘ 报错原因
webpack webpack-cli webpack-dev-serve版本对应"webpack": "^5.5.1","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0",原创 2021-07-16 22:55:59 · 162 阅读 · 0 评论 -
【Vue2】vuex的基本使用
vuex-Vue.js 的中心化状态管理方案主要包含State, Getter, Mutations,Actions, Module。State存储状态数据,可以直接设置和获取状态值。结构state: { token: "xxxx"},使用设置值this.$store.state.token = "xxxx"获取值let token = this.$store.state.token注意事项data() { return { token:this.$store.原创 2021-07-16 22:54:38 · 633 阅读 · 0 评论 -
【Vue2】之简单自定义插件开发,含demo
一个vue2.x的简单插件开发实例首先创建文件夹和文件个人习惯把插件都放在src/plugins文件夹里创建本次demo插件目录src/plugins/demo以及目录文件demo/index.jsdemo/src/main.jsdemo/src/main.vue// index.jsimport component from './src/main.js'const install = function (Vue) { // 注册全局组件 Vue.原创 2021-07-15 21:57:46 · 1597 阅读 · 0 评论 -
【Vue3】高仿win桌面【登录、打开应用、设置壁纸】
登录界面原创 2021-06-21 15:41:34 · 1541 阅读 · 8 评论 -
【Vue3】之setup使用watch,ref
一个setup()只注重一段业务逻辑<template> <div>{{name}}</div> <button @click="setName">设置名字</button></template>import {ref,watch} from 'vue'export default { name: "index", setup(){ //创建一个响应式且可变的 ref 对象 let name = ref('')原创 2021-06-17 13:58:45 · 1452 阅读 · 0 评论 -
【Vue3】之vue-router的安装与配置
安装yarn add vue-router@4.*创建新建router.jsrouter.jsimport { createRouter,createWebHistory} from "vue-router";const routes = [ { path: "/", redirect: "/home" }, { path: "/home", name: "home", component: () => import(".原创 2021-06-09 10:02:34 · 3263 阅读 · 0 评论 -
【Vue3】之vuex的安装与配置
安装yarn add vuex@4.*或npm install -save vuex@4.*创建新建store.jsstore.jsimport { createStore } from 'vuex'export default createStore({ state: { }, mutations: { }, actions: { }, modules: { }})引入App.vueimport { creat原创 2021-06-16 10:48:32 · 2037 阅读 · 2 评论 -
【前端】之websql实现增删改查,包含简单示例
websql增删改查简单示例新建数据库创建表添加数据修改数据删除数据查询数据删除表完整案例简单示例新建数据库创建一个数据库,名为mydb,版本1.0,数据库介绍Test,数据库大小2Mconst db = openDatabase('mydb', '1.0', 'Test', 2 * 1024 * 1024);创建表创建要给USERS表,它有两个字段,id,name,id字段类型为数字类型,自增主键。db.transaction(function (tx) { tx.executeSq原创 2021-04-23 15:29:22 · 1996 阅读 · 4 评论