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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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的代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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的代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 %> <<%= user.email %>></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,目前基本最新的版本了基本都是