Node.js + Express 4.x + MongoDB 构建登录注册(一)

  网上的资料基本都是express3.x的,语法上和express4.x差别比较大,零零散散也不集中,为此头疼了很久。

  前人种树,后人乘凉。分享给大家,也总结给自己。

一、软件环境

  Window10

  npm  v3.10.10

  Node.js  v6.10.1

  Express  v4.15.0

二、搭建

  调出“命令提示符”,执行:express -e demo  //Express框架会自动创建项目在demo文件夹下。

  (ps:Window系统叫“命令提示符”,Mac系统叫“终端”)

  然后根据提示执行:cd dmeo  //进入新建的项目文件

  执行:npm install  //系统会根据package.json自动下载依赖包

  最后执行:npm start  //启动项目

  打开浏览器,输入地址:localhost:3000

  页面“Welcome to Express”,项目搭建成功。

三、修改html

  打开项目文件夹里的“views”文件夹,看到里面有两个页面“error.ejs”和“index.ejs”。

  我们想加载html文件,这么干。

  将“error.ejs”和“index.ejs”,改为“error.html”和“index.html”,如果现在启动项目会报错。

  再打开app.js文件,注释一句,加上两句,如下:

//app.set(‘view engine‘,‘ejs‘);  //注释这句

//加上下面两句
app.engine(‘.html‘,require(‘ejs‘).__express);
app.set(‘view engine‘,‘html‘);

  然后再启动项目,“Welcome to Express” 又再次出现。

四、安装nodemon

  在“命令提示符”窗口,Ctrl+c 停止项目。

  执行:npm install nodemon

  安装以后,每次代码做出修改,不用反复停止、启动服务看效果了,直接刷新页面即可。

  光安装nodemon还不够,打开app.js文件,注释最下面的一行代码:

//module.exports=app;  //注释这句

//增加这句
app.listen(3000);

  现在启动项目,不再是“npm start”命令,而是“nodemon app.js”。

  熟悉的“Welcome to Express” 又出现了。

五、登录

  准备工作都做完了,下面开始增加“登录”。

  打开“index.html”文件,什么都不用改,只增加a标签:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <a href="/login">登录</a>
  </body>
</html>

  (ps:下面这两句,只是说明,没有修改。)

var index = require(‘./routes/index‘);

app.use(‘/‘, index);
//app.js 里面的这两句,就是将所有的请求都指向index.js,再由不同的route响应不同的请求

  打开“routes”文件夹,这里面放着路由器,可以理解成MVC里的C,里面有个“index.js”,如下:

var express = require(‘express‘);
var router = express.Router();

/* GET home page. */
router.get(‘/‘, function(req, res, next) {
  res.render(‘index‘, { title: ‘Express‘ });
});

//响应login请求
router.route(‘/login‘).get(function(req,res)
{
    res.render(‘login‘,{title:‘Login‘});
}).post(function(req,res)
{
    //因为还没有连数据库,这里先做一个假数据,用于验证登录
    let user={username:‘admin‘,password:‘123‘};
    //request获取页面表单数据
    if(req.body.username==user.username&&req.body.password==user.password)
    {
        //重定向到Home页面
        return res.redirect(‘home‘);
    }
    else
    {
        //重定向到Login页面
        return res.redirect(‘login‘);
    }
});

//登录通过以后,进入Home页面
router.get(‘/home‘,function(req,res)
{
    //假数据,用来在Home页面显示用户名
    let user={username:‘admin‘,password:‘123‘};
    //将user对象放入response响应中
    return res.render(‘Home‘,{title:‘Home‘,user:user});
});

//Home页面的“注销”功能
router.get(‘/logout‘,function(res,res)
{
    return res.redirect(‘/‘);
});

module.exports = router;

  在“views”文件夹下新建“login.html”:(ps:class样式,大家随意。“注册”的a标签,可以先加上放在这,页面上点击会报404错,别手贱。)

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
    <h1><%= title %></h1>
    <form action="" method="post">
            <div class="fuzq_input_wrap">
                <label for="">用户名:</label>
                <input type="text" id="username" name="username" autofocus="" required="" />
            </div>
            <div class="fuzq_input_wrap">
                <label for="">密码:</label>
                <input type="password" id="password" name="password" required="" />
            </div>
            <div class="fuzq_btn_wrap">
                <button type="submit">提交</button>
            </div>
            <div class="fuzq_input_wrap">
                <a href="/register">还没有账号?去注册!</a>
            </div>
        </form>
  </body>
</html>

  新建“home.html”页面:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome <%=user.username %> to <%= title %></p>
    <a href="/logout">注销</a>
  </body>
