Node实战篇:阶段项目(九)

Java范思哲 2018-04-26 14:01:14 ⋅ 139 阅读

项目整体预览

项目的github地址

界面逼格还行-_-

主要功能:

  1. 登陆;

  2. 退出;

所用的主要模块:

  1. express, 路由.静态文件.模块分工等;

  2. express-session, 采用session的方式解决http无状态;

  3. body-parse: 解析body;

  4. ejs模板引擎;

  5. path模块;

配置使用: 直接下载, 运行即可,配置详看: package.json;

项目讲解过程

1.初始化package.json; 2.下载express 'npm install express --save' 3.app.js 中

 
  1. var express = require('express');

  2. var routes = require('./routes/index');

  3. var app = express();

  4. app.use('/', routes);

  5. app.use('/login',routes);

  6. app.listen(3000);

4.创建index.js

 
  1. var express = require('express');

  2. var router = express.Router();

  3. /* GET index page. */

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

  5.  res.send('hello 51code')

  6. });

  7. router.get('/login', function (request, response) {

  8.    res.send('hello 51code')

  9. });

  10. //导出接口

  11. module.exports = router;

5.截取404错误;app.js

 
  1. // // 捕获404错误

  2. app.use(function(req, res, next) {

  3.  var err = new Error('Not Found');

  4.  err.status = 404;

  5.  //现在是打印全部信息

  6.  next(err);

  7. });

5.创建HTML文件,

 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.    <meta charset="UTF-8">

  5.    <title>Login</title>

  6. </head>

  7. <body>

  8.    <form action="/login" method="POST">

  9.        <input type="text" name="username" placeholder="username">

  10.        <input type="password" name="password" placeholder="password">

  11.        <input type="submit" value="Login">

  12.    </form>

  13. </body>

  14. </html>

6.加载HTML文件, express框架中有专门处理静态文件的方法--static,

既然是存在关于路径相关的内容, 就需要下载

 
  1. npm install path --save

  2. npm install ejs  --save

为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件,可以使用 Express 中的 express.static 内置中间件函数。 将包含静态资源的目录的名称传递给 express.static 中间件函数,以便开始直接提供这些文件。例如,使用以下代码在名为 public 的目录中提供图像、CSS 文件和 JavaScript 文件:

 
  1. var path = require('path');

  2. //// 设置views文件夹为存放视图文件的目录,

  3. //__dirname为全局变量,存放当前正在执行的脚本所在的目录

  4. app.set('views', path.join(__dirname, 'views'));

  5. //注册ejs模板为html页。简单的讲,就是原来以.ejs为后缀的模板页,现在的后缀名可以//是.html了

  6. app.engine("html",require("ejs").__express);

  7. //app.engine("html",require("ejs").renderFile);

  8. //app.set("view engine","ejs");

  9. //设置视图模板的默认后缀名为.html,避免了每次res.Render("xx.html")的尴尬以及加载的是html.jade(因为jade是默认的引擎)

  10. app.set('view engine', 'html');

Express默认使用jade模板。如果要使用其他模板引擎,如:将EJS模板映射至".html"文件:实际调用了EJS的.renderFile()方法,ejs.__express是该方法在EJS内部的另一个名字。

因为加载的模板引擎后调用的是同一个方法.__express,所以如果使用的是ejs模板,不用配置该项。

总结:使用html模板,需增加 app.engine('html', require('ejs').__express);

    使用EJS模板,不用配置该项。      app.set(name, value); 在.set()方法的参数中,有一项是'view engine',表示没有指定文件模板格式时,默认使用的引擎插件(.jade)。, 所以需要app.set('view engine', 'html');

渲染页面

 
  1. router.get('/login', function (request, response) {

  2.    response.render("index",{title:'User Login'});

  3. });

