node express - 秒客网

在某QQ群里，发现大家都在搞node，为了不被out,这周主要研究了一下，还挺高大上。

参考了下资料，适合初学者学习。

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

安装命令中的 “-g” 表示全局(global)
express的版本不是通常的 “-v” 来查看，而是 “-V”
安装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，所以也就顺手一直用着了

　　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进行小改动：

“app.set('view engine', 'ejs');” 变成 “app.engine('.html', ejs.__express);app.set('view engine', 'html');”
上一行出现的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')来获取，只是俺偷懒没用来着 node express

；

了解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的一种方式，简单俩步：

第一种方式就是在当前的routes/index.js或者routes/test.js中加几行代码如下
```
exports.test = function(req, res){

  res.send('test welcome.');

};
```
在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>

node express的更多相关文章

【原】小玩node+express爬虫-2
上周写了一个node+experss的爬虫小入门.今天继续来学习一下,写一个爬虫2.0版本. 这次我们不再爬博客园了,咋玩点新的,爬爬电影天堂.因为每个周末都会在电影天堂下载一部电影来看看. talk ...
Node+Express+node-mysql 实战于演习全套mysql(增删改查)
最近这段时间研究Node感觉不错,自己做了一个增删改查,虽然有些简陋,但是思想是想通的,其实所有项目都是增删改查,有助于初学者快速掌握Node 首先本实例展示的是基于Node+Express+nod ...
Node Express 4&period;0 安装
前言今天想要用nodejs 写个后台服务,很久之前看过node express 框架,可真当向下手安装的时候,发现好多命令都不记得了.写完后台服务,没事了,总结了下安装过程,记录一下,以便以后查阅方 ...
Webpact打包React后端Node+Express
Webpact打包React后端Node+Express 前言 React官方推荐用Browserify或者Webpack 来开发React组件. Webpack 是什么?是德国开发者 Tobias ...
Node+Express+MongoDB + Socket&period;io搭建实时聊天应用
Node+Express+MongoDB + Socket.io搭建实时聊天应用前言本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战 ...
基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统
很久没更新博客,最近也有点忙,然后业余时间搞了一个比较完整基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统的流程系统,希望对 ...
Node Express 初探
一如既往,先上一张图 Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. 关于Express更多相关知识请链接至官网http://www.expressjs.com.c ...
零基础实现node+express个性化聊天室
本篇文章使用node+express+jquery写一个个性化聊天室,一起来get一下~(源码地址见文章末尾) 效果图项目结构实现功能登录检测系统自动提示用户状态(进入/离开) 显示在线用户 ...
node+express+mongodb初体验
从去年11月份到现在,一直想去学习nodejs,在这段时间体验了gulp.grunt.yeomen,fis,但是对于nodejs深入的去学习,去开发项目总是断断续续. 今天花了一天的时间,去了解整理整 ...

随机推荐

把vim当做golang的IDE
开始决定丢弃鼠标,所以准备用vim了. 那么在vim里面如何搭建golang环境呢? git盛行之下,搭建vim环境是如此简单. 而且vim搭建好了之后,基本上跟IDE没有差别. 高亮.自动补全.自动 ...
【读书笔记】iOS-装箱
通常将一个基本类型的数据包装成对象叫做装箱,从对象中提取基本类型的数据叫做取消装箱.有些语言有自动装箱功能,它可以自动包装基本基础类型的数据,也可以自动从包装后的对象中提取基础数据.Objective ...
linux杀掉80端口线程命令
80端口被其他程序占用, fuser -k -n tcp 80
Canvas中的非零环绕
先上图当要填充图形时,必须区分开哪些部分是覆盖的,哪些是空的,根据绘制的方向可以判断出来非零环绕规则:对于路径中指定范围区域,从该区域内部画一条足够长的线段,使此线段的完全落在路径范围之外. 非零 ...
Spring核心
方法区与常量池 BeanFactoryPostProcessor与BeanPostProcessor使用创建pc过程 https://www.liangzl.com/get-article-deta ...
oracle批量去掉字段值空格
--查询验证 select ltrim(col1) from t1; --去掉字段值左边空格update t1 set col1=ltrim(col1); --去掉字段值右边空格update t1 s ...
条件分支语句(SWICH语句)
语法 swich(条件表达式){ Case 表达式: 语句……. Break; Case 表达式: 语句……. Break; Case 表达式: 语句……. Break; default: 语句……. ...
oracle 触发器 pragma autonomous&lowbar;transaction
from:http://blog.csdn.net/ruru7989/article/details/30712987一般情况下在触发器中是不能使用DDL语句的,使用自治事务可以实现可以在触发器中加 ...
[转]js add month 加n月
本文转自:http://*.com/questions/5645058/how-to-add-months-to-a-date-in-javascript/5645126 I ...
BluetoothFindFirstRadio 函数
HBLUETOOTH_RADIO_FIND BluetoothFindFirstRadio( BLUETOOTH_FIND_RADIO_PARAMS* pbtfrp, HANDLE* phRadio ...