Web前端
关注
分享
扫一扫
文章平均质量分 61
luffy5459
程序猿一枚，喜欢瞎捣鼓。
展开
-
node检测端口是否被占用isPortOccupied.js
node项目中端口占用检测，promise返回可用端口。原创 2022-12-26 23:00:02 · 1047 阅读 · 0 评论 -
geoserver配合openlayers框架加载地图
geoserver地图服务器如果搭建成功，那么会有很多图层示例。这些图层可以用作练手示例。在实际工作中，可能需要我们自己设计地图，自己发布，然后使用。 这里以上一篇最后发布的中国地图为例，采用openlayers框架加载地图。 这里需要我们下载openlayers框架，这个是一个js地图引擎框架，可以很方便的与geoserver提供的地图服务配合使用，而且geoserver中本身也是支持openlayers格式。 下载后的文件，我们要使用到的是一个是ol.css样式，再...原创 2021-09-20 21:53:09 · 1720 阅读 · 0 评论 -
Javascript保留两位小数
javascript语言，因为是弱类型语言，没有java那么多类型，所以在处理浮点数保留两位小数上，没有那么多办法，su但是字符串和整数，浮点数还是有区别的，原创 2021-06-17 18:17:05 · 24852 阅读 · 0 评论 -
带cookie的异步ajax跨域请求问题
ajax跨域携带cookie需要增加一个参数，xhrFields:{withCredentials:true}，而且这个时候的cookie是种在服务端接口域里面的，而不是页面所在的域。 服务端解决跨域问题的时候，会设置允许哪些Origin,Method，如果是跨域携带cookie的异步请求，这个允许的域只能是唯一的，不能使用通配符*，也不能同时设置多个域。同时还需要保证参数Access-Control-Allow-Credentials为true。 下面通过示例演示： ...原创 2021-05-07 10:12:34 · 664 阅读 · 1 评论 -
cookie属性max-age与expires同时存在时谁会生效
我以前面试前端的时候，面试官问过这个问题，这是一个比较刁钻的问题，好像很难选择。 max-age表示最大生命周期，expires表示过期时间，cookie使用其中任何一个，都可以用来限制cookie的生效时间。 如果同时使用，max-age会生效。 这两者在时间设置上，却有不同单位属性。expires使用的是当前时间的毫秒+过期的毫秒，因此单位以ms计，而max-age直接使用秒为单位。 下面给出一个直观的示例，分别演示使用expires,max-age，同时...原创 2021-05-06 13:37:57 · 3313 阅读 · 0 评论 -
koa利用koa-views通过路由返回html页面
前面一篇博客介绍了koa借助koa-static依赖可以实现以静态资源的形式加载html，但是没有路由功能，一般而言，前后端分离之后，路由控制是由前端控制，也有一些不分离的项目，需要后端通过url路径请求直接返回一个html，这个页面是一个动态页面，如果使用ejs模板，甚至可以在渲染加载页面的时候，增加页面参数。 koa-views可以实现这个功能，同时，配合koa-router可以实现服务端路由控制来跳转页面。const Koa = require("koa")const app...原创 2021-04-29 15:04:44 · 2814 阅读 · 0 评论 -
nginx解决跨域问题
跨域问题，是因为浏览器同源策略，页面从一个域发起另一个域的异步ajax请求时，不被认可导致。 如果我们的请求在一个域里面，那么浏览器就会认为是安全的，就不会造成跨域，而nginx服务器非常擅长做这个代理工作。虽然是两个域上的请求，但是，我们可以利用nginx，将本域的部分请求转发到另一个域上，就解决了跨域，所有的请求都在一个域里面，浏览器自然认可。 以前，通过服务端解决跨域问题的时候，都是两个域的请求，比如页面是http://localhost/ajax-cors.html，而a...原创 2021-04-29 14:53:57 · 2440 阅读 · 0 评论 -
koa解决跨域问题
koa作为一个node http服务框架，它解决跨域问题，跟其他框架跨域类似，可以通过自定义中间件的方式对请求做处理，也可以通过使用封装好的@koa/cors依赖，两行代码搞定。 现在模拟ajax跨域问题。 准备： 1. nginx 服务，配合静态页面，访问80端口，请求html页面， 2. koa服务端，做接口访问，服务端口3000。 ajax-cors.html<!doctype html><html&g...原创 2021-04-29 11:21:04 · 5171 阅读 · 1 评论 -
koa设置静态资源以加载html页面
const Koa = require('koa')const app = module.exports = new Koa()const serve = require("koa-static")const router = require("koa-router")()const cors = require("@koa/cors")const users = [{id:1,name:'buejee',age:18}, {id:2,name:'zhangsan',age:18},.原创 2021-04-28 14:36:54 · 3605 阅读 · 2 评论 -
springboot实现jsonp
jsonp是ajax跨域解决方案的一种办法，就是借助标签<script></script>可以实现不同域之间数据请求的一种方式，类似iframe，不受跨域限制，它请求返回之后，会以一种回调的形式调起挂在window对象上的全局方法callback，这里的callback就是我们在url请求中指定的回调函数，参数就是我们请求服务端包装在callback之内的数据。 jsonp的实现，需要前后端配合，不是说前端可以实现，后端也可以实现，他们需要配合才能实现一个完整的js...原创 2021-04-28 13:52:25 · 2445 阅读 · 0 评论 -
npm安装windows-build-tools一直卡在successfully installed python2.7不动
以前安装过windows-build-tools，很顺利的，没想到最近在别的机器上安装，出现了卡住不动的情况，就是如题的问题。 其实这个问题出现在执行vs_BuildTools.exe安装问题上。而这个问题的本质就是visual studio installer启动程序的安装，为什么失败，网络问题。它要下载的资源没办法下载。 问题可以通过最新的临时文件C:\Users\admin\AppData\Local\Temp\dd_bootstrapper_20210420103743....原创 2021-04-26 15:07:46 · 13309 阅读 · 3 评论 -
Dynamic Linking Error: Win32 Error 126问题排查
如题所示，这个问题是我在electron项目中使用ffi调用动态链接库出现的，本机运行都好好的，打包构建然后放到别的机器上运行出错。 这个问题一度也让我很迷茫，如果是路径导致的这个问题，那么把路径指定正确就可以了，但是偏偏路径也是对的，就是报错。那应该是环境问题。 我为什么要使用ffi调用动态链接库？我的需求是这样的，需要编程实现tcpip方式连接诺德施瓦茨仪表设备cmw500，其实就是visa编程了，我开始通过c语言简单实现了这个功能，以为万事大吉了，然后写了一个动态链接库，让...原创 2021-04-26 14:30:48 · 8288 阅读 · 9 评论 -
react+antd动态表单以及数组对象示例
在实际开发中，我们会遇到表单中有些数据项是多个，并不是普通的一个值，或者一组值，而是一个数组，比如联系人这一项，我们通常会有多个联系人，这时候，表单的设计会有些不一样。 先给出一个示例： 在react+antd中，我们需要注意的是，表单的数据表示需要根据数据项的数组长度来制作。我们不能像jQuery那样，在已经生成的dom文档中，通过append的方式或者remove的方式来增减dom中的结点。这里，我们需要借助数据模型，也就是状态的改变来改变dom结点，实现动态增加...原创 2020-07-31 10:00:58 · 11985 阅读 · 4 评论 -
css小技巧之浮动，居中，周围阴影，relative妙用
css在布局和样式微调中，有很多小技巧，今天总结一些小妙招，这些方法基本上很好用，而且不会轻易弄混淆。 我们为了看出效果，将页面做了一些修饰，比如很多地方加上了边框，设置了背景色，主要是为了更直观的表现我们的效果。首先贴出一段主体的样式：/**reset*/html,body,div,p,span,h1,h2,h3,h4,h5,h6,input{margin:0;padding:0;font-weight:normal;}#root{ width:1000px; margin...原创 2020-07-30 10:50:51 · 1372 阅读 · 0 评论 -
cygwin下vi编辑器的回退键、回车键、方向键均失效解决办法
如题所示，windows下的cygwin工具自带的vi可以使用，但是几个重要的按键均失效，解决办法就是设置vi配置。 在用户的根目录下/home/Administrator下新建.virc文件，然后做如下设置： 设置的内容如下：set nocpset backspace=start,indent,eol 我们需要注意的是文件名是.virc，不是.vimrc，因为自带的是vi,不是vim。...原创 2020-06-11 14:41:47 · 868 阅读 · 1 评论 -
app:spawn ⚠️ Command name was not available. Please run again解决办法。
I am in China. pc : windows10 1607 1、set c:/users/administrator/.npmrcregistry=https://registry.npm.taobao.orgsass_binary_site=https://npm.taobao.org/mirrors/node-sass/phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjselectron_mirro...原创 2020-06-11 10:11:42 · 948 阅读 · 0 评论 -
npm install optipng-bin Failed at the optipng-bin@7.0.0 postinstall script
如题所示，在项目中安装optipng-bin依赖的时候报错，截图如下所示： 从报错信息来看，好像是类似于linux系统的源码安装，一度以为这个问题无法解决，直到找到一个方法，给这个安装添加一个参数，--ignore-scripts就好了，如下所示： 有点不敢相信，但是这却是真的，他好像绕过了源码编译。有点惊喜，有点意外。希望对遇到这个问题的人有帮助。...原创 2020-06-11 09:18:46 · 6172 阅读 · 2 评论 -
npm install安装依赖报错 Error: spawn powershell.exe ENOENT解决办法
在windows电脑上通过npm install安装 windows-build-tools的时候报如题所示的错误，一般这种错误，基本都是环境变量的问题，我这里是因为在Path环境变量下找不到powershell.exe，解决办法很简单，就是找到powershell.exe所在的目录，然后加入Path环境变量中。 其实我的这个问题，一般情况下是不会出现问题的，我遇到这个问题，是因...原创 2020-04-21 09:30:19 · 7922 阅读 · 9 评论 -
electron结合serialport插件开发硬件指令操作项目
electron可以开发桌面系统，serialport包是node环境下连接串口设备的，如果是用electron做硬件连接项目，需要考虑加入serialport包，但是我们直接npm install安装的，会因为binding的问题，在运行的时候报错，所以，一般会在下载依赖包之后，通过electron-rebuild再次编译，用来与electron匹配。 这里通过实际操作来演示一...原创 2020-04-18 18:10:00 · 1509 阅读 · 3 评论 -
javascript reduce()方法示例
reduce在大数据框架mapreduce中是一个合并的过程，将所有的数据，按照一定的规则合并，一步步缩小范围，最后合并为一个最大的集合或者对象。 在javascript中，reduce方法是数组的一个方法，他接收一个函数和一个初始值作为参数，调用格式如下所示： array.reduce(function(prev,cur){},initialValue) ...原创 2020-01-15 00:14:55 · 474 阅读 · 0 评论 -
使用mocha与should库做nodejs单元测试
nodejs是服务端开发，他也可以做单元测试，只不过，这个单元测试一般是针对某一个文件或者一个模块而言，我们经常看到github上的很多项目各自的文件夹中都有很多xxx.test.js这样的文件，通常这就是对应该文件夹下的一个xxx.js模块而言的单元测试。nodejs单元测试有mocha这个库，他提供describe,it等语法来做测试。另外，nodejs本身的assert库提供断言功能...原创 2020-01-14 14:43:47 · 1010 阅读 · 0 评论 -
react hooks useEffect副作用钩子使用
react框架开发作为入门，我们首先学到的是自定义组件，然后编写相关处理逻辑，绑定事件等等。一般自定义组件，我们是通过编写一个class继承React.Component，然后编写最主要的render等方法，另外，我们还可能需要考虑到组件的生命周期componentDidMount,componentDidUpdate这些方法，当我们的组件很简单的时候，这么做就显得有些笨重，不利于维护，比...原创 2020-01-11 00:10:10 · 3425 阅读 · 1 评论 -
Support for the experimental syntax 'decorators-legacy' isn't currently enabled
如题，出现这个错误，是因为react项目中使用了@语法的装饰器，而我们项目的一些配置没有设置正确导致的。为了使用装饰器，需要修改如下三处配置： 1、运行依赖 npm install @babel/plugin-proposal-decorators customize-cra react-app-rewired --save-dev 如果你直接在package...原创 2019-12-31 10:15:56 · 3069 阅读 · 0 评论 -
react项目启动报错：Error: ENOSPC: System limit for number of file watchers reached
如题所示，最近在使用npm start启动react项目的时候，经常会报这个错误，出错原因大致意思是文件监控数量超过了系统限制。其实就是打开的文件过多导致的，不管是什么文件，只要有进程在，就是一个file watchers，临时解决办法就是关掉几个进程，再运行npm start，就好了，但是等到系统开启的进程一多起来，再次运行又有可能出现同样的错误，为了永久解决这个问题，必须修改系统参数。...原创 2019-12-31 09:46:52 · 6030 阅读 · 0 评论 -
redux入门示例续
前面一篇介绍了利用redux框架来实现计数器的例子，了解了redux设计思想，他将ui响应与数据更改分离，集中处理状态变更，然后渲染到页面，当有用户操作的时候，ui响应不会立即修改状态树，而是发出一个修改的指令dispatch，告诉store，要如何修改。在指令发出的同时，会指定action.type，如果有参数，还会配置在action对象中，如action.color='blue'。最终...原创 2019-12-27 16:40:52 · 225 阅读 · 0 评论 -
redux入门示例
redux是一个将ui与数据操作分离的框架，可以与vue或者react配合使用。保证了数据集中修改，然后渲染，可以防止用户在外部随意修改state状态树。redux利用store来统一管理state，当ui响应用户操作事件会触发dispatch操作，dispatch类似一个通知，他不会直接修改state,而是将要做什么事情action以通知的形式发送给store。store根据action...原创 2019-12-27 15:15:09 · 401 阅读 · 0 评论 -
ES6扩展运算符三个点(...)
在react或者vue项目中，你或许已经注意到有的地方已经开始使用ES6扩展运算符...，这个运算符很简洁，如果不熟悉，可能会觉着难以理解，这里稍微介绍一下扩展运算符的用法。 ES6扩展运算符简化了数组或者对象赋值问题，以对象类型为例，我们最早做对象拷贝的时候，需要将一个对象的所有属性一一赋值给新的对象，如果新的对象还有别的属性，需要接着设置：var obj = {id:1...原创 2019-12-25 14:03:42 · 1141 阅读 · 0 评论 -
html页面报错Uncaught SyntaxError: Cannot use import statement outside a module
如题所示，在我们学习es6的时候，使用export导出模块，使用import导入模块的语法时，我们需要将我们在html中声明的标签<script></script>类型type指定为module，简单代码如下： a.js index.html 在浏览器中打开页面，查看控制台，会报如题所示的错误： ...原创 2019-12-24 23:17:33 · 59292 阅读 · 8 评论 -
webpack前端项目构建框架续
在前一篇文章中，介绍webpack构建普通web项目，一般而言没有太大的意义，我们需要使用webpack构建es6，react等这些新的语法或者特性的项目，因为涉及了很多语法的转换，所以打包的时候，我们需要注意配置。 这个例子中，我们通过webpack构建一个react项目，还是之前的示例，只不过我们使用react语法来实现，另外考虑使用es6的一些语法比如export,impo...原创 2019-12-22 13:19:24 · 217 阅读 · 0 评论 -
webpack前端项目构建框架
前端项目构建框架有很多，常见的有grunt，gulp，为什么还有webpack呢？ 前端构建工具一般都是将js合并压缩，css合并压缩，以达到减少体积，提高加载速度的目的。webpack与grunt,gulp的侧重点不同。但是功能都能满足。 webpack构建也是基于node项目，需要将webpack,webpack-cli等加入依赖中。同时还需要全局安装webpack...原创 2019-12-21 21:00:28 · 778 阅读 · 0 评论 -
javascript模块化编程commonjs,cmd,amd规范之间的区别
模块化编程是javascript语言的一个特性，其实不光javascript语言有模块化思想，java9也支持模块化，所以说模块化是一种编程的趋势，也是一种新的解决方案。模块化编程将我们以前单独编写的组件或者工具等等通过某种方式变为了一种可以很方便调用的代码。在模块化编程之前，我们编写的组件或者工具都是零散的，有些组件依赖另一个组件，当他们加载的时候，需要严格指定先后顺序，否则出现报错。...原创 2019-12-06 00:02:55 · 645 阅读 · 0 评论 -
angularjs路由ui-router示例
angularjs默认提供的路由是angular-route.min.js提供的，这里介绍一个开源的，基于angularjs实现的ui-router路由。思路是类似的。页面不再使用ng-view来指定一个模板子页面，而是通过<ui-view></ui-view>指定一个模板子页面，同样也是预留出来，当有需要的时候，页面自动套用。这里演示一个简单的路由，首先模拟从登陆页面...原创 2019-01-13 15:16:24 · 909 阅读 · 0 评论 -
构建http服务的几种方式
做前端开发，页面可以通过浏览器打开访问，但是异步请求这里，直接通过浏览器就不行了，即便是访问的本地json资源，ajax也无能为力。另外，如angularjs,vue涉及到路由的地方，就必须使用一个简单的http服务。这里介绍构建http的几种方式：apache(httpd) tomcat nginx nodejs(http-server) python(命令行开启http)第一种对...原创 2019-01-09 11:50:06 · 1441 阅读 · 0 评论 -
图文演示第一个nodejs实例
学习nodejs，第一个项目就是如何构建一个简单的http服务，然后通过浏览器输入访问地址访问，打印一个简单的helloworld。这里直接入手，首先确保机器上已经安装了node,npm,以及设置了正确的npm包管理工具的源。直接上代码：var server = require("http");server.createServer(function(request,respons...原创 2019-01-09 10:52:16 · 2534 阅读 · 0 评论 -
使用jQuery中Deferred异步对象构建顺序执行队列
在前面，有一篇文章介绍了jQuery的异步对象Deferred，通过他，我们可以实现一些操作比如回调函数在异步操作（耗时）完成之后再执行。比如这样的场景，我们在编辑页面，对一个产品对象进行编辑，而该对象一些属性比如所属渠道，是可以下拉选择，而所属渠道不是固定不变的，而是根据后台接口channel/getAll返回给前台页面。这时候，我们需要先初始加载渠道这个下拉框，然后根据产品自己的属性值的渠道来...原创 2019-01-14 18:36:32 · 1611 阅读 · 0 评论 -
让web页面页脚footer固定在页面底部
有时候，我们发现很多页面内容不多的时候，页面底部内容飘到了中间：这个页面底部没有固定，结果...，一个前端工程师是无法接受这样的结果的。这里介绍一种通用的解决办法，让页面底部固定。思路： 首先需要一个容器包裹所有的页面元素，这里使用<div id="container"></div>来做。id为container的容器需要设置高度100%,否则，当内容较少的...原创 2019-01-08 17:49:48 · 6068 阅读 · 0 评论 -
ZendStudio+php+Apache开发环境搭建
学习php，我们就想有一个好的ide，ZendStudio是专门为php开发提供的ide，,写完代码立马能够在工作空间中调试，可以通过Run As ->PHP CLI Application，如果开发的是web项目，这时候设置一个httpserver就少不了，最简单的就是利用apache来构建我们的server。写完代码，我们可以直接选择文件右键Run As -> PH...原创 2017-05-17 10:07:49 · 10260 阅读 · 0 评论 -
nodejs+Express开发第一个web应用
express是nodejs开发中最常用的一个http服务框架，通过他可以很方便的构建http服务。另外他本身还提供了路由功能，就是对请求的路径做区分，分别对应后台不同的请求。这里介绍如何通过express构建第一个web应用。express的安装，需要通过npm install express --save。安装了express，我们会看到项目路径下面多了一个文件夹node_module...原创 2019-01-10 21:22:31 · 3850 阅读 · 0 评论 -
chrome浏览器调试js，结果Sources里面找不到js文件解决办法
页面出现问题，就debug，这是前端开发工程师最常见的做法，但是有时候，我们打开开发者工具，在sources查找js文件，却发现怎么也找不到，无法设置断点。但是文件在network选项卡里确实load过了。解决办法：第一种办法：给需要调试的js文件头部加上这么一句://# sourceURL=dynamicScript.js这一句像一个注释，但是确实能起到作用。 ...原创 2019-01-16 20:17:06 · 41634 阅读 · 4 评论 -
nodejs路由之代码分离
nodejs提供了路由功能，解决客户端各类请求对应的处理问题，相当于springboot开发各个controller对应的方法，nodejs提供的路由，也支持各种方法：get,post,delete等等，还支持路由参数比如/user/:id，对应的请求路径中携带了用户id。如下代码演示了如何使用nodejs的路由功能。如下代码，app.js，它实现了构建http服务和路由功能：var expr...原创 2019-01-28 18:28:54 · 1780 阅读 · 1 评论