node
文章平均质量分 83
我的小英短
Q版前端开发攻城狮
展开
-
使用cURL和JavaScript操作线上Airtable API图文详解
带有cURL和JavaScript的Airtable API教程如果您正在寻找一种快速简便的方式来保存应用程序数据,那么Airtable就是您的最佳选择。Airtable基本上是一个像数据库一样的Excel工作表,具有大量的灵活性和用于检查/创建数据的GUI。目录基础入门APIPostman中带有HTTP请求的CRUD操作使用JavaScript进行CRUD操作小结最近,我已经将Airtable用作我的一些演示应用程序的数据库,我喜欢它。例如,还有其他一些不错的选择,例如Firebas原创 2020-05-26 15:47:46 · 1564 阅读 · 0 评论 -
Deno 与 Node 两款前端神器的争锋与较量
Deno 正式发布啦,还不清楚 Deno和 Node 的区别嘛?那就赶紧 take part in ....前言Deno 已经正式发布了????!我说这句话时候,是不是很多前端 和 NodeJS 工(码)程(农)师已经按不住自己的40米大刀了。心中的不仅感慨前端是真的会造轮子,有了 node 还不够吗,还没学会 node 又搞了个 deno,node 和 deno 啥区别?!的确,deno 和 node 形态很相似,要解决的问题似乎也相同,那他们到底有啥区别,让我们走进本篇文章,一探究竟。Deno原创 2020-05-25 16:57:20 · 943 阅读 · 1 评论 -
NW.JS 客户端开发入坑指南
基础概述NW.js 是基于 Chromium 和 Node.js 运行的, 以前也叫nodeWebkit。这就给了你使用HTML和JavaScript来制作桌面应用的可能。在应用里你可以直接调用Node.js的各种api以及现有的第三方包。因为Chromium和 Node.js 的跨平台,那么你的应用也是可以跨平台的。Getting Started1、安装对应的模块包:cnpm install nw nw-builder -Snw :基于Chromium和io.js的应用程序运行时。用于构建将原创 2020-05-21 13:43:51 · 942 阅读 · 0 评论 -
深入理解NodeJS事件循环机制
导读ALL THE TIME,我们写的的大部分javascript代码都是在浏览器环境下编译运行的,因此可能我们对浏览器的事件循环机制了解比Node.JS的事件循环更深入一些,但是最近写开始深入NodeJS学习的时候,发现NodeJS的事件循环机制和浏览器端有很大的区别,特此记录来深入的学习了下,以帮助自己及小伙伴们忘记后查阅及理解。...原创 2019-11-18 15:19:20 · 1111 阅读 · 0 评论 -
Node.js库puppeteer接口及常用API总结
导读这篇文章,主要用于收集整理常用的Puppeteer的一些常用API操作,自动化操作,爬虫测试,基础使用等等。当然至于是什么是Puppeteer呢,我们来看下官方介绍:Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面...原创 2019-11-15 14:55:13 · 3046 阅读 · 0 评论 -
Selenium-webdriver Node API 调用总结
准备工作node.js 的安装和配置selenium-webdriver 安装驱动:chromedriver(建议)、IEdriver、geckodriver一、基本使用const {Builder, By, Key, until, Button} = require("selenium-webdriver");let broswer = new Builder().forBrow...原创 2019-10-11 22:56:59 · 1321 阅读 · 0 评论 -
使用gulp+browserify+babelify-css+babelify构建轻量级react开发环境
使用gulp+browserify+browserify+babelify-css+babelify构建轻量级react开发环境导读在react项目开发脚手架选型中,一般大多数情况都会选择create-react-app这款流行的脚手架工具,但是针对一些比较小的项目,个人建议还是动手搭建建一个小型且轻量的构建工具自用比较合适,下面我们使用gulp,配合browserify,搭建react...原创 2019-07-03 16:13:43 · 1716 阅读 · 0 评论 -
webpack 创建个人的第三方依赖library
webpack 创建个人的第三方依赖 library导读除了打包应用程序代码,webpack 还可以用于打包 JavaScript library,所以我们可以使用webpack很方便的打包我们的library项目项目地址:https://github.com/RiversCoder/webpack-test项目目录 |- webpack.config.js |- package...原创 2019-06-27 16:16:56 · 1544 阅读 · 0 评论 -
webpack 引用打包第三方全局依赖3种方式
webpack 引用打包第三方全局依赖导读webpack 可以识别 ES6 模块语法、CommonJS 或 AMD 规范编写的模块。然而,一些第三方的库(library)可能会引用一些全局依赖(例如 jQuery 中的 $)项目地址:https://github.com/RiversCoder/webpack-test项目目录 |- webpack.config.js |- pa...原创 2019-07-02 21:04:15 · 8340 阅读 · 0 评论 -
使用React+exprss+Mockjs开发自适应伸缩响应列表分页组件
使用React+Mockjs开发自适应伸缩列表分页组件项目预览项目技术栈create-react-app脚手架express 后台服务,跨域设置,模拟数据库limit操作mockjs根据指定数据结构生成随机数据项目目录src目录| App.css| App.js| index.js|+---components +---Pagination |...原创 2019-07-07 22:05:10 · 1022 阅读 · 0 评论 -
webpack 引入の公共模块代码分离及懒加载
webpack 公共引入模块代码分离及懒加载导读在该篇博文中,我们将分别部署生产和开发的webpack打包编译以及项目运行环境项目地址:https://github.com/RiversCoder/webpack-test基本的代码分离案例在src目录下编辑index.js如下:import _ from 'lodash' // index.js中引入了lodashimpor...原创 2019-06-18 15:48:42 · 1383 阅读 · 0 评论 -
webpack开发生产环境配置
webpack 生产/线上环境构建导读在该篇博文中,我们将分别部署生产和开发的webpack打包编译以及项目运行环境项目地址:https://github.com/RiversCoder/webpack-test配置文件安装webpack-mergecnpm install --save-dev webpack-merge在项目主目录中新建如下几个js文件:D:\me\...原创 2019-06-17 14:14:16 · 1193 阅读 · 0 评论 -
webpack安装和基本构建
webpack指南梳理学习 - 安装和基本构建导读webpack是前端开发过程中使用超多,用户量超广的一款前端开发打包编译工具,用起来让你欲罢不能,爱不释手。作为目前最火的打包工具,它又是如何使用工作的呢?接下来,我们来通过官网的指南学习梳理webpack的基础知识,掌握webpack的常用功能知识点webpack安装前提在学习之前,我相信你们已经基本掌握前端的相关基础知识点,而且本地电...原创 2019-06-11 10:57:26 · 760 阅读 · 0 评论 -
webpack 缓存问题处理解决与性能优化方案
webpack 缓存问题处理解决方案导读在该篇博文中,我们将逐步实现文件hash后缀的输出,修改某个文件,才会对应输出修改该文件的hash后缀,同时满足性能优化,客服端服务端代码同步更新项目地址:https://github.com/RiversCoder/webpack-test官网介绍在之前的指南案例中,我们使用 webpack 来打包我们的模块化后的应用程序,webpack 会生...原创 2019-06-20 17:04:18 · 2608 阅读 · 0 评论 -
如何制作一个gulp生态插件?gulp插件实战案例开发
在使用`gulp`构建前端项目的时候,可能会需要一些功能,但这些功能目前没有`gulp`插件实现,所以可能需要自己写一个插件来满足开发使用。但是,如何开发一款`gulp`插件呢?原创 2019-06-04 14:46:20 · 978 阅读 · 0 评论 -
使用webpack打包编译TypeScript包括静态资源引入声明配置
使用webpack打包编译TypeScript导读TypeScript 是 JavaScript 的超集,为其增加了类型声明验证,可以编译为 JavaScript 代码。这篇博文里我们将会学习如何集成 webpack 跟 TypeScript。项目地址:https://github.com/RiversCoder/webpack-test安装ts开发依赖cnpm install --D...原创 2019-07-05 10:55:00 · 5205 阅读 · 0 评论 -
编写一款自定义修改html文件中的img、script、link hash后缀的简单gulp插件
编写一款自定义修改html文件中的img、script、html hash后缀的简单插件我们这篇文章将根据我们自己的一些项目需求,来编写一个本地gulp插件,来满足我们的构建开发需求,主要需求就是在编译html的同时,对html文件中的静态资源引用添加随机hash后缀。插件代码实现index.jsvar through = require("through2")// 正则替换func...原创 2019-06-30 11:44:39 · 1021 阅读 · 0 评论 -
webpack loader从入门到精通全解析
webpack loader从入门到精通Loader 就像是一个转换器,可以把源文件经过转化后输出新的一个结果,并且一个文件还可以链式的经过多个转换器转换。以转换处理 SCSS 文件为例子:SCSS 源代码会先移交给 sass-loader 把 SCSS 转换成 CSS;把 sass-loader 输出的 CSS 交给css-loader 处理,找出 CSS 中依赖的资源、压缩 CSS...原创 2019-07-19 10:39:51 · 1894 阅读 · 0 评论 -
开发构建脚手架命令行工具总结
构建脚手架命令行工具我们这一章节呢,来总结下构建脚手架的基本过程,总的来说呢,过程也是相当愉快轻松的,愉快,心情完美 ~安装依赖首先我们需要安装构建脚手架所需要的依赖,如下:cnpm install -D commander inquirer chalk ora download-git-repo核心工具:commander、inquirer、download-git-repo每个工...原创 2019-09-24 15:17:32 · 1080 阅读 · 0 评论 -
Electron PC客户端开发初体验
Electron 开发初体验本章节呢,通过一个入门级别的项目来简单的体验Electron开发的过程,并简单记录一下Electron项目的开发流程总的来说呢,涉及以下知识点:搭建本地Electron开发环境创建一个新的窗口创建顶部菜单、二级菜单及菜单点击交互打开一个新的窗口窗口之间的数据传递,ipcMain和ipcRenderer事件监听和触发客户端打包搭建本地Electron...原创 2019-09-20 18:48:58 · 3174 阅读 · 0 评论 -
mongoose 连接警告报错信息处理 { useNewUrlParser: true } 、{ useUnifiedTopology: true }
整个章节呢,记录一个错误处理1.、在windows安装好mongodb后,启动没问题,创建数据库没问题;但是在node环境使用mongoose之后,有一些警告报信息,附上我的连接代码://...mongoose.connect('mongodb://127.0.0.1:27017/');mongoose.connection.once('open',() => { console...原创 2019-09-11 15:22:16 · 20865 阅读 · 4 评论 -
Redis API接口缓存优化实战
Redis 缓存请求内容,优化 API 接口性能在我们日常的接口开发过程中,或者第三方请求的过程中,每次刷新页面都会重新请求接口,而且大部分接口短时间内是不会变化的;在某些场景下,我们需要转发某些第三方的API接口;所以在多次请求的情况下,就会造成很大资源浪费,也不利于WEB应用交互性能优化;我们这章节呢,将会使用Redis对第三方请求内容做个一个定期缓存,在某个时限内,我们将会直接从本地...原创 2019-08-29 17:32:48 · 2610 阅读 · 1 评论 -
手把手带你开发一个前端命令行工具
手把手带你开发一个前端命令行工具命令行工具,即 Cli (command-line interface)。是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。在学习这篇教程之前,我们需要先了解 NodeJs, NPM 和一些常用的 shell 命令相关知识点。那怎样才可以从0创建一个命令行工具呢?开发流程1、首先我们...原创 2019-08-22 23:12:41 · 3012 阅读 · 0 评论 -
nuxt 项目开发之 json-server API 服务搭建
nuxt 项目开发 - json-server 服务搭建导读我们在项目开发过程中,是需要第三方接口渲染jokes列表的,jokes页面也是需要分页,以及搜索查询的,所以呢,我们需要搭建一个小型服务器,来满足数据的分页,搜索查询;所以呢,我们可以选择json-server这样的一款本地服务的工具,它可以指定某个json文件为api接口的数据源;详细介绍好,我们来看一下这个json-s...原创 2019-08-08 11:27:35 · 1347 阅读 · 0 评论 -
前端知识每日小拷问 006 网络协议、支付相关
前端知识小拷问 006 网络协议、支付相关准备接收大前端形法的考验吧!?每日5题,直击你的内心 ~~今天的前端知识点有如下:对Socket编程的理解,及实现原理,Socket之间是怎么通讯的 ?web应用从服务器主动推送data到客户端有哪些方式?什么是https,做什么用的呢?如何开启https?如何看待使用node.js搭建中间层?web微信支付怎么做?请...原创 2019-07-17 21:26:37 · 811 阅读 · 0 评论 -
手把手带你深入了解 webpack config devSever 常用参数配置
导读DevServer 提供了一些配置项可以改变 DevServer 的默认行为。 要配置 DevServer ,除了在配置文件里通过 devServer 传入参数外,还可以通过命令行参数传入。 注意只有在通过 DevServer 去启动 Webpack 时配置文件里 devServer 才会生效,因为这些参数所对应的功能都是 DevServer 提供的,Webpack 本身并不认识 devSe...原创 2019-07-29 17:47:23 · 2103 阅读 · 0 评论 -
gulp-jade 动态数据渲染编译模板 热更新案例开发
导读我们今天来聊一聊如何使用gulp编译生成jade模板;如果你想快速编写html,就可以使用node下很火的一款模板语法jade,但你便写完代码后,想要立即看到效果就可以使用gulp生态里面的gulp-jade插件,它可以把jade文件动态编译渲染成html,包括数据列表的渲染我们要实现的目标效果是:编辑jade文件保存,页面自动热更新案例代码 - 第一阶段 ( 初级阶段 )下面这个...原创 2019-06-03 16:09:47 · 1203 阅读 · 0 评论 -
webpack热更新案例实现
webpack热更新案例操作导读模块热替换(Hot Module Replacement 或 HMR), 也叫热更新,它是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行浏览器刷新或者命令行重启。注意:热更新 HMR只能在开发环境使用,不适用于生产环境使用webpack.config.js启用 HMR启用该功能实际上相当简单。而我们要做的,就是更新 we...原创 2019-06-14 14:50:57 · 2233 阅读 · 0 评论 -
webpack常用开发工具模块介绍
webpack常用开发工具模块介绍导读在webpack的构建过程中我们需要用到一些基本构建开发工具来提升我们的工作效率,这些工具有哪些呢?source map 自动追踪代码错误所在的文件webpack watch 观察者模式自动编译webpack-dev-server 指定目录启动本地服务webpack-dev-middleware 传递文件给服务器source map 自动追...原创 2019-06-13 17:54:42 · 959 阅读 · 0 评论 -
ES6+Koa2+Web Audio API 可视化音频应用开发
目录导读项目成品预览一、整个开发思路二、后端配置1. 安装koa应用生成器2. 新增路由 `/musc`三、前端配置1. 目标页面 `views/index.ejs`, 编辑如下2. 配置前端交互脚本 `public/javascript/music.js`四. 项目源码地址导读这段时间遇到个项目需要涉及音频流的可视化开发,可H5 Web Audio API 都是好几年前在慕课网有接触过了,然...原创 2019-01-01 18:17:14 · 1393 阅读 · 0 评论 -
CNPM私有库服务器架设及团队开发方案
导读:1.该方案涉及到企业内部的CNPM私有库服务器配置及架设2.私有库npm包发布权限管理,只限管理员发布3.阿里云线上服务器私有库部署,nginx代理路由配置,内外网包管理通信4.npm包管理一、部署所需要的工具 node(* 最新版10.14.2)、npm(* 最新版6.4.1)、nrm、mysql、nginx、git、github( gitlib )、线上服务器...原创 2018-12-18 14:46:33 · 1246 阅读 · 0 评论 -
generator、async函数的异步编程应用研究
简介:Generator函数主要应用于函数的异步操作,在ES6诞生之前,异步编程的方法,大概有下面四种: “ 回调函数 、事件监听 、发布/订阅 、Promise对象 ”。但是Generator函数的出现使异步编程更加的方便快捷。 一、Generator函数应用研究 1. 测试小体验:function* gen(x){ try { var y = yield ...原创 2018-12-11 13:55:49 · 1206 阅读 · 0 评论 -
Mockjs前端开发数据模拟测试及深度解析
在项目开发接口联调的过程中,前端开发人员经常需要等待后端提供好数据接口后才能动手联调,所以为了提升开发效率,mockjs这个第三方库诞生了,这个库主要是为了满足前端开发获取接口数据,渲染页面,功能开发,可以不经过mysql、redis等数据库就可以直接联调,所以极大的提高了我们前端开发攻城狮的开发效率;记得之前的博客我介绍过json-server这款前端数据服务第三方库,json-serv...原创 2018-12-09 23:41:28 · 4386 阅读 · 1 评论 -
从零开始构建VUE 客户端和服务端SSR项目
一、服务端渲染 1.基本概念Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。2.为什么要使用服务端渲染优点:(1)更好的 SEO,由于搜索引擎爬虫抓取工具可以直...原创 2018-12-15 00:18:54 · 4269 阅读 · 0 评论 -
ES6核心常用基础知识点积累
1.ES6 对于数组,字符串的扩展(1)字符串:模板字符串 [ `${变量}` ]字符串复制 [‘abc’.repeat(2) // abcabc ]查找返回布尔值 [‘smile’.includes(‘sm’) // true]判断开头位置,返回布尔值 [ ‘smile’.startWith(‘s’) // true ]判断结尾的位置,返回布尔值 [ ‘smile’.startW...原创 2018-12-04 14:39:34 · 1750 阅读 · 0 评论 -
FormData全解析及多文件上传前后端案例实战
这几天做项目都是个文件流各种打交道,当然其中就免不了和FormData接触了了呀,所以这次仔细研读下FormData类的所有常用的特性,以及总结所用的领域有哪些?一、案例分析(热身)在了解FormData之前先来了解一个前端上传多个附件,且能对上传的附件进行删除,后端用express、multer接受处理文件的小案例,此案例涉及的一些技术栈:node、express、fetch、For...原创 2018-11-23 17:00:22 · 7951 阅读 · 0 评论 -
node+express+grunt+mysql操作数据库案例分析
简单唠两句、 在以前的node操作数据库,都是选择mongodb这类型的非关系型数据库,进行数据存储操作。而这次业务涉及到mysql,所以来简单了解下node环境下,是如何操作mesql数据库增删改查的?一、安装1. 开发依赖yarn inityarn add mysqlyarn add expressyarn global add add json-server...原创 2018-10-24 14:47:23 · 1404 阅读 · 0 评论 -
Json-server搭建前端虚拟REST API服务
唠唠嗑、为什么要来详细介绍一下json-server呢?因为我们前端开发人员在开发后台管理类项目的过程中打交道最多还是API联调,然后数据渲染页面,或者动态数据绑定。但是有个很矛盾的问题就是,很多时候前后端是一起开发的,有可能后端的进度赶不上前端的进度。一般情况下的解决办法就是在前端应用里面写死数据模拟,在缺少了请求的一个过程后,在更新数据,删除数据等一些页面切换复杂交互的场景下,死数据还...原创 2018-10-12 15:40:48 · 2173 阅读 · 0 评论 -
react+redux+react-router构建移动端面板页(回顾)
1. 移动端面板结构:(1)顶部导航 组件(2)底部tab跳转 组件(3)中部路由页展示 组件2. 初始化导航组件和底部tab跳转链接组件(1)通过指定的json数据结构,初始化导航,底部链接,以及底部tab切换图标交互(2)初始化导航:<NavBar mode=“dark">{navList.find(v=>v.path===pathname)...原创 2018-08-04 14:36:25 · 1395 阅读 · 0 评论 -
express实现多级路由文件
在express开发的过程中无比需要对路由的合理分配,以及多极路由的合理部署:1. 首先在入口文件server.js中,注册核心主路由:const express = require('express');const bodyParser = require('body-parser');const cookieParser = require('cookie-parser');const ...原创 2018-07-14 17:57:23 · 8183 阅读 · 1 评论