由本-优快云博客

原创使用mac自带服务器（一行命令即可启动）

输入 /Library/WebServer/Documents。启动后地址： http://127.0.0.1/然后按住快捷键Command+Shift+G。

2024-04-18 16:05:47 1077

原创钉钉应用接入、免登、前端，简单易懂，省去你翻阅文档的时间

钉钉应用接入、免登、前端部分

2024-04-12 10:47:14 917

vux移动端组件库问题：在ios系统中用vux-xscroll组件写的界面会出现停止滑动自动回到顶部的问题，找了几个手机试了下，发现升级了ios13的有问题、ios13以下的没有问题、安卓的没有问题。修复：找到\node_modules_vux-xscroll@3.1.12@vux-xscroll\build\cmd\simulate-scroll.js找到getScrollTop方法getScrollTop: function() {var transY = window.getCo.

2022-02-18 16:27:21 3317

原创 git rebase和git merge的区别（简洁易懂）

初始分支master ---- commit记录 1 - 2 - 3从master分支切出来一个prod分支 ---- commit记录 1 - 2 - 3master分支继续开发，分别又提交了4，5 ---- commit记录 1 - 2 - 3 - 4 - 5prod分支也在继续开发，分别提交了 6，7 ---- commit记录 1 - 2 - 3 - 6 - 7把master分支上的最新代码和并到prod上用 git rebase origin/master ---- commit记录..

2021-12-09 14:35:51 304

原创前端搭建自己的组件库并发布npm(完整流程)

上传第一步：用脚手架搭建一个新项目vue create 项目名称第二步：src同级目录下创建一个packages文件夹并在里面新建两个文件Button.vue<template> <button class="MyButton"> 我是一个按钮组件 </button></template><script>export default { name: 'MyButton', data () {

2021-12-08 18:21:23 5922 4

原创 (前端) 获取文件md5值 spark-md5

import SparkMD5 from 'spark-md5'const base64 = '......'const spark = new SparkMD5()spark.append(base64)const hash = spark.end()

2021-11-13 18:27:05 1569

原创 (前端vue) vue-timers 替代定时器和延时器

import {mixin as VueTimers} from 'vue-timers'export default { mixins: [VueTimers], // 混入 timers: { tm1: { time: 300, // 定时时间 repeat: true, // 是否重复执行 immediate: false // 是否立即执行 }, tm2: { time: 1000, // 定时时间 rep

2021-11-13 18:10:17 1898

原创 (前端) 获取当前浏览器类型、获取IE浏览器版本

/*** * 获取当前浏览器类型 */export const myBrowser = () => { const userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 const isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) { //判断是否Opera浏览器 return "Opera" } if (userAgent.indexOf("

2021-11-13 17:27:58 1321

原创 (前端) 获取上周上月上半年上一年，获取前几天、后几天、当天

import moment from "moment"/*** * 获取上周上月上半年上一年 * @param flag * 1 上周 * 2 当月 * 3 上一月 * 4 上半年 * 5 近一年 * 6 上一年 */const getDate: any = (flag: string) => { let obj: any = { beginDate: '', endDate: '' } const now = new Date(); //当前日期

2021-11-13 16:12:25 436

原创 (前端)页面截取生成图片 html2canvas

1. 封装一个公共的截图函数import html2canvas from 'html2canvas'/** * 截屏函数 * @param id 需要截取的dom元素id * @param name 下载的图片名称 * @param isReturn 是否返回截取的图片,用作回显 */export const screenshot = (id: any, name: any, isReturn?: boolean) => { const dom = document.getE

2021-11-13 15:10:59 1627

原创 (前端React)手写签名 react-canvas-draw

import CanvasDraw from 'react-canvas-draw'const signCanvas = useRef<any>();// 清空signCanvas.current.clear()// 获取结果const img = signCanvas.current.canvas.drawing.toDataURL('image/png')<div> <div className="backageImg"></div>

2021-11-13 14:39:59 973 1

原创 (前端)录音功能实现 js-audio-recorder

1. 创建import Recorder from 'js-audio-recorder'const parameter = { sampleBits: 16, // 采样位数，支持 8 或 16，默认是16 sampleRate: 8000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000 numChannels: 1 // 声道，支持 1 或 2，默认是1}const recorderEx

2021-11-13 14:07:51 7811 3

原创 Echarts(api汇总+配图)

1.柱状图and折线图const dom = document.getElementById(chartsId)if (!dom) returnconst myChart = echarts.init(dom as HTMLDivElement)const option = { /** 边距 **/ grid: { left: '2%', right: '2%', bottom: '15%', top: '12%', containLa

2021-11-13 11:47:24 1177

原创（前端）file、blob、base64相互转换

blob转fileconst blob = '.....'const file = new File([blob], 'name.wav', {type: 'audio/wav'});blob转base64const blob = '.....'const a = new FileReader();a.readAsDataURL(blob);a.onload = (e) => { const base64 = e.target.result}blob转blobUrlcons

2021-11-10 17:04:17 2624

原创（前端）前后端“文件流”，上传、接收、下载

文件上传（两种）方法1 -- 表单方式上传通过input拾取到文件获取fileconst formData = new FormData() formData.append('file', file)request(`/mark/...`, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, data: formData})方法2 -- base64字符串上传let

2021-11-10 14:32:45 3403

原创前端模块化详解(包含各种导入导出及输出结果)

CommonJS浏览器不认识,需Browserify翻译1. 导出module.exports = ???exports.??? = ???2. 导入const ?? = require('??')/* 打印??结果 --> {???: ???} */AMD用的不多了，这里就不细讲了，感兴趣的自行百度CMD用的不多了，这里就不细讲了，感兴趣的自行百度ES6浏览器不认识，需babel翻译成commonJS，再用Browserify翻译成浏览器认识的**1. 导出**

2021-06-16 10:50:41 265

原创 Nonde+MongoDB基础创建及增删改查

第一部分：原生node搭建服务器第二部分：express框架搭建服务器第三部分：数据库部分第四部分：阿里云部署

2021-06-09 11:49:25 206

原创 vue项目CDN引入

注：一些对系统并不是至关重要的文件诸如字体文件、css重置、js小插件、背景图片等可能适合使用CDN，因为即使CDN文件不可用，网站也能做到平稳退化。第一步：public/index.html 里⬇️注:需引入vue并且main.js中正常引入，但element-ui就无需引入，可以直接使用<!DOCTYPE html><html> <head> <link rel="stylesheet" href="https://unpkg.com/ele

2021-05-26 15:15:21 6350 1

原创打包&配置&优化--备忘录

一、打包环境区分1、正常/ * npm start */ process.env.NODE_ENV === 'production',/ * npm run build */ process.env.NODE_ENV === 'development'2、额外环境区分打包配置package.json中配置命令⬇️ "build-pro": "REACT_APP_ENV=pro 打包执行代码" "build-dev": "REACT_APP_ENV=dev 打包执行代码"等号前面

2021-05-13 17:10:03 297

原创 React+TypeScript+Hooks+Umi+Dev+Ant Design(笔记篇)

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。// interface.ts文件，一般用于存放ts类型export interface ItemType { name: string age: number ｜ number // ｜标示或 fn1: () => void // 无参数，无返回值 fn2: (parame: number) => number // 数字格式参数且返回值

2021-04-25 14:48:11 766

原创大文件断点续传/切片上传(react、vue通用)

----整体流程解析 - 1断点续传首先要满足的功能是第一次上传30%关闭上传后，再次上传此文件继续从30%开始继续上传。要想满足此功能，首先要做的是把一个文件切割成多份上传，而每次上传时，后台需要告诉你此文件已经上传了多少份。例：A文件(100M)，切割成100份，每一份有一个id，如1-100，第一次上传了id1-30的切片文件总计三十份，打断上传后，第二次上传时后台先告诉你已上传id1-30，前端知道后，直接从id31开始上传，做到了续传的实现。----整体流程解析 - 2功能实现至少需要后

2021-04-20 16:09:08 2774 1

原创前端解析zip压缩包 --- vue、react等等通用

第一步：下载安装jszip插件yarn add jszip第二步：导入插件import JSZip from 'jszip'第三步： new一个JSZip对象const zip = new JSZip()第四步：获取内部每个文件的filezip.loadAsync(file).then((res) => { consol.log(res.files) // 每个file}) 拓展：判断压缩包内部文件是否都是img或jpg或png或jpeg图片zip.loadAsyn

2021-04-20 10:47:41 3087 1

原创 rem项目踩到的坑

接到一个项目需要你去迭代修改，如果是rem布局，切记先点开浏览器dom树的html标签，看一下上面的font-size是多少，如果浏览器手机模拟器是375的宽dom树上html的font-size应该是25px，那相对ui给的750的图则正好是1rem = 50px，但如果浏览器手机模拟器375宽的dom树你点开html的font-size是20px的话，那他的项目中设置的1rem对应的就是40px—记得手动设置一下vscode里的rem自动转换—大部分项目都是配置1rem = 50px，但也

2020-12-09 11:23:21 319 1

原创前端生成并导出表格+样式修改（只需一个插件，无需修改源码)

前端生成并导出表格+样式修改（只需一个插件，无需修改源码）众所周知，一般表格生成都是后端的事情，但如果数据不是很多的表格其实前端生成并导出更简便，而前端生成并导出表格也只需要一个xlsx插件即可，并且导出的表格列宽等都可以通过几行代码调整，很简洁，调整样式并不需要像网上查到的那样下载xlsx-style插件，也不需要改什么源码，废话不多说，直接贴代码// 一.导出的表格名let dateVal = '标注工作量.xlsx'// 二.获取DOM上的表格并生成表格对象let workbook = XL

2020-12-08 20:17:48 1641 5

原创 vue-cli3.0搭建项目后--使用全局颜色(样式)变量(style-resources-loader)

第一步：安装style-resources-loader????vue add style-resources-loader第二步：在vue.config.js中加入这块代码????// 如果没有下载path插件需要先安装一下const path = require('path')module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', // 如果你使用的是s

2020-10-28 10:34:10 1214

原创手动生成随机密码（长度自定义）and 插件生成uuid

function createCode(num) { const codeArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', '

2020-09-10 15:01:45 321

qq_45043019的博客