Node.js Express 从入门到菜鸟（一）——Hello World！+EJS模板+后台传参到前台+分布视图

本系列写下去唯一的理由是给像博主一样头脑简单记不住Express使用方法的菜鸟们，但是会假定菜鸟们熟悉JavaScript,node.js基本使用方法,以及ASP.Net MVC。我会尝试在例子中加一些与ASP.Net MVC的对应知识点，但愿可以帮助理解而不是帮倒忙

自学能力强的菜鸟可以移步https://github.com/visionmedia/express，下载源码自学。例子就在根目录下的Examples中。编译之前记得在根目录中输入 npm install以初始化运行环境。

对于例子中使用到的Express方法，请移步http://expressjs.com/api.html，里面是Express的API

1.Hello World！

入门怎么少的了Hello World

View Code

 1 var express = require('http://www.cnblogs.com/');//引入express包
 2 
 3 var app = express();//创建express实例
 4 
 5 //路由
 6 //下面的方法响应缺省“/”的get请求
 7 //req,res是不是看得特别眼熟？
 8 app.get('/', function(req, res){
 9   res.send('Hello World');
10 });
11 
12 app.listen(3000);//设置监听http请求的端口号
13 console.log('Express started on port 3000');

访问www.localhost:3000.com 可以看到服务器直接返回的字符串 “Hello World！”（类似mvc中的 return Content("hello world!")）

2.EJS模板+后台传参到前台+分布视图

可以从服务器端直接返回字符串了，那该怎么显示好看的html页面呢？别着急，下面就是Express常用的视图模板EJS。看完了下面的例子，你应该学会如何返回html页面，如何向前台html页面传递参数以及写html页的好帮手——分布视图的

使用方法

后台node的代码

View Code

 1 var express = require('http://www.cnblogs.com/');
 2 
 3 var app = module.exports = express();
 4 
 5 //注册ejs模板为html页。简单的讲，就是原来以.ejs为后缀的模板页，现在的后缀名可以//是.html了
 6 app.engine('.html', require('ejs').__express);
 7 
 8 //设置视图模板的默认后缀名为.html,避免了每次res.Render("xx.html")的尴尬
 9 app.set('view engine', 'html');
10 
11 //设置模板文件文件夹,__dirname为全局变量,表示网站根目录
12 app.set('views', __dirname + '/views');
13 
14 var users = [
15   { name: 'tobi', email: 'tobi@learnboost.com' },
16   { name: 'loki', email: 'loki@learnboost.com' },
17   { name: 'jane', email: 'jane@learnboost.com' }
18 ];
19 
20 app.get('/', function(req, res){
21   //向页面模板传递参数，可以传递字符串和对象，注意格式
22   res.render('users', {
23     users: users,
24     title: "EJS example",
25     header: "Some users"
26   });
27 });
28 
29 if (!module.parent) {
30   app.listen(3000);
31   console.log('Express app started on port 3000');
32 }

前台html的代码

View Code

 1 //user.html
 2 
 3 <% include header.html %>
 4 
 5 <h1>Users</h1>
 6 <ul id="users">
 7   <% users.forEach(function(user){ %>
 8     <li><%= user.name %> &lt;<%= user.email %>&gt;</li>
 9   <% }) %>
10 </ul>
11 
12 <% include footer.html %>
13 
14 //header.html
15 <!DOCTYPE html>
16 <html lang="en">
17 <head>
18   <meta charset="utf-8">
19   <title> <%= title %> </title>
20   <style type="text/css">
21     body {
22       padding: 50px;
23       font: 13px Helvetica, Arial, sans-serif;
24     }
25   </style>
26 </head>
27 <body>
28 
29 //footer.html
30 </body>
31 </html>

熟悉mvc的同学肯定看出来了，这不跟mvc那一套差不多嘛！路由(Router)找到相关处理方法，方法(Controller)中要么直接返回字符串(return Content())，要么将数据传递给视图引擎(return View())，由视图引擎展示数据。

可是仔细看看，还不是mvc，因为现在的这些代码结构不清晰，还没有分层次，下一篇中，咱们将看到express mvc的搭建

本系列使用的操作系统为ubuntu，Node版本为0.10.0，Express版本为3.2.0，ejs版本为0.8.3，目前基本最新的版本了基本都是