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 构建登录注册的主要内容,如果未能解决你的问题,请参考以下文章
MongoDB 或 PostGreSQL 使用 Python Django 和 Express 和 Node js 会更好 [关闭]