前言：
刚接手cms3.0的工作，似乎对一切都那么的不熟悉，于是在开始新需求之前，先做一个简单的登录系统。
项目目录：
1.使用webstroms建expreess项目，非常方便简单，建好的项目目录就是这样子的：
；
/bin: 用于应用启动
/public: 静态资源目录
/routes：可以认为是controller（控制器）目录
/views: jade/ejs/html模板目录，可以认为是view(视图)目录
app.js 程序main文件
2.在文件夹bin下面找www，右键单击Run 'binwww',即可看到控制台输出“server Listening on port 3000 +0ms”，然后在浏览器输入“localhost:3000”就可以看见页面上“Hello Express”的字样；
3.在建项目之初，选用的模板是ejs或者jade，在这里为了方便，我们需要把模板改成常用的，挑一种来说，这是修改app.js文件中的代码：
...
var app = express();
// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'jade');
// 设置模板引擎从jade为html
// view engine setup
app.set('views', path.join(__dirname, 'views'));
var template = require('arttemplate-gg');
template.config('base', '');
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');
...
最后还需要吧views文件夹底下的页面全部修改成.html结束的文件。这样基本的框架才搭建出来了；
4.项目中所需的静态文件，比如jQuery、图片、插件、样式文件统一放在public对应的文件夹底下；
5.在views文件夹底下总共建4个页面：
①err.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>{{message}}</h1>
<h2> {{error.status}}</h2>
<pre>{{error.stack}}</pre>
</body>
</html>
②home.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>欢迎登录@@@@@@@@@@</title>
</head>
<body>
欢迎登录
</body>
</html>
③index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/public/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
</head>
<body>
<p>我是index页面~~~</p>
<script src="/public/javascripts/jquery.min.js"></script>
<script src="/public/javascripts/bootstrap.min.js"></script>
</body>
</html>
④login.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
<style>
*{ margin:0px; padding:0px; list-style:none;}
body,html{ height:100%;font:12px/1.5 5FAE8F6F96C59ED1,tahoma,arial,sans-serif;}
html{ background:url(/images/bg.png) repeat-x;}
body{ background:url(/images/ftbg.png) 0 bottom repeat-x;}
.main{ background:url(/images/mbg.png) no-repeat center bottom;position: absolute;width:100%;height:500px;top:50%;
margin-left:0;margin-top:-290px; z-index:99}
.loginbox{ width:410px; height:375px;background:url(/images/borderbg.png); position: absolute; left:50%; top:50%; margin-left:-200px; margin-top:-200px; border-radius:8px;-moz-border-radius: 8px; -webkit-border-radius:8px; z-index:999;}
.loginbg{ width:310px;padding:40px; margin:0 auto; margin-top:10px; background-color:#fff; border-radius:8px;-moz-border-radius: 8px; -webkit-border-radius:8px;}
.loginbox h3{ font-size:18px; font-weight:normal; color:#333; padding-bottom:15px; text-align:center;}
.loginbox input{ width:260px; height:46px; border:1px solid #dbdbdb; padding:0 5px; font-size:14px; color:#666;border-radius:5px rgba(0,0,0,0.5);-moz-border-radius: 5px; -webkit-border-radius:5px; padding-left:45px; line-height:46px;}
.loginbox ul li{ padding:15px 0; position:relative;}
.loginbox .user{ background:url(/images/lgicon.png) 0 0 no-repeat; display:inline-block; position:absolute; width:19px; height:20px; left:15px; top:27px;}
.loginbox .pwd{ background:url(/images/lgicon.png) 0 bottom no-repeat; display:inline-block; position:absolute; width:19px; height:22px; left:15px; top:27px;}
.loginbox input.lgbtn{ width:312px; background-color:#f86c6b; border:0px; color:#fff; font-size:18px; font-family:5FAE8F6F96C59ED1;line-height:46px; text-align:center; cursor:pointer; text-indent:0px; padding:0px;}
.main h2{ margin-top:-40px; font-size:30px; text-align:center; color:#fff; font-weight:normal;}
.footer{ position:fixed; z-index:9; bottom:0px; text-align:center; color:#666; width:100%; padding-bottom:20px; font-size:14px;}
</style>
</head>
<body>
<div class="main">
<h2>小小登录窗口</h2>
<div class="loginbox">
<div class="loginbg">
<h3>测试登录</h3>
<form id="fm" action="/" method="post">
<ul>
<li><span class="user" ></span><input type="text" id="username" name="username" value=""></li>
<li><span class="pwd" ></span><input type="password" id="password" name="password" required="true" value=""><span style="color: red;position: absolute;top: 70px;left: 10px" id="msg">{{msg}}</span></li>
<li><input type="submit" value="登录" class="lgbtn"/></li>
</ul>
</form>
</div>
</div>
</div>
<div class="footer">Come on 测试一下~~~</div>
<script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
</body>
</html>
6.所对应的js文件——routes底下的index.js
/**
* created 2016-11-01
*
*/
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('login', {title: 'Express'});
});
// 自定义方法
router.post('/', function (req, res, next) {
var username = req.body.username;
var password = req.body.password;
var user={
username:'admin',
password:'admin'
};
if(username == user.username && password == user.password){
console.log("验证正确");
res.render('home', {title: 'Express'});
} else {
console.log("验证失败");
res.render('login', {msg: '用户名或密码错误！'});
}
});
module.exports = router;
最终的效果就是：
7.由于js中定义了账号和密码都为admin，因此只有输入值为admin时，才可以跳转到
如左图的页面，否则就是
提示的错误信息~