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

news/2024/5/20 12:31:06/文章来源:https://blog.csdn.net/dbow21397/article/details/101985219

目录

前言

  前面经过五篇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();

写在之后

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

 

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

 

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

 

转载于:https://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp1.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_901344.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nodejs学习笔记(七)--- Node.js + Express 构建网站简单示例

目录 前言新建项目、建立数据库以及其它准备工作 新建express ejs 项目&#xff1a;sampleEjs创建数据库修改package.json文件,安装session和mysql模块样式和JQuery文件清理项目冗余文件&#xff0c;并添加监听规划路由&#xff0c;并新建相关文件实现登录和注册需要的数据访问…

Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

目录 前言搭建项目及其它准备工作 创建数据库创建Koa2项目安装项目其它需要包清除冗余文件并重新规划项目目录配置文件规划示例路由&#xff0c;并新建相关文件实现数据访问和业务逻辑相关方法 编写mysql-helper.js编写数据访问方法规划业务逻辑返回值编写业务逻辑注册登录首页…

BET365网站websocket解密分析

BET365网站websocket解密分析 ** 前不久和朋友聊到了这个网站,就手痒试了试,但是js解密有点不在行,所以只能去各种博客,github中寻找案例,然后自己在琢磨琢磨。 ** 本文仅用于交流学习 了解BET365网站的童鞋应该都知道它的更新频率是超快的, 这跟他使用的websocket数据…

BET365网站 2020-7 token生成分析

BET365网站 token生成分析 最近发现网站的js token生成逻辑变了&#xff0c;于是从新编辑一下&#xff0c;本篇只说思路&#xff0c;并无代码。 在以前生成token的位置打断点&#xff0c; 然后进行对比会发现这个token并无用处&#xff0c;已经成为一个障眼法了 然后我们根据某…

如何利用客户端缓存对网站进行优化?

介绍 你的网站在并发访问很大并且无法承受压力的情况下,你会选择如何优化? 很多人首先会想从服务器缓存方面着手对程序进行优化,许多不同的服务器缓存方式都有他们自己的特点,像我曾经参与的一些项目中,根据缓存的命中率不同使用过 Com/Enterprise Libiary Caching/Windows服…

如何查看sharepoint2013内所有的网站模板

我们可以在SharePoint 2013 Management powerShell中使用如下命令来获取Sharepoint的Site Template Lists Get-SPWebTemplate

将sharepoint 2013 网站集由基于路径命名转换到基于主机命名

由于一开始对sharepoint 了解不深&#xff0c;所以对基于路径和基于命令的网站集也了解不多&#xff0c;一开始创建网站集的时候全部创建成了基于路径的。再后来需要用到身份验证的时候&#xff0c;出现了很多问题&#xff0c;所以认真学习了一些基于主机命令的网站集创建方法&…

HelloGitHub.com 网站开源了

简介 随着 HelloGitHub 月刊持续更新了一年多&#xff0c;内容变的越来越多。因为内容数据没有结构化&#xff0c;如果还是使用之前的编辑文本的方式编辑月刊内容&#xff0c;会对后面的继续发刊和维护带来了很多问题和多余的工作&#xff0c;例如&#xff1a;查看、查重、分类…

常见的5种网站页面布局方式及特点分析

互联网的世界里&#xff0c;网页是我们接触最多的内容展示平台&#xff08;载体&#xff09;&#xff0c;各种风格设计及不同类型主题的网站数不胜数&#xff0c;笔者作为一名网页设计师&#xff0c;在关注内容本身的同时&#xff0c;也喜欢研究一下网站页面的设计特点&#xf…

地图网站,二三维地图

主要功能包括但不限于世界行政边界(简)、中国行政边界(简)、中国省级边界(简)、坐标定位、绘制采样、测量工具、计算投影代号、文件&#xff08;GEOJSON格式&#xff09;标注定位、图层管理&#xff08;包括近100种在线地图&#xff09;、腾讯街景、 路径规划&#xff08;步行&…

