Express 教程 01 - 入门教程之经典的Hello World

时间:2022-12-18 09:37:58

目录:

前言

一、Express?纳尼?!

二、开始前的准备工作

三、测试安装之经典的Hello World

四、使用express(1)来生成一个应用程序

五、说明


前言:

  本篇文章是建立在Node.js基础之上的,所以读者需要有一点Node.js基础的了解。

  演示我是按照Windows操作系统来的了。Linux的其实命令都差不多,大家应该也可以发现。

  我也是刚学这个,所以很多东西都是我从各大网站上照的,然后附上了我的实践操作及自己的说明吧。

  有什么错误,希望大家及时指明,也请大家见谅。。


一、Express?纳尼?!

  Express 是一个简洁而灵活的 Node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用。Express 不对 node.js 已有的特性进行二次抽象,我们只是在它之上扩展了Web应用所需的功能。丰富的HTTP工具以及来自Connect框架的中间件随取随用,创建强健、友好的API变得快速又简单。


二、开始前的准备工作

  步骤1:首先,我们需要在自己的磁盘分区中,新建一个文件夹,后面我们的所有操作都将在这个文件夹中进行。

  在这里,我以我的D盘做演示。

  运行cmd、启动DOS,输入“D:”回车切换到D盘,然后运行“mkdir NodejsDemo”新建一个名为“NodejsDemo”的文件夹:

Express 教程 01 - 入门教程之经典的Hello World

  步骤2:在这个文件夹中,我们必须得创建一个“应用程序包文件”,它类似于.NET中的package.json,用于NuGet管理文件版本用的。

  在我们的Express里面呢,我们也需要创建package.json这个文件,它和其他的Node程序包是一样的,在里面Express作为一个依赖。

  你也可以使用 npm info express version 来获取express最新版本号,最好使用最新的版本号,这样新出的功能就不会让你感觉到奇怪了:

Express 教程 01 - 入门教程之经典的Hello World

  OK,得知目前最新的Express版本号为4.12.2,接下来我们就可以创建package.json这个包文件了。

  package.json文件代码如下:

{
  "name": "NodejsDemo",
  "description": "Hello World test app.",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "3.x"
  }
}

  步骤3:现在我们的package.json文件已经准备就绪了,下面我们就可以使用npm(1)来安装依赖项,这里的依赖项仅是Express。

  运行 cd NodejsDemo 进入我们的项目目录,这里也就是我们最开始新建的,也是package.json所在的NodejsDemo文件夹:

Express 教程 01 - 入门教程之经典的Hello World

  步骤4:然后,我们运行 npm install 命令,安装package.json中声明的依赖项:

Express 教程 01 - 入门教程之经典的Hello World

  步骤5:当npm完成后,Express 4.12.2和它的依赖项就安装到你的"./node_modules"目录里了。

  你可以通过运行 npm ls 命令来确认一下,它会把Express和它的依赖展示成下面的树形结构:

Express 教程 01 - 入门教程之经典的Hello World


三、测试安装之经典的Hello World

  第一段中,我们的Express已经安装完成了,下面,我们要来写真正的代码了,也算是测试安装结果吧。

  步骤1:在D:\NodejsDemo,也就是上面我们创建的那个目录中,创建一个js文件:man.js,作为我们的主程序。

  main.js代码如下:

var express = require('express')
var app = express()

app.get('/', function (request, response) {
  response.send('Hello World')
})

var server = app.listen(3000, function() {
    console.log('Listening on port %d', server.address().port);
});

  上述代码中,我们首先引入express模块,然后使用express()创建一个新的应用程序。

  在这个应用程序实例里,你可以通过  app.VERB() 定义路由,上面的例子是"GET /"返回 "Hello World" 字符串。

  request和 response 对象是和node原生提供给你的一致的,你也可以执行  response.pipe() ,  request.on('data', callback)  等任何事情在没有Express的情况下可以做的事情。

  然后,我们使用express对象封装好的方法 response.send() ,它会返回指定字符串,并且设置Content-Length。

  最后,我们启动监听3000,并且输出当前的监听信息。

  步骤2:运行cmd,启动DOS,进入该项目目录,运行命令“node main”:

Express 教程 01 - 入门教程之经典的Hello World

  步骤3:打开浏览器,访问:http://127.0.0.1:3000:

Express 教程 01 - 入门教程之经典的Hello World

  啊啊啊,每次看到这两个单词,都好激动有木有。。。。。。


四、使用express(1) 来生成一个应用程序

  Express团队维护了一个可以快速生成项目模板的可执行文件,这里命名为express(1)。

  如果您使用npm安装全局的express-generator,那么在你的机器任何位置它都可以被访问。

  步骤1:运行cmd进入DOS,切换到D盘,运行命令 npm install -g express-generator ,-g表示global全局的。效果如下:

