zoukankan      html  css  js  c++  java
  • 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,目前基本最新的版本了基本都是


        

  • 相关阅读:
    Algorithm Gossip (48) 上三角、下三角、对称矩阵
    .Algorithm Gossip (47) 多维矩阵转一维矩阵
    Algorithm Gossip (46) 稀疏矩阵存储
    Algorithm Gossip (45) 费氏搜寻法
    Algorithm Gossip (44) 插补搜寻法
    Algorithm Gossip (43) 二分搜寻法
    Algorithm Gossip (42) 循序搜寻法(使用卫兵)
    Algorithm Gossip (41) 基数排序法
    Algorithm Gossip (40) 合并排序法
    AlgorithmGossip (39) 快速排序法 ( 三 )
  • 原文地址:https://www.cnblogs.com/qiuyeyaozhuai/p/3037349.html
Copyright © 2011-2022 走看看