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

news/2024/5/20 22:48:10/文章来源:https://blog.csdn.net/weixin_34242658/article/details/85626310

目录

前言

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

写在之后

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

 

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

 

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

 

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

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

相关文章

在C#开发中如何使用Client Object Model客户端代码获得SharePoint 网站、列表的权限情况...

自从人类学会了使用火&#xff0c;烤制的方式替代了人类的消化系统部分功能&#xff0c;从此人类的消化系统更加简单&#xff0c;加速了人脑的进化&#xff1b;自从SharePoint 2010开始有了Client Side Object Model &#xff0c;我们就可以不用在服务器上开发SharePoint解决方…

万网免费主机wordpress快速建站教程-域名申请

在上一篇文章中&#xff0c;小伙伴们已经申请好了万网的免费主机&#xff0c;接下来教大家如何申请域名。 由于万网免费主机要绑定在阿里备案的域名&#xff0c;现在以万网的域名注册为例子。 首先进入万网域名注册页面&#xff08;http://www.net.cn/domain&#xff09;&#…

网站统计中的数据收集原理及实现_埋点统计

网站数据统计分析工具是网站站长和运营人员经常使用的一种工具&#xff0c;比较常用的有谷歌分析、百度统计和腾讯分析等等。所有这些统计分析工具的第一步都是网站访问数据的收集。目前主流的数据收集方式基本都是基于javascript的。本文将简要分析这种数据收集的原理&#xf…

一个普通网站发展成大型网站的架构演变历程

2019独角兽企业重金招聘Python工程师标准>>> 1、物理分离webserver和数据库 最开始&#xff0c;由于某些想法&#xff0c;于是在互联网上搭建了一个网站&#xff0c;这个时候甚至有可能主机都是租借的&#xff0c;但由于这篇文章我们只关注架构的演变历程&#xff0…

IT招聘网站

2019独角兽企业重金招聘Python工程师标准>>> http://www.ithelloworld.com/ 转载于:https://my.oschina.net/lilugirl2005/blog/359953

20款覆盖全面的响应式网站设计工具

2019独角兽企业重金招聘Python工程师标准>>> 灵活的栅格和布局&#xff0c;响应式的图片和智能的CSS媒体查询&#xff0c;构成了响应式网页的主要特征。当用户扔下沉重的笔记本电脑拿起平板&#xff0c;响应式的网站能够自然而然地随之适配&#xff0c;掏出手机也毫…

微软正式发布Azure Storage上的静态网站

微软正式宣布了Azure Storage上的静态网站&#xff0c;提供了从托管在Azure Storage上的HTML、CSS和JavaScript文件提供内容的能力。静态网站包含内容固定的Web页面&#xff0c;同时仍然允许利用JavaScript等客户端代码来创建丰富的用户体验。 有了这个新功能&#xff0c;继用于…

flac转mp3_免费的音视频格式转换网站-ncm, qmc, mflac, mgg转mp3

1、.mov转换为.mp4.mov是QuickTime影片格式&#xff0c;是Apple公司开发的一种音频、视频文件格式。我们只需要iMovie打开相关文件&#xff0c;然后重新导出即可&#xff0c;iMovie默认导出的视频格式就是.mp42、.mp4转换为.gifMP4轉GIF轉換器。在线自由 - Convertio​converti…

对某网站被挂黑广告源头分析

公粽号&#xff1a;黒掌 一个专注于分享网络安全、黑客圈热点、黑客工具技术区博主&#xff01; 背景 目标站点是国内一家有影响力的综合技术网站。通过网管人员及技术人员多次排查均告失败或者未能解决问题。 网站不断被人疑似挂马&#xff0c;在其所有网站上发现挂有图片的…

Wordpress 网站搭建及性能监控方法详解!

前言 说到 Wordpress&#xff0c;大家往往想到的是博客&#xff0c;其实&#xff0c;如今的 WordPress 已经成为全球使用量最多的开源 CMS 系统。并且&#xff0c;如果你有一定的技术基础稍加改动&#xff0c;就可以搭建出新闻网站、企业网站、电影网站&#xff0c;甚至是商城系…

