用Express和AbsurdJS做Node.js应用

当今有许多新技术吸引着越来越多的开发者，Node.js 便是其中之一。主要因为它是 JavaScript 驱动的，许多人都很感兴趣。在本教程中，我将会教你结合 Express 去使用 AbsurdJS。Express 是流行的 Node.js 框架，而 AbsurdJS 则比较新鲜，希望你看完后会发现它很有用。

成都创新互联专业为企业提供普安网站建设、普安做网站、普安网站设计、普安网站制作等企业网站建设、网页设计与制作、普安企业网站模板建站服务，十多年普安做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

本文中出现的源码都可以从这里下载。

简介

正如我提到的，Express 很流行。因为它是最早的 Node.js 框架之一。它把所有琐碎的事情都包办了，比如路由选择、参数解析、模板、向浏览器发送响应。它的库基于 Connect 提供的中间件架构对原生的 Node.js 进行了较好的封装。

AbsurdJS 一开始是一个 CSS 预处理器。目的是为 CSS 开发者带来更好的灵活性。它接受纯 JavaScript 代码并转换为 CSS。大家对它的反馈都比较积极，我也在努力继续完善它。现在它不仅能预处理 CSS，还可以处理 HTML。它接受 JSON 和 YAML 并成功导出作客户端使用。

步骤

为了使***做出的项目能跑起来，我们需要安装 Node.js。只需打开 nodejs.org 并点击大大的绿色“INSTALL”按钮。下载并安装完成后你就可以调用 Node.js 脚本，用npm（Node 的包管理器）安装依赖包。

为你的项目新建一个文件夹，里面再新建一个空的“package.json”文件。包管理器会以这个文件为起点去安装我们需要的包。我们只需两个包，所以 json 文件应该是这个样子：

 
 
    
  
  
  1. {  
    2. 
  
  
  2.     "name": "AbsurdJSAndExpress",  
    3. 
  
  
  3.     "description": "AbsurdJS + Express app",  
    4. 
  
  
  4.     "version": "0.0.1",  
    5. 
  
  
  5.     "dependencies": {  
    6. 
  
  
  6.         "express": "3.4.4",  
    7. 
  
  
  7.         "absurd": "*" 
    8. 
  
  
  8.     }  
    9. 
  
  
  9. } 
    10.

当然，这里还有许多其它的参数可以配置，但为了方便举例我们就先按上面的配置吧。打开终端，定位包含到 Package.json 的目录，执行：

 
 
    
  
  
  1. npm install 
    2.

会在当前目录生成 node_modules 文件夹，并自动下载 Express 和 AbsurdJS。

运行服务器

有了 Express 你只需要简单几行代码就可以运行一个 http 服务器。

 
 
    
  
  
  1. var express = require('express'),  
    2. 
  
  
  2.     app = express();  
    3. 
  
  
  3.    
    4. 
  
  
  4. app.listen(3303);  
    5. 
  
  
  5. console.log('Listening on port 3303'); 
    6.

保存以上代码为 app.js 并运行：

 
 
    
  
  
  1. node app.js 
    2.

这时控制台应该显示 “Listening on port 3303”。浏览器打开 http://localhost:3303/ 会看到：

 
 
    
  
  
  1. Cannot GET / 
    2.

不用担心，这很正常，因为我们还没有添加路由。

添加路由

Express 提供了友好的 API 去定义 URL 路由。我们在这里简单地添加一个，把下面的代码贴到 app.js 中。

 
 
    
  
  
  1. app.get('/', function(req, res, next) {  
    2. 
  
  
  2.     res.setHeader('Content-Type', 'text/html');  
    3. 
  
  
  3.     res.send("application");  
    4. 
  
  
  4. }); 
    5.

这里做了几件事。.get 方法的***个参数定义了路径；第二个参数是个方法，用来处理请求，它接受三个参数 – request、response、next。这里的好处是我们可以传入多个函数，它们会一个接一个的被调用。我们需要做的只是执行 next()，否者 next 方法不会被调用。比如：

 
 
    
  
  
  1. app.get(  
    2. 
  
  
  2.     '/',   
    3. 
  
  
  3.     function(req, res, next) {  
    4. 
  
  
  4.         console.log("do some other stuff here");  
    5. 
  
  
  5.         next();  
    6. 
  
  
  6.     },  
    7. 
  
  
  7.     function(req, res, next) {  
    8. 
  
  
  8.         res.send("application");  
    9. 
  
  
  9.     }  
    10. 
  
  
  10. ); 
    11.

