【转】Nodejs初阶之express

老规矩，开头部分都是些自娱自乐的随想，想到哪写到哪...

　　到今天俺已经在俺厂工作俩年零几天了，工作以来头一回在一家企业工作超俩年，对于这俩年确实只有满满的成就感，不管是工作还是生活...写到这句突然又想写篇这俩年的总结，等这篇文章发了之后就着手整理吧，吼吼。

　　

　　

　　那篇《node.js 初体验》好像才发生在前几月，没想到时间已过两年有多。且看到文章末尾处那句： “这篇文章只会是一个开始” 令俺脸红掩面，尼玛真没想到这一开始就开始了两年多，这让老夫情何以堪...

　　好吧，反正脸皮厚已不是俩三天，让俺装傻混过去吧，咱往前看才是硬道理不是。俺一定痛改前非、洗心革面、好好改造，今年中心的小心思是把【前端攻略系列】折腾点名堂出来，厚积薄发的时刻来鸟。

　　Node不得不写写，没辙呀，太火！看看最近的前端圈子吧，没弄过几行Node代码都不好意思和别人打招呼；不折腾点Node的小平台、小工具，去食堂都不好意思多搞几碗饭，所以俺也就顺大潮把自己的工作笔记整理整理，试试能否写好这篇Nodejs系列。

　　

　　好吧，不开玩笑哒~~~介绍这篇和接下来几篇Node文章的内容，基本都属于Node的初阶，略偏实战，进阶和高阶内容正在YY中，最终的目录与里程碑下一篇应该差不多能定下来。

　　本篇以介绍Express为话题，延伸出用Node开发小页面，然后其中穿插概述express主要的API、路由的原理、Node模块概念，顺便也会介绍自己使用Node工具等等。默认看官们都具备JavaScript基础，所以过于基础的内容俺就不浪费篇幅咯，GOGO。

　　最后自我爆料一个吧。老婆已回家养胎，所以俺穷的只有时间了。有时间好好加班拼工作，有时间好好写博(客)拼积累...诸如心灵鸡汤什么的就不灌各位啦，喝多了反胃:)

　　一不小心随想就写了那么多，尼玛炫酷狂拽屌炸天有木有！

　　

-------------------------------------------- 华丽丽的分割线 --------------------------------------------

　　Node和NPM的安装够便捷了，不细说...有几点基础顺手提一下：

  1. 安装命令中的 “-g” 表示全局(global)
  2. express的版本不是通常的 “-v” 来查看，而是 “-V”
  3. 安装express项目的命令如下
    express -e nodejs-product

    -e, --ejs add ejs engine support

    -J, --jshtml add jshtml engine support (defaults to jade)

    PS：模板引擎之类暂时不必care，不过俺当初学习搭建Node+express时用的是ejs，所以也就顺手一直用着了

　　Node的小基友supervisor　　

　　每次修改代码后会自动重启。懒程序员就指望这种省事省力的工具活着了:)

　　安装：npm install -g supervisor

　　执行：supervisor app.js


　　另一个小基友forever

　　虚拟机一关node服务就关了，不过forever可以让node服务不停止，介绍如下，安装和执行不细说啦，我懒：

　　forever是一个简单的命令式nodejs的守护进程，能够启动，停止，重启App应用。forever完全基于命令行操作，在forever进程之下，创建node的子进程，通过monitor监控node子进程的运行情况，一旦文件更新，或者进程挂掉，forever会自动重启node服务器，确保应用正常运行。

　　express项目目录　　

　　如上图就是一个express项目结构，简单过一下：

  • app.js： 项目入口，反正express爱叫app.js没辙，你可以改成index.js或者main.js都成。相当于php项目中的 index.php、index.html
  • node_modules： 存放项目的依赖库
  • package.json： 项目依赖配置及开发者信息(这个要说就说多了，还是看文档好，俺就不误人子弟了。下期看看抽个小段单说Node模块)
  • public： 静态文件如 css,js,img (PS:俺其实习惯叫static)
  • routes： 路由文件(学习的重要攻克对象。尼玛业务好不好，路由是关键)
  • Views： 页面文件(Ejs或者jade的模板，默认是jade，俺这用Ejs，在初阶练手最重要，所以都可以试试)

打开View 文件发现index.ejs比较不习惯，所以对app.js进行小改动：

  1. “app.set(‘view engine‘, ‘ejs‘);” 变成 “app.engine(‘.html‘, ejs.__express);app.set(‘view engine‘, ‘html‘);”
  2. 上一行出现的ejs变量需要require ejs模块，增加代码“var ejs = require(‘ejs‘);”

