• 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对象。

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

  • 相关阅读:
    怎样防止应用因获取IDFA被AppStore拒绝
    多校第九场Arithmetic Sequence题解
    Hadoop文件解压缩
    FZU 2087 统计树边【MST相关】
    hdu2647(拓扑排序)
    jsp自己主动编译机制
    AsyncTask的原理和缺点
    C语言之文件操作08——总结
    Android API 文档 离线秒开方法
    在Windows8系统下exe格式会计课件下载播放帮助图解
  • 原文地址:https://www.cnblogs.com/fu277/p/6714322.html
Copyright © 2020-2023  润新知