厦大数据库实验室博客

总结、分享、收获

实验室主页



采用Node.js+Express+Jade实现用户注册登录功能

林子雨老师 (updated: )
大数据学习路线图

Node.js是一个JavaScript运行环境，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。V8引擎执行Javascript的速度非常快，性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动、非阻塞I/O模型，具备轻量和高效的特点，非常适合在分布式设备上运行数据密集型的实时应用。请参考另一篇博客完成Node.js的安装。这里假设已经完成Node.js的安装。

这里通过一个实例介绍如何使用Node.js实现用户注册登录功能，其中，用户名和密码会被保存在MySQL数据库中，主要包括以下步骤：
（1）创建MySQL数据库；
（2）创建项目目录；
（3）安装Express开发框架；
（4）安装Jade模板引擎；
（5）安装MySQL驱动模块；
（6）创建服务器；
（7）创建网页；
（8）测试网页。

创建MySQL数据库

在Linux终端中，使用如下命令进入MySQL Shell交互式执行环境：

mysql -u root –p

按照系统提示输入MySQL数据库的root用户的密码，然后会进入MySQL Shell交互式执行环境，在“mysql>”命令提示符后面输入如下命令创建数据库：

mysql> create database userlogin;
mysql> use userlogin;
mysql> create table user (userid int(20) not null auto_increment, username char(50), password char(50), primary key(userid));
mysql> desc user;
mysql> select * from user;

创建好的数据库user表的模式信息如下图所示。

创建项目目录

在Linux终端中，使用如下命令创建项目目录并完成初始化：

cd ~
mkdir userloginjadeapp
cd userloginjadeapp
npm init

在输入初始化项目命令“npm init”后，终端会提示输入项目的相关信息，并自动把这些信息记录在package.json中。如果想进行快捷开发，不想手动输入项目信息，只需要一直按“Enter”键即可，接受默认的自动配置。

安装Express开发框架

在Linux终端中继续如下命令来安装Express开发框架：

cd ~/userloginjadeapp
npm install express --save   #save前面是两个英文短横线

通过上面命令安装的模块，都会放在当前项目文件夹下的node_modules文件夹下，并更新到package.json文件中。Node.js引用该模块的时候，会自动从node_modules文件夹下寻找模块。

安装Jade模板引擎

在Linux终端中执行如下命令往项目文件夹中继续添加Jade模板引擎软件包：

cd ~/userloginjadeapp
npm install jade --save   #save前面是两个英文短横线

安装MySQL驱动模块

为了让Node.js能够顺利访问MySQL数据库，需要单独安装MySQL驱动模块。在Linux终端中执行如下命令：

cd ~/userloginjadeapp
npm install mysql --save

安装body-parser

为了让Node.js能够正确解析从前端采用POST方式提交过来的数据，还需要安装body-parser。在Linux终端中执行如下命令：

cd ~/userloginjadeapp
npm install body-parser --save

创建服务器

在userloginjadeapp项目目录中，创建一个名为userloginjade.js的文件，这个文件是整个网页应用的入口，该文件的内容如下：

/**
     * Created by linziyu on 2018/7/3.
     */
    /**
     * express接收html传递的参数
     */

    var  express=require('express');
    var  bodyParser = require('body-parser')
    var  app=express();
    var mysql=require('mysql');
    app.set('view engine', 'jade'); 
    app.set('views', __dirname);
    app.use(bodyParser.urlencoded({extended: false}))
    app.use(bodyParser.json())

    /**
     * 配置MySQL
     */
    var connection = mysql.createConnection({
        host     : '127.0.0.1',
        user     : 'root',
        password : '123456',
        database : 'movierecommend',
        port:'3306'
    });
    connection.connect();

   /**
     * 跳转到网站首页，也就是用户登录页面
     */
    app.get('/',function (req,res) {
        res.render('index');
    })

    /**
     * 实现登录验证功能
     */
    app.post('/login',function (req,res) {
        var  name=req.body.username.trim();
        var pwd=req.body.pwd.trim();
    console.log('username:'+name+'password:'+pwd);

        var selectSQL = "select * from user where username = '"+name+"' and password = '"+pwd+"'";
        connection.query(selectSQL,function (err,rs) {
            if (err) throw  err;
                        if (rs.length==0){
                res.render('error',{title:'WARNING',message:'对不起，用户名：'+name+ ' 不存在'});
                return;
                                }
            console.log(rs);
            console.log('ok');
            res.render('ok',{title:'Welcome User',message:name});
        })
    })

    /**
     * 跳转到注册页面
     */     
    app.get('/registerpage',function (req,res) {
      res.render('registerpage',{title:'注册'});
    })

    /**
     * 实现注册功能
     */
    app.post('/register',function (req,res) {
        var  name=req.body.username.trim();
        var  pwd=req.body.pwd.trim();
        var  user={username:name,password:pwd};
        connection.query('insert into user set ?',user,function (err,rs) {
            if (err) throw  err;
            console.log('ok');
           res.render('ok',{title:'Welcome User',message:name});
        })
    })

    var  server=app.listen(3000,function () {
        console.log("userloginjade server start......");
    })

上面的代码用于启动一个HTTP服务器，并监听从3000端口进入的所有连接请求。

创建模板文件

现在创建四个网页模板文件，具体功能如下：
（1）index.jade：用户访问网站后默认呈现的页面，提供了用户登录界面和注册页面链接；
（2）registerpage.jade：用户注册页面；
（3）ok.jade：呈现成功登录的确认信息。
（4）error.jade：呈现错误提示信息。

1.index.jade文件

html
  head
    title!= title
  body

    form(action='/login', method='post')

      p 用户登录
      p User Name:
      input(type='text',name='username')
      p Password:
      input(type='text',name='pwd')
      br
      input(type='submit',value='登录')
      br
    a(href='/registerpage', title='注册') 注册
  1. registerpage.jade文件
html
  head
    title!= title
  body

    form(action='/register', method='post')

      p 用户注册
      p User Name:
input(type='text',name='username')
p Password:
      input(type='text',name='pwd')
      br
      input(type='submit',value='注册')
  1. ok.jade文件
html
  head
    title!= title
  body
    h1 热烈欢迎用户: #{message}
  1. error.jade文件
html
  head
    title!= title
  body
    h1 #{message}

测试网页

在Linux终端中，执行如下命令启动刚才已经创建好的HTTP服务器：

cd ~/ userloginjadeapp
node userloginjade.js

然后，在Linux系统中打开一个浏览器，在地址栏目输入“http://localhost:3000”，就可以看到如下图所示的网页效果。


点击“注册”链接，就会跳转到注册页面，如下图所示：

输入用户名“xmudblab”和密码“123456”以后，点击“注册”，就会完成用户注册，并跳转到欢迎用户页面，如下图所示。

在Linux系统中打开一个浏览器，再次在地址栏目输入“http://localhost:3000”，重新回到如下图所示的登录页面。

输入用户名“xmudblab”和密码“123456”以后，点击“登录”，就会跳转到欢迎用户页面，如下图所示。

© 2014 厦大数据库实验室