使用 Node、Express、Bootstrap 和 Jade 创建一个简单的响应式网站 - 第 2 部分

在阅读本文之前，请先阅读我的上一篇文章 第 1 部分。你可以从 这里 下载代码。

假设你已经阅读了上面的文章，我们继续网站的创建。现在开始设置 Express。首先，创建一个名为 SityRoute 的文件夹，作为我们的网站目录，你可以随意选择位置，打开命令提示符，进入该文件夹。

在 SityRoute 文件夹内创建一个名为 package.json 的文件，打开该文件，复制以下内容。我提供我的 package.json 文件，以便对新手来说更容易上手，如果你不熟悉 npm 包的话。

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~3.4.8",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "jade": "~1.3.0"
  }

在 SityRoute 目录下保存上述文件后，运行以下命令来设置依赖项。如果你来自 .NET 平台，这类似于 nuget 包。如果你不了解 package.json 文件，你需要阅读一些关于 Node npm 包和 package.json 文件结构的内容。上述依赖项 JSON 对象列出了创建我们的项目所需的所有依赖项。

npm install 

安装完成后，它将显示以下输出，显示文件夹结构。

static-favicon@1.0.1 node_modules\static-favicon

debug@0.7.4 node_modules\debug

morgan@1.0.0 node_modules\morgan
+-- bytes@0.2.1

cookie-parser@1.0.1 node_modules\cookie-parser
+-- cookie-signature@1.0.3
+-- cookie@0.1.0

body-parser@1.0.0 node_modules\body-parser
+-- qs@0.6.6
+-- raw-body@1.1.3 (bytes@0.2.1)

jade@1.3.0 node_modules\jade
+-- character-parser@1.2.0
+-- commander@2.1.0
+-- mkdirp@0.3.5
+-- transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)
+-- constantinople@2.0.0 (uglify-js@2.4.13)
+-- monocle@1.1.51 (readdirp@0.2.5)
+-- with@3.0.0 (uglify-js@2.4.13)

express@3.4.8 node_modules\express
+-- methods@0.1.0
+-- merge-descriptors@0.0.1
+-- range-parser@0.0.4
+-- cookie-signature@1.0.1
+-- fresh@0.2.0
+-- buffer-crc32@0.2.1
+-- cookie@0.1.0
+-- mkdirp@0.3.5
+-- commander@1.3.2 (keypress@0.1.0)
+-- send@0.1.4 (mime@1.2.11)
+-- connect@2.12.0 (uid2@0.0.3, qs@0.6.6, pause@0.0.1, bytes@0.2.1, raw-body@1.1
.2, batch@0.5.0, negotiator@0.3.0, multiparty@2.2.0)

由于我们在上面的 JSON 文件中提到了 express 作为我们的依赖项，它将安装 express 版本 3.4.8 以及其他依赖项。

现在让我们加快速度。你可以使用 express-generator 来生成我们网站的脚手架，它会为我们创建大部分基础工作，例如带有默认“Hello World”页面的文件夹结构等。以下是如何创建它：

运行以下命令来首先安装 express-generator。

$ npm install -g express-generator

它将全局安装 express-generator。我们已经完成了 express generator 的安装。现在我们需要创建一个示例项目，在其中编写我们的代码，因为我们将重用相同的文件夹结构。

创建一个示例应用程序

安装 express generator 后，从 SityRoute 目录运行以下命令。

express -c myapp

它会询问你是否确认目标目录不为空，是否要继续，回答“是”，将生成以下输出。

destination is not empty, continue?
destination is not empty, continue? (yes or no) y

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/user.js
   create : ./views
   create : ./views/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www

   install dependencies:
     $ cd . && npm install

   run the app:
     $ DEBUG=my-application ./bin/www

这将在 SityRoute 文件夹中创建包含所有必要默认代码的文件夹。默认情况下，express generator 将模板引擎设置为 jade 引擎。到目前为止，你应该在 SiteRoute 文件夹下拥有类似于以下的文件夹结构。

.

阅读下一篇文章：第 3 部分 [^].