利用nodeJS发送邮件

2017/10/14nodejs 标签:0

做过后端的童鞋都知道发送邮件这样的功能并不复杂,使用目前已有的后端技术比如java、.net、php等编写一个发送邮件的功能是很简单的,但是要编写很多代码,比如java中利用jmail发送邮件并不是一件简单的事情。随着nodeJS的发展,如今利用前端技术实现发送邮件,简直是小菜一碟,不仅仅是代码量减少了,也提高了开发效率。
今天主要说的是使用nodeJS的Nodemailer发送邮件
1、首先我们得准备一个QQ邮箱或者GMAIL邮箱(只要支持smtp服务的就可以),主要用于发送邮件。比如QQ邮箱我们可以做如下设置即可开启POP3/SMTP服务,并且可以发送邮件。
进入QQ邮箱后点击左上角的设置,再选择账户,如图

QQ邮箱POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务

QQ邮箱POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务


将其全部设置为开启即可,这样就可以利用QQ邮箱发送邮件了。 阅读更多

使用webpack配置ES6开发环境

2017/09/24nodejs 标签:0

1、ES6简介

由于ES6无法直接运行在浏览器中,只能通过babel来进行解析转换(编译)成ES5才可以运行在浏览器中,因此我们就需要给ES6搭建相关的环境,才可以开心的写ES6。
目前很多框架都使用了ES6,比如react、vuejs、angular等这些主流前端框架。ES6简洁了很多ES5的代码,让我们可以少写很多代码,当然如果你还了解typescript以及coffeescrpt,那么就更加方便你进行各种开发了。但是问题来了,这些基于ES6的所有框架以及语法糖都需要搭建相关的环境才能够正常运行ES6

2、webpack

webpack是一个前端打包工具,简单说webpack是将所有JavaScript组件以及依赖的库整合为一个js文件,将所有CSS整合为一个css文件。使用webpack可以很方便的打包各种JavaScript组件。

3、准备工作

1)、安装nodeJS(安装方法请到官方查看)
2)、使用npm初始化项目

npm init ES6

ES6是我们开发的项目文件夹
运行上面的命令后会让你填写一些有关项目描述等信息,并且在ES6文件夹下会生成一个package.json的文件
3)、全局安装webpack
npm install -g webpack

4、安装依赖

配置ES6环境,我们需要安装以下几个必须的依赖包 阅读更多

ionic2中使用Firebase与Angularfire

2017/09/02ionic 标签:0

为了把一个老项目中的Firebase以及Angularfire进行升级,并且升级ionic项目,由此入了很多很多的坑,首先使用老项目不论怎么调试怎么重新运行npm install,ionic serve启动项目总是失败而告终,最终无法仍受了,重新直接使用新版的ionic2版本与新版的Firebase与Angularfire2重新重构一次项目。由此遇到了很多升级过程中的坑。
1、升级了Firebase后,出现了找不到AngularFire和FirebaseListObservable的解决办法
由于更新到了最新版的Firebase,而firebase库已经进行了一些调整,导致了找不到AngularFire和FirebaseListObservable,在新版的firebase库中,已经将这两个方法重新封装到了database里面了,并且摒弃了AngularFire,重新使用AngularFireDatabase,因此我们需要这样来调用:

import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
constructor(private af: AngularFireDatabase){this.af.list()}

2、打包之后遇到了这样的问题:Client doesn't have permission to access the desired data. 阅读更多

JavaScript按照经纬度坐标对比与目的地的距离

在开发中可能现在很多都在使用地图定位,而无需在进行复杂的计算距离的方法,因为计算已经被地图给代替了,我们也就不需要再进行坐标到坐标的距离计算了,但是当你只是想使用距离而不想使用地图的时候,你就得进行坐标计算了,这不我在一个项目中就遇到这样的问题,根据手机获取当前地理位置的坐标,然后再与目的地坐标(已知坐标)进行计算,并且得到距离,当然也可以实时更新手机坐标以获得最准确的距离。
下面我们直接看代码吧! 阅读更多

使用css设置打印

