![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
前端相关
hq111111111
编程小学生,怕什么学海无穷,进一寸有一寸的欢喜!
展开
-
两个数组匹配方法
<p v-for="(one, index) in children" :id="'alarmId' + one.id" :key="index" :class="{ 'alarm-oil': alarmArr.includes(one.id) }" &原创 2021-12-23 17:28:34 · 1659 阅读 · 0 评论 -
树图Tree和 四分屏视频做联动实现
效果图:我这里使用的是iview,element-ui道理是一样 <Tree ref="myTree" :data="tree" @on-check-change="treeChange" :multiple="multipleBoolean" show-checkbox :check-directly="true"> </Tree> <div class="r原创 2021-08-12 11:34:00 · 180 阅读 · 0 评论 -
vant 上传图片加百分比进度
功能给每个上传的图片加可实时展示的进度,方便在网络不好情况下,实时查看上传情况,提升用户使用友好度。代码实现upload.vue<van-uploader :after-read="afterReadAll" v-model="beforeArkList" multiple :max-count="10" :preview-full-image="previewFullImage"></van-uploader> da原创 2021-08-10 17:59:25 · 1638 阅读 · 0 评论 -
form表单校验,this.$refs[name].validate(valid)返回false,解决方案
1. 如果 rules 里有二次校验,校验成功需要加 callback()//比如:ruleValidate:{ deviceName: [ { required: true, message: "设备名称不能为空", trigger: "blur" } { validator: (rule, value, cb) => {原创 2021-06-07 18:19:22 · 4613 阅读 · 0 评论 -
给定一个整数数组,判断是否存在重复元素
如果任意一值在数组中出现至少两次,函数返回 true 。如果数组中每个元素都不相同,则返回false。 不能用对象方法 不能用es6特性方法一:思路,先排序,再循环对比 function getBoolean(arr){ let orderArr=arr.sort() for(let i =0;i<orderArr.length; i++){ if(arr[i]==arr[i+1]){ return true }else{原创 2021-06-03 11:07:09 · 493 阅读 · 0 评论 -
echarts 象形柱图
实现效果实现思路和常规柱图类似,配置项type: "bar" ,只有图片路径需要注意下。实现代码customBarCharts() { this.$api.dataDeck.manStructure().then(res => { var customBar = this.$echarts.init( document.getElementById("customBar") ); var img2 = {原创 2021-04-22 18:50:35 · 443 阅读 · 0 评论 -
element-ui table 展开行
实现效果实现代码 // 当 row 中包含 children 字段时,被视为树形数据。支持子节点数据异步加载。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。 <el-table :data="searchResult" style="width: 100%" height="385" :header-cell-style="{ 'background-color': '#2C2E原创 2021-04-22 15:14:32 · 636 阅读 · 0 评论 -
人脸/物体识别,用 canvas 给图片画框(vue实现)
图片识别少不了画框,前端画框就用canvas,后端返回画框数据点,图片可以是前端自己传的也可以是后端返回的。实现思路:1、算好比例尺2、确定上、左位置,确定宽高(后端如果给上下左右,前端自行计算宽高)3、图片预加载时画图4、注意 js 的乘除会有出入,所以要精确化处理效果图实现代码:<template> <div class="carDetect"> <div class="uploadImg"> <el-button ty原创 2021-04-13 18:43:26 · 4455 阅读 · 0 评论 -
js字符串转Boolean值
this.status = "true"JSON.parse(this.status) //truethis.status = "false"JSON.parse(this.status) //false原创 2021-03-15 17:23:57 · 352 阅读 · 0 评论 -
前端vue环境搭建4步备忘
网络不好会影响下载的包,所以最好在网好的时候下载下载node node下载地址下载vue npm install vue -g下载脚手架 vue-cli (最好用powserShell下载全局cli ) npm install -g @vue/cli vue-cli官网地址然后就可以通过 vue-cli 命令创建项目,下载 echarts / element-ui 等 npm 包npm i element-ui -Snpm install echartsnpm ins原创 2020-05-12 18:24:01 · 133 阅读 · 0 评论 -
echarts 折线图的线下颜色设置
areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' }, {原创 2020-12-25 17:39:23 · 1149 阅读 · 0 评论 -
js + axios 实现导出功能
思路:传url,传参,传导出excel名称一、js原生写法具体实现代码function exportExcel(data) { var html = '<div class="pendingBox">下载中,请稍后<img src="../../src/img/loading.png"/></div>' $('body').append(html) axios({ method: 'post', url: urlIP + data.url, res原创 2020-12-11 17:25:01 · 234 阅读 · 0 评论 -
element表格树形数据与懒加载实现
思路:一、返回整体表格对象数组二、遍历此对象数组,1.给控制有展开项的属性hasChildren赋值为true;2 给原始对象数组的每个对象加 id(这里为了防止展开时每行都会展开)三、给表格加load执行函数,和lazy属性,以及:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 属性支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。支原创 2020-12-11 12:23:38 · 5097 阅读 · 0 评论 -
js 获取当前时间,以及30天前时间,并转为时间戳
let dayTime = new Date(); //获取当前标准时间 let todayTimeTamp = dayTime.getTime(); // 转为时间戳 let lw = new Date(dayTime - 1000 * 60 * 60 * 24 * 30); //最后一个数字30可改,30天的意思 let lastY = lw.getFullYear(); let lastM = lw.getMonth() ...原创 2020-11-27 16:24:23 · 5953 阅读 · 1 评论 -
map双重遍历
接口返回数据,需要将接口返回的对象数组,转化为该对象中的某一数组的中的属性和值双重map转化let chnalArr = [] equipmentaArr.map(ele =>{ chnalArr = ele.channel.map( item => { item.username = ele.username item.belongToDivice = ele.name原创 2020-09-29 16:29:30 · 2367 阅读 · 0 评论 -
上传多个图片 formdate形式,需要append,遍历给参数字段
vant 实现h5页面在移动端上传图片<van-uploader v-show="capSign == 0" :after-read="afterReadBefore" v-model="beforeArkList" multiple :max-count="9" />afterReadBefore(file) { // 此时可以自行将文件上传至服务器原创 2020-09-24 17:04:04 · 713 阅读 · 0 评论 -
h5嵌入企业微信,获取重定向后的code值传给后端,再拿到返回值(vue)
需求:获取当前登录用户id,文档中在服务端api里有相应介绍,如下图前端获取重定向后的值:<script> function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<va原创 2020-09-22 15:32:26 · 3727 阅读 · 0 评论 -
前后端分离,nginx配置(多个接口分发,解决vue项目路由404问题)
http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$ht原创 2020-09-21 17:05:04 · 1654 阅读 · 0 评论 -
js 格式化中国标准时间为YY-MM-DD形式并回显时间
即格式化中国标准时间为2020-09-10形式,中间的分隔符可以自行修改//js不foramt函数import { format } from "@/commonjs/date.format.js"; var time1 = new Date(2020, 1, 1)//年月日time1.format("y-m-d") //时分秒time1.format("h:m:s")//其他写法(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 20原创 2020-09-10 14:53:54 · 1742 阅读 · 0 评论 -
高德地图解决逆地理坐标问题
逆地理坐标:即从经纬度,转化为城市名称。步骤:申请key 高德api文档开始传参请求,fetch处理跨域,接口返回数据各种转化,异步数据处理。可视化展示总结:当没有按照预期效果运行时,不要觉得自己没问题,要按照步骤一步一步排查可能没出现预期效果的原因。...原创 2020-09-05 13:33:42 · 993 阅读 · 0 评论 -
javascript 简单使用--map函数
使用map转化复杂数据到简单属于,用于显示原创 2020-09-05 12:18:19 · 341 阅读 · 0 评论 -
前端通过axios封装的get或post请求,导出页面表格内容为Excel
1. post 请求export default function (data) { axios({ method: 'post', url: data.url, //后端接口地址 responseType: 'blob', //bolb格式的请求方式 headers: { Authentication: getToken('Admin-Token') //请求头 }, d原创 2020-06-10 19:24:06 · 2719 阅读 · 1 评论 -
地图控件数据交换格式/所需字段
1.带攻击线世界地图数据交换格式:位置名称 ,位置经纬度坐标起点名称,终点名称,箭头指向圆圈大小参考案例:http://gallery.echartsjs.com/editor.html?c=xhmDTgZ5P_2. 边界地图数据交换格式:位置名称,及相关边界坐标参考案例:http://echarts.baidu.com/examples/editor.html?c=map-...原创 2018-10-30 16:41:31 · 222 阅读 · 0 评论 -
前端开发一点思考
当秋风落叶不再让一个文人驻足沉思,那么ta一定拥有了理性思维。当一个人文理思维兼具,那么好奇心一定使生活丰富多彩。好奇心使我走上了编程之路。在上千行代码历程中,我仿佛悟出了一些东西,并总结了如下经验:(一)个人撸代码的过程解决问题的思路/逻辑/算法,就是代码运行的流程,debug看哪一步没有达到预期目的,哪一步没有返回预期数据,不断理清流程,就容易最快解决问题。同时要不断学习优秀的成功经验,...原创 2018-10-16 15:48:03 · 397 阅读 · 1 评论 -
前端知识点汇总
一 、头条cdn有哪些优化静态资源加载速度的机制请说出以下题目的打印结果并说明原因:async function async1(){ console.log('async1 start') await async2() console.log('async1 end')}async function async2(){ console.log('async2')}console.log('script start')setTimeout(funct原创 2020-05-23 21:30:54 · 338 阅读 · 0 评论 -
巧用 es6 的 export 和 import 实现模块化开发
将公共的js代码写在一个独立文件,以.js为文件后缀,将公共函数赋值给一个变量,将变量名export出去,有少个变量,就都可以写在export对象中,如下图所示:其他文件使用的时候用 import 导入即可,注意路径正确。参考文章:阮一峰 ES6模块讲解...原创 2020-05-18 09:51:15 · 143 阅读 · 0 评论 -
js彻底理解原型、原型链、构造函数
原型日常代码过程中少不了创建对象(3种方法:对象直接量、new+构造函数、Object.creat())(3种模式:工厂模式——创建多个相似对象,但对象类型模糊),创建对象引出——原型。每个对象都和原型对象关联。获取对象的原型——.prototype 原型检测——object.prototype.isPrototypeOf(obj)类和原型——类的所有实例都从同一个原型继承属性原型链...原创 2019-11-05 20:36:22 · 178 阅读 · 0 评论 -
常见的浏览器兼容性问题大汇总
JavaScript 1、 HTML对象获取问题 FireFox:document.getElementById(“idName”); ie:document.idname或者document.getElementById(“idName”). 解决办法:统一使用document.getElementById(“idName”);2、 const问题 说明:Firefox下,可以使用con转载 2016-12-21 12:59:14 · 310 阅读 · 0 评论 -
JavaScript中的函数总结
1、在Javascript定义一个函数一般有如下方式: // 函数关键字(function)语句:function fun(x){alert(x);} // 函数字面量(Function Literals): var fun = function(x){alert(x);}//Function()构造函数: var fun = new Function(‘x’,’alert(x);’) 2原创 2016-12-21 11:18:58 · 405 阅读 · 0 评论 -
正则表达式
1、格式:/ expression / 2、常用正则表达式元字符: . :匹配任何字符,换行符除外 \d:匹配数字字符 \s:匹配空格 space、tab、换行符、enter/return \w:匹配字母或数字字符 ^:字符串需以此模式开始 $:字符串需以此模式结束 3、限定符quantifier:(限定符前边是子模式,限定符限定的是子模式,控制子模式出现在模式里的次数。) {n}原创 2016-12-21 13:20:35 · 224 阅读 · 0 评论 -
web标准—可用性、可维护性、可访问性
在Web前端开发界,有三个词经常被提及:可用性(Usability)、可访问性(Accessibility)和可维护性(Maintainability)。1、可用性指的是:产品是否容易上手,用户能否完成任务,效率如何,以及这过程中用户的主观感受可好,是从用户的角度来看产品的质量。可用性好意味着产品质量高,是企业的核心竞争力。2、可维护性一般包含两个层次,一是当系统出现问题时,快速定位并解决问题的成本转载 2017-01-04 19:14:42 · 769 阅读 · 0 评论 -
个人对div盒子的深入理解
首先把盒模型比作一个冰箱(div盒子),它放置需要离其他物体有一定的距离(margin),以便它能及时散热保证正常运行,冰箱里边放了一大把青菜(盒子内容),菜要和冰箱内壁有一定距离(padding)否则菜粘到内壁上会冻烂,最后冰箱本身有他的厚度(border)支撑着自己这个物体有形状(width、height)和属性:显示形式:display(none[元素不显示],block[显示为块级],li原创 2017-01-05 17:08:08 · 1706 阅读 · 0 评论 -
html中的易混点
for循环与while循环(循环机制应该适用于手边工作) for:严格保持对循环的所有控制,密切监控计数器,循环开始初始化,循环结束自我更新。初始化> 测试条件>动作>更新while:只需要一个测试条件(能用布尔值)和一段行动代码组成,想要重复什么都可以放在行动代码中,组成复合语句。while(true)可以,但是是无限循环,只要测试条件为true,会一直不停执行代码。while循环测试条件直到跑原创 2016-12-21 11:21:31 · 298 阅读 · 0 评论 -
echarts树图控件分析
1.所需数据结构:一组以父元素name和子元素children为属性的json对象画出,子元素又是以若干个父元素name和子元素children为属性的对象 构成的对象数组,因此有多少树枝,就会对应的有多少层子元素,如图所示:数据中value指值的大小,不在节点大小上体现,但鼠标悬浮在相应的节点上即可查看,如图所示:2.树图的基本设置,如图参考案例http://www.echart...原创 2018-10-17 11:32:37 · 4207 阅读 · 0 评论 -
表格高度的设置/整体表格的展开折叠/表格概览和全览
elementui里表格有个height属性,能给它动态赋值,然后用你说的计算表格行高在js里赋值就好了<tempate> <el-table :data="tableData" stripe border :height="attrHeiht" ...原创 2019-05-29 14:13:46 · 866 阅读 · 0 评论 -
整理以前的笔记,发现还写过JavaScript&jQuery一些初学小白的知识点,或许对初学者有点作用
1、jQuery不支持的原生dom对象,就可以用$(‘#qrcode canvas’)[0]来解决 2、用jQuery改变img对象的图片,attr 属性 3、关于打断点:在function的第一行执行就可以打断点,在成功和失败返回处打断点,用console和source理解代码; 4、要点击断点所对应的实现功能,才能进入断点的方法。原创 2019-05-29 18:41:31 · 105 阅读 · 0 评论 -
媒体查询总结
在页面布局应用不同屏幕时候,会用到媒体查询。所以原则上适配多大屏幕应用什么样的设计布局,就要写多少套媒体查询。使用中的注意事项:1、要在index.html页面添加这些meta属性才会起作用:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scal...原创 2019-08-31 16:32:37 · 141 阅读 · 0 评论 -
JS的构造函数
/* 构造函数 使自己的对象多次复制,同时实例根据设置的访问等级可以访问其内部的属性和方法 当对象被实例化后,构造函数会立即执行它所包含的任何代码*/function myObject(msg){ //特权属性(公有属性),只在被实例化后的实例中可调用 this.myMsg = msg; this.address = '上海'; //私有属性 var name =转载 2016-12-21 11:09:57 · 209 阅读 · 0 评论