前言

　　前面经过五篇Node.js的学习，基本可以开始动手构建一个网站应用了，先用这一篇了解一些构建网站的知识！

　　主要是些基础的东西...

　　如何去创建路由规则、如何去提交表单并接收表单项的值、如何去给密码加密、如何去提取页面公共部分（相当于用户控件和母版页）等等...

　　下面就一步步开始吧^_^!...

新建express项目并自定义路由规则

　　1.首先用命令行express+ejs创建一个项目sampleEjsPre

cd 工作目录

express -e sampleEjsPre

cd sampleEjsPre && npm install

　　2.默认会有routes目录下会有index.js和users.js文件，这里为了不产生其它示例外的困扰，删除user.js文件

　　3.打开app.js文件删除下面两行代码

var users = require('./routes/users');

...

app.use('/users', users);

　　4.在app.js文件中添加如下代码

var subform = require('./routes/subform');

var usesession = require('./routes/usesession');

var usecookies = require('./routes/usecookies');

var usecrypto = require('./routes/usecrypto');            

...

app.use('/subform', subform);

app.use('/usesession', usesession);

app.use('/usecookies', usecookies);

app.use('/usecrypto', usecrypto);

　　通过URL访问后，根据路由规则先到哪个文件，再到哪个文件的过程在上一篇文章（Nodejs学习笔记（五）--- Express安装入门与模版引擎ejs）中有说到，这里就不多说了!

　　5.在routes目录下添加subform.js、usesession.js、usecookies.js、usecrypto.js文件，并在对应的js文件中添加如下代码

var express = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function(req, res) {

  res.render('subform', { title: '提交表单及接收参数示例' });

});

module.exports = router;

subform.js 代码

var express = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function(req, res) {

  res.render('usesession', { title: '使用session示例' });

});

module.exports = router;

usesession.js 代码

var express = require('express');

var router = express.Router();

router.get('/', function(req, res) {

  res.render('usecookies', { title: '使用cookies示例' });

});

module.exports = router;

usecookies.js 代码

var express = require('express');

var router = express.Router();

router.get('/', function(req, res) {

  res.render('usecrypto', { title: '加密字符串示例' });

});

module.exports = router;

usecrypto.js 代码

　　6.在views目录下添加subform.ejs、usesession.ejs、usecookies.ejs、usecrypto.ejs文件,并在views目录下除了error.ejs外所有ejs文件中添加如下代码

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

    <a href="/">首页</a>

    <a href="/subform">如何提交表单并接收参数?</a>

    <a href="/usesession">如何使用session?</a>

    <a href="/usecookies">如何使用cookies?</a>

    <a href="/usecrypto">如何字符串加密?</a>

  </body>

</html>

　　7.在app.js中添加8000端口监听并运行

...

app.listen(8000);

...

　　运行界面如下：

　　点击各链接都能正常跳转到对应的页面！这样第一步的目录就算达到了！

如何提取页面中的公共部分?

　　在上一步创建的网站中每个页面都几乎一样，现在都只有导航部分？每个页都要写？当然不是，我们可以提取出来

　　1.在views目录下新建一个nav.ejs文件，并添加如下代码

<a href="/">首页</a>

<a href="/subform">如何提交表单并接收参数?</a>

<a href="/usesession">如何使用session?</a>

<a href="/usecookies">如何使用cookies?</a>

<a href="/usecrypto">如何字符串加密?</a>

　　2.把views目录下index.ejs、subform.ejs、usesession.ejs、usecookies.ejs、usecrypto.ejs修改成如下代码

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

      <% include nav %>

  </body>

</html>

　　运行页面，发现和上次运行时没有作何区别，有了这样的办法更有利于减少重复代码、也更有利于统一布局！

<% include 文件名 %> express提供include来嵌入其它页，这和html嵌入其它页类似

如果用过express2.0版本的会发现当时没有这个include，用的是一个模版文件layout.ejs来布局!

如何提交表单并接收参数?