路由定义中通用的做法是添加一些可重用的任务作为中间件。比如说，我们有两种 Content-Type, HTML 和 CSS。用下面的方法就显得更加灵活。

 
 
    
  
  
  1. var setContentType = function(type) {  
    2. 
  
  
  2.     return function(req, res, next) {  
    3. 
  
  
  3.         res.setHeader('Content-Type', 'text/' + type);  
    4. 
  
  
  4.         next();  
    5. 
  
  
  5.     }  
    6. 
  
  
  6. }  
    7. 
  
  
  7. app.get('/', setContentType("html"), function(req, res, next) {  
    8. 
  
  
  8.     res.send("application");  
    9. 
  
  
  9. }); 
    10.

如果我们需要提供 CSS，只要用 setContentType(“css”) 即可。

提供 HTML

很多 Express 的教程和文章都会介绍一些模板引擎。通常是 Jade、Hogan 或者 Mustache。然而，如果用 AbsurdJS 我们不需要模板引擎。我们可以用纯 JavaScript 编写 HTML。更具体的说，是用 JavaScript 对象。我们先从实现着陆页开始。新建文件夹 pages，在里面新建 landing.js 文件。我们在用 Node.js 所以文件里应该包含：

 
 
    
  
  
  1. module.exports = function(api) {  
    2. 
  
  
  2.     // ...  
    3. 
  
  
  3. } 
    4.

注意返回的函数接受 AbsurdJS API 的引用。这正是我们所要的。现在再加点 HTML：

 
 
    
  
  
  1. module.exports = function(api) {  
    2. 
  
  
  2.     api.add({  
    3. 
  
  
  3.         _:"",  
    4. 
  
  
  4.         html: {  
    5. 
  
  
  5.             head: {  
    6. 
  
  
  6.                 'meta[http-equiv="Content-Type" content="text/html; charset=utf-8"]': {},  
    7. 
  
  
  7.                 'link[rel="stylesheet" type="text/css" href="styles.css"]': {}  
    8. 
  
  
  8.             },  
    9. 
  
  
  9.             body: {}  
    10. 
  
  
  10.         }  
    11. 
  
  
  11.     });  
    12. 
  
  
  12. } 
    13.

“_” 属性添加的字符串在编译成HTML时不会被转换；其它的属性各定义了一个标签。还可以用其它方法去定义标签属性，但我认为用上面的方式更好。这个想法是从 Sublime 的 Emmet 插件中获得的。编译完成后会生成：

 
 
    
  
  
  1.  
    2. 
  
  
  2.  
    3. 
  
  
  3.      
    4. 
  
  
  4.          
    5. 
  
  
  5.          
    6. 
  
  
  6.      
    7. 
  
  
  7.      
    8. 
  
  
  8.  
    9.

本次教程只有一个页面，而在现实中你可能会在多个页面中使用相同的HTML。此时更合理的做法是将这部分代码移到外部的文件中，在需要的时候引用进来。当然，这里还可以使用可重复模板。创建文件 /pages/partials/layout.js ：

 
 
    
  
  
  1. module.exports = function(title) {  
    2. 
  
  
  2.     return {  
    3. 
  
  
  3.         _:"",  
    4. 
  
  
  4.         html: {  
    5. 
  
  
  5.             head: {  
    6. 
  
  
  6.                 'meta[http-equiv="Content-Type" content="text/html; charset=utf-8"]': {},  
    7. 
  
  
  7.                 'link[rel="stylesheet" type="text/css" href="styles.css"]': {},  
    8. 
  
  
  8.                 title: title  
    9. 
  
  
  9.             },  
    10. 
  
  
  10.             body: {}  
    11. 
  
  
  11.         }  
    12. 
  
  
  12.     };  
    13. 
  
  
  13. }; 
    14.

这里其实就是一个返回对象的函数。所以，之前的 landing.js 可以修改为：

 
 
    
  
  
  1. module.exports = function(api) {  
    2. 
  
  
  2.     var layout = require("./partials/layout.js")("Home page");  
    3. 
  
  
  3.     api.add(layout);  
    4. 
  
  
  4. } 
    5.

