1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 采用Node.js+Express+Jade实现用户注册登录功能

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

时间:2020-02-13 14:29:48

相关推荐

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

Node.js是一个JavaScript运行环境,发布于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 userloginjadeappcd userloginjadeappnpm init

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

安装Express开发框架

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

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

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

安装Jade模板引擎

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

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

安装MySQL驱动模块

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

cd ~/ userloginjadeappnpm install mysql --save

安装body-parser

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

cd ~/ userloginjadeappnpm install body-parser --save

创建服务器

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

/*** Created by linziyu on /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文件

htmlheadtitle!= titlebodyform(action='/login', method='post')p 用户登录p User Name:input(type='text',name='username')p Password:input(type='text',name='pwd')brinput(type='submit',value='登录')bra(href='/registerpage', title='注册') 注册

registerpage.jade文件

htmlheadtitle!= titlebodyform(action='/register', method='post')p 用户注册p User Name:input(type='text',name='username')p Password:input(type='text',name='pwd')brinput(type='submit',value='注册')

ok.jade文件

htmlheadtitle!= titlebodyh1 热烈欢迎用户: #{message}

error.jade文件

htmlheadtitle!= titlebodyh1 #{message}

测试网页

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

cd ~/ userloginjadeappnode userloginjade.js

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

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

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。