nodejs框架express实现登录
目录:
- 访问视图
- Post请求
- Post请求 - body(1)
- Post请求 - body(2)
- Post登陆1
- Post登陆2
- 页面访问控制1
- 页面访问控制2
访问视图
前面我们已经添加了视图模板并学习了访问视图的方法,那我们就先回顾一下。
1.参考以下代码,地址栏访问这几个请求路径查看是否可以成功。
app.get('/', function(req, res) {
res.render('index');
}); app.get('/login',function(req,res){
res.render('login');
}); app.get('/home',function(req,res){
res.render('home');
});
当浏览器看到了相应的视图页面就说明我们的代码是没有问题的,继续加油吧!
用户登陆
前面我们学习了express的get请求方法,今天我们就学习它的post请求方法。
1. post方法 —— 根据请求路径来处理客户端发出的Post请求。
2. 格式:app.post(path,function(req, res));
3. 和get方法一样,path为请求的路径,第二个参数为处理请求的回调函数,req和res分别代表请求信息和响应信息。
4. 例如处理login的post请求,如下示例
app.post('/login',function(req,res){
});
了解了post方法,下面我们就开始使用post来实现简单的用户登陆功能。
body基本用法
实现登陆之前我们先来了解一个属性 —— body。
body属性解析客户端的post请求参数,通过它可获取请求路径的参数值。
格式:req.body.参数名;
下面我们就来测试body属性的功能,做一些准备工作。
1. 修改login.html,为登陆按钮增加登陆事件。
<input type="button" onclick="login();" value="登 陆">
function login(){
var username = $('#username').val();
var data = { "username": username };
$.ajax({
url:'/login',
type:'POST',
data:data
});
}
2. 要想使用body属性解析post请求参数值,我们需要先安装和引用express的两个中间件body-parser和multer,具体方法如下:。
2.1 安装
npm install body-parser
npm install multer
2.2 引用和调用
var bodyParser = require('body-parser');
var multer = require('multer');
......
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());
中间件body-parser和multer用于处理和解析post请求的数据。
body基本用法
到这里我们就可以测试post请求的body属性的简单用法了。
1. 修改好之后的完整的文件app.js如下所示:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer'); app.set('views', __dirname);
app.set( 'view engine', 'html' );
app.engine( '.html', require( 'ejs' ).__express ); app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer()); app.get('/',function(req,res){
res.render('login');
});
app.post("/login", function(req, res) {
console.log("用户名称为:" + req.body.username);
}); app.listen(80);
准备登陆
接下来我们就开始实现登陆功能,让我们要先做一些准备工作,为相关按钮添加点击事件、链接。
1. 修改index.html,增加登陆链接。
<p><a href="login">登 录</a></p>
2.强化login页面的login方法,实现一个简单的post请求:
function login(){
var username = $('#username').val();
var password = $('#password').val();
var data = { "username": username, "password":password};
$.ajax({
url:'login',
type:'POST',
data:data,
success:function(data,status){
if(status == 'success'){
location.href='home';
}
},
error:function(data,status,e){
if(status == "error"){
location.href='login';
}
}
});
}
网页模板准备已经就绪,下面我们开始修改启动文件app.js的内容。
准备登陆
下面我们就开始修改app启动文件的内容。
1. 修改post方法,这里假设数据库中用户名的名字为admin、密码为admin。
app.post('/login',function(req,res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username==user.username&&req.body.password==user.password)
{
res.send(200);
}else{
res.send( 404 );
}
});
2. 一个完整的启动文件app.js如下所示:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer'); app.set('views', __dirname);
app.set( 'view engine', 'html' );
app.engine( '.html', require( 'ejs' ).__express ); app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer()); app.get('/', function(req, res) {
res.render('index');
});
app.get('/home',function(req,res){
res.render('home');
});
app.get('/login',function(req,res){
res.render('login');
});
app.post('/login',function(req,res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username==user.username&&req.body.password==user.password) {
res.send(200);
}else{
res.send( 404 );
}
}); app.listen(80);
到这里,一个简单的Post登录就完成了,使用浏览器运行本地端口试试效果吧!
访问控制
简单登陆部分按照我们的求已经完成了,但网站好些并不安全,反复测试我们发现,home.html页面本来是登陆以后才访问的,现在我们不需登陆,直接在浏览器输入也可访问,这样肯定是不能被允许的,那么我们还得再次对登陆功能进行强化。
1. login.html页面增加EJS模板变量<%- message %>保存登陆提示信息。
...
<%- message %>
<h1>用户登录</h1>
...
2. home.html页面,登陆成功后跳转并传入用户名:
<h1>恭喜<em style="color:red"><%= user.username %></em>,登陆成功!</h1>
PS:使用EJS模板变量值使用<%= variable_name %>输出方式,字符串输出时默认经过escape转义编码。 当我们想要输出一些动态生成的HTML标签时可使用<%- variable_nam %>输出方式,这种方式不会被escape转义编码。
3. home.html页面添加退出链接,如下:
<p><a href="logout">退 出</a></p>
访问控制
修改好了模板页,下面开始修改启动文件app.js的内容。
1. 安装模块express-session并引用,安装、引用不在讲述。
2. 使用新模块进行访问时间限制,如下:
var session = require('express-session');
...
app.use(session({
secret:'secret',
resave:true,
saveUninitialized:false,
cookie:{
maxAge:1000*60*10 //过期时间设置(单位毫秒)
}
}));
3. app.js文件新增中间件并设置模板变量值,如下:
app.use(function(req, res, next){
res.locals.user = req.session.user;
var err = req.session.error;
res.locals.message = '';
if (err) res.locals.message = '<div style="margin-bottom: 20px;color:red;">' + err + '</div>';
next();
});
res.locals对象保存在一次请求范围内的响应体中的本地变量值。
PS:注意,中间件的放置顺序很重要,等同于执行顺序。而且,中间件必须放在HTTP动词方法之前,否则不会执行。
4. 增加logout路径处理(用户登陆退出)和index路径请求处理,如下:
app.get('/logout', function(req, res){
req.session.user = null;
req.session.error = null;
res.redirect('index');
});
app.get('/index', function(req, res) {
res.render('index');
});
5. 修改home路径请求处理,如下:
app.get('/home',function(req,res){
if(req.session.user){
res.render('home');
}else{
req.session.error = "请先登录"
res.redirect('login');
}
});
6. 修改路径为login的Post请求
app.post('/login',function(req,res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username==user.username&&req.body.password==user.password){
req.session.user = user;
res.send(200);
}else{
req.session.error = "用户名或密码不正确";
res.send( 404 );
}
});
nodejs框架express实现登录的更多相关文章
- nodejs框架express准备登录
目录: 安装模板 静态资源 添加视图 渲染视图 url重定向 模板引擎 从本节课程开始我们要使用express框架实现一个简单的用户登陆功能,让我们先准备一下相关资源. 在nodejs中使用expre ...
- NodeJS 框架 Express 从 3.0升级至4.0的新特性
NodeJS 框架 Express 从 3.0升级至4.0的新特性 [原文地址:√https://scotch.io/bar-talk/expressjs-4-0-new-features-and-u ...
- [转] NodeJS框架express的途径映射(路由)功能及控制
NodeJS框架express的路径映射(路由)功能及控制 我们知道Express是一个基于NodeJS的非常优秀的服务端开发框架,本篇CSSer将提供express框架的route和route co ...
- 知名nodeJS框架Express作者宣布弃nodeJS投Go
知名 nodeJS 框架 Express 的作者 TJ Holowaychuk 在 Twitter 发推并链接了自己的一篇文章,宣布弃 nodeJS 投 Go. 他给出的理由是:Go 语言和 Rust ...
- nodejs框架express快速开始
认识express 创建应用 get请求 简述中间件 all方法 use方法1 use方法2 回调函数 获取主机.路径名 Get请求 - query Get请求 - param Get请求 - par ...
- NodeJS框架express的路径映射(路由)功能及控制
我 们知道Express是一个基于NodeJS的非常优秀的服务端开发框架,本篇CSSer将提供express框架的route和route control章节,route实现了客户端请求的URL的路径映 ...
- CentOS安装运行NodeJS框架Express
安装依赖包 yum -y install gcc make gcc-c++ openssl-devel wget 下载/解压NodeJs wget http://nodejs.org/dist/v0. ...
- (转)windows下安装nodejs及框架express
转自:http://jingyan.baidu.com/article/456c463b60fb380a583144a9.html windows下安装nodejs及框架express nodejs从 ...
- nodejs的Express框架源码分析、工作流程分析
nodejs的Express框架源码分析.工作流程分析 1.Express的编写流程 2.Express关键api的使用及其作用分析 app.use(middleware); connect pack ...
随机推荐
- (转载)String.IsNullorEmpty()方法的使用
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...
- [LintCode] Left Pad 左填充
You know what, left pad is javascript package and referenced by React: Github link One day his autho ...
- Hibernate中易错地方的总结
1.Hibernate中的配置文件要放在src下,注意不能放在包目录下 2.Hibernate中@Before @After方法不能再普通的类里用,只有在专门的JUnit测试用例里面用. 3.使用 ...
- 模拟淘宝使用cookie记录登录名,
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- html5 语义
页面示意图
- jQuery cdn使用介绍
如果您不希望下载并存放jQuery,那么也可以通过 CDN(内容分发网络)引用它,下面是具体实现,有类似需求的各位可以参考下哈,希望对你有所帮助 如果您不希望下载并存放 jQuery,那么也可以通 ...
- CMD和DOS的区别
很多人喜欢在这里把XP下的CMD和我们的DOS混淆,因此今天我特别发帖说明:CMD和DOS是完全不同的!请各位始终牢记这一点,否则在高手面前就丢人了!因为CMD是32位应用程序(而DOS是16位操作系 ...
- 示例Oracle 10.2.0.1.0升级到10.2.0.4.0一例
1.查看当前系统版本 [oracle@std Disk1]$ sqlplus '/as sysdba' SQL*Plus: Release - Production on Thu Jan :: Cop ...
- SQL Server 2008 下载及安装教程
sql server 2008 是微软公司开发的一套数据库管理系统.是目前大型数据库中常用数据库之一.性能稳定,功能强大,是面向中大型企业的一款数据库解决方案.我们安装SqlServer2008的时候 ...
- 输出单向链表中倒数第k个结点
描述 输入一个单向链表,输出该链表中倒数第k个结点,链表的倒数第0个结点为链表的尾指针. 链表结点定义如下: struct ListNode { int m_nKey; ListNode* ...