`

express-demo示例

    博客分类:
  • node
阅读更多

1.npm install -g express

2.npm install -g express-generator

最新的express将命令行工具分离出来,放在express-generator组件中

3.express -V查看版本,express是否安装成功

4.express projectname在当前目录下创建命名为projectnameexpress工程文件

App.js路口文件

Public存放cssjs文件和图片

Routes存放各路由具体操作的js文件,包括渲染模板

Views存放jade视图文件

5.cd projectname

 npm install

进入工程文件,安装所需的node依赖包

6.npm start启动express工程文件,之前的版本该操作是node app.js

7.访问localhost:3000浏览网页

 

 

Demo代码示例

 

app.js:

 

var express = require('express');

var path = require('path');

var favicon = require('serve-favicon');//第三方中间件,网页图标中间件,域名前的图标

var logger = require('morgan');//在控制台中输出request请求的信息,比如通过get方法加载css样式

var cookieParser = require('cookie-parser');//解析cooike中间件

var bodyParser = require('body-parser');//解析请求体中间件

 

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

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

 

var app = express();

 

app.set('views', path.join(__dirname, 'views'));//模板文件的目录,__dirname当前文件所在路径

app.set('view engine', 'jade');//设置渲染引擎

 

// 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')));//静态文件处理中间件,模板的cssjs文件路径命会拼接到public

 

//配置路由规则,顺序执行,率先执行的规则有效,后面的会被忽略,使用next()方法可以使后续的路由规则得到执行

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;

 

 

 

routes/index.js:

 

var express = require('express');

var router = express.Router();

 

router.get('/', function(req, res, next) {

  res.render('index', { title: 'Express' });

});

 

module.exports = router;

 

 

 

views/index.jade:

 

extends layout

block content

  h1= title

  p Welcome to #{title}

 

views/layout.jade:

 

doctype html

html

  head

    title= title

    link(rel='stylesheet', href='/stylesheets/style.css')

  body<!-- 拆分的模板只会渲染body内容 -->

    block content

 

参考:

Nodejs基础中间件:http://blog.fens.me/nodejs-connect/

Express使用指南:http://www.expressjs.com.cn/guide/routing.html

0
1
分享到:
评论

相关推荐

    web-express-demo-master1

    【标题】"web-express-demo-master1"是一个基于JavaScript的Web应用示例,它使用了Express框架进行构建。Express是Node.js平台上的一个快速、开放、极简的Web开发框架,用于创建高效的、可扩展的网络应用。这个项目...

    express-demo:示例代码项目

    "express-demo" 项目很可能是为了演示如何使用 Express 框架来构建一个简单的 Web 应用。在这个项目中,你可以期待找到以下内容: 1. 项目结构:包括 `routes` 目录用于存放路由处理代码,`views` 目录存储模板文件...

    nodejs-demo-express4

    标题 "nodejs-demo-express4" 暗示这是一个基于Node.js和Express 4框架的示例项目。Node.js是一个JavaScript运行环境,它利用V8引擎执行JavaScript代码,使其可以在服务器端运行。Express是一个轻量级的Web应用框架...

    express-demo:通过Express示例快速学习Express

    在"express-demo-main"这个压缩包中,很可能是包含了创建一个简单的Express应用的代码示例。这个示例可能包括初始化Express应用、定义路由、使用中间件和渲染视图等内容。通过阅读和运行这些代码,你可以快速理解和...

    jbpm-demo-master.zip_DEMO_activiti-master_jbpm-demo_mean3x7

    首先,jbpm-demo是jbPM的示例项目,它提供了各种业务流程的实例,帮助用户了解如何在实际场景中应用jbPM。这些示例涵盖了从简单的任务分配到复杂的决策流程,通常包括完整的源代码、配置文件和运行指南。通过jbpm-...

    express-pjax-demo

    Express-PJAX-Demo是一个基于Node.js的Web应用程序示例,它展示了如何使用Express框架和PJAX技术来创建一个快速、流畅的单页面应用体验。PJAX(Push State + AJAX)是一种优化网页加载速度的技术,通过利用HTML5的...

    express-api-demo

    这是使用Express.js + Mongoose开发的静态API的示例项目 开始 这些说明将确保您具有在本地计算机上运行的项目的副本,以进行开发和测试。 正在安装 使用以下命令克隆项目: git clone ...

    node express 框架 demo 例子 示例工程 好学 好用

    `express-demo-master` 通常是一个完整的 Express 示例工程,包含基本的目录结构、配置文件、路由和视图文件。通过阅读和运行这个示例,你可以了解一个实际的 Express 工程是如何组织的,并学习如何在实际项目中应用...

    express-file-upload-demo:使用 Multer 和 Express 上传文件的基本示例

    总结来说,`express-file-upload-demo`是一个使用Express和Multer进行文件上传的简单示例。它展示了如何设置 Multer 中间件、创建接收文件的路由以及如何处理上传后的文件。通过学习这个示例,开发者可以了解如何在...

    fa18-bcs-b-express-demo:快速演示

    【标题】"fa18-bcs-b-express-demo:快速演示"揭示了这是一份关于Express框架的快速示例教程,适用于FA18(可能是秋季2018)的计算机科学课程。Express是Node.js中广泛使用的Web应用程序框架,用于构建高效、可扩展的...

    SF-CSIM-EXPRESS-SDK-V1.3.zip_SF-CSIM-EXPRESS-SD_abler1h_houseuak

    本文将详细介绍“SF-CSIM-EXPRESS-SDK-V1.3.zip”压缩包中的顺丰下单Java后台Demo代码,以及如何对接顺丰开放平台的API。 首先,让我们了解一下“SF-CSIM-EXPRESS-SDK-V1.3”这个版本的SDK。这是顺丰针对CSIM...

    react-express-demo:更大项目的演示项目

    React-express-demo项目是一个展示如何将React前端与Express后端结合的示例。这种结合通常被称为“前后端分离”架构,它使前端和后端可以独立开发和部署,提高了开发效率。 在这样的项目中,React负责构建用户交互...

    express-demo:express的小demo,一个简单的静态文件服务器,匹配默认规则的请求转发,并保存请求到本地,一些通用设置的支持配置

    5. **项目结构**: 从提供的压缩包文件名`express-demo-master`来看,这个示例项目可能遵循了主分支命名规范,其中包含了项目的源代码、配置文件和其他资源。 在实际学习这个示例时,你需要查看项目源代码,理解每个...

    express-cache-router-demo:缓存快速路由器演示

    "express-cache-router-demo"是一个关于如何在Express.js中实现缓存功能的示例项目,主要目标是展示如何通过路由来优化请求处理速度。 在这个项目中,我们重点关注的是JavaScript,这是编写Node.js应用程序的主要...

    express-mysql-demo:Express js和mysql演示

    本项目"express-mysql-demo"旨在演示如何将Express.js与MySQL数据库集成,以实现一个基本的数据驱动Web应用。 **Express.js核心概念** 1. **中间件**:Express.js的核心是中间件系统,它允许请求和响应对象在处理...

    nodejs-demo改进版

    【Node.js 概述】 Node.js 是一个基于 Chrome V8 引擎的 ...总的来说,"nodejs-demo2" 是一个适合初学者的 Node.js 入门示例,通过它,你可以学习到 Node.js 的基本概念和常用操作,为进一步深入学习和开发提供基础。

    forecast-demo:示例4front天气预报应用程序,演示了express-request-proxy附加组件的用法

    尽管此示例未使用响应缓存,但是如果一遍又一遍地调用相同的API参数,也可以用来避免速率限制。 该附加组件在文件中声明。 API密钥作为环境变量存储,以避免将秘密检查到源代码控制中。 " router " : [ { " path " ...

    shopping-cart-demo-源码.rar

    【描述】:这个压缩包“shopping-cart-demo-源码.rar”包含了一个购物车应用的源代码示例。这个示例可能用于教学目的,帮助开发者理解如何在实际项目中实现一个基本的购物车功能。源代码通常包括前端界面、后端逻辑...

    webauthn-demo:示例项目,显示如何使用WebAuthn对privacyIDEA进行身份验证

    webauthn-demo 示例项目,显示了如何使用WebAuthn对privacyIDEA进行身份验证。 重要提示:这是一个演示。 许多事情都得到了简化。 在根据您自己构建实施方案之前,请仔细查看标有FIXME的注释。 请勿在生产环境中使用...

    fullstack-demo, Angular fullstack生成器可以进行支架的示例.zip

    fullstack-demo, Angular fullstack生成器可以进行支架的示例 使用 Angular Fullstack 生成的 Fullstack Angular Fullstack 是一个平均生成器。 它使用 MongoDB 。Express 。AngularJS和 node 来搭建应用程序。通过...

Global site tag (gtag.js) - Google Analytics