我们都知道A4的尺寸是210mm * 297mm,在css中,我们可以直接使用毫米的单位来设置页面的宽高,当然你也可以使用相应的像素进行设置,不过只是通过body或者html来设置宽高的话,可能也会出现问题,而在这里我们需要使用@page来对页面进行定义,@page主要是用于打印的时候定义页面的类型,比如A4,A5,A3等等。下面先来看一下@page的使用方法。

@page{
  size: A4;
  margin: 0;
}

另外在设置好@page后,我们可能还会需要设置分页,分页很简单,直接使用page-break-before:always;或者page-break-after:always;就可以设置分页,在网页中是不会显示任何效果的,不过你可以通过浏览器的打印功能进行PDF预览来查看分页是否符合你的要求。
不过分页的使用必须的写在@media print中,使用如下:

@media print{
  .page-break{
    page-break-before:always;
  }
}

.page-break是需要分页的class的元素。
阅读更多

在electron中使用ionic2

2017/08/05ionic 标签:0

electron是atom官方的一个跨平台的桌面应用开发框架,具官方介绍说是“ Build cross platform desktop apps with JavaScript, HTML, and CSS”,也就是说可以直接使用,你最喜欢的html+css+js来开发跨平台的桌面应用程序。如果你之前使用过angular以及react之类的JS框架,那么你就可以使用这些框架来制作一个跨平台的桌面应用。下面我们主要是说一下在ionic2中,我们要如何使用electron与ionic2进行通信!
由于electron使用的是chrome的V8引擎,也就是可以理解为一个浏览器,因此我们只需要编写想要的前端代码就可以直接运行在electron中了。建议大家边看electron的doc边做开发。因为我也是刚刚开始接触electron,只不过我只是需要从ionic中传递数据到electron中,让其与其他设备进行交互而已,因此我做的只是一个简单的ionic传递数据到electron,其他的我并不深入。因此大家喜欢研究的朋友可以深入研究下electron。
1、安装electron
安装过程可能并不复杂,但是一定要记住要使用淘宝的npm镜像进行安装,因为我翻墙了也无法安装成功,因此建议大家使用cnpm,这个特别快!
在nodejs中键入如下命令即可进行安装
npm install electron -g 阅读更多

关于谷歌Adsense广告

2017/07/30生活/旅行 标签:0

其实我已经很久没有做adsense广告了,也没有做站长了。这个只是个小小的博客,很多朋友问我为什么我的小博客上还挂adsense广告,其实原因很简单,那是因为我的google账号中几年前还留下了60美元,我只是想通过博客投放的方式,让它凑足100美元,然后可以通过西联快汇的方式获得这100美元而已,之后就会撤下adsense广告。
做adsense到底赚不赚钱?这个问题困扰了很多站长,其实很久以前谷歌还未退出中国大陆的时候,谷歌adsense确实是个非常不错的赚钱方式,那时候的佣金足够高,很容易赚钱,但是自从谷歌退出中国大陆后,adsense的发展好像在大陆没有体现出来,因为我们在国内直接都无法访问到谷歌adsense的页面,从而导致了adsense在大陆的业务,因此佣金也是一而再的降低了很多。这个小博客从放广告到现在也就才为我赚到几美元。可见当年一直响当当的adsense的市场已经被百度占领了,其实有时候还是挺怀念当年跟着《月与灯依旧》博主一起到中国邮政提取adsense广告费的生活。那时我们都还很年轻,刚踏入社会,拿到的第一笔收入就是adsense广告费,两人经常欣喜若狂。而如今大势早已过去,我也早就不再做站长,如今百度排名广告充斥了整个市场,百度广告业务也大增。很多人问我为什么不用百度广告,原因很简单,我的网站都未备案,在百度哪里是申请不到广告的。因此也从未做过百度广告。
如今站长行业已经倒下了,其实很简单,我们看一下当年最流行的dedecms和帝国cms的版本更新都不再那么勤了,砸门祖国对网络的监管越来越完善了,这就说明了很多站长已经丢了饭碗了,php也被很多程序员抛弃了。因此谁也搞不清楚以后的网络该如何才能再得到一个稳定的饭碗!
网络的发展太快,让我吃到一点点甜头,我就跟不上了步伐。为那些深夜里依然在努力的站长们致敬,虽然我已经退出了,但是我能体会到站长的苦累!不过我的退出也让我正式踏入了前端开发的大军中,感谢那些无数个夜里让我不断研究代码的cms系统们,感谢那些无数个周末让我不断学习seo技巧的搜索引擎们,感谢那些无数的站长在我群里不断讨论各种优化与学习的站长们。
此致
敬礼!

