网上的资料基本都是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对象。

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