/** * 模块依赖 */ var express = require('express') , routes = require('./routes') , user = require('./routes/user') , http = require('http') , path = require('path'); var app = express(); //环境变量 app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(path.join(__dirname, 'public'))); // 开发模式 if ('development' == app.get('env')) { app.use(express.errorHandler()); } // 路径解析 app.get('https://www.jb51.net/', routes.index); app.get('/users', user.list); // 启动及端口 http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });
4. Ejs模板使用
让ejs模板文件，使用扩展名为html的文件。
修改：app.js
var ejs = require('ejs'); //引入ejs。重新安装依赖>
app.engine('.html', ejs.__express);
app.set('view engine', 'html'); // app.set('view engine', 'ejs');
重命名：views/*.ejs 为 views/*.html
访问localhost:3000正确
主要要重命名index.ejs等文件
5. 增加Bootstrap界面框架
其实就是把js,css文件复制到项目中对应该的目录里。 包括4个文件：
复制到public/stylesheets目录
bootstrap.min.css
bootstrap-responsive.min.css
复制到public/javascripts目录
bootstrap.min.js
jquery-1.9.1.min.js
接下来，我们把index.html页面切分成3个部分：header.html, index.html, footer.html
header.html, 为html页面的头部区域
index.html, 为内容显示区域
footer.html，为页面底部区域
header.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title><%=: title %></title> <!-- Bootstrap --> <link href="https://www.geedoo.info/stylesheets/bootstrap.min.css" media="screen"> <!-- <link href="https://www.geedoo.info/css/bootstrap-responsive.min.css" media="screen"> --> </head> <body screen_capture_injected="true"> index.html <% include header.html %> <h1><%= title %></h1> <p>Welcome to <%= title %></p> <% include footer.html %> footer.html <script src="https://www.geedoo.info/javascripts/jquery-1.9.1.min.js"></script> <script src="https://www.geedoo.info/javascripts/bootstrap.min.js"></script> </body> </html>
访问localhost:3000正确。
我们已经成功的使用了EJS模板的功能，把公共的头部和底部从页面中分离出来了。
并已经引入了bootstrap界面框架。
6. 路由功能
我们设计一下用户登陆业务需求。
访问路径：/，页面：index.html，不需要登陆，可以直接访问。
访问路径：/home，页面：home.html，必须用户登陆后，才可以访问。
访问路径：/login，页面：login.html，登陆页面，用户名密码输入正确，自动跳转到home.html
访问路径：/logout，页面：无，退出登陆后，自动回到index.html页面
打开app.js文件，在增加路由配置
app.get('https://www.jb51.net/',routes.index); app.route('/login') .get(routes.login) post(routes.doLogin); app.get('/logout',routes.logout); app.get('/home',routes.home);
注：get为get请求，post为post请求，all为所有针对这个路径的请求
我们打开routes/index.js文件，增加对应的方法。
exports.index=function(req, res) { res.render('index', { title: 'index' }); }; exports.login=function(req,res){ res.render('login',{title: '用户登录'}); }; exports.doLogin=function(req,res){ var user = { username:"admin", password:"admin" } if(req.body.username==user.username && req.body.password==user.password){ res.redirect('/home'); } res.redirect('/login'); }; exports.logout = function(req,res){ res.redirect('https://www.jb51.net/'); }; exports.home = function(req,res){ var user = { username:'admin', password:'admin' } res.render('home',{title:'Home',user:user}); };
创建views/login.html和views/home.html两个文件
login.html
<% include header.html %> <div> <form method="post"> <fieldset> <legend>用户登陆</legend> <div> <label for="username">用户名</label> <div> <input type="text"> </div> </div> <div> <label for="password">密码</label> <div> <input type="password"> </div> </div> <div> <button type="submit">登陆</button> </div> </fieldset> </form> </div> <% include footer.html %> home.html： <% include header.html %> <h1>Welcome <%= user.username %>, 欢迎登陆！！</h1> <a claa="btn" href="https://www.geedoo.info/logout">退出</a> <% include footer.html %>
修改index.html，增加登陆链接
index.html