![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
项目
龙易安
这个作者很懒,什么都没留下…
展开
-
require引入资源时,资源路径为变量
1 场景:<img src="" alt="" />在vue项目中,使用img标签的src引入图片时,使用本地电脑图片的绝对路径(不能为相对路径),使用同源的网络图片,使用require(’./warning.png’)引入相对路径的图片var icon='./warning.png'那么如果让src中require一个变量,这个变量为图片路径的字符串,结果是报错不行的。<img :src="require(icon)" alt="" />2、解决怎么解原创 2022-01-05 08:55:46 · 3025 阅读 · 2 评论 -
pc端调试使用微信环境
1、环境的判断通过navigator.userAgent属性获取当前的浏览器类型/操作系统等信息const verdictUsergent = function () { // 1 :微信 2 :安卓手机银行 3 :ios手机银行 0 :非法 var userAgent = navigator.userAgent.toLowerCase() if (userAgent.match(/MicroMessenger/i) == 'micromessenger') {原创 2021-11-02 19:48:15 · 1761 阅读 · 0 评论 -
使用Promise封装的请求方法
export function fake(n) { return new Promise((resolve, reject) => { setTimeout(() => { if (n === 0) { reject('error') } else { resolve(n) } }, 2000) }).catch(原创 2021-09-06 09:04:24 · 244 阅读 · 0 评论 -
检查ip地址是否合法
ip地址的格式一般为’192.163.1.2’ function isIP(ip) { var reg = /^(\d{1}|[1-9]{1}\d{1}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9]{1}\d{1}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9]{1}\d{1}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9]{1}\d{1}|1\d\d|2[0-4]\d|25[0-5])$/ return原创 2021-08-17 10:07:49 · 242 阅读 · 0 评论 -
生成随机字符串
在某些场景,需要生成一个n位长度的随机字符串,作为唯一的id名。function randomId(n) { const str = 'abcdefghijklmnopqrstuvwxyz0123456789'; let result = ''; for (let i = 0; i < n; i++) { result += str[parseInt(Math.random() * str.length)]; } return result;}...原创 2021-08-17 10:04:14 · 134 阅读 · 0 评论 -
时间格式化函数
第一个参数date为时间对象或时间数值;第二个参数为格式字符串,默认为’yyyy-MM-dd hh:mmm:ss’,除了yyyy、MM等这些字符,其它的字符可随意替换。 function DateFormat (date, fmt='yyyy-MM-dd hh:mmm:ss') { if(!(date instanceof Date)){ date=Number(date); if(!isNaN(date)){ date=new Date(date原创 2021-08-17 09:52:55 · 517 阅读 · 0 评论 -
创建tinyDDP连接
创建DDP连接原创 2021-07-14 15:09:37 · 382 阅读 · 0 评论 -
将JSON数据转为elementUI的el-tree组件使用的数据
element提供了el-tree组件,用于展示树形数据,必须为组件提供一个data属性,表示要展示的数据源。data数据的格式为一个数组,数组的每一个项是一个对象,表示展示树的每一项;每个对象中必须有一个label属性,可以没有children属性,它是这个项下的子树,children必须是一个数组,数组的每项是一个展示项。 data: [{ label: '一级 1', children: [{ label: '二级 1-1',原创 2021-06-25 09:00:00 · 1685 阅读 · 1 评论 -
NW使用SDK版
在网上下载NW的sdk版,解压;将项目中的依赖中的nw文件夹中的nwjs文件夹,替换为sdk的解压文件夹原创 2021-06-24 09:40:42 · 535 阅读 · 0 评论 -
关于undefind与0
在判断值存不存在时,切记不要用如下方式来判断,if(val){...}因为当val为0时,val就会被当作不存在;也不能用val!=undefined来判断,一定要用val!==undefined来做判断。原创 2021-06-22 14:30:21 · 254 阅读 · 0 评论 -
使eslint生效
1、全局按照eslintnpm install eslint -g2、vscode按照eslint插件3、在vscode的设置中,搜索eslint4、在vscode的settings.json文件中,"editor.codeActionsOnSave": { "source.fixAll.eslint": true }5、eslint的rulesrules: { // allow async-await 'no-console': 'off',原创 2021-06-16 12:35:47 · 717 阅读 · 0 评论 -
head中三大标签
head中的三大标签,有这三个标签,网页才容易为爬虫所爬到:title标签,定义文档的标题<title>Page Title</title>description定义描述<meta name="description" content="">keywords定义页面的关键字 <meta name="keywords" content="">...原创 2021-05-17 20:50:37 · 148 阅读 · 0 评论 -
npm设置淘宝源
1、修改npm为淘宝源npm config set registry https://registry.npm.taobao.org2、还原npm config set registry https://registry.npmjs.org原创 2021-05-15 18:17:29 · 2417 阅读 · 0 评论 -
vscode操作
1、快速生成标签生成10个class为item的div标签,内容依次为1、2、3、4.。。。 div{$}.item*102、同时选中相同内容先选中一份目标内容,再ctrl+shift+L组合键,就将代码中所有相同的目标内容全部选中了。3、同时在多行放置光标第一种点击出现光标后,按住鼠标中键向下拉。第二种点击第一个光标,按住shift+alt键点击第二个地方。第三种按住Ctrl + Alt,再按键盘上的上或下键,可以使一列上出现多个光标选中一段文字,按shift+alt+i,在每原创 2021-05-01 10:22:35 · 1439 阅读 · 0 评论 -
重写console.log方法
为了在生产阶段不要将console.log方法打印的东西打印在后台,而是将它们写在日志文件上,我们可以重写congsole.log方法,包括重写console.error、console.warn方法。1、重写方式1、使用一个变量接收console.log方法 var fa=console.log; console.log=function(){ fa(...arguments) }3、第二种方法使用立即执行函数 console.log=(function (oriLogFunc原创 2021-04-29 11:48:59 · 4236 阅读 · 0 评论 -
在项目中将打印日志保存到本地
在项目中将打印日志保存到本地原创 2021-04-23 08:41:07 · 1236 阅读 · 0 评论 -
在node中调用python脚本
使用场景:在某测试项目需要用到eload仪器为待测产品添加载荷,然后用dmm仪器测量电压,eload仪器与dmm仪器与电脑的连接都是usb接口,那么软件如何控制这两个usb连接的仪器呢。通过搜索发现npm上有一个usb的依赖包,它可以查询到与电脑相连接的usb设备,但是我无法向usb设备发送命令。所以我只能通过python脚本向usb设备发命令,然后在node中再调用python脚本。1、准备运行环境,获取python路径python的运行需要有python的环境,软件安装包可能安装在没有pyth原创 2021-04-21 17:49:40 · 2071 阅读 · 0 评论 -
固定table列表的表头
当一个列表纵向内容过多时,需要固定表头,方便滚轮滚动时查看表格。Element提供的Table 表格组件,只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码<el-table :data="tableData" height="250" >但是,这个表格的高度就只能是固定死的。如果表格需要随着页面响应式地变化高度,此种方法就有其局限性了。我们在此基础上增加一些逻辑使表格满足响应式变化高度的要求。1、为el-table原创 2021-04-21 17:48:53 · 570 阅读 · 0 评论 -
实现table表格100%填充
表格中有一列是结果列,需要根据测试结果显示不同的背景色,背景色要求100%填充整个格子在这里插入一个template<el-table-column label="Result"> <template slot-scope="scope"> <div class="result" :class=" scope.row.result === ''原创 2021-04-21 17:47:38 · 1501 阅读 · 0 评论 -
同一时间只发送一个网口命令
项目中软件(本地端)与xavier板(远程端)的连接是使用tcp网口连接,发送命令是在本地端使用write往板中写网口命令,本地端接收返回消息是用data事件监听。既然本地端接收返回消息是通过监听data事件,那么只要是远程端发过来消息,都会触发。如果同时向远程端发送多个命令,并且这几个命令都有返回,那么本地端将不知道哪个返回对应的是哪个发出;返回是一个流,有时有多段组成,多个命令的一起返回将绕在一起所以在发送一个命令之后,在得到返回完成之前,不要再发第二个命令,在此过程中使前端界面保持lo原创 2021-04-21 14:52:49 · 137 阅读 · 0 评论 -
从本地电脑获取文件路径的组件
封装一个选取文件的组件。我们需要的功能只是点击后选择文件,获取文件在本地电脑的绝对路径,然后我们用这个路径自己去上传。1、结构1、放一个el-input组件,用于显示选取的文件的路径字符串element的el-input组件只提供了关于输入文本的功能,没有提供选择文件的功能。设置readonly属性,使它只能用于显示,而不能输入;v-model绑定路径字符串2、第一个el-button组件,是嵌套在el-input的插槽,用于点击后触发选取文件为它绑定点击事件,添加native事件修饰符原创 2021-04-21 14:20:57 · 3291 阅读 · 0 评论 -
登录时的记住功能
基于数据库存储实现的记住功能在登录时,需要提供一个勾选框,是否记住ip和端口。如果勾选记住,我们将ip和端口信息存储到数据库中,下次启动软件时,自动填写上去;1、从数据库获取用户信息用户信息包括用户名,密码,是否记住;1、定义一个getLoginInfo方法用于从数据库中获取用户登录信息;在数据库中直接定义一个数据库用于存储用户信息,直接获取然后看是否要记住,是记住,就把数据给到界面填充。getLoginInfo() { let info = LoginInfo.find().f原创 2021-04-21 08:34:33 · 291 阅读 · 0 评论 -
MPanelCtl项目中创建文件夹
在下载文件时,我们最好将这些文件存放在一个指定的文件夹中。如果在项目中的根目录下创建一个文件夹存放,在打包时需要将这个文件夹一起打包出去。一些电脑存在权限问题,无法写入文件。存放在c盘用户目录下,一般都可以写入。那么在项目启动时,我们就需要用户目录下合适的地方创建这么一个文件夹。每次下载时都要检查一下有没有这个文件夹(可能被手动删除了),没有就创建。文件夹操作相关代码全部放在一个单独的文件中;1、准备工作首先从项目的package.json文件中导入项目的名字import {name} f原创 2021-04-21 08:32:06 · 197 阅读 · 0 评论 -
点击按钮后打开本地文件夹
实现点击超链接打开本地文件夹原创 2021-04-21 08:30:26 · 2231 阅读 · 0 评论 -
通过ssh协议下载和上传文件
通过使用SSH,你可以把所有传输的数据进行加密,这样"中间人"这种攻击方式就不可能实现了,而且也能够防止DNS欺骗和IP欺骗。使用SSH,还有一个额外的好处就是传输的数据是经过压缩的,所以可以加快传输的速度。所谓“中间人”的攻击方式, 就是“中间人”冒充真正的服务器接收你传给服务器的数据,然后再冒充你把数据传给真正的服务器。服务器和你之间的数据传送被“中间人”一转手做了手脚之后,就会出现很严重的问题。流程:我们需要用到两个包ssh2-sftp-client和ssh2...原创 2021-04-20 09:55:23 · 1803 阅读 · 0 评论 -
封装观察者模式Observer类
在Meteor项目中的观察者模式封装var _manager = {};var Observer = { regist: function (eventName, fn) { if (typeof _manager[eventName] === 'undefined') { _manager[eventName] = [fn]; } else { _manager[eventName].push(fn); } }, fire: function原创 2021-04-20 08:49:10 · 268 阅读 · 0 评论 -
cookie、localStorage和sessionStorage的区别
1、存储大小不同cookie存储大小不能超过4k;localStorage和sessionStorage存储大小能达到5M。2、数据有效期cookie可以设置过期时间sessionStorage在页面或浏览器关闭时就清除了;localStorage会一直存在,需要手动清除。3、作用域不同sessionStorage只在当前页面有效cookie和localStorage在不同页面也会存在4、webstorage支持事件的通知机制可以在更新数据时发送消息给事件监听者。5、与服务端通信c原创 2021-04-18 13:39:30 · 123 阅读 · 0 评论 -
身份验证
身份验证解决了http请求无状态的问题。身份验证有两种解决方案Session+CookieJWT一、Session+Cookie1、登录时,后端发布一个加密字符串(包含用户相关信息)给前端,自动放在了cookie中;2、前端在调用其他接口时,将这个加密字符串作为一个参数传递给服务器(cookie自动传递);3、服务器拿到这个字符串解密,根据权限进行验证。例如:在没有登录的情况下,是不能获取到数据库中的一些数据的。1、使用session需要先安装两个插件npm install cook原创 2021-04-18 12:57:53 · 237 阅读 · 0 评论 -
实现socket长连接的三种方式
长连接(socket)和短连接(ajax)。长连接不存在跨域问题。实现socket的三种方式:net,node的内置模块socket.io兼容性好,但是要先引入websocketwebsocket是h5新增,低版本浏览器不兼容。长连接的使用场景:实时刷新如果前端使用轮询,那么前端和服务端都要耗费资源,如果使用socket长连接,那么就只需服务端发送就可以了。服务器端发起数据ajax是前端主动往后端发送消息,后端无法主动往前端发送消息(服务器主动推送消息)。socket的步骤原创 2021-04-17 22:25:17 · 7021 阅读 · 0 评论 -
解决跨域的方式
1、同源策略协议、域名、端口号一致就称为同源。同源策略是浏览器的一种安全策略。2、实现跨域的4种方式使协议、域名、端口号一致corsjsop代理这四种中只有第四种代理不需要后端参与,前端就能搞定。1、使用cors解决跨域有两种方式第一种,设置头文件信息app.all表示所有的请求,都会走这个中间件处理。app.all("*",function(req,res,next){ //设置允许跨域的域名,*代表允许任意域名跨域 res.header("Access-原创 2021-04-17 21:27:34 · 268 阅读 · 0 评论 -
使用Plotly.js绘制图形
Plotly.js是一个绘图库,它有多种图表类型,包括 3D 图表,统计图表,和 SVG 地图,它具有较快快的性能。适合绘制数据量较大大的图形。而且它是免费的。在示波器显示项目中,前端不停地调用服务端的dll动态库后,向设备请求波形数据,波形数据返回回来之后再发给前端,然后需要将数据绘制成图形显示再屏幕上。波形数据的点数一般在2000-4000个点,我们使用Plotly.js来实现图形展示。1、安装npm install plotly.js-dist2、引入import Plotly from原创 2021-04-15 17:39:35 · 4885 阅读 · 1 评论 -
让事件在捕获阶段执行
让事件在捕获阶段执行,而不在冒泡阶段执行的使用场景原创 2021-04-15 15:31:54 · 993 阅读 · 0 评论 -
Meteor项目中封装Notice用于服务端和前端通信
1、前端通知服务端前端通知服务端,并传参数到服务端。Meteor提供了methods机制,在客户端发起调用,在客服端执行,然后指定的方法也会在服务端执行。Meteor.call(meteorMethodName, arg1,arg2, (error, result) => {})meteorMethodName :必须指定的,是要调用的method名称,它必须在服务端的methods中已经定义了,否正会报错。arg1,arg2 :要传给method的参数,可选,可以写多个。最后的函数时me原创 2021-04-12 12:28:45 · 232 阅读 · 0 评论 -
Vuex中的数据状态持久化保存,使用vuex-persistedstate插件
vuex可以进行全局的状态管理,但刷新后刷新后数据会消失。我们可以结合本地存储做到数据状态持久化,使用vuex-persistedstate插件,将vuex中需要持久化保存的数据保存到本地存储当中。安装npm install --save vuex-persistedstate引入在vuex的index.js中引入import createPersistedState from "vuex-persistedstate";使用将createPersistedState方法在原创 2021-04-11 20:54:11 · 1275 阅读 · 0 评论 -
打开页面过程中显示一个打开的进度条,在Vue项目中使用nprogress
在打开或切换到一个新的页面的时候,有时会发起一些请求去请求数据,然后渲染页面,这一个过程是需要耗费时间的,所以有的页面会设置一个loading效果,一种是在页面中央放一个不停地转圈圈。 除了这种方式,我们还可以在页面顶部显示一个进度条,表示loading效果。1、安装npm install --save nprogress2、引入在main.js中引入,得到一个全局的对象import NProgress from "nprogress"import 'nprogress/nprogre原创 2021-04-11 19:57:59 · 323 阅读 · 0 评论 -
在Vue项目中使用vue-table-with-tree-grid
elementUI中并没有提供树形表格插件,所以需要依赖于第三方的插件。我们使用vue-table-with-tree-grid。1、安装npm i vue-table-with-tree-grid -S2、可以用Vue.use注册在main.js中import ZkTable from 'vue-table-with-tree-grid'Vue.use(ZkTable)3、也可以用Vue.component注册为全局组件也是在main.js中import ZkTable from '原创 2021-04-11 14:36:24 · 1591 阅读 · 0 评论 -
在Vue项目中使用富文本编辑器vue-quill-editor
1、首先安装npm install vue-quill-editor --save2、可以注册为全局可用的组件import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor, /* { default globa原创 2021-04-11 13:26:47 · 190 阅读 · 0 评论 -
在ElementUI的上传组件el-upload中设置header
ElementUI的上传组件设置header原创 2021-04-11 12:40:48 · 23379 阅读 · 5 评论