Nodejs建站教程:注册登录流程的简单实现

更多腾讯海量技术文章,请关注云加社区:https://cloud.tencent.com/developer/column

作者:云+社区用户

1. 使用Backbone实现前端hash路由

登录注册页面如下:

初步设想将注册和登录作为两个不同的url实现,但登录和注册功能的差距只有form表单部分,用两个url实现显然开销过大,所以最终方案为使用hash作为前端路由,根据url的hash值切换相应的表单显示。

很多致力于SPA开发的前端框架都具备hash路由功能,考虑到嗨猫本身是一个类博客、偏重静态展示的网站,所以最后选择了轻量级的Backbone最为前端框架。

Backbone实现hash路由的代码很简单:

随后,将登录和注册的a标签的href分别修改为#login和#signup便实现了简单的hash路由。

2. 使用jquery-validation完善前端表单验证

前端表单验证是必不可少的一项功能,前端的js代码验证表单的完整性并拦截一部分非法的表单输入,一定程度上减少服务端的压力。

初步想自己造轮子,但考虑到开发周期和轮子的成熟性,最终选择jquery-validation插件作为前端表单验证工具。

jquery-validation插件和表单元素的name属性绑定,以登录表单为例,其dom结构如下:

根据input控件的name属性,jquery-validation的验证代码如下:

其中signname和norepeat是自定义的验证规则,signname如下:

用户可以使用用户名或邮箱登录,两者共享一个input控件,signname验证是用户名还是邮箱,如果是邮箱,便保证输入邮箱格式的正确性。

norepeat验证密码不能出现连续3次的字符

errorPlacement 指明错误提示信息的位置,我们给它提供了一个容器。

submitHandler监听submit按钮,首先拦截默认的表单提交请求,替换为自定义的提交逻辑,本项目中使用ajax提交。并且为了防止用户频繁点击submit按钮造成重复提交,我们首先将form的action属性清空,待请求完毕后重新赋值。

3. 使用node-canvas模块增加验证码功能

node-canvas是一个将canvas API迁移到nodejs使用的扩展模块,使用node-canvas模块可以在nodejs服务器生成图片(当然它的作用不仅限于此,但项目暂时只用到生成图片功能),下面详细讲述如何搭建登录&注册表单验证码功能。

3.1 部署node-canvas依赖环境

node-canvas需要操作系统安装底层图形库,各操作系统的依赖如下:

目前开发环境为mac,简单记录一下环境部署操作以及遇到的一些坑。 首先按照上图安装底层库,由于brew安装的Cairo版本过低,将会导致canvas不正确的绘图(参考https://github.com/Automattic/node-canvas/issues/639)。这是Cairo的bug,所以必须保证Cairo版本在1.14.1以上。使用brew更新Cairo:

brew update brew upgrade Cairo

安装成功后,在项目根目录下安装node-canvas:

npm install canvas --save-dev

至此,环境部署完毕,进入开发阶段。

3.2 服务端

打开api/controllers/Auth/AuthController,添加生成验证码图片的函数 generateVerifyImg():

然后在登录&注册的API中生成验证码图片并渲染进模板文件:

其中非常关键的一步是将验证码通过session保存,以便进行验证。

随后,在接受表单post的API中加入验证码过滤逻辑:

项目至此已经具备了基本的验证码功能。验证码的一个重要需求是用户手动刷新验证码,下面简单讲述实现过程。

3.3 实现验证刷新功能

1.首先在前端js代码中添加验证码图片刷新事件监听:

2.然后配置sails的config/route.js:

// 刷新验证码 'get /getverifycode': 'Auth/AuthController.getVerifyImg'

3.在Auth/AuthController中添加getVerifyImg()

API接受前端的验证码刷新请求:

这个API功能非常简单,获取新的验证码图片并返回给前端,但是必须谨记将验证码通过session记录。

前端通过ajax获取到新的验证码图片url替换旧图即可。

4. 实现登录&注册成功后的页面跳转

由前端js控制跳转,目前统一跳转到首页:

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180130A0K6A600?refer=cp_1026

同媒体快讯

相关快讯

扫码关注云+社区