热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

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

写在前面

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


<html>
<head>
<meta charset="utf-8" />
<title>hello express & art-templatetitle>

head>
<body>
<h2>Hello express & art-templateh2>
<div id='main'>
<ul>
{{each list}}
<li>编号:
{{$value.id}}   姓名:{{$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环境)》


推荐阅读
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 本文详细解析了JSONP(JSON with Padding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]
  • 本文推荐了六款高效的Java Web应用开发工具,并详细介绍了它们的实用功能。其中,分布式敏捷开发系统架构“zheng”项目,基于Spring、Spring MVC和MyBatis技术栈,提供了完整的分布式敏捷开发解决方案,支持快速构建高性能的企业级应用。此外,该工具还集成了多种中间件和服务,进一步提升了开发效率和系统的可维护性。 ... [详细]
  • 【前端开发】深入探讨 RequireJS 与性能优化策略
    随着前端技术的迅速发展,RequireJS虽然不再像以往那样吸引关注,但其在模块化加载方面的优势仍然值得深入探讨。本文将详细介绍RequireJS的基本概念及其作为模块加载工具的核心功能,并重点分析其性能优化策略,帮助开发者更好地理解和应用这一工具,提升前端项目的加载速度和整体性能。 ... [详细]
  • 通过优化模板消息机制,本研究提出了一种高效的信息化推送方案。该方案利用获取的访问令牌(access token)和指定的模板ID,实现了精准且快速的信息推送,显著提升了用户体验和信息传递效率。具体实现中,通过调用相关API接口,确保了消息的准确性和及时性,为用户提供更加便捷的服务。 ... [详细]
  • jQuery Flot 数据可视化插件:高效绘制图表的专业工具
    jQuery Flot 是一款高效的数据可视化插件,专为绘制各种图表而设计。该工具支持丰富的图表类型和自定义选项,适用于多种应用场景。用户可以通过其官方网站获取示例代码和下载资源,以便快速上手和使用。 ... [详细]
  • 在本教程中,我们将详细介绍如何使用 ArcGIS API 3.x for JavaScript 绘制风向流动图。如果您对所涉及的 API 类不熟悉,建议参考 Esri 官方网站上的 ArcGIS API 3.x for JavaScript 文档,其中提供了详尽的类介绍和使用说明。此外,我们还将提供完整的源代码,帮助您更好地理解和实现这一功能。 ... [详细]
  • 基于Java和JSP的电子医疗记录管理平台
    随着信息技术的快速发展,各类管理系统已在各行各业得到广泛应用。传统的人工管理模式已逐渐无法满足现代需求。本文介绍了一种基于Java和JSP技术开发的电子医疗记录管理平台,旨在提高医疗行业的信息化水平和管理效率。该平台通过整合先进的数据库技术和Web开发框架,实现了医疗记录的高效存储、查询和管理,为医护人员提供了便捷的操作界面和强大的数据支持。 ... [详细]
  • 本文探讨了如何在 Google Sheets 中通过自定义函数实现 AJAX 调用。具体介绍了编写脚本的方法,以便在电子表格中发起 AJAX 请求,从而实现数据的动态获取与更新。这种方法不仅简化了数据处理流程,还提高了工作效率。 ... [详细]
  • 本文深入解析了 Apache 配置文件 `httpd.conf` 和 `.htaccess` 的优化方法,探讨了如何通过合理配置提升服务器性能和安全性。文章详细介绍了这两个文件的关键参数及其作用,并提供了实际应用中的最佳实践,帮助读者更好地理解和运用 Apache 配置。 ... [详细]
  • 期末Web开发综合实践项目:运用前端技术打造趣味小游戏体验
    期末Web开发综合实践项目中,学生通过运用HTML、CSS和JavaScript等前端技术,设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况,还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果,直观呈现了游戏的互动性和视觉效果。 ... [详细]
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • Ceph API微服务实现RBD块设备的高效创建与安全删除
    本文旨在实现Ceph块存储中RBD块设备的高效创建与安全删除功能。开发环境为CentOS 7,使用 IntelliJ IDEA 进行开发。首先介绍了 librbd 的基本概念及其在 Ceph 中的作用,随后详细描述了项目 Gradle 配置的优化过程,确保了开发环境的稳定性和兼容性。通过这一系列步骤,我们成功实现了 RBD 块设备的快速创建与安全删除,提升了系统的整体性能和可靠性。 ... [详细]
  • 如何在Java中高效构建WebService
    本文介绍了如何利用XFire框架在Java中高效构建WebService。XFire是一个轻量级、高性能的Java SOAP框架,能够简化WebService的开发流程。通过结合MyEclipse集成开发环境,开发者可以更便捷地进行项目配置和代码编写,从而提高开发效率。此外,文章还详细探讨了XFire的关键特性和最佳实践,为读者提供了实用的参考。 ... [详细]
author-avatar
mmmm的海角_771
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有