Web应用初体验——登录登出验证系统

本系统所用技术包括:jade模板(加强的html),bootstrap(css样式集),express(Web应用框架),js,nodejs,mysql,token验证等。

GitHub地址:https://github.com/qingywen/DEMO/tree/master/Greeni

基本功能如下:

  1. 初次登录该系统首页可浏览公共页面并进行注册。
  2. 成为注册用户后可登录个人中心,关闭浏览器仍保持一天之内可随时登陆。
  3. 登录后可注销,此后则只能浏览公共页面。
  4. 登录一天后或者注销后,若访问个人中心则自动引导到登录页面。

step1

先写前端界面,包括index.html(公共页面),login.html(登录页面),signup.html(注册页面),my.html(个人中心),这里用到了bootstrap的示例页面signin,carousel和dashboard的页面结构和样式。

也许会有人跟我一样刚开始接触bootstrap并不知从何用起,以下做个简短说明:bootstrap是一个css样式集,用的好可以为你的项目锦上添花,用不好反倒累赘,因此还需好好琢磨。了解bootstrap的菜鸟教程可以浏览菜鸟教程。实际上,bootstrap3的中文官网已经讲解的非常详尽。不过仍建议先阅读菜鸟教程进行热身。

页面js主要功能为表单提交,提交前先进行简单的验证,再序列化表单,接着用ajax提交到服务器,最后关闭表单的默认提交功能。

step2

前端界面搭建好后,我们来新建一个数据库,数据库表中只有一个users表,结构如下:

Field Type Null Key Default Extra
P_Id int(11) No PRI NULL auto_increment
email varchar(255) NO UNI NULL
password varchar(255) NO NULL

现在表数据如下:

P_Id email password
1 1195259521@qq.com 123
9 qingywen@gmail.com 123
12 wenwu@gmai.com 123
14 123@qq.com 123

数据库导出文件为greeni.sql,在本地数据库中将sql文件导入新建数据库greeni即可。

step3

前端、数据库搭建好后,我们即可开始整个应用的系统搭建,通过后台逻辑将前端和数据库连接起来。

这里在一个新文件夹中用express进行项目初始化,当然前提是本地用npm安装了express。接着在package.json中加入db、ejs、jsonwebtoken三个模块,然后用cnpm install进行安装。

这里我们需要将app.js文件中默认的渲染引擎从jade改为ejs。

1
2
3
4
// view engine setup
app.set('views', path.join(__dirname, 'views'));
pp.engine('.html', require('ejs').__express);
app.set('view engine', 'jade');

修改routes文件夹下index.js、my.js的路由定向和事件句柄,此时要用到数据库,因此新建db文件夹,在db目录下新建DBConfig.js和SQL.js,分别用作数据库的连接配置文件和SQL语句模块。

在写登录验证的逻辑时,我们根据用户邮箱用jsonwebtoken随机生成一个令牌,并发送用户,用户在cookie中保存此令牌,在下次请求私有资源时则不必明文发送密码,而是在发送请求时随着cookie自动将令牌发送给服务器,服务器收到令牌验证成功后则返回用户所请求的资源,否则令牌有可能被恶意更改,则拒绝请求。

此时系统搭建完毕,我么可以用npm start来启动项目,注意bin文件夹写的端口号为8000,因此访问地址为:127.0.0.1:8000。

step4

最后我们想做一个小优化,如果每个用户登录到个人中心的页面都一样的话,这个个人中心恐怕是个假个人中心,因此我们需要对不同的用户请求返回一样的页面结构但是不同的用户信息。为求简易,这里我们只对每个用户返回各自的email,并添加到页面上。

因为页面首先需要在服务器上渲染才能返回给客户端,最经济的思路当然是在服务端渲染出不同的页面再返回给客户端。而html并没有变量的功能,因此我们使用jade模板(现更名为pug,但jade模块仍有效)来代替html。jade是一个非常高效的模板引擎,提供了变量、for循环等功能。有一个非常好的jade语法学习网站安利给大家。这里我们需要将之前的html转为jade,手动改编太麻烦,用这个html2jade的网站来转化吧。

得到jade格式的前端文件,我们修改app.js的模板引擎设置,将ejs引擎改回默认的jade引擎:

1
2
3
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

在routes下的my.js中,返回个人中心页面同时,返回用户的email:

1
res.render('my',{email: decoded.email});

修改views文件夹下my.jade文件中的标题,用来接收服务器传送来的email变量:

1
a.navbar-brand(href='#') #{email}

此后大功告成,每个用户登陆后访问个人中心的页面,其页面标题都是自己用来注册的email,因此此个人中心成立。

其他

  1. 表单序列化方法serialize(),阻止表单默认提交方式preventDefault(),以及设置cookie的CookieUtil.set()均来自《JS高级程序设计》。
  2. 登录后通过令牌验证来避免密码泄露用到jwt.sign() jwt.verify(),建议细看jsonwebtoken包下的README.md,讲解很详细。
  3. README.md文件是个好东西,许多网上的经验贴都没有官方使用文档讲的简单易懂。sublime有许多markdown实时阅览插件很方便,此博主有分享。
  4. 源代码是最后版本,因此前文所述中间过程可能不能详尽体现,但可以按照上述方式进行此系统的构建。这篇记录不是使用说明,仅作一个Guide,有问题Google和百度并行解决。若解决不了可联系数据库中P_Id为1的邮箱,我会尽快为你回复。