VueJS之入门指南

Vue.js是一套构建用户界面的渐进式框架。本文用于记录在使用Vue过程中,遇到的各类问题和解决办法,将不定期更新。。

阅读全文

MongoDB数据迁移

MongoDB数据迁移主要用到两个命令,一个是备份命令mongodump,一个是恢复命令mongorestore

阅读全文

HTML5之audio/video标签使用

HTML5里引入的新标记 <audio><video> 实现了HTML对视频播放和音频播放的原生支持,有了这种原生的HTML5视频播放器/音频播放器,我们不再需要flash技术,而直接能将视频/音频嵌入到了网页中。

阅读全文

HTML之Meta标签

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!

阅读全文

HTML5之本地存储

Web Storage是HTML5里面引入的一个类似于cookie的本地存储功能,可以用于客户端的本地存储,其相对于cookie来说有以下几点优势:

  • 存储空间大:cookie只有4KB的存储空间,而Web Storage在官方建议中为每个网站5M。
  • 可选择性强:Web Storage分为两种:

    1. localStorage - 没有时间限制的数据存储
    2. sessionStorage - 针对一个 session 的数据存储

之前,这些都是由cookie完成的。但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。HTML5 使用 JavaScript 来存储和访问数据。

阅读全文

一个HTTP的过程发生了什么

在浏览器的地址栏上输入lion1ou.win,然后点击回车,回车到看到页面这一段时间到底发生了什么?

答:域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 后台服务器响应http请求,浏览器得到html代码 –> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) –> 浏览器对页面进行渲染呈现给用户

阅读全文

apidoc一个自动生成API文档的工具

apidoc是一个生成RESTful API文档的工具,它通过代码注释中的特定格式和内容,生成API文档。目前支持的语法有:Java、Javascript、C#、C/C++、D、Erlang、Go、Groovy、Pascal/Delphi、 Perl、PHP、Python、Ruby、Rust、Scala 和 Swift。

阅读全文

MongoDB常用语句

这里主要介绍和记录一些有关MongoDB的常见语句。主要包括插入、查询、更新和删除。文档的数据结构和JSON基本一样。所有存储在集合中的数据都是BSON格式。BSON是一种类json的一种二进制形式的存储格式,简称Binary JSON。

阅读全文

NodeJs之Express与MongoDB交互

mongoose是一款基于nodejs的优雅数据构建mongodb模型工具。mongodb是一款新型的json(键值对)数据类型的数据存储格式的数据库。在目前来说,使用nodejs和mongodb是为中小型企业以及个人web开发的绝配。

阅读全文

NodeJs之Express入门

Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架,为 Web 和移动应用程序提供一组强大的功能。详见:官网中文网站

阅读全文

CSS之垂直居中

在实际工作过程中经常会碰到垂直居中的问题,这里手机总结了几种垂直居中的常用方法。

阅读全文

CSS之修改input range样式

今天来探讨一下 HTML5 的 range 这个新的 input 类型,不过重点不是在 range 要如何使用,而是在如何去改变 range 的样式,做出一个漂漂亮亮的滑动杆。

过去我们要制作美美的滑动杆 ( range slider ),不外乎就是用个 spandiv ,搭配判断滑鼠座标 ( pageX、pageY ) 与点击事件来制作,就算是 HTML5 具有了 rangeinput 类型,预设的样式只能满足基本的需求,对于有一些要求视觉设计的网站来说,根本就毫无用武之地,只好自己手动干一个 range slider 来用了。

阅读全文

CSS之flex布局

flex是一个用于页面布局的全新css3属性,flexbox可以把内部元素放在同一个方向进行排列(从上到下,从左到右),并让内部元素可延伸占用可占用的空间。我们的常规布局是采用块和内联流方向,flex布局采用的是基于flex-flow流可以很方便的实现居中,且能对不同大小的屏幕进行自适应。

一、Flex布局是什么?

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

阅读全文

CSS之清除浮动float

在网页布局的时候我们经常会碰到有关float的使用,但是用了float没有清除会出现下面的诡异情况。接下来我们就说说怎么去清除这些float。

阅读全文

CSS之响应式页面布局

