HuangZeJunXXX的博客

原创 vue使用promise、async、await 2分钟让你记住(必看)

Promise返回一个对象，这个对象的构造函数里面可以传入函数，函数的第一个参数是一个回调函数，即成功的回调函数。函数的第二个参数也是回调函数，失败的回调函数。这个对象可以.then().catch(),所以可以写成new Promise().then().catch()，也可以写成var a = new Promise(); a.then().catch();Promise构造函数的参数是一个函数，函数里面的代码是异步的，即Promise里面的操作，和Promise()外面的操作时异步"同时"进行的，

原创 关于通过前端xslx解析excel日期少一天原因

关于通过前端xslx解析excel日期格式数据转化问题以及自定义时间格式YYYY-MM-DD转化const workbook = XLSX.read(data, {type: “binary”,cellDates: true,//设为true，将天数的时间戳转为时间格式}定义一个转换日期格式的方法（转成日期格式：YYYY-MM-DD）注意的点：xlsx将excel中的时间内容解析后，会小一天如2020/11/3，xlsx会解析成 Mon Nov 02 2020 23:59:17 GMT+08

原创 前端js如何实现中文转拼音(重要)

npm地址: https://www.npmjs.com/package/pinyin-converter安装via npm:npm install pinyin用法开发者：var pinyin = require(“pinyin”);console.log(pinyin(“中心”)); // [ [ ‘zhōng’ ], [ ‘xīn’ ] ]console.log(pin...

原创 前端js正则大全(项目中经常用到的正则表达式)

常用正则表达式合集:验证数字：1$验证n位的数字：^\d{n}$验证至少n位数字：^\d{n,}$验证m-n位的数字：^\d{m,n}$验证零和非零开头的数字：^(0|[1-9][0-9])$验证有两位小数的正实数：2+(.[0-9]{2})?$验证有1-3位小数的正实数：3+(.[0-9]{1,3})?$验证非零的正整数：^+?[1-9][0-9]$验证非零的负整数：^-[1-...

原创 jq链式调用原理(前端)

(1).链式调用 $("#mybtn").css("width","100px") .css("height","100px") .css("background","red");(2).在对属性进行操作时建议使用JSON形式控制样式$("#mybtn").css({width:200,height:“200”,“backgr...

原创 前端h5(rem移动端原理, 看了不后悔)

什么是适配，为什么要适配我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同 ，视口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。需要知道的一些概念：物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，可以理解为我...

原创 vue数据双向绑定原理(面试必问)

ES6 之 对象属性的可枚举性和遍历1.Object.getOwnPropertyDescriptor()解释：获取对对象属性的描述对象。let obj = { foo: 123 };console.log(Object.getOwnPropertyDescriptor(obj, ‘foo’))显示结果：复制代码{configurable: trueenumerable: tru...

原创 js数组去重(看完就懂了)

一、利用ES6 Set去重（ES6中最常用）function unique (arr) {return Array.from(new Set(arr))}var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a...

原创 前端使用Echarts饼图中央如何添加文字与样式(好用, 精通大屏可视化图表)

tooltip: {trigger: ‘item’,formatter: " {b}：{c} "},color:[’#D06052’,’#E29F39’,’#4C9BC7’], //环形颜色 graphic:{ //图形中间文字 type:"text", left:"center", top:"center", ...

原创 vue data中的对象的属性如何使用watch监听(好用)

data() {return {parent:{a: ‘’}};},watch:{‘parent.child’:{deep:true,handler: function(newV, oldV) {console.log(newV);}}}

原创 前端js闭包详解(面试管用)

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。var n=999;...

原创 input标签的 accept 属性(前端过滤上传格式) 和new FormData 详解

使用input 上传文件 accept过滤文件格式<input type=“file” name=“pic” id=“pic” accept=“image/gif, image/jpeg”FormData 对象的使用：1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString2.异步上传二进制文件。1.FormData对...

原创 在vue中使用import()来代替require.ensure()实现代码打包分离(提高首屏加载速度)

一、require.ensure() 方法来实现代码打包分离require.ensure() 是 webpack 特有的，已经被 import() 取代。require.ensure(dependencies: String[],callback: function(require),errorCallback: function(error),chunkName: String)...

原创 vue 属性props定义属性与默认值(用到的请进, 绝对让你满意)

第一种用法export default {props: ["listid],}第二种用法(我推荐第二种用法, 相对比较严格)export default {2 props: {3 // 基础类型检测 (null 意思是任何类型都可以)4 propA: null,5 // 多种类型6 propB: [String, Number],7 ...

原创 vue路由传参方式详解(好使)

方案一：getDescribe(id) {直接调用router.push实现携带参数的跳转this.router.push 实现携带参数的跳转 this.router.push实现携带参数的跳转this.router.push({path: /describe/${id},})需要对应路由配置如下：{path: ‘/describe/:id’,name: ‘Desc...

原创 前端批量下载后台表格

$(function () { alert('开始自行js代码'); var paths = ["xmanager.rar","201908192041687.zip","201908191635835.msi","instantclient_12_1.zip"]; var urls = ["http://localhost:8083/downUp/downfiles/xmana...

原创 前端批量下载表格 (已解决)

文件下载

翻译 vue使用post下载后台excel表格(绝对好使)

axios设置返回格式为arraybuffer 或者 blob（最佳 不会乱码）例如：　　this.$axios({　　　　method: 'post',　　　　header: {'Content-Type': 'application/xls'},　　　　　　　　　　　　// http请求类型　　　　responseType: 'blob',　　　　　　　　　　　　　　　　　...

原创 关于npm i 下载失败原因

要删除 全局的 npm 不能与本地npm 和脚手架冲突， 删除路径在 用户/AppData/Roaming/npm

原创 实现一个类似掘金Style的markdown目录(js编写文章)

一、锚点设置makdown中的#，##，##组成的标题经过marked等工具转化渲染到网页中会成变成h标签，所以当拿到文章详情页后可以从中抽离出所有的目录标签即h1，h2，h3…const toc: string[] = data.content.match(/<[hH][1-6]>.*?</[hH][1-6]>/g) // 通过正则的方式复制代码拿到这些标题之后就可以进行锚点的设置。在H5中关于锚点的做法很多，我们会采用下面这种做法进行设计：①：设置一个锚点链接 去找喵星

原创 JS对金额的处理（保留两位小数位， 每隔三位添加‘，’）

function Money(value, num) {num = num > 0 && num <= 20 ? num : 2;value = parseFloat((value + “”).replace(/[^\d.-]/g, “”)).toFixed(num) + “”; //将金额转成比如 123.45的字符串var valueArr = value.split(".")[0].split("").reverse() //将字符串的数变成数组const valu

原创 前端input输入框, type类型是number 输入小数会提示“请输入有效值,两个最接近的有效值为0,1”问题, 请看解决方案

在用到表单里，发现把鼠标移到type="number"的input框上时有时候会显示“请输入有效值,两个最接近的有效值为0,1”的提示，代码里面并没有这个提示，发现只有当输入小数时会出现提示，原来是浏览器默认输入整数，如果要输入小数需要修改步长，比如将step设为0.1。...

原创 vue下载表格 兼容ie 绝对好使

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入axios ( {method : ‘post’,url : api.exportPlayTime , // 请求地址

原创 vue组件里面如何让pre和code标签里面的内容不被编译？

templateprecodediv test divcodepretemplate

原创 vuejs实现折叠面板展开收缩动画效果

vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。

原创 纯前端使用vue如何导出表格

1、 安装依赖安装依赖xlsx，file-savernpm install --save xlsx file-saver2.在组件中引入import FileSaver from ‘file-saver’import XLSX from ‘xlsx’3.添加下载方法#out-table为table节点的idoutTab () { /* generate workbook ob...

原创 前端JS如何校验 座机号码

var reg = /^[0-9-{0,}$/

原创 前端使用ElementUI +Vue table表头添加tooltip悬浮提示框

<el-tableempty-text=“正在加载中…”:data=“contentList”style=“width: 100%”@sort-change=“sort”class=“pro-table-item”tooltip-effect=“dark” <template v-for="(item,index) in titleList"> 　　 <...

原创 js字符串中不能包含中文与英文用来校验座机号码

var reg = /1{0,}$/0-9- ↩︎

原创 前端表格无限滚动

使用安装npm install --save el-table-infinite-scroll1全局引入import Vue from ‘vue’;import elTableInfiniteScroll from ‘el-table-infinite-scroll’;Vue.use(elTableInfiniteScroll);1234局部引入123456...

原创 react如何使用react-router-dom路由

import React from ‘react’;// 引入hashHistoryimport {HashRouter, Route, Switch, hashHistory} from ‘react-router-dom’;import Home from ‘./v/home.jsx’;import Mine from ‘./v/detail’;const BasicRoute = ...

原创 react中如何跳转路由

通过a标签跳转a href=’#/detail’>去detail</a通过函数编程import {HashRouter, Route, Switch, hashHistory} from ‘react-router-dom’;<button onClick={() => this.props.history.push(‘Mine’)}>通过函数跳转...

原创 前端如何创建 react脚手架 1分钟就能创建成功

(1)npm install -g create-react-app(2)create-react-app my-app(3)cd my-app(4)npm start

原创 前端页面使用表格文字超出30字后显示省略号

1.设置过滤器filters: {ellipsis(value) {if (!value) return “”;if (value.length > 30) {return value.slice(0, 30) + “…”;}return value;}},2.使用过滤器el-table-column label=“题干” width=“600”template sl...

原创 前端使用Element-ui表格内容过长时候,添加悬浮效果

1.el-table是有这个控制属性的：:show-overflow-tooltip=“true”2.悬浮颜色覆盖.el-tooltip__popper{max-width:20%;}.el-tooltip__popper,.el-tooltip__popper.is-dark {background:#f5f5f5 !important;color: #303133 !import...

原创 前端生成唯一id解决SessionId不一致

在项目开发中我们常需要给某些数据定义一个唯一标识符，便于寻找，关联。node-uuid模块很好的提供了这个功能。https://github.com/broofa/node-uuid/使用起来很简单，两种：1、uuid.v1(); -->基于时间戳生成 （time-based）2、uuid.v4(); -->随机生成 (random)通常我们使用基于时间戳 v1() ...

原创 element-ui表格内容过多样式优化

el-table-column:render-header=“labelHead”:prop=“col.filedName”show-overflow-tooltip=“true”sortable:label=“col.alias”:formatter=“formatterTableCol”>el-table-column>methods: {labelHead: f...

原创 前端element-ui表格滚动条样式优化

原创 IE浏览器如何获取本地ip地址

function GetAdapterInfo() {//var locator = new ActiveXObject(“WbemScripting.SWbemLocator”);var service = locator.ConnectServer("."); //连接本机服务器var properties = service.ExecQuery(“SELECT * FROM Win...

原创 IE浏览器如何获取IP地址

<object classid="CLSID:76A64158-CB41-11D1-8B02-00600806D9B6" id="locator" style="display:none;visibility:hidden"></object><object classid="CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223"...