最终的app.js如下：

　　代码小解：　　

因为针对的是初阶入门，俺们还是继续过一下express的使用与Node的方法哈：

require() 用于在当前模块中加载和使用其他模块；此方法是模块的基础，使用中大概有路径的概念就行。PS：JS文件可以去掉".js"后缀

　　 exports 表示模块的导出对象，用于导出模块的属性和公共方法。在项目routes文件夹下有index.js和users.js（路由有细说），都使用到exports对象导出对象，如33行的routes.index和34行的user.list;

　　 PS：一个模块的代码只会在模块第一次被使用时执行，不会因require多次而被初始化多次。

express() 表示创建express应用程序。简单几行代码其实就可以创建一个应用，如下：

     var express = require(‘express‘);
     var app = express();
     app.get(‘/‘, function(req, res){
          res.send(‘hello world‘);
          console.log(‘hello world‘);
     });
     app.listen(‘8808‘);

app.listen() 就是在给定的主机和端口上监听请求，这个和node中http模块的http.createServer(function(){...}).listen()效果一致；

app.set(name, value)和app.get(name)就是你想的那样，set()为设置 name 的值设为 value，get()为获取设置项 name 的值。如俺app.js的图片16行中的一句“app.set(‘port‘, process.env.PORT || 3000)”就是设置项目的port，在下面使用http.createServer时就可以使用app.get(‘port‘)来获取，只是俺偷懒没用来着；

了解app.engine()方法之前先看看express应用的安装命令:“express -e nodejs-product”，其中的 -e 和 -J 我们一开始已经提到，表示ejs和jade模板。

如果想把模板后缀改成“.html”时就会用到app.engine方法，来重新设置模板文件的扩展名，比如想用ejs模板引擎来处理“.html”后缀的文件：app.engine(‘.html‘, require(‘ejs‘).__express);

app.engine(ext, callback) 注册模板引擎的 callback 用来处理ext扩展名的文件。

　　 PS：__express不用去care，其实就是ejs模块的一个公共属性，表示要渲染的文件扩展名。

app.use([path], function) 使用中间件 function,可选参数path默认为"/"。使用 app.use() “定义的”中间件的顺序非常重要，它们将会顺序执行，use的先后顺序决定了中间件的优先级(经常有搞错顺序的时候);

最后介绍个很有用的express API：

app.render(view, [options], callback) 渲染 view, callback 用来处理返回的渲染后的字符串。

　　路由实战：　　

路径代码应该是项目中最本机的一部分了。express中创建一个或者一套新的handle非常简单，先看看express现有的，一会儿我们创建俩个实际的规则。

变量 routes 和 user 都是刚才require的模块，他们各自exports了index方法和list方法；其中Response.render()表示渲染view，同时传进对应的数据，Response.send()为发送一个响应；在设置路由时index和list方法作为回调函数最终执行。

　　

　　 流程大概了解啦，俺们也就实际搞一把，最easy的一种方式，简单俩步：

  1. 第一种方式就是在当前的routes/index.js或者routes/test.js中加几行代码如下

    exports.test = function(req, res){
  res.send(‘test welcome.‘);
};
  2. 在app.js文件设置路由那块加上app.get(‘/test‘, routes.test);

　　 第二种方式就是多了两步，先新建一个模块如test.js文件，输出然后exports对应的方法；在app.js中require这个模块，再加一行设置路由即完成了。

　　快速炫起来，集成Bootstrap：　　

JS工程师使用Nodejs上手还是以快速搭建网站为主，所以才会介绍Express，那么为了让网站更快的体面起来，集成使用Bootstrap就是上佳选择，非常喜欢其响应式布局和整体系的脚手架。

PS：因为Bootstrap的JS插件都依赖jQeury，所以jQuery也一并引入了。

　　 前文已经说到了，静态文件都放在public文件夹中，切文件夹内已经帮我们把类目都分好了，images、 javascripts、 stylesheets。

　　 分别引入bootstrap.min.css文件至stylesheets目录下；jquery-1.x.x.min.js和bootstrap.min.js放到javascripts文件夹下。