　　如果要做一个网站应用，不可避免的会遇到表单的提交及获取参数的值，下面我们来看看用node.js + express怎么做

　　先来构建一个表单简单模拟登录GET方式提交数据

　　1.打开subform.ejs文件，修改文件代码为如下：

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

      <% include nav %>

      <form>

          用户名：<input type="text" id="txtUserName" name="txtUserName" />

          密码：<input type="password" id="txtUserPwd" name="txtUserPwd" />

          <input type="submit" value="提交">

      </form>

  </body>

</html>

subform.ejs 示例代码

　　2.打开subform.js我们试着接收参数值并输出到控制台

var express = require('express');

var router = express.Router();

router.get('/', function(req, res) {

  var

  userName = req.query.txtUserName,

  userPwd = req.query.txtUserPwd,

  userName2 = req.param('txtUserName'),

  userPwd2 = req.param('txtUserPwd');

  console.log('req.query用户名:'+userName);

  console.log('req.query密码:'+userPwd);

  console.log('req.param用户名:'+userName2);

  console.log('req.param密码:'+userPwd2);

  res.render('subform', { title: '提交表单及接收参数示例' });

});

module.exports = router;

subform.js get方式源码

　　3.运行，并提交表单在浏览器中运行：http://localhost:8000/subform，输入表单项并提交，可以发现url发生了变化

　　可以发现url中出现了我表单中输入并要提交的值！

　　我们再看看控制台的输出

　　我们完成了GET方式提交表单并接收到了值，不错^_^!（稍后在后面再去讲得到值的方式和区别）

　　再来在上面的代码基础上去修改一下表单的method简单模拟登录POST方式提交数据

　　1.首先修改一下subform.ejs文件中的form标签，修改为如下：

<form method="post">

...

</form>

　　2.再在subform.js中添加代码，接收post提交、接收参数并输出到控制台

...

router.post('/',function(req, res){

  var

  userName = req.body.txtUserName,

  userPwd = req.body.txtUserPwd,

  userName2 = req.param('txtUserName'),

  userPwd2 = req.param('txtUserPwd');

  console.log('req.body用户名:'+userName);

  console.log('req.body密码:'+userPwd);

  console.log('req.param用户名:'+userName2);

  console.log('req.param密码:'+userPwd2);

　res.render('subform', { title: '提交表单及接收参数示例' });

});

...

　　3.运行，并提交表单在浏览器中运行：http://localhost:8000/subform，输入表单项并提交，可以发现url不会发生变化

　　改为post方式后，会发现不会跟get方式提交一样在url中出现了表单中输入并要提交的值！

　　我们再看看控制台的输出

　　OK，我们完成了POST提交表单并接收参数!

　　再回过头看看GET和POST方式接收值，从直接效果上来看

　　req.query：我用来接收GET方式提交参数

　　req.body：我用来接收POST提交的参数

　　req.params：两种都能接收到

　　大家自行看看Express的Request部分的API: http://expressjs.com/api.html#req.params

　　这里着重解释一下req.body，Express处理这个post请求是通过中间件bodyParser，你可以看到app.js中有一块代码

...

var bodyParser = require('body-parser');

...

app.use(bodyParser.json());

app.use(bodyParser.urlencoded());

...

　　没有这个中间件Express就不知道怎么处理这个请求，通过bodyParser中间件分析 application/x-www-form-urlencoded和application/json请求，并把变量存入req.body，这种我们才能够获取到！

如何字符串加密?

　　当我们提交表单后，比如密码这些敏感信息，不做个加密处理那也太不把用户私密信息当回事了，Node.js提供了一个加密模块 Crypto http://nodejs.org/api/crypto.html

　　下面我们用个示例使用一下

　　1.打开usecrypto.js，修改代码为如下：

var express = require('express');

var router = express.Router();

var crypto = require('crypto');

/* GET home page. */

router.get('/', function(req, res) {

  res.render('usecrypto', { title: '加密字符串示例' });

});