Express 教程 01 - 入门教程之经典的Hello World

  步骤2:这个工具提供了一个非常简单的生成一个程序骨架的功能。但是他也是有局限性的,比如它只支持很少的几个模板引擎。

  而事实上Express几乎支持所有的为Node所建的模板引擎。使用 express --help 查看一下帮助:

Express 教程 01 - 入门教程之经典的Hello World

  步骤3:如果你想生成一个Jade,Stylus的应用程序,你只需要简单的执行下面的命令即可: express --session --css stylus --ejs myapp

Express 教程 01 - 入门教程之经典的Hello World

  然后,它就会在我们的D盘中新建了一个myapp的站点,结构如下:

D:\MYAPP
│  app.js
│  package.json
│
├─bin
│      www
│
├─public
│  ├─images
│  ├─javascripts
│  └─stylesheets
│          style.styl
│
├─routes
│      index.js
│      users.js
│
└─views
        error.ejs
        index.ejs

  步骤4:和其他Node程序一样,你必须添加项目依赖:

D:\> cd myapp
D:\myapp> npm install
D:\>cd myapp

D:\myapp>npm install
cookie-parser@1.3.4 node_modules\cookie-parser
├── cookie@0.1.2
└── cookie-signature@1.0.6

ejs@2.3.1 node_modules\ejs

debug@2.1.2 node_modules\debug
└── ms@0.7.0

morgan@1.5.1 node_modules\morgan
├── basic-auth@1.0.0
├── depd@1.0.0
└── on-finished@2.2.0 (ee-first@1.1.0)

serve-favicon@2.2.0 node_modules\serve-favicon
├── fresh@0.2.4
├── ms@0.7.0
├── parseurl@1.3.0
└── etag@1.5.1 (crc@3.2.1)

express@4.12.2 node_modules\express
├── merge-descriptors@1.0.0
├── cookie-signature@1.0.6
├── utils-merge@1.0.0
├── cookie@0.1.2
├── fresh@0.2.4
├── methods@1.1.1
├── range-parser@1.0.2
├── escape-html@1.0.1
├── content-type@1.0.1
├── vary@1.0.0
├── finalhandler@0.3.3
├── parseurl@1.3.0
├── serve-static@1.9.1
├── content-disposition@0.5.0
├── path-to-regexp@0.1.3
├── depd@1.0.0
├── qs@2.3.3
├── on-finished@2.2.0 (ee-first@1.1.0)
├── etag@1.5.1 (crc@3.2.1)
├── send@0.12.1 (destroy@1.0.3, ms@0.7.0, mime@1.3.4)
├── proxy-addr@1.0.6 (forwarded@0.1.0, ipaddr.js@0.1.8)
├── accepts@1.2.4 (negotiator@0.5.1, mime-types@2.0.9)
└── type-is@1.6.0 (media-typer@0.3.0, mime-types@2.0.9)

body-parser@1.12.0 node_modules\body-parser
├── content-type@1.0.1
├── raw-body@1.3.3
├── bytes@1.0.0
├── depd@1.0.0
├── qs@2.3.3
├── on-finished@2.2.0 (ee-first@1.1.0)
├── iconv-lite@0.4.7
└── type-is@1.6.0 (media-typer@0.3.0, mime-types@2.0.9)

stylus@0.42.3 node_modules\stylus
├── css-parse@1.7.0
├── mkdirp@0.3.5
├── sax@0.5.8
└── glob@3.2.11 (inherits@2.0.1, minimatch@0.3.0)

D:\myapp>

命令运行的回显结果

  步骤5:然后,我们就可以运行了!!!哈哈。

  运行命令 node app 启动主程序,如果启动无反应,您也可以切换到bin目录,运行 node www 启动程序:

Express 教程 01 - 入门教程之经典的Hello World

  步骤6:打开浏览器,访问:http://127.0.0.1:3000:

Express 教程 01 - 入门教程之经典的Hello World

  步骤7:刷新页面,我们每发出一个请求,express都会做出记录:

Express 教程 01 - 入门教程之经典的Hello World


五、说明:

  本文就是简单的入门篇,后面有时间我会针对这个站点系统的骨架,目录扫雷式讲解,并且演示进行二次自定义开发。

  大家也可以自己看看这个目录结构,手动修改一下页面,熟悉一下。