</html>

  现在,再刷新index.html页面,登录的功能基本搞定!

  为什么是“基本”搞定,因为数据是假的,而且login和home的数据,是两个user对象。

  预知后事如何,下回再写。

时间: 2024-08-03 23:59:32

Node.js + Express 4.x + MongoDB 构建登录注册(一)的相关文章

基于 Node.js + Express + mongoDB + Bootstrap 搭建的电影网站

电影网站 ?? GitHub: https://github.com/bxm0927/movie-website 此项目是基于 Node.js + Express + mongoDB + Bootstrap 搭建的电影网站. 主要功能模块: 一期:前台电影展示页.电影详情页.后台电影管理中心(电影录入.电影修改) 二期:用户登录注册注销功能.用户识别和持久化.后台用户管理中心(用户录入.用户修改).电影评论 <!-- more --> 图片预览 技术栈 [前端] HTML/CSS/JS:亘古不

node.js+Express.js+Jade+MongoDB开发Web即时聊天系统视频教程下载

ode.js+Express.js+Jade+MongoDB开发Web即时聊天系统视频教程下载  联系QQ:1026270010  一.课程背景 1.什么是Node.js ? Node.js 是一个可以快速构建网络服务及应用的平台 .该平台的构建是基于Chrome's JavaScript runtime,也就是说,实际上它是对Google V8引擎(应用于Google Chrome浏览器)进行了封装. V8引擎执行Javascript的速度非常快,性能非常好.Node对一些特殊用例进行了优化,

node.js高级编程|node.js 视频教程_基于node.js+Express.js+Jade+MongoDB实战开发

基于node.js+Express.js+Jade+MongoDB开发Web即时聊天系统课程讲师:幻星课程分类:前端开发适合人群:初级课时数量:36课时更新程度:完成用到技术:Node.js NPM. Express.NoSQL,MongoDB涉及项目:匿名聊天网站系统node.js视频教程:http://www.ibeifeng.com/goods-462.htmlnode.js 教程适合人群:node.js视频教程要求学员了解JavaScript,node.js入门教程适合希望更深入的学习N

Node.js Express+Mongodb 项目实战

Node.js Express+Mongodb 项目实战 这是一个简单的商品管理系统的小项目,包含的功能还算挺全的,项目涵盖了登录.注册,图片上传以及对商品进行增.删.查.改等操作,对于新手来说是个很不错的练手项目,分享给大家. GitHub源码:https://github.com/oceanMin/cms 项目前准备 安装node.js 安装express 安装mongoDB 章节目录 快速开始 快速开始 模块 express商品管理系统介绍 框架搭建.ejs .express.static

Node.js+Express+MongoDB数据库实现网页注册登入功能

通过 Node.js + Express + MongoDB 实现网页注册账号 和 登入账号的功能 项目准备: 1: 事先准备好项目的页面 (首页页面 index.html)(登入页面 login.html) (注册页面 register.html) 2:    安装好 Node.js 需要使用的第三方模板 3:  设计路径设计 4:  理清功能需求 5:  创建 app.js  router.js   mgdb.js 三个 js 文件  和 public 和 views 文件夹 作用: app

Node.js Express 框架学习

转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说明.为了学习备份,所以拷贝过来. Express框架 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 概述 运行原理 底层:http模块 对http模块的再包装 什么是中间件 use方法 Express的方法 all方法和HTTP动词方法 set方法 response

Node.js, Express的服务器搭建过程的问题

Node.js, Express的服务器搭建过程的问题 Express : node.js 的框架,根据2012年BYvoid的说法,是node.js官方唯一推荐的框架 怎么搭建项目? - 安装nodejs->npm->express - express 的问题: 2017年, express-generator已经被独立成命令行工具了,所以要用 npm install express-generator 这样才能用express命令 怎么启动项目? 启动服务器可以用node app.js,因

Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)

目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次更新已经比较久了^_^! formidable简介 nodejs原生实现上传还是比较麻烦,有兴趣的自已去参考一下网上有网友写的代码 这里选择了formidable,也是githu

node.js+express+mongoose实现用户增删查改案例

node.js+express+mongodb对用户进行增删查改 一.用到的相关技术 使用 Node.js 的 express 框架搭建web服务 使用 express 中间件 body-parse 解析表单 post 请求体 使用 art-template 模板引擎渲染页面 使用第三方包 mongoose 来操作 MongoDB 数据库 二.在命令行用 npm 执行相关的命令 初始化项目,在命令行执行 npm init 然后一路回车就行了(或者直接 npm init -y)生成 package