　　 然后俺们修改view/index.html把文件引入使用即可，下面放出俺在bootstrap demo的基础改的index.html，大家随意拿去使用和修改。

　　

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title><%= title %></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
    <!--<link href="/stylesheets/base.css" rel="stylesheet">-->
    <!--<link href="/stylesheets/common.css" rel="stylesheet">-->
    <!--<link href="/stylesheets/page.css" rel="stylesheet">-->
    <!-- 建议在项目中把CSS分好level，好维护和管理 -->
    <style>
        html, body { overflow-x: hidden;}
        body { padding-top: 70px;background:#f1f1f1; }
        footer { padding:20px 0 10px;text-align:center;font-weight:bold;border-top:1px solid #ddd;margin-top:30px;}
        .header-navbar-style {
            filter:alpha(opacity=90);
            -moz-opacity:0.9;
            -khtml-opacity: 0.9;
            opacity: 0.9;
            background: linear-gradient(45deg, rgb(60, 8, 34) 0%, rgb(49, 79, 117) 100%);
            border:1px solid #aaa;
            font-size:16px;
        }
        .beige {background:beige;}
        .bisque {background:bisque;}
        .darkseagreen{ background:darkseagreen;}
    </style>
  </head>
  <body>
    <div class="navbar navbar-fixed-top header-navbar-style navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">Product</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/">Home</a></li>
            <li class=""><a href="/contactus">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu beige">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
            <li class=""><a href="/faq">FAQ</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->

    <!-- 以上位置建议创建个header.html维护起来 -->

    <style>
      @media screen and (max-width: 767px) {
        .row-offcanvas { position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
      }
      .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ }
      .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ }
      .row-offcanvas-right.active { right: 50%; /* 6 columns */ }
      .row-offcanvas-left.active { left: 50%; /* 6 columns */ }
      .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } }
    </style>

    <div class="container">
      <div class="row row-offcanvas row-offcanvas-right">
        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="jumbotron bisque">
            <h1>Welcome <%= title %>!</h1>
            <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
          </div>
          <div class="row">
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->
        </div><!--/span-->

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <div class="list-group">
            <a target="_blank" href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
          </div>
        </div><!--/span-->
      </div><!--/row-->
    </div><!--/.container-->

    <!-- 从header.html之后到此可分为page层 -->

    <footer class="darkseagreen">
        <p>Copyright &copy; 2014. Designed by nieweidong.</p>
    </footer>
    <script src="/javascripts/jquery-1.11.0.min.js"></script>
    <script src="/javascripts/bootstrap.min.js"></script>
    <script>
      $(document).ready(function() {
        $(‘[data-toggle=offcanvas]‘).click(function() {
          $(‘.row-offcanvas‘).toggleClass(‘active‘);
        });
      });
    </script>
  </body>
</html>

　　 如果样式有问题请检查下bootstrap的路径是否正确引入。

　　 启动项目之后觉得 高大上 很简单，有木有！！

　

　　FAQ&总结：　　

俺们的express项目暂时，且express也并没有涉及到任何数据库，这个事情需要第三方node模块，比如mysql或者MongoDB，后续俺会有一章单独介绍这块。

　　 express也不是Node中web框架的唯一选择，不过由于其文档较全，所以才以其为示例为大家介绍，其原理和实现其实细化之后并不复杂，也希望更多的JS工程师折腾出自己的Web框架。

　　 尼玛还有几个小时就到3月了，一月一篇可是俺的目标，所以全面的demo俺之后再补上哈。

如果觉得这文章也算用心，请劳驾点右下角的推荐。

　　 最后，有 北京&上海 的朋友想换工作的，百度移动云 真诚无比的期待【有技术、毁底线、无节操、大聪明、多勤奋】的你...(JD和我邮箱在页面右上角)

　　参考资料：　　

　　http://express.jsbin.cn/api.html

　　http://www.embeddedjs.com

　　Node的小基友supervisor 和 forever 不要忘记了，相信你会喜欢他们的:)　

原链接：http://www.cnblogs.com/Darren_code/p/node_express.html　

时间： 2024-10-11 09:49:54

【转】Nodejs初阶之express的相关文章

Nodejs初阶之express

Nodejs初阶之express 2014-02-28 23:00 by 聂微东, 85627 阅读, 26 评论, 收藏, 编辑 PS: 2014/09/24 更新<Express 4.X 启航指南>,欢迎阅读和评论:) 老规矩,开头部分都是些自娱自乐的随想,想到哪写到哪... 到今天俺已经在俺厂工作俩年零几天了,工作以来头一回在一家企业工作超俩年,对于这俩年确实只有满满的成就感,不管是工作还是生活...写到这句突然又想写篇这俩年的总结,等这篇文章发了之后就着手整理吧,吼吼. 那篇<n

1.sql_初阶（理论）

