- 博客(50)
- 收藏
- 关注
RSS订阅原创 WebGL异步绘制多点
/ 从当前绑定的缓冲区中读取顶点数据(index, size, type, normalized是否顶点数据归一, stride相邻两个顶点间的字节数, offset从缓冲区的什么位置开始存储变量)// 一秒钟后，向顶点数据中再添加的一个顶点，修改缓冲区数据，然后清理画布，绘制顶点。// 声明顶点着色器 attribute 变量。// 两秒钟后，清理画布，绘制顶点，绘制线条。2.一秒钟后，在左下角画一个点。// 开启顶点数据的批处理功能。// 获取到顶点着色器中变量。// 创建着色器程序。
2024-04-07 15:30:51
297
原创 WebGL根据鼠标控制生成点位，随机改变点的大小颜色
/ 片元着色器变量 uniform, precision mediump float是片元着色器的规范。// 存点的位置，如果异步执行drawArrays会导致颜色缓冲区重置，所以在这里我们需要同步执行。// 获取cavans坐标宽高，距离视口尺寸的距离。// 在范围内的片元颜色进行渲染，超出的部分废弃。// 鼠标基于webgl坐标的中心位置。// 获取鼠标距离视口尺寸的距离。// 鼠标在canvas中的位置。// canvas画布的中心位置。// 解决坐标基底的差异。// 解决y方向的差异。
2024-04-02 10:26:13
529
原创 纯前端实现根据数据导出excel文件
const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data])const workbook = XLSX.utils.book_new()XLSX.utils.book_append_sheet(workbook, worksheet, '表单1的名称')XLSX.writeFile(workbook, 'excel的名称.xlsx')
2023-11-29 13:33:24
423
原创 纯前端实现导入excel数据
const reader = new FileReader();reader.onload = e => {const data = e.target?.resultconst workbook = XLSX.read(data, { type: 'array' })const firstSheetName = workbook.SheetNames[0]const worksheet = workbook.Sheets[firstSheetName]const results = XLSX.utils.s
2023-11-28 16:51:58
797
原创 封装WebGL初始化着色器函数
/gl.drawArrays(gl.TRIANGLES, 0, 1) // 三角形。// x, y, z, w齐次坐标(x/w, y/w, z/w)// 着色器： 通过程序代替固定的渲染管线，来处理图像的渲。//gl.drawArrays(gl.LINES, 0, 1) // 线。// 必须要存在 main 函数 (浮点数)// 片元着色器：像素（颜色，纹理）// 要绘制的点的坐标。// 顶点着色器：顶点理解为坐标。// 顶点着色器源码。// 片元着色器源码。
2023-05-08 17:46:20
181
1
原创 post导出文件【fetch】
post导出文件【fetch】项目中导出excel文件很常见，分为`get`和`post`方式，get相对简单些，在url后面拼接需要的参数即可get请求方式拼接参数长度上限为2083，超过这个长度导出excel失败
2022-03-23 17:27:41
1742
1
原创 Pinia快速入门
Pinia快速入门Pinia是 Vue.js 的轻量级状态管理库，最近很受欢迎。它的成功可以归功于其管理存储数据的独特功能（可扩展性、存储模块组织、状态变化分组、多存储创建等）2021.11.24 Pinia 正式成为 vuejs 的一员，尤雨溪当天在 Twitter 上宣布：Pinia 正式成为 vuejs 官方的状态库，意味着 Pinia 就是 Vuex 5
2022-02-15 13:49:59
798
原创 Vue2+Ts实战项目开发与项目优化（四）发布部署
项目打包npm run build本地预览部署npm i -g serveserve -s dist创建本地服务test-serve/app.jsnpm i -D expressnpm i --save-dev http-proxy-middleware // 使用代理中间件const express = require('express')const app = express()const path = require('path')const { createProxy
2021-12-16 00:00:03
1232
原创 前端上传视频至阿里云并转码
我们这里选用的是第三方方案流程图整体流程页面展示添加脚本文件到根目录，并引入脚本public/index.html<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
2021-12-15 21:25:18
3864
2
原创 Vue2+Ts实战项目开发与项目优化（三）用户管理和权限管理
用户管理用户管理角色->角色管理相应的权限分配角色一个用户可以拥有多个角色角色权限管理角色可用来分配菜单和资源角色分配菜单权限控制菜单角色分配资源权限控制接口
2021-12-11 20:05:33
336
原创 Vue2+Ts实战项目开发与项目优化（二）用户登录和身份认证
关于Token过期的问题access_token 作用：获取需要授权的接口数据expires_in 作用 access_token 过期时间refresh_token 作用：刷新获取新的 access_token方法一：在请求发起前拦截每个请求，判断 token 的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求优：在请求前拦截，能节省请求，省流量缺：需要后端额外提供一个token过期时间的字段，使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时
2021-12-02 23:24:39
924
原创 Vue2+Ts实战项目开发与项目优化（一）项目初始化
使用vue-cli创建项目vue create edu-boss-fed加入git版本管理
2021-11-22 23:40:57
3629
原创 GitHub Actions自动化部署
现代化的部署方式（CI/CD）持续集成，持续部署CI/CD服务Jenkins, GitHub Actions, Gitlab CI, Travis CI, Circle Ci// 这里我们用到GitHub Actions
2021-11-15 22:43:11
1540
1
原创 ElementUI table动态展开收起，以及初始收起状态（另累写法仅作参考）
最近的需求碰到一个使用ElementUI table表格的时候需要实现点击动态加载数据并展开和收起。效果图实现????ElementUI 树形数据与懒加载 <el-table ref="table" :row-key="id" :tree-props="{ children: 'children' }" @expand-change="handleExpendRow" ></el-table> //
2021-10-10 14:40:59
4918
原创 options has an unknown property ‘contentBase‘. These properties are valid: 【devServer contentBase报错】
options has an unknown property ‘contentBase‘. These properties are valid: 【devServer contentBase报错】
2021-09-25 14:11:27
7730
6
原创 js实现复制内容到剪贴板
js复制内容到剪贴板export function copyToBoard(value) { const element = document.createElement('textarea') document.body.appendChild(element) element.value = value element.select() // 选择 if (document.execCommand('copy')) { // 判定是否支持复制（兼容问题）
2021-09-23 10:21:35
158
1
原创 虚拟DOM与diff算法
diff算法新虚拟dom和老虚拟dom进行diff（精细化比较），算出应该如何最小量更新，最后反映到真正的dom上虚拟DOM（虚拟DOM->真实DOM是通过模板编译）真实dom计算机处理起来比较复杂->转换用js对象描述dom的层次解构。dom中的一切属性都在虚拟dom中有对应的属性为什么要有虚拟dom，因为diff是发生在虚拟dom上的...
2021-09-23 08:35:00
138
原创 微信小程序开发中遇到的问题
这里是我在写微信小程序时，使用cover-view遇到的一些坑cover-view的层级问题微信小程序中cover-view的层级不受z-index控制，且层级最高cover-view在ios中iconfont图标无法显示官方的解释是：cover-view不支持使用字体icon，请使用图片代替...
2021-09-17 14:11:58
393
原创 前端规范化标准
规范化是前端工程化的重要一项为什么要有规范标准软件开发需要多人协同不同开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或者团队需要明确统一的标准哪里需要规范化标准代码、文档、甚至是提交日志开发过程中人为编写的成果物代码标准化规范最为重要实施规范化的方法编码前人为的标准约定通过工具实现Lint...
2021-09-14 08:30:19
466
原创 webpack打包
模块化工具的由来ES Modules存在环境兼容问题模块文件过多，网络请求频繁所有的前端资源都需要模块化yarn init -yyarn add webpack-cli --devyarn webpack // 在4.0以后支持0配置打包；`scr/index.js`->`dist/main.js`配置文件新建webpack.cinfig.jsconst path = require('path')module.exprots = { entry:'./src/main.
2021-09-01 08:37:24
549
原创 Gulp的基本使用
Gulp是自动化构建的一款工具基本使用yarn inityarn add gulp –devcode gulpfile.js // 创建一个gulpfile.js文件// gulp的入口文件// 最新的gulp中取消了同步任务，每一个任务都是异步任务// 当我们的任务执行完成后需要调用回调函数或其他方式去标记任务已完成exports.foo = done => { console.log('foo task working~') done() // 标识任务完成}// 默认导
2021-08-10 07:58:40
272
原创 Yeoman的使用
Yeoman是什么Yeoman是创建现代化web应用的脚手架工具（最老牌、最通用、最强大）对比vue-cli他更像是一个脚手架的运行平台，我们可以通过Yeoman搭配不同的Generator去创建任何类型的项目我们也可以通过创建自己的Generator，从而来定制属于我们自己的前端脚手架缺点：在很多专注于框架开发人的眼中Yeoman过于通用，而不够专注安装Yeomannpm安装: npm i -g yoyarn安装: yarn global add yo安装对应的generator（根
2021-08-01 23:57:23
558
原创 前端模块化 CommonJS 与 ES Modules
模块化是一种最主流的代码组织方式，它通过把我们的复杂代码按照功能的不同划分为不同的模块，单独维护的方式去提高开发效率降低维护成本
2021-07-25 23:24:04
1664
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人