router.post('/',function(req, res){

  var

  userName = req.body.txtUserName,

  userPwd = req.body.txtUserPwd;

  //生成口令的散列值

  var md5 = crypto.createHash('md5');   //crypto模块功能是加密并生成各种散列

  var en_upwd = md5.update(userPwd).digest('hex');

  console.log('加密后的密码:'+en_upwd);

  res.render('usecrypto', { title: '加密字符串示例' });

});

module.exports = router;

　　2.打开usecrypto.ejs，修改代码为如下

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

      <% include nav %>

      <form method="post">

          用户名：<input type="text" id="txtUserName" name="txtUserName" />

          密码：<input type="password" id="txtUserPwd" name="txtUserPwd" />

          <input type="submit" value="提交">

      </form>

  </body>

</html>

　　3.运行，输入并提交表单，查看控件台输出

　　成功MD5方式加密！

　　其中用到了createHash(algorithm)方法 ,这是利用给定的算法生成hash对象

　　Node.js提供的加密模块功能非常强大，Hash算法就提供了MD5、sha1、sha256等，根据需要去使用

　　update(data, [input_encoding])方法，可以通过指定的input_encoding和传入的data数据更新hash对象，input_encoding为可选参数，没有传入则作为buffer处理（input_encoding可为'utf-8'、'ascii'等）

　　digest([encoding])方法，计算数据的hash摘要值，encoding是可选参数，不传则返回buffer (encoding可为 'hex'、'base64'等)；当调用digest方法后hash对象将不可用；

如何使用session?

　　Internet通讯协议分为stateful和stateless两类，对Web开发有一定了解的应该知道，http是stateless协议，客户端发送请求到服务端建立一个连接，请求得得到响应后连接即中断，服务器端不会记录状态，因此服务器端想

　　要确定是哪个客户端提交过来的请求，那就必须要借助一些东西去完成，就是session和cookies，现在我们先说说session，以及在nodejs下使用session !

　　session存在于服务器端，需要cookies的协助才能完成；服务器端和客户端通过session id来建立联系（具体session和cookies怎么协作的，可以自已去补充点相关知识，这里只简单提一下，不展开了，要不然这篇文章就更杂了^_^!）

