首页 > 代码库 > Node.js + Express 4.x + MongoDB 构建登录注册（一）
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 构建登录注册（一）