使用Electron进行桌面端开发时的热加载方案
执行下面的npm命令安装electron-reloader。慢的话使用cnpm吧,安装成功后,package.json内容会自动修改。 #安装electron-reloader npminstall--save-develectron-reloader #package.json内容自动修改如下 { #package.json会自动增加devDependencies这项 "devDependencies":{ "electron":"^9.1.0", "electron-reloader":"^1.0.1" } } 需要我们操作的一步就是在main.js(Electron项目入口文件)文件中增加如下代码: #main.js文件修改 const{app,BrowserWindow}=require('electron') //热加...[>>…]
使用Electron进行win桌面端的开发
想试试桌面端的开发,但又不想去接触C#、WPF之类的语言,了解了一下,Electron是一个可以开发桌面端软件又和web开发有点关系的方案,Electron是由Github开发,基于Chromium和Node.js,使用JavaScript、HTML和CSS等Web技术创建跨平台原生桌面应用的框架。兼容Mac、Window和Linux,它构建的应用可在这三个操作系统上面运行,借助Electron,我们可以使用纯JavaScript来调用丰富的原生APIs。 Electron的开发环境搭建,我这里是Windows10,需要安装的环境包括Python、node...[>>…]
在ubuntu好部署jenkins发布vue项目时遇到的一些问题及解决方法
1.问题:webpack-dev-server不是内部或外部命令,也不是可运行的程序解决:使用webpack要安装webpack-cli这个包,才可以调用webpack和webpack-dev-server这些命令。 npminstallwebpackwebpack-dev-serverwebpack-cli--save-dev 2.webpack——Error:Cannotfindmodule'extract-text-webpack-plugin'解决:在项目目录下依次执行 #全局安装npminit: npminit-y-g #全局安装webpack: npminstallwebpack-g npminstallwebpack--save-dev-g #全局安装extract-text-webpack-plugin: npminstall--saveextract-text-webpack-pl...[>>…]
Layui的form表单登录js提交代码及服务端的处理
Layui的form表单提交的很多处理写到了其自有的js逻辑中,需要注意的一项是如果使用js中的逻辑来进行提交的话,html部分中的登录button按钮需要写成button。不然会在js处理后仍然页面提交。Layui的form表单提交的js代码及服务端的处理代码示例如下: <!--表单登录html部分--> <formmethod="post"class="layui-form"> <inputname="username"placeholder="用户名"type="text"lay-verify="required"class="layui-input"> <hrclass="hr15"> <inputname="password"lay-...[>>…]
使用npm搭建VUE项目全过程
1.基础node环境和IDE的安装 vue项目的基础环境包括开发环境及IDE,IDE之前有篇文章记录:http://www.04007.cn/article/784.html安装VScode即可。开发环境需要安装node.js。vue.js开发为什么要安装node.js呢?准确的说是使用vue-cli搭建项目的时候需要nodejs。vue本身并不完全需要node.js。VUE同样可以像一个JS文件直接引入.html的script中来使用,但通过使用node使开发更方便,并能方便打包部署,解析vue单文件组件和vue模块,启动测试localhost,管理vue-router,vue-resource插件等。所以推...[>>…]
Bootstrap中自适应布局的一些设置
Boostrap本身就是一个响应式自适应的前端UI框架。使用栅格模式后,其自适应功能也能很好的运用。根据浏览器宽度的大小,Boostrap有四种栅栏类名提供使用,用法与Css样式表类名选择器样式调用是一样的:xs:col-xs-1~col-xs-12,多列始终在一行内。sm:col-sm-1~col-sm-12,多列在浏览器像素宽度大于等于768px时才在一行内。md:col-md-1~col-md-12,多列在浏览器像素宽度大于等于992px时才在一行内。lg:col-lg-1~col-lg-12,多列在浏览器像素宽度大于等于1200px时才在一行内。 &...[>>…]
利用img的usemap属性和css3实现圆形点击区域
css属性实现圆形点击区域有两种方式,一是利用img的usemap属性,二是使用CSS3中相关的border-radius属性。 一、使用img结合map实现。usemap属性提供了一种客户端的图像映射机制,通过特殊的<map>和<area>标签,可以将图片不同的区域映射到不同的链接。示例如下: <!doctypehtml> <htmlclass="notranslate"> <head> <metacharset="UTF-8"/> </head> <bodystyle="padding:100px;"> <imgsrc="test.png"usemap="#cri...[>>…]
Vue开发工具VSCode的安装使用以及nodejs中的npm安装
凭借着免费,开源,轻量,跨平台的特点收货了一大批忠实粉丝,现在使用Vscode作开发IDE的人越来越多,特别是前端开发。VSCode对JavaScript语言、库和Web环境的支持都很好。所有关于react、Vue.js、Electron的教程中也都推荐使用VSCode。 VSCode的安装使用,进入VScode的官网https://code.visualstudio.com/ 点击DownloadforWindows下载安装即可,非常方便。安装完成之后运行IDE进行一下语言选择,有方便的中文语言包支持。方法:使用快捷键:ctrlshift+p打开快速...[>>…]
http请求中的Referrer-Policy策略及应用
在页面调用图片等其它资源时,或者发生页面跳转时,都会向服务端发生一个带Referrer的HTTP请求,这也是一些网站做防盗链的抓手,在ReferrerPolicy策略发面前,浏览器可以按自己的默认规则来决定是否加上Referrer。2014年W3C下Web应用安全工作组(WebApplicationSecurityWorkingGroup)发布了ReferrerPolicy草案,对浏览器发送Referrer做了详细规定。在新的ReferrerPolicy中,可以实现隐藏Referrer,也可以只发送来源URL的host地址(不过不允许伪造)。 新的ReferrerP...[>>…]
Access-Control-Allow-Origin如何同时允许http和https的Origin跨域请求
因为后端在跨域的时候需要前端的cookie信息,因此跨域网站在输出Access-Control-Allow-Origin头信息的时候不能指定为*,但是因为网站请求支持http和https两种方式,而使用不同请求方式的时候传给服务器端的origin头信息内容是不一样的。 如果服务器是直接承接的https请求,443和80端口的配置是分开写的到也好处理,可以直接使用在添加header信息的时候根据当前请求的scheme添加头信息。add_headerAccess-Control-Allow-Origin"$scheme://www.04007.cn"always; &...[>>…]