当前位置:   article > 正文

【实践】express搭建nodeJS中间层(一)_node js做中间

node js做中间

写在前面

好了,准备了一周的理论知识和开发方案,nodeJS中间层搭建项目从今天就开始了。作为项目的负责人和初次尝试者,我会把开发的过程中用到的技术、碰到的壁一个个用文章记录下来。

express框架介绍

express框架是nodeJS出来不久就诞生的webServer构建框架,目前的版本是 4.x。项目时间紧迫,这次就不从零开始搞了,站在巨人的肩膀上解决问题,可以帮我们节省些底层工作。

@ express API官方网站 http://www.expressjs.com.cn

安装环境

如果你还没有安装node,先把它安装好。然后用npm 全局安装express和express-generator。

$ npm install exprss -g --save
$ npm install express-generator -g --save
  • 1
  • 2

文件部署

通过express-generator生成器工具 express 可以快速创建一个应用的骨架:(我的项目名是 node_hk)

$ express node_hk
  • 1

默认生成的目录是这样的:

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

更改依赖包配置

因为我的前端项目用的是artTemplate模板引擎,为了很前后端复用,因此node这边也采用这款模板引擎。所以需要把express默认的jade改成了art-template:

{
  "name": "node_hk",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "art-template": "~3.0.3",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0"
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

安装node_modules

配置好了 package.json,下面我们就用npm 依次安装它们吧!

$ npm install  
  • 1

启动项目

启动这个应用(MacOS 或 Linux 平台):

$ DEBUG=myapp npm start
  • 1

Windows 平台使用如下命令:

$ set DEBUG=myapp & npm start
  • 1

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了(等等 报错了对不对 * _ *,别着急,往下看)。

把默认的jade模板引擎改成artTemplate

改造app.js

app.js是express的主要文件,这个文件里包含了指定模板引擎、指定视图文件默认路径的代码。需要将指定模板引擎的代码改为指定用art-template引擎。视图文件默认路径保持不变,因此无需改动。

新的app.js如下(懒得看就直接copy吧):

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

/*引用artTemplate模板*/
var template=require('art-template'); 

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));

/*把jade模板引擎改成artTemplate*/
//app.set('view engine', 'jade'); 
template.config('base','');
template.config('extname','.html');
app.engine('.html',template.__express);
app.set('view engine','html');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

module.exports = app;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68

编写artTemplate模板文件

在工作区下,进入express文件夹中的views子文件夹,创建index.html,并将如下代码输入index.html,并保存。

注意,views文件夹下会有index.jade等三个后缀是.jade的文件存在,可以忽视它们。因为express默认支持的模板引擎是jade,所以初始化的框架中的模板是以.jade结尾的文件。也可以删除它们。

这里举个简单的 index.html 例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>hello express & art-template</title>
</head>
<body>
    <h2>Hello express & art-template</h2>
    <div id='main'>
        <ul>
            {{each list}}
                <li>编号:{{$value.id}} &nbsp;&nbsp;姓名:{{$value.name}}</a></li>
            {{/each}}
        </ul>
    </div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

渲染模板

express默认访问index路由。我们需要在index路由方法中,渲染模板。

进入routes文件夹,打开index.js,增加渲染模板的代码,如下:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
    //数据
    var data = {
        title: '国内要闻',
        time: (new Date).toString(),
        list: [
            {
                id: '1',
                name: '张三'
            },
            {
                id: '2',
                name: '李四'
            }
        ]
    };
    //渲染模板
    res.render('index', data);
});

module.exports = router;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

代码中的res.render(‘index’, data)调用,会调用artTemple模块中的template.__express方法,并传入模板文件名、数据。
template.__express方法是在app.js中注册给express框架的。

在Windows命令行下,进入工作区,执行 node app.js ,服务器就启动了。
此时在本地机器上使用浏览器访问http://localhost:3000将会看到Html输出了,服务器端的命令行工具上同时也会显示“New request arrived.”字样。

这里写图片描述

按Ctl+C退出服务器

@参考 express 官方API http://www.expressjs.com.cn
@参考 执着的慢行者 《使用artTemplate模板开发网站(node.js + express环境)》

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/120264
推荐阅读
相关标签
  

闽ICP备14008679号