利用ionic2制作好的app，我们得通过打包后才能发布出去，不然的话app是无法通过验证的。在打包过程中，我们就得需要java的keytool进行生成证书，然后通过生成的证书，我们再将其导入到我们得app里面来实现一个签名。
比如我的是h:/Ionic/flashlight
cd h:/Ionic/flashlight
使用keytool生成证书
1 | keytool -genkey -v -keystore key.keystore -alias you_name -keyalg RSA -keysize 2048 -validity 10000 |
首先会让你输入密码，如果你使用过linux或者mac的话，你就会知道，这里输入密码是不可见的（菜鸟们不要以为这是bug）。
其中key.keystore是证书的名称和后缀名，key则可以修改成你需要的名称，而后缀名不能随意更改，否则会出错。
you_name则为证书拥有者的名称，你可以自己起一个。
如果可以出现什么问题的话，你可以看到如下的设置：
在一个项目中需要使用到这个功能，看了下官方的文档，说得不是很清楚，使用了formArray，但是没有实现成功。然后谷歌、百度了好久，也没有找到可以真正运行的代码，差点就放弃了。功夫不负有心人，在segmentfault上提问后，得到了相关回答，但是回答中得到了一个外国人博客上的文章，对照着改写了一番，感觉真的就这么实现了，真好，实现得和自己想要的最终结果一模一样。下面就来说说如何进行实现吧！
首先说下实现的逻辑思路，通过FormBuilder, FormGroup, FormArray来获取checkbox的选中状态，然后通过这些选中状态再去获得checkbox的值，再将想要的值展示出来即可。
1、导入相关功能模块
1 | import { FormBuilder, FormGroup, FormArray } from '@angular/forms'; |
2 | import 'rxjs/add/operator/map'; |
2、创建checkbox数据源
1 | public select = [ |
2 | {"name":"leo","selected":true,"sex":"男"}, |
3 | {"name":"Lily","selected":false,"sex":"女"}, |
4 | {"name":"Tony","selected":false,"sex":"男"} |
5 | ] |
使用过jQuery的童鞋，想要制作一个清空input内容的图标按钮是非常简单的事情，但是今天我要来说下angular2+版本中制作如此一个功能，远远比jQuery简单得多。而且是超级简单，根本不用写typescript代码，仅在html模板中就可以直接实现，当然我们也可以通过typescript的代码来进行实现，大同小异啊！
先来看实现后的大致功能效果，如下图：
要制作这么一个功能，使用angular制作其实并不困难，不过要在css中下功夫，而js逻辑是很简单的事情，并且angular中实现并无需写js逻辑。
关于css部分，请自行进行编写，这里我只实现功能，css部分实现的思想也很简单，利用position定位来对按钮或者图标进行定位到input的右边即可实现。
1 | <div> |
2 | <h1>清空input</h1> |
3 | |
4 | 用户名:<input type="text" name="name" #name placeholder="输入用户名"><span (click)="name.value=''">X</span> |
5 | <br> |
6 | 密 码:<input type="password" name="pwd" #pwd><span (click)="pwd.value=''">X</span> |
7 | </div> |
iframe在web项目中确实很少使用，但是在手机app中，很多人可能会使用到今天我在使用的过程中就出现了错误unsafe value used in a resource URL context，这个错误后面还跟了一个短网址，打开后就跳转到了angular.io的官方网站去了，大概是到了这里：
https://angular.io/guide/security#xss
如果你英文水平不错，应该看看这个页面就会解决了吧！如果你懒得去官方研究那些难懂的英文，那么久跟着我一起来处理吧！
比如说注册页面，需要用户同意相关法律法规以及注册条款等，因此就需要将相关的条款展示出来，一般的做法就是后端给出json数据或者其他类型的数据，让前端去调用。但是如果是一个简单的页面，那就没有必要进行数据库存储的话，那就直接在iframe中嵌入这个外部的url即可。
如果不在ts中写url，直接在iframe的src中写url，我完全没有问题的，并且不会提示任何错误。但是由于之前我写了一个config.ts将所有的配置都放到了里面，包括url，因此我只能通过下面的方法进行实现！=
一般人会这样去使用url
1 | import ...... |
2 | public thisUrl = "http://www.yousite.com"; |
比如我有一个父组件，而在父组件中有多个相同的组件，比如父组件使用了ngFor循环，而在ngFor下面有一个子组件，这样当循环出来后就有很多个子组件了。那么我们要如何才能获得这几个子组件中的相应数据集合呢？之前我到segmentfault进行了提问，但是并没有人为我回答，终于在对官方文档阅读以及google了很多后，终于找到答案了。下面就让我们去解开angular2的面纱吧。
在angular中，我们需要从相同子组件中获取相关字段，我们可以直接使用@ViewChildren，如果你E文较好，那么我们把这个单词拆开来理解@ViewChildren，View Children，view是视图或者显示，children则是孩子或者子类，简单的说就是获取子组件的相关集合。
在实例中显示如下图：
首先我们直接点击“点此获得点“赞”的数据集合”即可显示相关数据。
另外我们可以通过点击每一个电影下面的+号来查看所获得的数据。
相关源码：
子组件ViewChildrenCom.ts
1 | import { Component, Input } from '@angular/core'; |
2 | |
3 | ({ |
4 | selector: 'vc', |
5 | templateUrl: './ViewChildrenCom.html', |
6 | styleUrls: ['./ViewChildrenCom.css'] |
7 | }) |
8 | export class iViewChildren { |
9 | count=0; |
10 | constructor(){} |
11 | addCount(){ |
12 | this.count++ |
13 | } |
14 | } |
如果你之前对mysql以及Oracle等关系数据库有过了解的话，那么你mongodb对于你来说上手应该是很快的。但是mongodb并不是使用诸如mysql与Oracle中的select、delete、update等关键字进行SQL查询的，因为具mongodb官方介绍说，mongodb是一个nosql的数据库，也就是说，他不需要你对sql语句有一定的了解，但是如果你已经了解了sql语句，那么我相信你学习起来是很快的。
网上已经很多这方面的教程了，为什么我还要在写一次？
主要是因为我在参照网上的相关例子的时候遇到了不少问题，有些例子要么是express版本低，要么就是代码不完整，因此我才打算写这一篇文章来与大家分享下学习心得。本文仅作为express+mongodb入门教程。使用的express版本为~4.15.2，
看到标题就知道应该需要安装些什么软件了吧，我们需要在电脑上安装nodejs和mongodb，而express是nodejs的一个插件，因此需要通过nodejs来进行安装。
nodejs与mongodb的安装非常的简单，只要你会安装QQ，会安装游戏，那么你就会安装nodejs和mongodb了。不过我们需要注意的是，mongodb安装后，我们需要对其进行相应的设置，以提高我们的开发效率。关于mongodb的使用方法，请大家查看官方的文档。
安装好了mongodb后，我们给mongodb的bin目录添加到环境变量里面，这样我们就可以直接在命令提示符中直接使用mongodb的命令了，省的还要跑到mongodb目录下输命令。下面是设置mongodb的环境变量的方法。
在桌面上，我的电脑（计算机或者此电脑）右键，点击属性，选择左边的“高级系统设置”，在弹出窗口中，选择“高级”，看到右下角有个“环境变量”，点击它。
之后我们在“系统变量”（不是Administrator的用户变量）中Path中将mongodb的bin目录填写进去，比如我的bin目录是C:\Program Files\MongoDB\Server\3.4\bin。
然后，打开你的命令提示符窗口，输入mongo,如果看到下面的信息，说明你的设置已经成功了。
1 | C:\Users\Administrator>mongo |
2 | MongoDB shell version v3.4.3 |
3 | connecting to: mongodb://127.0.0.1:27017 |
4 | MongoDB server version: 3.4.3 |
5 | Server has startup warnings: |
6 | 2017-04-19T13:51:47.704+0800 I CONTROL [initandlisten] |
7 | 2017-04-19T13:51:47.704+0800 I CONTROL [initandlisten] ** WARNING: Access control is not enabled for the database. |
8 | 2017-04-19T13:51:47.705+0800 I CONTROL [initandlisten] ** Read and write access to data and configuration is unrestricted. |
9 | 2017-04-19T13:51:47.705+0800 I CONTROL [initandlisten] |
如果使用node+express作为后端的话，肯定是避免不了上传的，因此我们需要使用node+express来对图片或者其他文件进行上传。如果你不使用express也是可以的。这里我们需要使用到一个node插件formidable，这个插件主要提供的就是上传功能。下面开始我们的项目吧。
首先你得搭建node+express环境，如果不知道怎么搭建的，请自行百度，文章前半部分有关于环境搭建的说明。搭建完成后，我们需要安装formidable插件，在node中插件安装的方法就是直接使用命令，在项目当前目录下，直接执行npm install xxxx –save（xxxx是插件名称，–save则是将插件写入packge.json文件中）即可安装插件，如此安装formidable就使用以下命令即可：
1 | npm install formidable --sava |
也可以使用简写的命令
1 | npm i -S formidable //(i即install,-S,这里的s是大写的，即sava) |
安装完成之后，我们首先直接在index.ejs或者index.jade中添加一个表单form，内容如下：
mongodb中实现模糊查询可以直接使用正则表达式，官方也给出了reg的查询方式，首先我们直接来实现下基本的模糊查询，代码很简单，也非常实用，如果你已经创建了一个数据库，并且里面包含了数据，那么你可以直接在命令行使用如下命令进行模糊查询：
db.col.find({name:/小强/})
我们可以看到“/小强/”，这个就是正则表达式了，我们也可以直接使用/^小强/等等正则表达式，都可以查询到相关数据。
但是问题来了，我们在写程序的时候，用户可能查询的是一个变量，这个值并不是固定的，因此使用这样的方法，仅能固定一个关键词。我之前试过以下方法，但是并没有通过
1 | var query="/"+key+"/"; |
2 | User.find({name:query},function(res,req,next){ |
3 | ..... |
4 | }); |
这种方式，我总是无法获取到我想要的数据，而且返回的都是空，最终我发现了问题，应该是我所定义的query是一个string格式，而并不是正则表达式，因此这种方法是不可行的，大家也不要再使用这样的方式了。下面我将直接使用RegExp方式进行查询。这也是最终能够真正实现模糊查询的方法。
1 | var keyword=req.params.keyword; |
2 | var key = {'name': new RegExp(keyword)}; //模糊查询参数 |
3 | Job.find(key,function (err, jobs) { |
4 | if (err) { |
5 | return res.send(err); |
6 | } |
7 | res.json(jobs); |
8 | }) |
到此，我们可以实现真正的模糊查询了！
flexbox故名思议弹性盒子，一般用于手机设备上的web开发。因为它在手机上有着非常不错的体验度并且还支持目前主流的浏览器，因此它是做移动开发中必学的布局模式。
做前端的都知道div+css布局，也听说过响应式布局、流布局。今天我们要深入css的flex弹性布局，首先我们来看一张关于flex布局的图，此图说明了flex弹性布局的相关属性的使用。
上图中main axis是主轴，你也可以理解成x轴，cross axis是侧轴，你可以理解为y轴。但是他们与数学中xy轴不同的是，我们可以选择其中一个轴作为主要的轴进行相对的布局。
main start和main end是主轴的起点与结尾，cross start和cross end也就是侧轴的起点与结尾了。
项目（item）默认沿主轴排列。单个项目（item）占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
flex是使用在父容器中的。使用display来进行设置
1 | display:flex |
ionic是一个基于Angular、Cordova的一个开源框架，它提供了相关的UI库，ionic2中对ionic1进行了更多的优化，让ionic的运行速度，执行效率提高了不少。选择ionic开发web app是个不错的想法。下面就来说下ionic2中的loading效果的实现吧！本文使用TypeScript进行对ionic2的开发，如果不了解微软的TypeScript的，请自己google一下哦！
我们要使用LoadingController，就必须先引入它，直接使用下面的代码即可实现
import { LoadingController } from ‘ionic-angular’;
引入后，我们就需要在constructor中声明了，如下：
constructor(public loadingCtrl: LoadingController){
//……..在这里执行loading效果或者设置loading的图标、css等
}
看上去是很简单哦，要使用这个loading，那么我们得先创建它。
直接可以使用create方法，create方法中又包括了以下几个属性：
spinner（设置loading的SVG图片）
content（设置loading的提示文字或内容）
loadingSpinner（这个我暂时没有理解到底是做什么的）
移除是当我们的loading完成后，自动移除当前loading，移除后，就无法再次在当前组件中使用它了。
加载指示器可以在特定时间后通过传递毫秒数来自动关闭，以duration在加载选项中显示它。默认情况下，加载指示器即使在页面更改期间也会显示，但可以通过设置dismissOnPageChange来禁用 true。要在创建后关闭加载指示器，请调用dismiss()“加载”实例上的方法。onDidDismiss可以调用该 功能，在加载指示灯关闭后执行动作。