网站被反向代理方式镜像处理方法

现象: 通过对方域名访问网站内容和自己的一模一样,在自己空间新建一个文件,通过对方域名也能访问到 这种是对方通过反向代理方式实现了对自己网站文件的抓取甚至缓存到了对方服务器上,可找到对方代理服务器ip地址进行屏蔽 查找代理服务器ip: 在根目录建立一个123.php,写入<?…

tornado+bootstrap急速搭建你自己的网站

bootstrap既然是这么的流行又能省很多的事为什么不用他呢&#xff1f;再加上牛X的produced by FB的tornado简直如虎添翼了&#xff01; 1. 安装配置 安装所需要的库等内容。这里没什么需要多讲的。tornado直接用easy_install或者pip。bootstrap直接下下来就OK了。当然还需要下载…

使用Revel(go)开发网站

Revel很好的利用了Go语言的goroutine&#xff0c;把每一个request都分配到了goroutine里。不用再写一大堆的回调。如果你写过nodejs的话就会深刻的体会到callback hell是什么样子的。正是由于Revel有了goroutine&#xff0c;Revel的性能也有了很大的提升。官网号称请求的吞吐量…

【python】day10-14 flask框架——电影网站(持续更新中)

目录 1.新建项目 2.进行项目 1.新建readme.txt文件对整个项目进行文字说明 2.按照文字说明进行步骤 1.导入数据库 2.新建app包 3.新建manage.py文件 4.app包下 init.py文件添加代码 5.app包下 新建 admin包 6.templates文件夹下 新建admin包 7.设置修改运行的文件 8…

Linux安装apache、发布网站、修改端口、配置第二顺位默认发布文件

一、安装apache软件和手册 yum install httpd-y httpd-manual 二、发布网站 进入apache的/目录&#xff0c;默认发布目录 cd /var/www/html ##apache的/目录&#xff0c;默认发布目录 打开Xftp连接上自己主机&#xff0c;将要发布的网站文件从本地上次至服务器的/var/www/ht…

为自己的网站添加RSS功能

在浏览天极RSS订阅页面时&#xff0c;可以看到天极网为方便用户定制站点内容而设立的各个RSS频道。浏览者通过订阅不同的RSS(可同时订阅多个网站)&#xff0c;就能在不登录网站的情况下获得及时的新闻信息&#xff0c;还可以避免网页上无用的广告和垃圾信息的干扰。使用RSS会为…

推荐网站 explainshell.com

ls 显示指定目录下的文件和目录&#xff0c;默认为当前目录。 -a 显示所有文件及目录 (ls内定将文件名或目录名称开头为"."的视为隐藏档&#xff0c;不会列出) -l 除文件名称外&#xff0c;亦将文件型态、权限、拥有者、文件大小等资讯详细列出 -r 将文件以相反次序显…

[转老白]根据OSS帐号安装SAP Service网站证书

1、https://service.sap.com/support 2、点击&#xff1a;Quick Links 3、点击&#xff1a;/sso-smp 4、输入咪咪&#xff0c;点击“Apply for SAP Passport” 5、弹出几个消息框&#xff0c;一路YES下去就OK了 注:快捷连接 http://service.sap.com/sso-smp 080814213207.jpg 0…

Chineseocr在GPU上运行的问题及解决方法

Chineseocr在GPU上运行的问题及解决方法 - Sherrrry - 博客园 当yoloTextFlag keras GPUFalse出现如下错误&#xff1a; Tensors are unhashable. (KerasTensor(type_specTensorSpec(shape(None, None, None, 3), dtypetf.float32, nameinput_1), nameinput_1, description&qu…

scrapy+xpath爬取不可描述网站

今天来爬一个让人很有动力的网站&#xff0c;网址就不便放上来了&#xff0c;看看有没有有缘人能得知了 还是先来items.py import scrapyclass AvmooItem(scrapy.Item):# define the fields for your item here like:# name scrapy.Field()namescrapy.Field()birthdayscrapy…