【实践】express搭建nodeJS中间层（一）

最新推荐文章于 2023-02-13 16:57:51 发布

Jafeney

最新推荐文章于 2023-02-13 16:57:51 发布

阅读量1w

点赞数 3

分类专栏： nodejs SEO 文章标签： express nodejs web server 框架

本文链接：https://blog.csdn.net/u011413061/article/details/50371930

版权

nodejs 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

SEO

3 篇文章 0 订阅

订阅专栏

写在前面

好了，准备了一周的理论知识和开发方案，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

文件部署

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

$ express node_hk

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

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

更改依赖包配置

因为我的前端项目用的是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"
  }
}

安装node_modules

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

$ npm install

启动项目

启动这个应用（MacOS 或 Linux 平台）：

$ DEBUG=myapp npm start

Windows 平台使用如下命令：

$ set DEBUG=myapp & npm start

然后在浏览器中打开 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;

编写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>

渲染模板

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;

代码中的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环境）》

Jafeney

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
【实践】express搭建nodeJS中间层（一）

写在前面好了，准备了一周的理论知识和开发方案，nodeJS中间层搭建项目从今天就开始了。作为项目的负责人和初次尝试者，我会把开发的过程中用到的技术、碰到的壁一个个用文章记录下来。express框架介绍express框架是nodeJS出来不久就诞生的webServer构建框架，目前的版本是 4.x。项目时间紧迫，这次就不从零开始搞了，站在巨人的肩膀上解决问题，可以帮我们节省些底层工作。 @ exp
复制链接

扫一扫