index.js 添加方法 /post

 
  1. router.post('/login', function (req, resp) {

  2.    //取session, 如果没有, 证明没有登录

  3.    var session = req.session;

  4.    console.log('+++++++' +  req.body.username + req.session.uniqueId);

  5.    <!--if(session.uniqueId){

  6.        resp.redirect('/redirects');

  7.    }else{

  8.        // 存储uniqueid

  9.        session.uniqueId = req.body.username;

  10.        resp.redirect('/redirects');

  11.    }-->

  12. });

更改HTML代码

 
  1. //post 访问/login

  2. <form action="/login" method="post">

  3.        <input type="text" name="username" placeholder="username">

  4.        <input type="text" name="password" placeholder="password">

  5.        <input type="submit" name="提交">

  6. </form>

此时可以访问/post方法, 但是读取body内容, 需要body-parse 模块

 
  1. $ npm install body-parser --save

试想一个内容, 我们如果登陆过后, 关闭浏览器, 在此打开是否认得我们是网站用户, 那么面临的就是http无状态问题, 我们有两种方法解决, cookie与session, 在这里我们采用session的方法解决

 
  1. $ npm install express-session --save

接下来开始配置

 
  1. //引用body-parse

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

  3. //引用express-session模块

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

  5. //解析数据 常用的两种格式

  6. app.use(bodyParser.json());

  7. app.use(bodyParser.urlencoded({ extended: true}));

  8. //session 相关

  9. app.use(session({

  10.    secret: 'asdfoii9838u923$%^&*(',

  11.    cookie:{

  12.        maxAge: 1000 * 60

  13.    },

  14.    //每次访问都重新更新

  15.     resave: true,

  16.    //强制“未初始化”的会话保存到存储。

  17.     saveUninitialized: true,  

  18. }));

http 重定向问题 :

 
  1. router.post('/login', function (req, resp) {

  2.    //取session, 如果没有, 证明没有登录

  3.    var session = req.session;

  4.    console.log('+++++++' +  req.body.username + req.session.uniqueId);

  5.    if(session.uniqueId){

  6.        resp.redirect('/redirects');

  7.    }else{

  8.        // 存储uniqueid

  9.        session.uniqueId = req.body.username;

  10.        resp.redirect('/redirects');

  11.    }

  12. });

  13. //专门处理更改路径的问题 (重定向)

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

  15.    res.send('aaaa');

  16. });

在Web应用中,有时会遇到页面需要 Url重定向的情况。Url重定向分为 301、 302两种。 301、302都是HTTP状态的编码,都代表着某个Url发生了转移。

 
  1. 1. 301重定向是永久的重定向(Moved Permanently),表示本网页永久性转移到另一个地址,搜索引擎在抓取新内容的同时也将旧的网址替换为重定向之后的网址。

  2. 2. 302重定向是临时的重定向(Moved Temporarily),表示本网页暂时性转移到另一个地址,搜索引擎会抓取新的内容而保留旧的网址。

Express是一个基于Node.js实现的Web框架,其响应HTTP请求的response对象中有两个用于URL跳转方法 res.location()和 res.redirect(),使用它们可以实现URL的 301302重定向。

要更改cookie时间 1000 * 60 代表一分钟

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

  2.    // res.send('我是操作重定向的方法');

  3.    //类似中间变量, 将session传至该方法

  4.    // req.session;全局变量

  5.    var session = req.session;

  6.    console.log('-99999---' + session.uniqueId);

  7.    //如果登陆成功,跳转到首页

  8.    if(session.uniqueId == 'admin'){

  9.        res.redirect('/home');

  10.    }else{

  11.        res.send(req.session.uniqueId + ' not found ! <a href="/logout"> Logout </a> ');

  12.    }

  13. })

  14. //首页

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

  16.    var session = req.session;

  17.    console.log('------9---' + session.uniqueId);

  18.    if(session.uniqueId != 'admin'){

  19.        res.send('Unauthorized <a href="/login"> Login again </a>' );

  20.    }else{

  21.        //展示Home页面

  22.        res.render('home');    

  23.        //resp.send('Welcome admin <a href="/logout"> Logout </a>');

  24.    }

  25. });