原生JavaScript模拟事件点击

在某些功能上可能我们会使用到模拟用户点击,当然在jQuery中的模拟事件已经很强大了,但是我们再使用其他库或者使用原生JavaScript的时候,不可能使用jQuery的美元号去实现这个功能了,因此只能通过原生JavaScript去实现,下面我们就来看看代码该如何写。
原生js中可以通过dispatch方法来模拟用户行为,如点击(click),触屏(touchStart)操作等,我们都可以进行模拟。

1、自动触发内置事件

自动触发事件有两种方法,目前支持IE内核以及Firefox内核浏览器,但是并不支持chrome

//自动触发内置事件
function commonTrigger(el, type) {
    var evt = document.createEvent("MouseEvents");
    evt.initEvent(type, true, true);
    el.dispatchEvent(evt);
}
//自动触发内置事件
function trigger(el, type) {
    var event = new MouseEvent(type, {
        'view': window,
        'bubbles': true,
        'cancelable': true
    });
    el.dispatchEvent(event);
}

2、触发自定义事件

以上的内置事件,在chrome中无法执行,我们只能通过触发自定义事件的方法进行触发,相关代码如下:

function customTrigger(el, type) {
    var event = new Event(type);
    el.addEventListener(type, function (e) {
        alert('ok');
    }, false);
    el.dispatchEvent(event);
}

3、使用方法

一看上面的函数,就知道使用方法很简单了,使用如下

var el = document.getElementById('element');
var type = 'click';
commonTrigger(el, type);
trigger(el, type);
customTrigger(el, type);

虽然这个代码能够在浏览器中,特别是chrome中实现点击事件,但是总是无法真实的模拟用户点击,大家慎用,jQuery中的方法,我没有尝试过,不知道是否能够真实模拟用户点击。如果你要模拟真实用户点击事件,得通过其他类库实现!

一些常用的cordova插件推荐

2017/07/26前端开发 标签:0

在做混合(Hybrid)APP开发的时候,我们经常需要使用到很多的插件去调用android或者iOS的原生功能,目前已经有了很多的相关插件了,我们可以使用插件很容易的实现很多我们想要的功能!但是现今插件纵横的时代,我们该如何去选择一些可用而且不错的插件呢?下面我把一些常用的插件总结出来!方便大家在开发过程中进行选择性使用。
选择图片文件插件:
cordova plugin add https://github.com/wymsee/cordova-imagePicker.git
cordova plugin add https://github.com/B-Sides/ELCImagePickerController (just for iOS)
SQLite数据库:
cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git
基本设备咨询: 阅读更多

深入:ionic中使用热更新插件cordova-hot-code-push

2017/07/11ionic 标签:0

之前两篇文章中,《续:ionic中使用热更新插件cordova-hot-code-push》以及《ionic中使用热更新插件cordova-hot-code-push》我都分别叙述了app内容更新以及外壳更新的相关配置与实现,今天我们则深入使用内外更新的功能,并且完成一个启动app后,如果检测有更新,则执行loading,并显示“正在下载更新”、“正在更新中”等字样,如果没有检测到更新,则不显示loading。

1、准备工作

由于ionic中的LoadingController仅能显示一次数据,LoadingController中无法使用变量进行随时更新显示,因此我们得自己编写一个loading样式。我们需要的功能是当用户打开app后就提示有更新,如果是内容更新,那么则自动下载,并提示一个loading,loading中显示“正在下载更新文件”,“下载完成后,准备更新”等等,就有点像12306打开app时的升级提醒吧!

2、相关代码

为了你能快速的入手,请先查看之前的两篇文章后再来进行相应的操作。否则可能会尝试无效!废话不多说,下面直接看代码: 阅读更多

share

AD