可以看到，layout 模板接受 title 变量。这样就可以动态地生成一部分内容。

#p#

接下来是向 body 标签添加内容。非常简单，因为所有内容都是纯 JavaScript 对象。

 
 
    
  
  
  1. module.exports = function(api) {  
    2. 
  
  
  2.     var layout = require("./partials/layout.js")("Home page");  
    3. 
  
  
  3.     layout.html.body = {  
    4. 
  
  
  4.         h1: "Page content" 
    5. 
  
  
  5.     }  
    6. 
  
  
  6.     api.add(layout);  
    7. 
  
  
  7. } 
    8.

生成的结果：

 
 
    
  
  
  1.  
    2. 
  
  
  2.  
    3. 
  
  
  3.      
    4. 
  
  
  4.          
    5. 
  
  
  5.          
    6. 
  
  
  6.         Home page 
    7. 
  
  
  7.      
    8. 
  
  
  8.      
    9. 
  
  
  9.         
    Page content
     
    10. 
  
  
  10.      
    11. 
  
  
  11.  
    12.

本文的代码看起来都很短、不完整，是因为全写的话文章就太长了。接下来我只会介绍一下建立无序列表的思想，因为这里比较有意思。剩余的部分跟 layout 类似，就不再敖述。

下面就是生成无序列表的片段。

    标签：

     
 
      
  
  
    1. module.exports = function(data) {  
      2. 
  
  
    2.     var html = { ul: [] };  
      3. 
  
  
    3.     for(var i=0; item=data[i]; i++) {  
      4. 
  
  
    4.         html.ul.push({ li: item });  
      5. 
  
  
    5.     }  
      6. 
  
  
    6.     return html;  
      7. 
  
  
    7. } 
      8.

    这里只用了一个 ul 属性定义一个对象。ul 其实就是一个数组，装满列表中的项。

     
 
      
  
  
    1. var list = require("./partials/list.js");  
      2. 
  
  
    2. var link = require("./partials/link.js");  
      3. 
  
  
    3. list([  
      4. 
  
  
    4.     link("http://krasimir.github.io/absurd", "Official library site"),  
      5. 
  
  
    5.     link("https://github.com/krasimir/absurd", "Official repository")  
      6. 
  
  
    6. ]); 
      7.

    link 也是片段，类似这样子：

     
 
      
  
  
    1. module.exports = function(href, label) {  
      2. 
  
  
    2.     return {   
      3. 
  
  
    3.         a: { _attrs: { href: href }, _: label }  
      4. 
  
  
    4.     }  
      5. 
  
  
    5. } 
      6.

    组合起来后就会生成：

      
 
      
   
  
      1.  
   
  
      •     
      •  
        • 
   
  
      •          
        • 
   
  
      •             Official library site  
        • 
   
  
      •          
        • 
   
  
      •     
        •  
   
  
      •     
      •  
        • 
   
  
      •          
        • 
   
  
      •             Official repository  
        • 
   
  
      •          
        • 
   
  
      •     
        •  
   
  
       
      2.

    现在，想象我们有一堆可以使用的片段。如果它们编写得足够灵活，只需创建一次就可以在项目之间传递了。AbsurdJS 是如此强大，只要我们拥有一堆足够好的预定义集合，就可以快速、更具描述性地编写 HTNL 标记。

    ***，当 HTML 已经完成后，我们只需编译并发送给用户。于是，对 app.js 做小小的变动使得我们的应用响应正确的标记：

     
 
      
  
  
    1. var absurd = require("absurd");  
      2. 
  
  
    2. var homePage = function(req, res, next) {  
      3. 
  
  
    3.     absurd().morph("html").import(__dirname + "/pages/landing.js").compile(function(err, html) {  
      4. 
  
  
    4.         res.send(html);  
      5. 
  
  
    5.     });  
      6. 
  
  
    6. }  
      7. 
  
  
    7. app.get('/', setContentType("html"), homePage); 
      8.

    提供 CSS

    与 HTML 类型，先在 app.js 为 style.css 添加路由。

      
 
      
   
  
    1. var styles = function(req, res, next) {  
      2. 
   
  
    2.     absurd().import(__dirname + "/styles/styles.js").compile(function(err, css) {  
      3. 
   
  
    3.         res.send(css);  
      4. 
   
  
    4.     });  
      5. 
   
  
    5. }  
      6. 
   
  
    6. app.get('/styles.css', setContentType("css"), styles); 
      7.

    使用 JavaScript 定义 CSS。任何东西都可以放在分好的 Node.js 模块中。让我们创建 /styles/styles.js 并加入代码： 

     
 
      
  
  
    1. module.exports = function(api) {  
      2. 
  
  
    2.     api.add({  
      3. 
  
  
    3.         body: {  
      4. 
  
  
    4.             width: "100%",  
      5. 
  
  
    5.             height: "100%",  
      6. 
  
  
    6.             margin: 0,  
      7. 
  
  
    7.             padding: 0,  
      8. 
  
  
    8.             fontSize: "16px",  
      9. 
  
  
    9.             fontFamily: "Arial",  
      10. 
  
  
    10.             lineHeight: "30px" 
      11. 
  
  
    11.         }  
      12. 
  
  
    12.     })  
      13. 
  
  
    13. } 
      14.

    一个简单的 样式控制。注意带有破折号的属性被改写成驼峰式大小写风格。否则不能创建有效对象，会得警告。

    现在假设要控制

    和

    标签的样式。它们都是标题，颜色和字体相同；但是大小不一样。通过下面的方法，AbsurdJS会智能地输出正确的样式。

     
 
      
  
  
    1. var title = function() {  
      2. 
  
  
    2.     return {  
      3. 
  
  
    3.         color: "#2C6125",  
      4. 
  
  
    4.         fontWeight: "normal",  
      5. 
  
  
    5.         fontSize: "40px",  
      6. 
  
  
    6.         fontFamily: "Georgia",  
      7. 
  
  
    7.         padding: "20px 10px" 
      8. 
  
  
    8.     }  
      9. 
  
  
    9. }   
      10. 
  
  
    10. api.add({  
      11. 
  
  
    11.     h1: title(),  
      12. 
  
  
    12.     h2: [  
      13. 
  
  
    13.         title(),   
      14. 
  
  
    14.         { fontSize: "30px" }  
      15. 
  
  
    15.     ]  
      16. 
  
  
    16. }); 
      17.

    输出结果： 

     
 
      
  
  
    1. h1, h2 {  
      2. 
  
  
    2.     color: #2C6125;  
      3. 
  
  
    3.     font-weight: normal;  
      4. 
  
  
    4.     font-family: Georgia;  
      5. 
  
  
    5.     padding: 20px 10px;  
      6. 
  
  
    6. }  
      7. 
  
  
    7. h1 {  
      8. 
  
  
    8.     font-size: 40px;  
      9. 
  
  
    9. }  
      10. 
  
  
    10. h2 {  
      11. 
  
  
    11.     font-size: 30px;  
      12. 
  
  
    12. } 
      13.

    预处理器会收集只定义了一次的相同样式，并为不同的样式创建新的定义。

    结论

    如果打算使用 Node.js，Express 会是***的起点之一。它虽然不是超级强大，但依然很好用。它具备了开发 web 应用所需的基本要素。然后去扩展它，使用 AbsurdJS 会为开发带来不少趣味性，因为整个应用都是用纯 JavaScript 编写的。

    资源

    Express 官网 – http://expressjs.com/

    Express GitHub 仓库 - https://github.com/visionmedia/express

    AbsurdJS 官网与在线编译器 – http://absurdjs.com

    AbsurdJS GitHub 仓库 – https://github.com/krasimir/absurd

    --------------------------

    原文链接： Krasimir Tsonev   翻译： 伯乐在线 - Jaward华仔

    译文链接： http://blog.jobbole.com/73031/

    文章标题：用Express和AbsurdJS做Node.js应用
    URL标题：http://www.hantingmc.com/qtweb/news36/309236.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    微信公众号知识

    同城分类信息

    雅安托管服务器　　 　四川黔盛装饰　　 　成都发电机维修　　 　成都网站制作　　 　邛崃做网站　　 　广汉长尔科技　　 　德阳电信服务器托管　　 　app开发　　 　复盛机电设备　　 　网站设计　　 　瑞捷酒店用品　　 　租用服务器　　 　广安迈傲建站　　 　手机微信网站　　 　中国西部信息中心　　 　郫都区消防器材　　 　成都木托盘　　 　重庆服务器托管　　 　网站seo优化　　 　内江广告