程序员资源网站

2019独角兽企业重金招聘Python工程师标准>>> soho接单 程序员客栈 http://www.proginn.com/ 极客邦soho http://www.looip.cn/ 好用的markup博客 droplets http://dropplets.com/ 招聘网站 电猴 &#xff08;针对电商&#xff09; http://www.dianhou.com/…

宠物合成网站源码_如何阅读大型前端开源项目的源码,授人以鱼不如授人以渔...

目前网上有很多「XX源码分析」这样的文章&#xff0c;不过这些文章分析源码的范围有限&#xff0c;有时候讲的内容不是读者最关心的。同时我也注意到&#xff0c;源码是在不断更新的&#xff0c;文章里写的源码往往已经过时了。因为这些问题&#xff0c;很多同学都喜欢自己看源…

网站技术架构与性能优化,附高性能思维导图

一&#xff09;.大型软件系统的特点1.高并发2.高可用3.海量数据4.用户分布广泛&#xff0c;网络情况复杂5.安全环境恶劣6.需求快速变更&#xff0c;发布频繁二&#xff09;.大型网站架构发展历程1.应用服务和数据服务分离2.大量使用缓存改善网站性能(CDN加速、反向代理)3.使用服…

杂志类网站参考

2019独角兽企业重金招聘Python工程师标准>>> 爱范儿 http://www.ifanr.com/ Ghost http://marketplace.ghost.org/Medium https://medium.com/ 转载于:https://my.oschina.net/lilugirl2005/blog/593673

php 新浪微博登陆,PHP使用新浪微博登入第三方网站实例代码

之前我写过一个使用php使用QQ一键登入第三方网站的教程&#xff0c;今天我再给大家分享PHP使用新浪微博API一键登入第三方的网站&#xff0c;好吧&#xff0c;不说废话&#xff0c;下面开始。注册登入新浪微博以后&#xff0c;可以点在新浪微博底部的开放平台链接进入&#xff…

这些优化 Drupal 网站速度的超简单办法,你忽略了多少?

“怎么样能让我的 Drupal 网站更快一些&#xff1f;”是我们最常遇到的一个问题。站点速度确实非常重要&#xff0c;因为它会影响你的 SEO排名效果、访客是否停留以及你自己管理网站所需要的时间。今天我们就来看看那些通过 Drupal 自带界面便能够实现的提速操作。启用缓存通过…

发布网站的程序池应用程序_大程序? 经常发布

发布网站的程序池应用程序我正在研究“ 敏捷和精益计划管理&#xff1a;整个组织的协作”的发行计划一章。 有许多计划发布的方法。 但是关键呢&#xff1f; 经常释放。 多常&#xff1f; 我建议每月一次。 是的&#xff0c;每月一次真正&#xff0c;诚实到善的发布。 我敢打…

【网站搭建】用阿里云服务器搭建个人网站

文章目录搭建过程如下&#xff1a;1 准备工具&#xff1a;2 详细过程&#xff08;1&#xff09;进入控制台&#xff08;2&#xff09;进入轻量应用服务器管理台&#xff08;3&#xff09;远程连接&#xff08;4&#xff09;下载宝塔面板&#xff08;5&#xff09;添加网站&…

【网站搭建】完整部署django+uwsgi+nginx

上次记录了云服务器上运行django的过程&#xff0c;成功打开HelloWorld界面&#xff0c;但是这样每次运行都需要使用python3 manage.py runserver命令&#xff0c;不能在后台运行&#xff0c;而且加载页面速度较慢。因此本次记录新增两个服务的部署&#xff0c;即nginx uwsgi。…

进攻即是最好的防御!19个练习黑客技术的在线网站

2019独角兽企业重金招聘Python工程师标准>>> 作者&#xff1a;阿里聚安全 链接&#xff1a;https://zhuanlan.zhihu.com/p/24624347 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 国外 1、bWAPP 免费和…