web
关注
分享
扫一扫
文章平均质量分 54
html+css+javascript系列技术分享
luffy5459
程序猿一枚，喜欢瞎捣鼓。
展开
-
node日志log4js库使用示例
log4js日志库使用示例。配置日志类型、格式化、日志级别。原创 2022-11-27 21:45:40 · 2097 阅读 · 0 评论 -
node-gyp编译c++编写的node扩展
node-gyp编译c++编写的node扩展，并简单调用。原创 2022-11-08 23:44:22 · 3129 阅读 · 0 评论 -
node通过node-java库调用java
node-java库介绍与使用，js调用java语言。原创 2022-11-07 22:49:05 · 2372 阅读 · 1 评论 -
vscode官方下载太慢解决办法
vscode.cdn.azure.cn更换官网地址加速vscode下载速度。原创 2022-11-04 22:58:27 · 32463 阅读 · 40 评论 -
正则表达式[^]的作用
正则表达式[^]的作用以及与.的区别。原创 2022-10-09 22:27:51 · 4074 阅读 · 0 评论 -
mac系统electron项目打包出现：Error: Exit code: ENOENT. spawn /usr/bin/python ENOENT
electron项目在mac下构建出现ENOENT. spawn /usr/bin/python ENOENT原创 2022-09-23 20:42:27 · 5189 阅读 · 0 评论 -
electron项目打包之后显示空白页面以及发送http请求地址错误
electron项目打包之后首页加载空白，ajax异步请求出现地址错误，跨域问题。原创 2022-09-21 23:07:25 · 8855 阅读 · 5 评论 -
javascript数组排序
javascript原生排序算法sort()，如果不带排序函数，那么就是默认按照升序排列。如果是数字类型就按照从小到大的顺序排列，如果是字符串，就按照字母顺序排列。原创 2022-09-20 22:49:22 · 957 阅读 · 0 评论 -
vue转electron项目以及使用fs报错：Module not found: Error: Can‘t resolve ‘fs‘ in解决办法
vue项目转electron手动操作需要在命令行下运行vue add electron-builder，在使用node依赖开发桌面程序的时候，需要把node集成进来，配置nodeIntegration变量。原创 2022-09-16 23:11:37 · 23390 阅读 · 5 评论 -
mac系统下node版本管理工具n的安装与使用
mac下node版本管理工具n介绍与简单使用。原创 2022-09-06 22:43:23 · 7610 阅读 · 2 评论 -
vue+echarts画甘特图
vue+echarts绘制甘特图。原创 2022-09-04 13:49:05 · 4227 阅读 · 11 评论 -
通过vue ui方式构建vue+electron项目
vue ui创建electron-vue项目原创 2022-09-03 11:00:16 · 664 阅读 · 0 评论 -
svg通过虚线画形状
stroke-dasharray属性可以让svg画出虚线的图形。原创 2022-09-01 21:59:34 · 3447 阅读 · 0 评论 -
node使用netcat依赖库做socket编程
node编程里面，默认有一个net库可以做socket编程，这里要说的是netcat这个库，思路都是一样的，甚至代码逻辑都很像。netcat可以支持tcp,udp，同时很方便的构造tcp client。 一般而言，tcp server需要监听一个端口port，等待客户端连接，当有连接上来的时候，就开始发送数据给客户端，这个数据发送一般是无限发送，类似一个死循环，就是说只要连接不断开，就会一直发送，这个一直，可以用定时触发。 对于通讯server而言，比如发送gps，这个肯定是一个...原创 2022-01-14 15:50:27 · 576 阅读 · 0 评论 -
百度地图api调用出现“APP Referer校验失败“错误
如题所示，在使用百度地图API的时候，出现App Referer校验失败。 这个是因为百度地图安全设置导致，解决办法就是进入百度地图开放平台，控制台下，切换到，应用管理，我的应用：选择应用，进入设置页面： 在设置页面，将Referer白名单选项，设置为*，表示容许所有的referer。 设置成功，再次请求百度地图api，正确返回结果：报错问题解决。 如果是苹果或者安卓应用，这里需要设置appid。思路是一样的。...原创 2021-10-28 10:57:33 · 35250 阅读 · 7 评论 -
electron报错：Uncaught Error: A dynamic link library (DLL) initialization routine failed
如题所示，我们在进行node+electron开发桌面应用的时候，经常会遇到这样的问题： 根据提示是因为ref依赖模块没有合适的编译版本，但是我们进行npm install的时候没有报错啊，这就是我们专门在electron中开发才会遇到的一个恶心的问题，ref不仅需要node版本匹配，还需要与electron版本匹配，所以，我们需要重新构建依赖，解决思路基本都相似：安装electron-rebuild依赖(npm install electron-rebuild -D)，然后运...原创 2021-01-26 16:07:51 · 2861 阅读 · 3 评论 -
react组件之间传值
看过一些文章介绍react组件之间传值，无外乎以下几种情况：父子组件之间相互传值，兄弟节点之间传值。最常见的就是父子组件，做法也很简单：就是在父组件中直接通过props属性的方式将函数或者值传给子组件。父组件有变化，相应的值就会体现在子组件中；子组件有动作发生，则调用函数，函数是父组件传递过来的，父组件就能获取子组件的值。 还有一种情况，就是兄弟节点之间要传值，这个还比较复杂，因为他们之间没有直接的交集，但是他们有一个共同的父组件，可以借助父组件传递值，所以还是回到了父子组件传值上。...原创 2021-01-13 15:17:51 · 925 阅读 · 0 评论 -
react项目启动报错:Uncaught TypeError: Cannot read property ‘forEach‘ of undefined
如题，react项目启动报错，具体信息，如下所示： 这个问题是因为浏览器安装了react-devtools扩展程序导致的，很多人的解决办法就是直接禁用react-devtools，我觉着也还行吧，但是就是感觉不是很好，我们安装这个玩意不就是为了方便查看react元素与编译之后的代码的么？这种办法似乎有点壮士断腕，我直接不用你了。 我个人根据报错堆栈信息，找到node_modules/@pmmmwh/react-refresh-webpack-plugin/cl...原创 2021-01-10 22:50:19 · 8406 阅读 · 7 评论 -
react+typescript项目构建
react项目构建可以很简单，但是如果是结合typescript，其实也不是很麻烦，官网也有很明确的说明。有两种办法： 1、直接构建带有typescript的react项目，我们需要增加额外的参数，模版不能使用默认的cra-template。而是使用cra-template-typescript。npx create-react-app tsreactdemo --template typescript 最早，我们创建typescript的react项目命令好像直接就是np...原创 2021-01-10 22:19:18 · 1867 阅读 · 1 评论 -
chrome浏览器安装react-devtools
react-devtools是react开发时的一个浏览器插件，对于各大主流高级浏览器都有扩展程序可以安装，官方的地址默认是https://github.com/facebook/react-devtools，但是后来它有集成到了react项目中，所以通过源码编译安装起来给人一种错觉，到底是安装react-devtools还是react。如果是直接git clone，还需要切换分支v3，然后构建。 这里推荐直接通过码云上的react-devtools仓库来获取源代码进行构建，原因一个是克隆...原创 2021-01-09 23:22:52 · 1843 阅读 · 0 评论 -
electron项目构建打包缺少dll文件的问题解决办法
最近，在做electron项目中，使用了第三方dll，开发环境运行一切正常，可是当我们打包，最后生成的可执行程序再执行，发现调用dll总是不成功，猜测是少了dll。 后来发现果真是路径问题，我们开发环境，可以通过path.resolve()活着path.join()来指定任意目录下的dll，但是问题来了，到了构建生产环境的时候，我们想象的目录并没有按照开发环境的目录来进行打包了。 很明显的一条就是，我们在根目录下的package.json等文件就没有build到项目的根目录下。构...原创 2020-11-30 10:18:23 · 3201 阅读 · 1 评论 -
electron-vue与vuetify整合出现报错：If you‘re seeing “$attrs is readonly“
如题所示，正常情况下electron-vue与vuetify的整合，因为就是vue与vuetify的整合，按照一般的推荐方法，基本不会出错，但是，这里因为electron-vue项目采用了webpack打包构建，导致了问题： 有的说是electron版本问题，有的说是vue-router问题，总之，我遇到的这个问题还是不太一样。 直到看到github上又类似的issue:https://github.com/vuetifyjs/vuetify/discussions/...原创 2020-11-14 17:47:38 · 459 阅读 · 1 评论 -
通过vue指令创建electron-vue模板项目出现一直“downloading template“问题
今天试了一下，vue init simulatedgreg/electron-vue vueapp的时候，在命令行下一直downloading template，让我很懊恼。 原来vue init创建的时候，默认是从github下载模板，而且还会把原来path/to/.vue-templates目录下的simulatedgreg-electron-vue模板目录给删除了，这样网络不好的情况下就一直downloading template。 如下截图所示，默认初始化的时候，竟然把原...原创 2020-11-14 17:22:11 · 9802 阅读 · 1 评论 -
nodejs利用ffi库调用windows系统user32函数模拟用户登录操作
如题所示，一般的桌面程序，用户登录很简单，就是找到用户名和密码输入框，输入相应的用户名和密码，然后点击“登录”按钮，完成登录操作。这是人为操作的步骤，如果这些动作通过程序来完成，比如调用系统输入和点击事件，同样可以达到登录的效果。 我们可以利用user32提供的SendMessageW函数，发送设置文本指令和鼠标点击指令，让程序完成上述认为操作。 难点就是找到窗口，然后找到窗口里面的组件，然后给对应的“用户名”组件设置文本，给“密码组件”设置文本，点击“登录”提交按钮。 ...原创 2020-11-13 10:03:05 · 2162 阅读 · 0 评论 -
nodejs利用ffi库调用windows系统user32库函数获取桌面程序窗口大小
ffi库是npm提供的操作windows系统库函数的依赖库，安装过程会比较麻烦，需要编译，可能需要npm全局安装windows-build-tools，如何安装，可以参照这里。 运行本次示例，需要安装ffi,ref,ref-struct等依赖。npm install ffi ref ref-struct --save 这里根据user32提供的FindWindowW,GetWindowRect方法来获取桌面程序窗口大小，代码如下： getwindowrect.j...原创 2020-11-12 17:41:58 · 3694 阅读 · 1 评论 -
js属性名用变量代替
在前端中，我们有时候需要利用变量名来设置属性名，虽然不是很常见，但是也是一个应用场景。这时候，我们如果想当然的，直接使用变量来设置，那么可能不会达到我们想要的结果的。我们先来通过示例来演示一下。 假设，我们希望设置user = {name:"buejee"}，变量a = "name"，我们直接用变量设置： 得到的结果出乎意料，并不是我们想要的{name:"buejee"}，而是{a:"buejee"}。 1、如下所示，我们改变一下，通过中括号[]方式设置...原创 2020-11-12 15:59:10 · 1953 阅读 · 1 评论 -
vue+vuetify构建简单消息确认框
vue框架自己好像没有弹出框，而vuetify有弹出框v-dialog，没有确认框confirm，虽然确认框本身就是弹出框，但是弹出框的功能有个特点，就是确定做一件事情，而取消了就是做另一件事情，类似一个Promise要做的事情。 今天主要就是要自定义一个确认框，我们利用组件的思维，先定义组件结构，然后定义组件如何配合文档document工作，最后声明和调用。按照这个思路，我们分如下几步： 1、定义组件结构体src/components/Confirm.vue<tem...原创 2020-10-27 17:21:01 · 2638 阅读 · 0 评论 -
vue+vuetify表格控件v-data-table使用自定义列渲染
这里先说明一下vue项目中使用vuetify框架进行整合的办法： 1、加入依赖 npm install vuetify --save 2、加入开发依赖 npm install sass sass-loader deepmerge --save-dev 3、在webpack.base.config.js中加入如下配置：module.exports = { module: rules:[ { test: /\.s(c|a)ss$/, us...原创 2020-10-20 19:50:41 · 4734 阅读 · 5 评论 -
electron+vue项目安装vue-devtools插件
这里记录一下自己安装过程中遇到的问题： 1、首先需要安装vue-devtools，遇到了源码编译构建的时候的webpack,webpack-cli反复提示缺失的问题。 这个问题很烦: a git clonehttps://github.com/vuejs/vue-devtools 这一步其实有个巨坑，官方的代码默认是dev分支，我们需要切换到master分支，才能顺利的进行build。切换分支需要在命令行下执行如下指令即可：git checkout ...原创 2020-10-16 18:09:20 · 6572 阅读 · 1 评论 -
React Hook “useState“ is called in function “xxx“ which is neither a React function component or解决办法
如题所示，在React开发中，我们会自定义一些函数，比如hook函数，或者组件，当我们使用了useState,useEffect等这些hook函数的时候，可能会报错，如下所示，是一个完整的报错信息截图： 报错信息很明确，就是loadData函数既不是一个React组件，也不是一个Hook函数。React默认组件是使用的大写字母开头，而自定义Hook函数使用的是use开头，所以我们这里需要修改有两种办法，就是将loadData修改为LoadData或者useLoadData，或者useD...原创 2020-08-27 14:34:07 · 18954 阅读 · 0 评论 -
Vue中百度地图的应用
百度地图对于vue项目也做了依赖，他就是vue-baidu-map，我们在vue项目中，只需要安装vue-baidu-map依赖即可使用，另外，百度地图javascript api的使用，还是需要注册开发者，申请一个key，就是这里需要使用的ak。npm install vue-baidu-map oryarn add vue-baidu-map 在main.js中，声明使用baidumap，并需要加入ak参数。 在页面上使用baidumap，...原创 2020-08-14 12:13:31 · 844 阅读 · 0 评论 -
去掉webpack脚手架构建的vue项目中的eslint检查
eslint是一个语法格式检测的工具，对于规范开发有好处，培养严格的书写习惯，但是对于新手来说，非常的痛苦，有时候没有语法错误，仅仅是格式中tab,space区分不严格或者少了一个space，多了两个space，就会报错，甚至编译不过，出现警告，很烦人。 相信大家可能都遇到过如下所示的警告： Unexpected tab character Mixed spaces and tabs Trailing spaces not allowed 在<scr...原创 2020-08-13 17:09:25 · 2193 阅读 · 0 评论 -
react+antd form 警告Warning: [antd: Form.Item] `children` is array of render props cannot have `name`.
如题所示，该警告出现在react与antd使用中，我们页面表单form中使用了Form.Item包含输入框，在username输入框的下面，加入了一行提示文字，代码如下：import React from 'react'import {Card,Form,Input,Button} from 'antd'import 'antd/dist/antd.css'const LoginForm = () => { const onFinish = values =>{ co...原创 2020-07-14 15:01:17 · 25395 阅读 · 1 评论 -
nodejs遍历一个目录下所有的文件
这个问题是我在实际中遇到的，意思很明确，一个目录下可能还嵌套子目录，我需要遍历出该目录下所有的文件，其实思路很简单，就是利用递归的思路，定义一个函数，传入一个目录路径参数，开始遍历该目录下的文件，如果遇到的是目录，则继续调用该函数，直到所有的目录遍历完成，结束。 这里有个问题，就是我们需要通过这个函数得到所有的文件，而不仅仅是遍历一遍。遍历很好做，但是要通过这个函数返回一个数组，数组中就是所有的文件，这就有点麻烦了。遍历目录就是需要调用fs.readdirSync(path)函数。判断文件...原创 2020-05-14 00:12:33 · 11529 阅读 · 0 评论 -
windows下安装Node版本管理器nvm
笔者前面有介绍linuxmint下安装Node版本管理器nvm的文章，这里介绍在Windows下的安装，通过nvm的安装，我们可以很方便的下载、安装、切换node版本。在windows上的安装与linux有些区别，这里需要下载一个nvm的压缩包，然后解压缩，最后配置环境变量。 1、下载windows版本的nvm，下载地址：https://github.com/coreybutle...原创 2020-05-05 18:27:23 · 1237 阅读 · 0 评论 -
nodejs借助scp2依赖实现windows传输文件到linux
前面提到过，java语言中可以通过scp客户端从windows向linux传输文件，而nodejs中也有scp2这个依赖模块，他可以实现从windows上传文件到linux。 我们可以构建一个测试示例，先安装依赖： $ npm install scp2 --save 编写简单的代码：var scp2 = require("scp2")scp...原创 2020-05-05 11:23:01 · 2180 阅读 · 1 评论 -
nodejs中exports与module.exports区别记录
以前，一直以为，这两者其实差不多的意思，直到今天偶然的一写，发现两者还是有区别的，我们暴露多个方法的示例： 这种方法，肯定是没有问题的，我们调用的时候，也很方便： 另外，这里可以通过module.exports来将add,minus两个对象作为暴露对象：module.exports = { add:add, ...原创 2020-05-03 16:59:23 · 502 阅读 · 0 评论 -
vue构建electron桌面应用
electron桌面应用，可以结合前端框架vue使用，而我们也可以通过vue工具来构建electron的应用，这就需要我们全局安装vue-cli，通过vue构建electron应用的脚手架，推荐使用SimulatedGREG/electron-vue，这个与我们的webpack构建方式很像，也是vue init simulatedgreg/electron-vue projectname。...原创 2020-05-01 22:38:18 · 5078 阅读 · 0 评论 -
Promise结合reduce构建顺序执行队列
Promise是一个解决函数异步执行的对象，有了这个对象，我们可以构造异步执行的操作。Promise对象可以通过链式调用的方式进行异步操作，语法如下： 如下代码，是一个简单的异步方法。new Promise((resolve,reject)=>{ console.log("promise-> hello,world.this is promise....原创 2020-04-29 10:34:41 · 4854 阅读 · 1 评论 -
linuxmint下安装nvm来管理node版本
nvm是一个node版本控制的工具，他可以查看可以安装的node版本，安装node，以及切换node版本，传统的node安装，我们是下载压缩包，然后指定环境变量，当我们需要升级node的时候，需要重新下载node压缩包，更新或者回退版本显得有些麻烦，而使用nvm可以安装多个node，使用哪一个，可以通过nvm use v10.20.0的方法来切换。 linuxmint是ubunt...原创 2020-04-17 12:16:22 · 1236 阅读 · 0 评论