
前端
文章平均质量分 67
JokerLee...
自学前端,吾日三省吾身,学习否!!!
展开
-
echart常用图表配置
【代码】echart常用图表配置。原创 2023-08-02 14:52:14 · 472 阅读 · 0 评论 -
uniapp app端常见坑
本文主要记录在uniapp-vite-vue3项目app端出现的常见问题当在设置 “navigationStyle”:“custom” 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(–status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。官网也有解决方案解决方案在项目中使用了pinia数据持久化插件,在h5端使用正常,在app端无效果,目前解决方案是使用官方提供的数据缓存API数据缓存API原创 2023-06-24 23:23:03 · 1500 阅读 · 0 评论 -
前端常用树形结构的操作
【代码】前端常用树形结构的操作。原创 2023-06-18 20:46:24 · 594 阅读 · 0 评论 -
vue项目动态src ,video无法正常播放问题记录
在vue2项目中,mp4视频地址由后端异步请求获取,使用静态的url时视频能够正常播放,异步请求获取视频地址,视频出现无法播放的问题。原创 2023-05-07 10:31:49 · 7135 阅读 · 0 评论 -
vue3项目使用WebSocket 传输 Protobuf 格式的数据
vue3项目中protobuf格式数据传输的示例项目。原创 2023-03-19 22:30:45 · 4565 阅读 · 0 评论 -
node-ffi调用C++编译的动态链接库踩坑记录
node-ffi调用C++编译的动态链接库踩坑记录前言一、安装相关依赖二、使用步骤1.准备好动态链接库然后编译成dll文件1.引入库dll查看器的使用__declspec(dllexport)关键字总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、安装相关依赖旧版node-ffi不支持高版本的node环境,其他博主也有详细介绍,我就不再赘述了,现在使用V12以上的node版本需要用到ffi-napi以及相关的库,由于该库需要使用到node-gyp进行编译所以需要提前安装好相关环境,nod原创 2022-05-13 19:44:49 · 3121 阅读 · 0 评论 -
Echarts 实现在一个画布中画出多个上下排列柱状图
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、实现的效果二、参数代码总结前言有一种情况需要在一个dom元素中画出多个上下排列的柱状图提示:以下是本篇文章正文内容,下面案例可供参考一、实现的效果二、参数代码const datas = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-.原创 2022-04-26 14:09:56 · 4201 阅读 · 0 评论 -
在React项目中实现调用摄像头拍照的功能
文章目录前言一、如何调用摄像头二、操作步骤1.准备dom元素2.添加打开和关闭摄像头的事件3.获取图片 base64格式三、demo总结前言在日常开发中可能会遇到需要调用摄像头拍照的功能,下面为大家讲解一下在react项目当中如何实现拍照的功能。一、如何调用摄像头调用摄像头只需要用到JS原生的api就可以了navigator.mediaDevices.getUserMedia,关于这个api,mdn有详细的介绍MediaDevices.getUserMedia()二、操作步骤1.准备dom元原创 2022-04-14 13:28:57 · 5401 阅读 · 1 评论 -
寻找以A开头B结尾的字符串并替换
寻找以A开头B结尾的字符串并替换一寻找以A开头B结尾的字符串的正则表达式二方法实现假设我要替换html文本中被标记的地方,或者需要循环生成子元素。比如我有一个html文件如下: {}中的内容表示需要替换的文本,for...for 两个for中间的部分表示需要循环生成的子节点。<div style="width: 100%;border: 1px solid #000;"> <div style="width: 100%; font-size: 30px; text-align: c原创 2022-03-03 22:30:53 · 1025 阅读 · 0 评论 -
react项目实现预览markdown,以及代码高亮
react项目实现预览markdown,以及代码高亮前言一、react-syntax-highlighter的使用二、react-markdown的使用总结前言不少的react项目中需要实现markdown预览以及代码高亮的功能,效果如下。上面图片展示的内容是我在个人项目中实现的效果,用到了两个库react-markdown和react-syntax-highlighter,一个用于预览markdown文本,另外一个用于代码高亮展示。一、react-syntax-highlighter的使用我原创 2021-12-23 17:41:31 · 8174 阅读 · 14 评论 -
electron源码保护的方法实现
electron源码保护前言一、思路二、实现1.安装代码混淆的工具javascript-obfuscator2.安装bytenode可能遇到的问题总结前言为什么要保护源码呢,????使用npm 下载一个工具asar 全局安装npm install -g asar安装完成以后,找到你安装的electron软件的安装目录,找到一个.asar后缀的文件????,然后在当前路径下打开终端????假设我找到的文件是app.asar????asar -e app.asar ./fs执行完这个命令以后你原创 2021-09-30 10:24:40 · 3777 阅读 · 10 评论 -
JavaScript-深度对比对象的属性是否完全相等
JavaScript-深度对比对象的属性是否完全相等我想对比一个对象的属性是否完全相等,只对比对象的属性不对比特殊object类型(Array)的属性,打个比方,A B两个人都有身高、体重、吃饭、睡觉等属性,可以判定这两个人的属性是一样的,不用管A或者B的具体身高是多少。/** * @function 深度对比对象属性是否相同 * @description 该函数实现深度对比对象的属性是否相同,只对比对象,数组这种特殊的Object类型不做对比 * @param o1 {object|undefi原创 2021-08-27 16:14:20 · 562 阅读 · 0 评论 -
grafana二次开发在win10环境下的准备
win10环境下grafana二次开发1、配置环境安装go语言环境安装git下载源码安装gcc工具安装node编译前端代码编译后端部分1、配置环境安装go语言环境在官网下好go1.17.windows-amd64.msi文件默认安装就好了,然后添加环境变量第一个变量安装完后会默认生成,第二个需要我们手动去添加安装gitgit 也是在官网下好之后默认安装可以了下载源码可以使用git 拉代码git clone https://github.com/grafana/grafana.git我原创 2021-08-19 10:00:03 · 1262 阅读 · 0 评论 -
electron-react对接打印机 实现打印功能
electron-react实现打印功能思路主线程设计思路渲染进程设计思路思路在electron-react项目当中要实现打印部分页面内容的需求,第一种方法是使用iframe标签打印,这种方法最简单网上有很多教程,使用iframe.contentWindow.print()这个方法会弹出打印对话框,我还没有找到关闭的方法,所以没有采用。第二种方法是在使用electron的主线程调用webContents.print()方法,这个方法相对比较复杂,主线程和渲染线程直接需要通信。流程如下:主线程 :原创 2021-06-24 16:45:15 · 2345 阅读 · 2 评论 -
Echarts:在一个画布内画出多个图表
Echarts:在一个画布内画出多个图表效果图option参数内容以前做多个图表的效果是把不同的图表画在不同的画布里面,如果你要画三个图表需要用到三个div标签,下面是将三个图表画在一个div标签里面的效果。效果图option参数内容const datas = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 8原创 2021-06-18 14:33:25 · 10192 阅读 · 0 评论 -
react项目中使用使用echarts-for-react组件动态刷新数据图表的问题
解决Echarts动态刷新图表的问题echarts-for-react动态更新图表通过websocket的方式刷新数据echarts-for-react这是基于ECharts封装的react组件库,可以让你轻松的操作Echarts图表链接: link.其实官网的实例就已经有动态刷新的效果了请看这里动态更新图表import React, { useState, useEffect } from 'react';import ReactECharts from 'echarts-for-react'原创 2021-04-23 10:14:38 · 4108 阅读 · 0 评论 -
使用jest测试typescript
使用jest测试typescript 安装相关的插件添加配置文件添加测试文件运行可能会遇到的问题在react项目中使用jest,测试typescript代码时遇到问题,已经解决,现做记录。经供参考,实际情况可能有出入。安装相关的插件1.首先要先安装jest2.安装typescript3.安装 “ts-jest”: “^26.5.3”,(我装的是这个版本)添加配置文件在根目录下添加tsconfig.json 文件配置如下{ "compilerOptions": { "outDir原创 2021-03-05 14:41:10 · 1981 阅读 · 0 评论 -
前端基础面试题
面试题总结HTML标签置换元素空元素行内元素和块元素H5新增那些标签CSS选择器选择器优先级css3新增选择器场景分析清除浮动让元素居中的方法Javascript基础闭包递归this指向问题HTML标签置换元素1. 一个内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。 2. 置换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。 3. 例如浏览器会根据img标签的src属性的值来读取图原创 2020-12-30 17:12:19 · 228 阅读 · 1 评论 -
javascript 字符串的截取操作
字符串的截取操作正数只有一个参数的情况两个参数的情况负数只有一个参数的情况两个参数的情况正数只有一个参数的情况let str = 'abcdefg';/* 传入一个参数的时候效果是一样的 */ console.log(str.slice(1)); //bcdefg console.log(str.substring(1)); //bcdefg console.log(str.substr(1)); //bcdefg两个参数的情况/* 传入两个个参数的时候subs原创 2020-12-22 22:01:59 · 169 阅读 · 0 评论 -
javascript 数组去重的多种方法(包括ES5和ES6)
概述根据我自己的总结归纳,数组去重分为两种类型的方法,一种是在原来的的数据里面删除重复的元素,另一种是把原数组里面相同的元素添加到一个新数组里面。不管是什么方法都是利用这种解决思路去设计的。一 .删除原数组里面重复的元素 splice()方法1使用双重for循环遍历删除重复的元素var numArr = [1,1,1,2,2,2,2,2,2,3,3,3,4,5,6,5,6];var strArr = ['a','a','a','b','b','c','cc']function norepeat(原创 2020-12-19 16:39:02 · 1470 阅读 · 4 评论 -
Javascript-判断是否为数组的5种方法
判断是否为数组的5种方法1 instanceof2 constructor3 Array.isArray() 最推荐方法4 typeof5 Object.prototype.toSrtring.call()总结var arr= [1,1,1,1]var a = '2323'var b = {name:'xiao',age:12}var n = 11 instanceof1 instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置,返回一个布尔值。原创 2020-12-19 13:31:50 · 3075 阅读 · 2 评论 -
解决 jquery使用ajax请求发生跨域问题的办法
解决 jquery使用ajax请求发生跨域问题的办法问题描述解决步骤1.编写node服务器2.编写客户端请求示例总结问题描述我在使用jquery的ajax请求后台数据的时候发生了跨域的问题,在网上查了很多办法都是说添加这个 dataType: ‘jsonp’,但是我使用过后没有效果,最后我用Node写了一个服务器做代理解决了这个问题。解决步骤1.编写node服务器关于node我就不做介绍了,直接看代码吧(写了一个非常简单的例子),代码里面引入的有些包是不需要的请自行删除。//引入express框原创 2020-12-17 13:52:24 · 2189 阅读 · 4 评论 -
解决 web网页下发命令到onenet平台设备的问题
下发命令到设备关于API sdk如何下发命令关于API sdk官方给我们提供了一个javascript语言编写的SDK,也就是说我们可以通过引入的SDK.js文件,使用它封装好的方法去对设备的数据进行获取以及下发命令。除了javascript还有其他语言编写的API SDK 我把 链接:link.可以根据自己的实际需要自行查看。如何下发命令我写一个简单的例子来展示如何下发命令代码如下 var devicesid = '624519945' //设备id var apikey = '2oc6=0原创 2020-11-19 22:50:26 · 1841 阅读 · 3 评论 -
前端-h5 移动端星空效果注册界面
H5移动端登录界面分享个人在学习前端过程中自己做的移动端的登录和和注册界面,部分内容参考大佬写的样式。如果有更好的建议或者有错误的地方希望各位大佬留言、评论。html代码下面是注册界面的HTML代码<!DOCTYPE html><!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" href="frozen.css">原创 2020-10-19 16:03:53 · 1424 阅读 · 3 评论