- 博客(47)
- 收藏
- 关注
RSS订阅原创 动态化表单
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。插件：配置表单gppConfigurationForm。通过数据配置动态渲染表单，可配置必填以及正则校验。配置表单 - DCloud 插件市场。插件：form-create。2.uniapp项目。
2023-07-31 09:15:07
411
1
原创 webrtc视频播放器（srs.sdk.js）
还有一种方法，可以在index.html中通过script引入jswebrtc.min.js文件，调用方法直接使用。在vue中使用，需要将js方法中的函数通过 export default{}的方式暴露出来。下面是通过srs.sdk.js文件中的SrsRtcPlayerAsync方法进行拉流；
2023-05-23 17:56:47
4269
7
原创 H5视频播放器（livePlayer.js）
国网B接口服务 电网B接口；支持本地、内网、私有云部署；为企业视频能力建设，提供了视频点播转码、手机直播推流、云端录像存储计划、RTMP拉流推流服务、RTSP拉流推流服务、设备GB28181接入、Onvif云台控制等等能力，同时提供性能强大稳定的WebRTC/RTMP/HLS/RTSP/HTTP-FLV分发，支持H5页面无插件直播，强大的后台管理，详细的二次开发接口文档，服务搭建简单解压后一键启动，支持Windows和Linux环境部署。二、编辑webpack.xxx.config.js。
2023-05-23 17:10:25
814
原创 webrtc视频播放器(ZLMRTCClient.js)
在播放实时视频时，视频播放器一般会有延迟，此时，就可以使用webrtc来拉流，延迟在1s或者基本没有延迟。ZLMRTCClient.js: 与zlm配套的rtc js客户端。将ZLMRTCClient.js文件，存放到public文件中；在index.html文件中引入文件；
2023-05-11 18:23:23
7387
11
原创 node.js版本管理
vue2项目升级到vue项目，要求node版本升级，避免版本升级导致项目运行失败，采用nvm进行node版本管理。nvm install vXX // 安装对应vXX版本的node。nvm uninstall vXX // 卸载对应vXX版本的node。nvm ls // 查看已安装node版本。nvm use xxx // 选择使用XXX版本。window+R打开执行下列命令行。
2023-04-10 14:57:16
288
原创 vue3拖拽布局+动态组件+自适应布局
/在package.json中dependencies下添加下面插件库，并执行命令npm install。Vue Grid Layout -️ 适用Vue.js的栅格布局系统。可拖动和可调整大小栅格布局的Vue组件。
2023-04-08 16:13:55
6221
1
原创 Web安全问题记录以及解决方案
当登录时，接口返回token作为所有接口登录的凭证，web端保存token,一般用cookie的方法。查资料发现这种保存方式存在漏洞。至于页面上的数据,全局查询cookie,存放在。jquery版本过低。
2023-02-04 18:05:43
1770
原创 针对uniapp和vue的MD5加密
1.在common文件下添加md5.js文件（可以直接复制）2.直接将md5.js引入页面。2.将md5添加到原型链上。
2022-08-30 12:01:39
1545
原创 uniapp和安卓的广播发布和接收机制
背景：app需要监听第三方app的广播获取应用凭证和用户凭证简介：广播注册主要分静态广播注册和动态广播注册，由于静态广播注册需要修改AndroidManifest.xml，所以uniapp上就没有采用静态注册。本人主要是参考安卓的广播机制，来实现uniapp的原生写法的广播机制（动态广播）。动态注册广播：它跟随 Activity 的生命周期。需要在 Activity 结束前，移除广播接收器。静态注册广播：当应用程序关闭后，如果有广播过来，程序也会被系统调用自动运行。...
2022-08-04 18:01:33
2507
原创 等待汇总的问题
encodeURIComponent()编码。decodeURIComponent()解码。1.uniapp和安卓的广播发布和接收机制。3.window对象的编解码。2.URI的编码解码。
2022-08-04 14:10:54
100
原创 关于各浏览器中对video\audio标签的自动播放的限制
2.IE浏览器自动播放生效（但是IE11于2022.6下架），而且会自动更新为MicrosoftEdge浏览器，次浏览器必须有交互，才能播放。大多数浏览器不支持video\audio的自动播放功能。用户和浏览器之前必须进行交互，才能够自动播放声音。1.QQ浏览器、谷歌浏览器、火狐浏览器、opera浏览器、猎豹浏览器必须交互，才能播放。现要求如有预警，显示全局弹窗并伴随声音提醒。3.360浏览器自动播放功能目前还生效。统计（主要是audio）...
2022-07-15 10:46:49
1622
原创 js关于下载文件
1.方法一：window.location.href ="/url" 一般情况下会自动跳转2.方法二：window.open('url')3.方法三：a标签 target="_blank"在新页面打开，download下载属性下载 注意：地址是相对路径时，download生效
2022-06-23 15:19:01
1261
原创 Vue+uniapp直播功能（后续总结和反馈）
推拉流：APP使用uniapp 的live-pusher推流，video拉流。（总体来说，不建议使用uniapp,最好用安卓开发，否则坑很多）平台集成了srs流媒体服务器上的webrtc方法推流拉流。关于live-pusher组件：问题：推流只有视频流，没有声音（华为手机正常，安卓手机没有声音）可能原因：live-pusher组件对音视频流解码的问题优化方法：进入页面先进行推流，等1.5s之后在打开摄像头。（先将音频通道打开，再推视频流）关于webrtc:（第一次尝试，只会用，不会写）必须在本地或者h
2022-06-17 17:22:23
2112
原创 Vue解决data数据改变，视图不更新的问题
原因：有时候el-input由于嵌套的层级比较多，数据双向绑定实现不了办法：1.降低嵌套层数2.// 监听input事件<el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom" placeholder="请输入用户名" @input="change($event)"></el-input>// 在method方法中写 // 多层嵌套无法输入解决方法 change
2022-05-16 18:47:03
3315
原创 Vue+uniapp直播参考资料
通过app打开摄像头推流，后端处理视频流，前端vue页面拉流：【干货篇】Vue+UniApp实现直播功能_破烂码农的博客-CSDN博客_uniapp 直播uniapp(推流)+vue（拉流）+nginx+OBS实现直播一、先看效果vue拉流uniapp推流https://blog.csdn.net/weixin_43848873/article/details/118968726vue打开摄像头vue调用摄像头pc+移动端_Ponnenult的博客-CSDN博客_vue调用摄像头前言： vue调用本
2022-04-02 17:48:34
2252
原创 Vue+Uniapp实现直播功能（推流拉流）
提示：前言目前有一个项目,需要做一个APP和一个PC端网页，主要功能是类似直播，经查阅资料，可采用uniapp+vue+推流拉流的技术，前端使用uniapp打开摄像头，并将视频流推流给后端，后端将视频流进行处理，形成m3u6或者flv格式的视频，前端使用flv.js进行播放视频流。总共分为二部分，一篇是针对uniapp+vue（前端），另一篇是ngxin直播服务器的搭建(后端)。一、核心插件uniapp推流：（自带标签）live-pusher推流vue拉流：flv.js视频播放器.
2022-03-31 22:40:04
17088
3
原创 Git代码管理工具
1.下载本地Git直接搜索git在官网中下载 在360软件商城中直接搜索git下载2.在gitee中创建账号3.创建仓库4.点击右键,点击git bash here，5.执行命令公司电脑初次提交git（不会上传.git文件、node_modues插件包文件、dist打包文件）git init 初始化仓库命令 git status 查看仓库状态 git add . 将内容添加到暂存区 git commit -m '第一提交'（初次电脑提交时，执行设置email和name的命令
2022-03-26 23:28:52
477
原创 关于web开发---适配布局
1.通过媒体查询2.根据显示屏大小动态计算出根元素字体大小。（视口单位vw）视口单位：vm:1vm=视口宽度的1%vh:1vh=视口高度的1%vmin:选取vw\vh中最小的那个vmax:选取vw和vh中最大的那个方案一：设计稿750px->100vw1.创建scss函数$viewportWidth: 1920;//设计稿宽度$viewportHeight: 1080;//设计稿高度@function pxTovw($px) { @return $px*
2022-02-24 15:38:10
535
原创 关于el-tree树形结构的理解
根据数据结构可划分为两种方式进行树形构建。特别地，还有一种节点可选形式。（1）数据data是一个由多个对象组成的数组，对象含有children属性（里面是多个对象组成的数组）获取树形结构的数据data="treeData" 设置树形配置项props="treeProps",对应着数据每一个对象的属性 设置默认展开项数组default-expanded-keys="default_expanded_keys"，默认展开第一项所有子树 点击节点（分等级）@node-click="node_cli.
2022-01-26 15:41:13
1939
原创 关于前端--RSA加密(对登录密码加密)
安装 npm install jsencrypt 1.在utils文件中封装一个jsencrypt.js文件密匙对生成链接：http://web.chacuo.net/netrsakeypairimport JSEncrypt from 'jsencrypt/bin/jsencrypt'// 密钥对生成 http://web.chacuo.net/netrsakeypairconst publicKey = '公钥'const privateKey = '私钥'// 加密
2022-01-17 14:45:02
4553
原创 JavaScript中数组的方法
改变数组：push、pop、shift、unshift、splice、sort、reverse替换数组（返回一个新数组，不改变原始数组）：filiter、concat、slice、join1.改变数组（1）push(添加的数据):将多个参数添加到数组的末尾 ,并返回数组的长度,原数组改变//push(添加的数据) 在数组后面添加，原数组改变，返回数组长度 console.log(arr)//[1,2,3] console.log(arr.push(4))//4
2022-01-09 16:59:01
318
原创 函数防抖、节流：避免短时间内频繁触发执行函数
1.函数防抖含义：当频繁触发某个事件时，在停止触发后的指定时间仅执行一次函数。举例：电脑1分钟无操作进入休眠状态，在60s内鼠标移动，重新计时一分钟实现：先清除定时器标识，再设置定时器执行操作需求：鼠标经过按钮，停止移动时，1s后仅打印一次 var btn=document.getElementById('btn') //防抖函数 const db = (fn, time) => { var timeout = null
2022-01-05 14:10:58
557
原创 算法：有一个500数的字符串转为数组，拼凑数组
let startstring = '-73, -73, -72, -72, -72, -72, -71, -71, -72, -72, -72, -72, -70, -68, -67, -67, -67, -67, -66, -66, -64, -63, -63, -62, -65, -67, -66, -66, -65, -66, -66, -67, -65, -66, -66, -66, -65, -66, -65, -66, -65, -66, -66, -65, -66, -66, -65, ..
2021-12-30 17:30:33
267
原创 在Vue中,关于echarts图表绘制的基本操作
步骤一：引入echarts.js文件步骤二：准备一个echarts实例图表的盒子（div必须存在width,height）步骤三：初始化echarts实例对象(参数，dom，决定图标最终呈现的位置)步骤四：准备配置项步骤五：将配置项设置给echarts实例对象<template><div class="com-container"><!-- 图表容器--> <div class="com-chart" ref="seller_ref"&
2021-12-30 14:17:36
761
原创 关于3D图表绘制，echarts和echarts-gl的兼容问题
推荐版本："echarts": "^4.9.0", "echarts-gl": "^1.1.2", "echarts": "^5.2.0", "echarts-gl": "^2.0.8"，
2021-12-30 14:08:58
1246
原创 请求类型get，delete，post，put 的用法(传参)
1.get/delete传参注意：（1）传参格式：`URL?key=value&key2=value2`（2）注意使用反引号，而不是单引号、双引号; `${}` 这个是模板字符串的用法，用于字符串与动态数据的拼接。（3）不需要data属性2.post/put传参（1）传入的参数query是一个对象{key：value，key2：value2}（2）需要data属性...
2021-12-23 15:51:46
9043
原创 前端知识点（九）：Webpack打包原理
webpack将项目看作一个整体，通过给定的一个主文件，webpack将从这个主文件开始找到项目中所有的依赖文件，使用loaders类处理，最后打包成一个或多个浏览器可识别的js文件。后续再补充
2021-12-16 11:59:58
940
原创 前端知识点（八）：web性能优化、浏览器缓存机制、浏览器从输入一个网址到页面渲染的全过程、回流和重绘
1.web性能优化（1）减少http请求资源和合并和压缩,合并css图片，开启服务端gzip压缩(压缩文本资源),lazyLoad(懒加载图片)资源的合并与压缩：（1）合并即减少http的请求数量，将多个js文件整合为一个js文件，将多个css文件整合为一个css文件，（2）压缩即减少http请求的大小，对html、css、js文件进行压缩（minify/gzip),对图片压缩（精灵图和webP--图片压缩成webp格式）（2）使用缓存HTTP协议缓存请求，离线缓存manif
2021-12-16 11:21:44
1822
原创 关于全屏显示，浏览器全屏、窗口/页面全屏
1.浏览器全屏（1）全屏显示var docElm = document.documentElement;//W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); }//FireFox else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }//Chrome等 else if (docE...
2021-12-16 09:32:01
1741
原创 在Vue中，Token封装
定义token和user字符串 封装setToken、getToken、removeToken以及getUser函数（获取用户信息） 设置token和user（用户信息）--在登录成功之后设置并跳转到首页，必须传入登录之后返回的token和用户资料 获取token 移除token--退出登录时调用并跳转到首页或登录页 获取用户信息--有需要时封装//1.定义token和user字符串const TokenKey = 'merchantToken';const USER = 'user...
2021-12-16 09:17:02
906
原创 关于Echarts图表的基本操作
关于echarts图表的配置请参考官方文档：Documentation - Apache ECharts1.步骤步骤一：引入echarts.js文件步骤二：准备一个echarts实例图表的盒子（div必须存在width,height）步骤三：初始化echarts实例对象(参数，dom，决定图标最终呈现的位置)步骤四：准备配置项步骤五：将配置项设置给echarts实例对象！！注意：除了配置项会变化，其他代码都是基本固定的2.通用的实现图表基本功能<templat
2021-12-16 09:10:11
849
原创 在Vue中，axios封装、api封装、调接口
1.封装请求（1）utils->request.js引入axios、token，定义请求头格式 定义基础路径 创建axios实例--配置路径 请求拦截器 响应拦截器 向外界暴露请求的基础路径和axios实例对象import axios from 'axios'import { getToken } from '@/utils/auth'axios.defaults.headers['Content-Type'] = 'application/json;charset=u.
2021-12-16 09:01:24
424
原创 前端知识点（七）：三栏布局--两端宽度固定，中间宽度自适应
方法一：浮动<div class="m1"> <div class="left">left1</div> <div class="right">right</div> <div class="main">main</div></div>左右模块各自左右浮动，中间模块设置margin使宽度自适应。中间模块最后加载。 .m1 { width:100%;..
2021-12-15 11:39:09
515
原创 前端知识点（六）：网页中有大量图片时加载很慢，如何优化？
1.图片懒加载在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，当图片到浏览器顶端的距离，小于图片到页面的距离时，优先加载。2.图片预加载将当前展示图片的前一张和后一张优先加载3.使用csssprite或者svgsprite...
2021-12-14 16:49:10
4527
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人