退出登陆

 
  1. //退出方法

  2. router.get('/logout', function (req, resp) {

  3.    // 删除session

  4.    req.session.destroy();

  5.    // 重定向至login

  6.    resp.redirect('/login');

  7. });

 
  1. // // 捕获404错误

  2. app.use(function(req, res, next) {

  3.  var err = new Error('Not Found');

  4.  err.status = 404;

  5.  next(err);

  6. });

更多精彩内容请关注“IT实战联盟”哦~~~ 



全部评论: 0

    我有话说:

    Node实战:Express路由(三)

    Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。

    Node实战:Express-session解析(八)

    Session和HTTP协议属于不同层面的事物,HTTP属于ISO七层模型的最高层应用层,前者Session不属于后者,前者HTTP是具体的动态页面技术来实现的,但同时它又是基于后者的。

    Node实战:Express--jade模板引擎(七)

    Jade(Pug) — Node Template Engine,一个高性能的模板引擎,专为 Node 而做......

    Node.js 实战--微信支付系列(二)

    接上一首先我们看一下整体上微信小程序的开发流程图

    TypeScript Nodejs 项目结构

    1. 新旧交替 新事物代替旧事物无外乎旧事物太陈旧。 JS动态软类型语言,便利的同时也带来了很多弊端,随着项目的增大,加上没有注释,你完全会懵逼。 可以看下网上汇总的错误信息,有多少个是类型错误

    Node实战Nodejs 链接 Mariadb 实例

    MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL

    Node实战:Express 中间件 cookie-parser(六)

    cookieParser()实际上是对http传入的cookie进行解析后赋值给req.cookies,使得中间件可用

    Node实战:使用joi来验证数据模型 (十)

    Joi 是 hapijs 自带的数据校验模块,他已经高度封装常用的校验功能,本文就是介绍如何优雅地使用 joi 对数据进行校验......

    Node.js 实战--微信支付系列(一)

    真正的无知不是知识的贫乏, 而是拒绝获取知识!——波普尔 (哲学家 思想家)鉴于微信支付文档内容详实

    Node实战:Express中间件与request(四)

    Express 是一个路由和中间件 Web 框架,其自身只具有最低程度的功能:Express 应用程序基本上是一系列中间件函数调用。

    Node实战:Express 中间件-body-parser(五)

    body-parser是什么?body-parser是一个HTTP请求体解析中间件,使用这个模块可以解析JS

    TypeScript Nodejs 项目结构

    新旧交替新事物代替旧事物无外乎旧事物太陈旧。JS动态软类型语言,便利的同时也带来了很多弊端,随着...

    Node模块之Events模块(五)

    Node模块之Events模块(五)

    Node 模块之 util URL queryString path(八)

    第一部分 util util是一个Node.js核心模块,util模块设计的主要目的是为了满足Node内部API的需求。其中包括:格式化字符串、对象的序列化、实现对象继承等常用方法。要使用util

    NodeJS 10.5.0 中的线程:实用介绍

    几天前,Node.js版本10.5.0发布,其中包含的主要功能之一是添加了线程支持。

    Nodejs视频服务器 切片ffmpeg

    Node 视频服务器 切片ffmpeg

    Node模块之fs模块(六)

    屏幕快照 2017-08-08 上午10.53.21.png 第一部分 概述 Node.js 提供一组类似UNIX(POSIX)标准的文件操作API,Node.js中操作文件的模块是fs(File

    2018年8个技巧来构建更好的Node.js应用程序

    2018年8个技巧来构建更好的Node.js应用程序

    Node异步式I/O和异步式编程(三)

     Node.js 最大的特点就是异步式 I/O(或者非阻塞I/O)与事件紧密结合的编程模式。 第一部分: I/O 1.阻塞I/O与非阻塞I/O概念 1.1阻塞I/O(同步I/O) 线程在