Express 教程 01 - 入门教程之经典的Hello World的更多相关文章

  1. [译]Vulkan教程(01)入门

    [译]Vulkan教程(01)入门 接下来我将翻译(https://vulkan-tutorial.com)上的Vulkan教程.这可能是我学习Vulkan的最好方式,但不是最理想的方式. 我会用“d ...

  2. TensorFlow 中文资源全集,官方网站,安装教程,入门教程,实战项目,学习路径。

    Awesome-TensorFlow-Chinese TensorFlow 中文资源全集,学习路径推荐: 官方网站,初步了解. 安装教程,安装之后跑起来. 入门教程,简单的模型学习和运行. 实战项目, ...

  3. TensorFlow 中文资源精选,官方网站,安装教程,入门教程,实战项目,学习路径。

    Awesome-TensorFlow-Chinese TensorFlow 中文资源全集,学习路径推荐: 官方网站,初步了解. 安装教程,安装之后跑起来. 入门教程,简单的模型学习和运行. 实战项目, ...

  4. 现代OpenGL教程 01 - 入门指南

    原文链接传送门 译序 早前学OpenGL的时候还是1.x版本,用的都是glVertex,glNormal等固定管线API.后来工作需要接触DirectX9,shader也只是可选项而已,跟固定管线一起 ...

  5. solr的安装及配置详细教程/solr入门教程

    1 solr的下载 从Solr官方网站(http://lucene.apache.org/solr/ )下载Solr最新版本,根据Solr的运行环境,Linux下需要下载solr-7.3.1.tgz, ...

  6. MUD教程--巫师入门教程3

    1. 指令格式为:edit <档名>,只加文件名,默认为当前目录,加here,表示编辑你当前所处的房间, 回车后即进入线上编辑系统. 2. 如果这是一个已经有的档案,你可以使用 z 或 Z ...

  7. 【转】MUD教程--巫师入门教程2

    简单的人物原则上只要有 set_name<名字> . combat_exp <经验>就行了,当然我们总得稍微多添一点了.inherit NPC;void create(){ s ...

  8. 【转】MUD教程--巫师入门教程1

    <新巫师入门手册> 第一章:观念篇■ 内容提要:什么是巫师?怎样做一个巫师?如何做好一个巫师? 第二章:上手篇■ 内容提要:最简单的房间怎么写?NPC又怎么写?先看懂一些常用的参数? 第三 ...

  9. Java基础教程--安卓入门教程(七)

    关注我,每天都有优质技术文章推送,工作,学习累了的时候放松一下自己. 欢迎大家关注我的微信公众号:「醉翁猫咪」 什么是接口? 接口的基本语法 接口的基本语法(一) 使用interface定义 接口当中 ...

随机推荐

  1. AndroidStudio中make Project、clean Project、Rebuild Project的区别

    1.Make Project:编译Project下所有Module,一般是自上次编译后Project下有更新的文件,不生成apk. 2.Make Selected Modules:编译指定的Modul ...

  2. Python搜索目录下指定的文件&comma;并返回绝对路径&lpar;包括子目录&rpar;

    #!/usr/bin/python #coding=UTF-8 #FileName:search.py #文件搜索 import os; import sys; returnList = []; de ...

  3. java web 学习 --第十一天(Java三级考试)

    第十天的学习内容:http://www.cnblogs.com/tobecrazy/p/3473954.html Servlet理论知识: 1.servlet 生成class位置 tomcat编译后生 ...

  4. Revit 二次开发 (二) 倾斜的板

    在Revit二次开发过程中,建立一个倾斜的板是可以通过如下方法进行的: // // 摘要: // Creates a slab within the project with the given ho ...

  5. dapper 自定义数据库字段和代码中Model字段不一致时候的mapping方法

    namespace YourNamespace { /// <summary> /// Uses the Name value of the ColumnAttribute specifi ...

  6. VS2012 创建项目失败,,提示为找到约束。。。。

    首先查看 控制面板里已安装的更新 在Microsoft .NET Freamewofk 4.5 小 查看 是否有KB2833957和KB2840642这两个补丁(如下图)  如果有 卸载它 然后 下载 ...

  7. redis采用序列化方案存对象

    前几天被问到这样一个问题,redis怎么存对象,平时也没怎么注意,只知道redis存字符之类的,不过就是根据键存取值,不过对象的话还是不同的 首先来了解一下为什么要实现序列化 为什么要实现序列化接口 ...

  8. Django创建通用视图函数

    想在我们有两个视图: def thinkingview(request): user = request.user if request.method == 'GET': return render( ...

  9. 【linux】ubuntu中上下左右键变为&Hat;&lbrack;&lbrack;A&Hat;&lbrack;&lbrack;B&Hat;&lbrack;&lbrack;D&Hat;&lbrack;&lbrack;C问题处理

    问题现象: 使用上下左右键时,结果为 ^[[A^[[B^[[D^[[C,如图: 原因在于ubuntu系统自带的 vi 不完整导致. 解决方法:安装完整的vi $ sudo apt-get instal ...

  10. 菜鸟学SSH(十三)——Spring容器IOC解析及简单实现

    最近一段时间,“容器”两个字一直萦绕在我的耳边,甚至是吃饭.睡觉的时候都在我脑子里蹦来蹦去的.随着这些天一次次的交流.讨论,对于容器的理解也逐渐加深.理论上的东西终归要落实到实践,今天就借助Sprin ...