要说到”响应式布局设计”,我们先来介绍一下另外一个名词:”自适应网页设计”(Responsive Web Design),最早是Ethan Marcotte在2010年提出的。指的是可以自动识别屏幕宽度、并对页面的布局会基于一定的因素搭建做出相应调整的网页设计。自适应布局能够提供一种更加实用的解决方案,使得项目的实现成本更低,并且更加易于测试。自适应布局可以被看作是响应式布局的一个更加廉价的替代品,换句话说自适应网页设计就是一个精简版的响应式布局。当固定宽度与流动宽度结合起来时,自适应就变成了响应式,响应式网页设计指的是页面的布局(流动网格、灵活的图像及媒介查询),响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。

阅读全文

ES6入门(六) - 函数的扩展

一、函数参数的默认值

在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。

function log(x, y) {
y = y || 'World';
console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

阅读全文

ES6入门(五) - 数组的扩展

一、Array.from()

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。

只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组。

阅读全文

ES6入门(四) - 数值的扩展

一、二进制和八进制的表示法

ES6提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。

0b111110111 === 503 // true
0o767 === 503 // true

如果要将0b和0o前缀的字符串数值转为十进制,要使用Number方法。

Number('0b111')  // 7
Number('0o10') // 8

阅读全文

ES6入门(三) - 字符串的扩展

一、字符的Unicode表示法

ES6添加新的解读方式,只要将码点放入大括号,就能正确解读该字符。

"\u{20BB7}"
// "𠮷"

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80'
// true

阅读全文

ES6入门(二) - 变量的解构赋值

一、数组的解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

//以前,为变量赋值,只能直接指定值。
var a = 1;
var b = 2;
var c = 3;
//ES6允许写成下面这样。
var [a, b, c] = [1, 2, 3];

阅读全文

ES6入门(一) - let和const命令

一、let命令

1. 声明只在代码块内有效

let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

{
let a = 10;
var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

阅读全文

webpack入门指南

Webpack 是德国开发者 Tobias Koppers 开发的模块加载器,它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

阅读全文

gitbook 使用备忘

gitbook 首先是一个软件,正如字面定义的那样,它使用 Git 和 Markdown 来编排书本,如果用户没有听过 Git 和 Markdown,那么 gitbook 可能不适合你!

阅读全文

git学习

Git是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。

阅读全文

gulp基础使用

安装

  • 安装淘宝npm镜像:

    sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

    之后可将npm修改为cnpm

阅读全文

JavaScript之常用正则表达式

在表单验证中,使用正则表达式来验证是比较常用的方法,本文整理了一些常用的表单验证的正则表达式。

阅读全文

JavaScript之正则表达式

正则表达式(Regular Expression,在代码中常简写为regex、regexp或RE)是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。正则表达式是由普通字符(例如字符 a 到 z)以及特殊字符(称为”元字符”)组成的文字模式。模式描述在搜索文本时要匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。

阅读全文

JavaScript数据类型转换

JavaScript是一种动态类型语言,变量没有类型限制,可以随时赋予任意值。虽然变量没有类型,但是数据本身和各种运算符是有类型的。如果运算符发现,数据的类型与预期不符,就会自动转换类型。比如,减法运算符预期两侧的运算子应该是数值,如果不是,就会自动将它们转为数值。

阅读全文

JavaScript之立即执行函数(IIFE)

在javascript里,每个函数,当被调用时,都会创建一个新的执行上下文。因为在函数里定义的变量和函数是唯一在内部被访问的变量,而不是在外部被访问的变量,当调用函数时,函数提供的上下文提供了一个非常简单的方法创建私有变量。

阅读全文

JavaScript之前端资源预加载进度条(转)

我们经常会看到,一些站点在首次进入的时候会先显示一个进度条,等资源加载完毕后再呈现页面,然后整个页面的操作就会非常流畅,因为之后没必要再等待加载资源了。尤其是在移动端,或者是页游中,这样做能避免页面出现白屏(等待加载图片),很大程度提升用户体验。那这种技术是如何实现的呢?其实非常简单,本文就来从基础细节探究一番。

阅读全文

JavaScript之闭包

在前端学习中,一直提到JavaScript闭包,那闭包到底是什么呢?

阅读全文

JavaScript之操作数组

这里记录一些数组的常用操作方法,方便之后的查阅

阅读全文

JavaScript之null、NaN和Undefined的区别

在JavaScript编程中,我们经常会出现undefined、null和NaN。但是要怎么区分呢?该怎么去判断呢?

阅读全文

JavaScript原生绑定事件的三种方法

概述

要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。在JavaScript中,有三种常用的绑定事件的方法:

阅读全文

Angular之ng-class

在angular中为我们提供了3种方案处理class:

  1. scope变量绑定,如上例。(不推荐使用)
  2. 字符串数组形式。
  3. 对象key/value处理。

阅读全文

Angular之过滤器

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。ng内置了一些过滤器,它们是:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序),总共九种。除此之外还可以自定义过滤器,这个就强大了,可以满足任何要求的数据处理。

阅读全文

Angular之表达式

AngularJS 表达式简介

  • AngularJS 使用 表达式 把数据绑定到 HTML。
  • AngularJS 表达式写在双大括号内:{ { expression } }。
  • AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
  • AngularJS 将在表达式书写的位置”输出”数据。
  • AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

阅读全文

Angular之服务

这里只是简单的记录一下,service的相关内容。

Service的特性

  1. service都是单例的
  2. service由$injector负责实例化
  3. service在整个应用的生命周期中一直存在,可以用来共享数据
  4. 在需要使用的时候利用依赖注入机制来注入service
  5. 自定义的service需要写在内置的service后面
  6. 内置service的命名以$符号开头,自定义service应该避免

阅读全文

Angular之路由(UI-Router)

ui-router介绍

ui-router 的工作原理非常类似于 Angular 的路由控制器,但它只关注状态。

  • 在应用程序的整个用户界面和导航中,一个状态对应于一个页面位置
  • 通过定义controller、template和view等属性,来定义指定位置的用户界面和界面行为
  • 通过嵌套的方式来解决页面中的一些重复出现的部位

状态被激活时,它的模板会自动插入到父状态对应的模板中包含ui-view属性的元素内部。如果是顶层的状态,那么它的父模板就是index.html。

阅读全文

Angular之指令

指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。

阅读全文

Angular之学习笔记

学习路径

  1. 整个应用程序的执行顺序
    config -> run -> directive compile -> controller -> directive link

阅读全文

iOS开发(7) - iOS证书多设备使用

在苹果开发者网站申请的证书,是授权mac设备的开发或者发布的证书,这意味着一个设备对应一个证书,但是99美元账号只允许生成3个发布证书,两个开发证书,这满足不了多mac设备的使用,使用p12文件可以解决这个问题。

阅读全文

iOS开发(6) - iOS部署下载安装失败原因排除

前言

iOS 的内测应用在安装时,很多人都遇到过安装失败的情况,安装失败的原因比较多,下面将一些常见原因总结如下,方便开发者进行排查。

阅读全文

iOS开发(5) - tomcat+openssl构建自签名证书形式的iOS无线安装ipa环境

本文讲述了如何使用 openssl 制作证书、keytool生成证书申请并将证书导入证书库、如何配置tomcat,和配置当中出现问题的解释。本文用到的工具:OpenSSL.rar(点击下载);keytool(JDK中自带的工具)。

这里下载的OpenSSL.rar,其中的openssl.cnf并没有在ssl文件夹中,需新建ssl文件夹并把openssl.cnf放入其中。

阅读全文

iOS开发(4) - windows上tomcat服务器的搭建

Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选服务器。

阅读全文

iOS开发(3) - Xcode7打包签名分发ipa

ipa打包

  1. 在工程中选择build Settings,修改Release为你的企业帐号

    屏幕快照 2016-07-22 14.07.21.png

阅读全文

iOS开发(2) - In House 证书申请下载

创建证书

  • 首先进入登录企业级账号Member Center,在Certificates-Production中创建一个证书:

屏幕快照 2016-07-18 14.43.13.png

阅读全文

iOS开发(1) - iOS开发者账号区分详解

iOS Developer Program 目前有四种:个人版、公司版、企业版和教育版。

阅读全文

cordova项目备忘

iOS代码编写方式

iOS开发与Android开发有所不同,由于苹果的限制,它不能像Android开发那样直接通过命令行命令实现真机调试。

iOS版本的cordova项目编译步骤:添加iOS平台=》添加所需插件=》通过cordova build ios命令生成.xcodeproj文件=》双击打开该文件=》通过Xcode实现真机调试

阅读全文

Cordova启动页面和图标的设置

一、config.xml配置

在cordova5.0版本以后,需要安装cordova-plugin-splashscreen插件以后才能修改和设置App的启动页面。

安装splashscreen插件:

cordova plugin add cordova-plugin-splashscreen

cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git

阅读全文