
webapp开发
SailorCai
做一个思维开阔的全栈工程师,不懂就问,知错就改
展开
-
用input type=file调取手机照相机以及相册选择照片上传
最近由于在写一个车贷的webapp项目,其中要求调取手机照相机以及手机相册来获取照片,而我之前一直是用cordova等打包工具调取手机硬件、于是也到网上找了下解决方案。其中h5提供的type="file"属性是一个相当简便且有效的方法。<input type="file">除了可以选择照片,默认情况下是可以选择文档的为了防止用户误选文档我们可以给 input 标签添加 acce...原创 2017-04-05 22:27:21 · 51405 阅读 · 14 评论 -
TCP三次握手和四次挥手过程
由于对于http建立连接的过程中的三次握手最近有点记忆模糊,因此上网查了一下相关知识,发现一篇讲的非常详细的文章,这里转到自己博客分享给大家,博客原文地址(作者:Andya):TCP三次握手和四次挥手过程以下是正文内容:1、三次握手(1)三次握手的详述首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源。Client端接收到ACK报文后也...转载 2018-08-22 23:13:44 · 239 阅读 · 0 评论 -
执行git add . 后仍然报changes not staged for commit错误的解决方法
如果你的git仓库下面还有另外一个clone过来的git仓库,那么当你正常git add . 然后git commit的时候一定会得到如下图的报错:并且上传到仓库的文件夹是空的这个时候如果你去网上查找解决方案,可能10个人有九个人会告诉你是因为commit之前没有执行git add导致的,最后一个人可能知道原因,但是提供的方法可能并不能很好的解决问题这里给出完整的解决方案:1、...原创 2018-08-08 09:32:12 · 32076 阅读 · 6 评论 -
babel-loader,babel-core,babel-polify,babel-plugin-transform-runtime之间的关系
babel-core在npm官网中的解释是Babel compiler core.也就是Babel编译器的核心,因此意味着如果要使用babel-loader进行es6的转码你首先必须得安装babel-corenpm install --save-dev babel-corebabel-core安装了就行,无需手动配置和引入。搞懂了babel-loader和babel-core的关系,那babel-...原创 2018-07-15 17:36:06 · 3432 阅读 · 0 评论 -
与浏览器缓存相关的expires,cache-control,last-modified,Etag等头部信息
浏览器缓存对于现代网页是非常有用的功能,它能将大部分改变频率不大的应用组件缓存到本地以加速用户下次访问时页面的响应时间。 而与浏览器缓存相关的头有 expires,cache-control等等(如标题中提到的)这些头信息分别代表什么呢?由浅入深。首先来我们来说说条件 GET 请求。一般我们向服务器发送http请求获取资源时服务器的响应头中一般会包含如下的一个头部信息:La...原创 2018-07-28 16:28:22 · 705 阅读 · 1 评论 -
多页项目的webpack配置
在我们使用vue,angular等框架开发的时候,大多数都是构建单页项目。而且,像这样的框架都有对应的命令一步生成webpack配置(比如vue的vue init webpack my-project之类)。 但是如果我们要开发多页面项目的时候就没有这么方便了,你必须要自己配置webpack。 单页项目和多页项目的区别在于单页项目所有的js,css等资源只需要在入口html文件中引...原创 2018-07-19 11:05:31 · 1240 阅读 · 0 评论 -
本地仓库每次向github提交代码都需要输入账号密码的解决方法
当我们向github远程仓库push代码的时候可能会出现每次都要求输入账号密码的问题。其实会出现这个问题的原因只是因为你在添加origin的时候使用的是https的方式,最简单的解决办法就是移除https的方式,添加ssh的方式:首先在命令行执行:git remote rm origin然后到git仓库页面,如上图、点击Use SSH切换,复制下面框中的地址在命令行输入:git remote ad...原创 2018-07-03 21:20:06 · 4755 阅读 · 1 评论 -
一次搞懂javascript原型链和继承
javascript原型链是个很容易被新手前端忽略的重要概念,在初级编程工作中绝大部分人可能会觉的原型链似乎没啥用、因此非常容易被忽略。我自己刚入行那会儿就被面试官问懵过(知道这个东西、却说不清楚)。1、原型链直入主题,原型链是js中实现对象继承的主要方法。基本思想是利用原型让一个对象继承另一个对象的属性和方法。首先对象的构造函数其实就是普通的函数,只是使用方式不一样(构造函数一般用和new操作符...原创 2018-06-28 09:52:57 · 431 阅读 · 0 评论 -
前端通过spark-md5.js计算本地文件md5
背景:说到本人第一次使用spark-md5.js还是差不多一年以前的时候了,当时后台老大说要搞一个文件分片上传的功能。我当时就心想:what?啥是文件分片上传,完全没听过好吗?至于我当时内心那个慌就不多描述了,总之文件分片上传需要一个识别文件的唯一标识,而md5是非常合适的。spark-md5.js就是前端在文件上传前在本地计算md5的很可靠的方案spark-md5.js是由外国人写的,如果英文底...原创 2018-06-20 16:58:15 · 20506 阅读 · 5 评论 -
关于jquery的click()和trigger(‘click‘)方法的一点问题
在原生js中如果要模拟事件其实比较麻烦的事情,因为要考虑到各个浏览器对dom标准的兼容,同时还要进行多个步骤(创建event对象、初始化、正式触发等步骤)。不过jquery就有一个非常简单好用的click()或者trigger('click')方法来模拟点击事件这两个方法可以说是非常简单好用了。但是这里我其实要说的是这个方法的一点问题。问题出现的场景是:当某个元素的点击事件...原创 2018-06-20 00:46:57 · 16387 阅读 · 6 评论 -
windows通过wamp apache实现代理及反向代理
wamp是一款基于windows平台的AMP(Apache/MySQL/PHP)集成软件。安装和使用都非常简便,可以让我们避免由于缺乏AMP的知识而无法正确设置环境。下载安装:首先可以到官网下载合适版本的wampServer下载,双击安装,这是一个全自动化的过程,一直点next就行了,不多做解释。官网地址:http://www.wampserver.com/en/安装后双击应用图标开启服务,在浏览...原创 2018-06-29 22:31:03 · 3582 阅读 · 0 评论 -
node+socket.io 实现一个聊天室
我们只做简单的实现,不接入数据库,nodejs也不使用express和koa等框架因此依赖只有两个:1、socket.io2、mime(用于获取静态资源时获取文件的mime类型) 安装命令:npm install socket.io mime --save其他的就不赘述了 先描述一下文件目录结构静态 js 和 css 文件放在 public 下面的相应目...原创 2019-01-06 16:23:59 · 1150 阅读 · 1 评论