SQL 基础-高级 我们怎么存储数据 以前用各种书籍载体在上面按照特定的格式记录信息,就像现在的excel表格, 但是,如果当数据有几千万条的时候,查询就非常慢了 所以我们需要一种高效的解决方案:数据库(其实也是操作一种特殊格式的文件) 数据库不仅仅要存储数据,还要提供方便快捷的查询,修改,删除等功能 需要做到:海量存储,快速查询,多用户同时查询,用户访问安全性,数据存储完整性(正确性)等 ? 什么是数据库 数据的仓库,货仓里有很多货架(库文件),货架有不同的种类,不同的架子放不同的货物, 管理

平衡树初阶——AVL平衡二叉查找树+三大平衡树（Treap + Splay + SBT）模板【超详解】

平衡树初阶——AVL平衡二叉查找树 一.什么是二叉树 1. 什么是树. 计算机科学里面的树本质是一个树状图.树首先是一个有向无环图,由根节点指向子结点.但是不严格的说,我们也研究无向树.所谓无向树就是将有向树的所有边看成无向边形成的树状图.树是一种递归的数据结构,所以我们研究树也是按照递归的方式去研究的. 2.什么是二叉树. 我们给出二叉树的递归定义如下: (1)空树是一个二叉树. (2)单个节点是一个二叉树. (3)如果一棵树中,以它的左右子节点为根形成的子树都是二叉树,那么这棵树本身也是二叉

R语言 图形初阶

第三章 图形初阶 1.使用图形 pdf("XXX.pdf")#保存pdf文件 ---- dev.of() dev.new()#新的图形窗口 2.一个简单的列子 3.图形参数 opar=par(no.readonly=TRUE)#生成一个可以修改当前图形的参数列表 par(lty=2,pch=17) plot(x,y,type="b") par(opar) a.符号和线条 pch:指定绘制点时使用的符号 cex:指定符号的大小.cex是一个数值,表示绘图符号相对于默认

NodeJS学习笔记之express

Express学习 API分析 Set.Get app.set('title', 'My Site'); app.get('title'); // "My Site" app.get(“string”)和app.get(path, [callback...], callback)要区别开,前面一个函数是获取string的value,而后一个是路由函数. 下面的内建的可以改变Express行为的设置 env 运行时环境,默认为 process.env.NODE_ENV 或者 "

【转载】nodejs，npm，express分别什么？

很多刚刚接触nodejs的初学者,都会经历一个很繁冗的环境安装过程. 一般主要要安装nodejs,npm和express三样东西.那么这三样东西分别是干什么的呢? 本篇文章就大致介绍一下这三样东西分别是干什么的: nodejs 首先要说的是nodejs,既然我们要装nodejs,那这个其实就没什么好解释的. nodejs就是运行框架,就像C#和.net,JAVA和JRE一样,nodejs就是nodejs. 所以其实装了nodejs以后,nodejs其实就已经可以编码和运行了. npm npm是一

使用nodejs、ejsExcel、express、vuejs编写一个excel转json的工具——第一步：创建一个包含webpack的vuejs项目

最近开发一个h5的游戏,需要一个excel转json的工具,网上找了找,没有发现适合的工具.想到自己之前用nodejs.express和vuejs做过一个网站,也用过ejsExcel插件,于是自己动手做了一个.这里简单的记录一下开发过程,给自己留个纪念. 这是本系列的第一篇博客,从新建项目开始吧. 1.需要按照nodejs和vuejs 安装的方法这里不提了,网上找一找,教程很多. 安装好了可以看一下nodejs.vuejs和express的版本号: 2.使用vuejs创建一个带webpack的项

图形初阶

本章内容? 图形的创建和保存? 自定义符号.线条.颜色和坐标轴? 标注文本和标题? 控制图形维度? 组合多个图形我曾经多次向客户展示以数字和文字表示的.精心整理的统计分析结果,得到的只是客户呆滞的眼神,尴尬得房间里只能听到鸟语虫鸣.然而,当我使用图形向相同的用户展示相同的信息时,他们往往会兴致盎然,甚至豁然开朗.还有很多次,我都是通过看图才得以发现了数据中的模式,或是检查出了数据中的异常值——这些模式和异常都是在我进行更为正式的统计分析时彻底遗漏的.人类非常善于从视觉呈现中洞察关系.一幅精心绘制

nodejs弯路-01之&#39;express&#39; 不是内部或外部命令

最近正想用node+angular+mongodb来完成一个小项目,三样都算是从零开始学习吧. 一开始是想用express -e projectname去创建一个ejs模板的项目.(一两句话就可以把大量配置文件搞好,有一股莫名的快感,不知道各位有木有). 那么肯定的 npm install -g express这个安装是不能少啦. 但是我安装过后执行express -e projectname这个却报了'express' 不是内部或外部命令. 原来是漏了句npm install -g expre