　　express中可以用中间件来使用session，express-session( https://github.com/expressjs/session ) 可以存在内存中，也可以存在mongodb、redis等中...

　　更多中间件：https://github.com/senchalabs/connect#middleware

　　下面我们通过示例看看怎么使用session (内存方式)

　　示例设计思路：使用两个页面，一个登录，两个页都判断是否有这个session,如果有，显示已登录，没有则显示一个登录按钮，点此按钮，记录session

　　1.首先通过npm安装这个中间件，打开package.json文件，在dependencies节点下添加一个键值对 "express-session" : "latest"

  "dependencies": {

    ...,

    "express-session" : "latest"

  }

　　lateset：最新的

　　2. cd到项目根目录下，执行npm install

　　3.打开app.js，添加如下代码

var express = require('express');

var path = require('path');

var favicon = require('static-favicon');

var logger = require('morgan');

var cookieParser = require('cookie-parser');

var bodyParser = require('body-parser');

var session = require('express-session');

...      

//这里传入了一个密钥加session id

app.use(cookieParser('Wilson'));
//使用靠就这个中间件

app.use(session({ secret: 'wilson'}));

...

　这些options就不解释了，通过上面中间件的链接，自已看一下

　　4.我这里使用usesession和usecookies作示例，修改js和ejs如下

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

      <% include nav %>

      <% if(locals.islogin){ %>

         用户已登录

    <% } else { %>

         <form method="post">

              <input type="submit" value="登录">

          </form>

    <% } %>

  </body>

</html>

usesession.ejs 和 usecookies.ejs

var express = require('express');

var router = express.Router();

router.get('/', function(req, res) {

  if(req.session.islogin)

  {

       console.log('usesession:' + req.session.islogin);

     res.locals.islogin = req.session.islogin;

  }

  res.render('usesession', { title: '使用session示例' });

});

router.post('/', function(req, res) {

  req.session.islogin = 'success';

  res.locals.islogin = req.session.islogin;

  res.render('usesession', { title: '使用session示例' });

});

module.exports = router;

usession.js 示例代码

var express = require('express');

var router = express.Router();

router.get('/', function(req, res) {

  if(req.session.islogin)

  {

      console.log('usecookies:' + req.session.islogin);

    res.locals.islogin = req.session.islogin;

  }

  res.render('usecookies', { title: '使用cookies示例' });

});

router.post('/', function(req, res) {

  req.session.islogin = 'success';

  res.locals.islogin = req.session.islogin;

  res.render('usecookies', { title: '使用cookies示例' });

});

module.exports = router;

usecookies.js 示例代码

　　5.运行并查看

　　第一次运行时，查看两个页，效果如下：

　　6.点击登录按钮后，再查看这两个页

　　7.关闭浏览器，再打开查看这两个页，如第5步截图效果

　　session的使用成功!

　　官方示例：https://github.com/visionmedia/express/blob/master/examples/session/index.js

如何使用cookies?

　　如果是登录，那常见就是“记录密码”或“自动登录”功能，这个一般用 cookies来完成

　　cookies存在客户端，安全性较低，一般要存入加密后的信息；建议要设置使用过期时间或不使用时删除掉

　　express也同样可以用中间件来使用：https://github.com/expressjs/cookie-parser

老套路，通过一个示例了解一下

　示例设计思路：在上面session示例的基础上，在usecookies部分登录同时记录cookies，来自动登录

1.在上面session示例的基础上修改一下usecookies.js

var express = require('express');

var router = express.Router();

router.get('/', function(req, res) {

  if(req.cookies.islogin)

  {

       console.log('usecookies-cookies:' + req.cookies.islogin);

       req.session.islogin = req.cookies.islogin;

  }  

  if(req.session.islogin)

  {

      console.log('usecookies:' + req.session.islogin);

    res.locals.islogin = req.session.islogin;

  }

  res.render('usecookies', { title: '使用cookies示例' });

});

router.post('/', function(req, res) {

  req.session.islogin = 'success';

  res.locals.islogin = req.session.islogin;

  res.cookie('islogin', 'sucess', { maxAge: 60000 });

  res.render('usecookies', { title: '使用cookies示例' });

});

module.exports = router;

　　2.运行访问 http://localhost:8000/usecookies，点击登录按钮登录成功并记录cookies

maxAge为过期时长，毫秒为单位，我设置一分钟

　　3.关闭浏览器，再次访问http://localhost:8000/usecookies ，页面显示已登录

4.再次关闭浏览器，过一分钟再访问http://localhost:8000/usecookies，页面不再是已登录，而是显示登录按钮，表示cookies过期，不会自动登录

　　cookies的使用到此也成功！

　　官方示例：https://github.com/visionmedia/express/blob/master/examples/cookies/app.js　　　　

如何清除session和cookies?

　　清除非常简单，就不用示例说明了，有兴趣自已定义个路由规则，试试

//清除cookies

res.clearCookie('islogin');

//清除session

req.session.destroy();

写在之后

　　最近比较忙，更新距上了篇时间较长了，本篇东西讲的比较杂，讲到的也比较有限，主要是为了后来会写的一个示例打基础；

　　本篇内容讲到的一些知识点，其实都可以单独拿一整篇去讲，本篇基本原则是为了看了之后能使用；

　　要想弄清楚原理或者更多的相关知识，自已可以花点时间去了解，或者找点资料去丰富一下，当然也可以留言，在我觉得我没乱说的情况下我会尽量解答^_^！

Nodejs学习笔记（六）--- Node.js + Express 构建网站预备知识的更多相关文章

Nodejs学习笔记（六）—Node.js + Express 构建网站预备知识
前言前面经过五篇Node.js的学习,基本可以开始动手构建一个网站应用了,先用这一篇了解一些构建网站的知识! 主要是些基础的东西... 如何去创建路由规则.如何去提交表单并接收表单项的值.如何去给密 ...
modeJS 深了解（1）： Node.js + Express 构建网站预备知识
转载:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp1.html 目录前言新建express项目并自定义路由规则如何提取页面中的 ...
Nodejs学习笔记（七）--- Node.js + Express 构建网站简单示例
目录前言新建项目.建立数据库以及其它准备工作新建express + ejs 项目:sampleEjs 创建数据库修改package.json文件,安装session和mysql模块样式和JQ ...
Nodejs学习笔记（七）—Node.js + Express 构建网站简单示例
前言上一篇学习了一些构建网站会用到的一些知识点:https://www.cnblogs.com/flyingeagle/p/9192936.html 这一篇主要结合前面讲到的知识,去构建一个较为完整 ...
Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
目录前言搭建项目及其它准备工作创建数据库创建Koa2项目安装项目其它需要包清除冗余文件并重新规划项目目录配置文件规划示例路由,并新建相关文件实现数据访问和业务逻辑相关方法编写mys ...
[转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录前言搭建项目及其它准备工作创建数据库创建Koa2项目安装 ...
Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例
前言前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...
深度学习-tensorflow学习笔记(1)-MNIST手写字体识别预备知识
深度学习-tensorflow学习笔记(1)-MNIST手写字体识别预备知识在tf第一个例子的时候需要很多预备知识. tf基本知识香农熵交叉熵代价函数cross-entropy 卷积神经网络 s ...
Nodejs学习笔记（五）--- Express安装入门与模版引擎ejs
目录前言 Express简介和安装运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set(name,value) app.use ...

随机推荐

SQL Server 2005中更改sa的用户名和密码
修改数据库SA账号名称的代码如下: 代码如下: Alter LOGIN sa DISABLE Alter LOGIN sa WITH NAME = [systemAccount] "sys ...
Same Tree
Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...
C和CPP关于条件运算符的区别
条件运算符形式: cond ? expr1 : expr2; 在C语言中执行过程是: 先对cond求值,值为真返回expr1的值,否则返回expr2的值.(右值) gcc测试结果: 在Cpp中如果两个 ...
Java 如何有效地避免OOM：善于利用软引用和弱引用
Java 如何有效地避免OOM:善于利用软引用和弱引用想必很多朋友对OOM(OutOfMemory)这个错误不会陌生,而当遇到这种错误如何有效地解决这个问题呢?今天我们就来说一下如何利用软引用和弱引 ...
《TCP/IP详解卷一》读书笔记-----UDP&IP 分片
1.进程每产生一个UDP数据报就由一个IP数据报进行发送,而在TCP中,一个IP数据报并不与每个TCP报文段一一对应 2.UDP的端口号和TCP的端口号是相互独立的,对那些众所周知的端口号TCP和UD ...
poj2387 Til the Cows Come Home 最短路径dijkstra算法
Description Bessie is out in the field and wants to get back to the barn to get as much sleep as pos ...
学员信息录入(StuInfoManager) 用分层实现(既MySchool后的一个案例)
数据库数据表名 Student 中文表名学员信息表字段显示字段名数据类型字段大小备注和说明编号 stu_id int 主键,自增1 学生姓名 stu_name varchar 50 不 ...
main方法的理解
1),在执行一个类的时候,所找到的方法是mian(). 2)string args[]:输入的参数. public class StaticDemo08{ public static void mai ...
ClickJacking（点击劫持）
问题: 点击劫持(ClickJacking)是一种视觉上的欺骗手段.大概有两种方式,一是攻击者使用一个透明的iframe,覆盖在一个网页上,然后诱使用户在该页面上进行操作,此时用户将在不知情的情况下点 ...
PHP中的魔术变量
PHP中的常量大部分都是不变的,但是有8个常量会随着他们所在代码位置的变化而变化,这8个常量被称为魔术常量. 名称说明 __LINE__ 文件中的当前行号. __FILE__ 文件的完整路径和文件名 ...

Nodejs学习笔记（六）--- Node.js + Express 构建网站预备知识

目录

前言