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

Posted 子非魚87

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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对象。

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

以上是关于Node.js + Express 4.x + MongoDB 构建登录注册的主要内容,如果未能解决你的问题,请参考以下文章

Node.js+express+ejs新建个项目

指令创建 Express Node.js 项目

express 4.x+ swig

MongoDB 或 PostGreSQL 使用 Python Django 和 Express 和 Node js 会更好 [关闭]

前端node.js框架node.js框架express

node.js 和 express 的区别