使用 Node, Express, Bootstrap 和 Jade 创建一个简单的响应式网站 - 第 3 部分
5.00/5 (2投票s)
如何使用 Node, Express, Bootstrap 和 Jade 创建一个简单的响应式网站 - 第 3 部分
如果您直接进入此页面，请阅读我的上一篇文章 - 第 2 部分。
在 CodeProject 中，请参阅 第 2 部分 [^] 这里。
您可以在 这里 下载源代码以供参考。
好的，现在我们已经准备好基本的文件夹结构，我希望您这样做。 转到 routes 文件夹，删除文件夹中现有的文件。 转到 Views 文件夹，保留 layout.jade、error.jade 文件，并删除其他文件。
如果您注意到上面的 .jade 是 jade 模板文件的扩展名。 Express 知道如何将这些文件处理成 html 文件。 好的..，如果您还记得在我们的 Sity 路由 网站中，我们有两个链接 主页 和 关于。 主页将带我们进入主页，关于将带我们进入关于页面，还有一个 了解更多 按钮，目前我也将其指向关于页面。 那么这个路径映射到 Express 就是路由 (/Home,/About)。 我们需要在我们的应用程序文件中定义这些路由，以告诉 express 框架当它看到 /Home 或 About 作为请求的一部分时应该发生什么。
定义路由处理程序
转到 routes 文件夹并创建两个文件，Home.js 和 About.js，用于两个路由。
Home.js
/* GET home page. */
exports.home = function(req, res){
res.render('home');
};
About.js
exports.about = function(req,res){
res.render('about')
}
上面的代码为我们的网站主页和关于页面定义了路由处理程序模块。 意思是，每当我们请求 home 时，它将执行上面的 home 路由，同样关于路由也是如此。 这里 res.render 是 express API 函数，它接受视图名称作为参数，并将渲染该视图，这意味着它将 jade 模板转换为 HTML string。
创建我们的 Jade 视图
转到 views 文件夹并创建 home.jade 文件，并将以下 jade 模板内容粘贴到其中。
Home.jade
doctype html
html
head
title Sity Router Hub - A funny site
meta(name='viewport', content='width=device-width, initial-scale=1.0')
//
Bootstrap CSS
link(href='stylesheets/bootstrap.css', rel='stylesheet', media='screen')
link(href='mysite.css', rel='stylesheet', media='screen')
script(type='text/javascript', src='javascripts/jquery.js')
script(type='text/javascript', src='javascripts/bootstrap.min.js')
body
//
Navigation Bar
.bodykinda
.navbar.navbar-default
.navbar-header
button.navbar-toggle(type='button', data-toggle='collapse',
data-target='.navbar-responsive-collapse')
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='#')
| Sity Router Hub - A funny site- stories in this site not directly related
to any person on the earth or on other planets
.navbar-collapse.collapse.navbar-responsive-collapse
ul.nav.navbar-nav.navbar-right
li.active
a(href='#') Home
li
a(href='about') About
//
Navigation Bar
.jumbotron
h1 City Router Hub
p
| Do you wanna get connected to internet securely on the go for no money..?,
meaning always connected, even if you don't have any device...?,
and wondering if this is ever possible. Well you are not alone, you are on the right spot.
p
a.btn.btn-primary.btn-lg(href='about') Learn More
.col-lg-4
.panel.panel-default
.panel-heading
h4 Join us.
.panel-body
| Today if you make a choice, you are going to get ever connected to
internet all the time through out your life, even if you go to villages,
subways, paths, metros, bus, Gym, anywhere it follows. Guys isn't that exciting?,
do you wanna know how, take a minute and click on above Learn More link.
.col-lg-4
.panel.panel-default
.panel-heading
h4 Always Connected.
.panel-body
| You are absolutely free of money, credit cards, debit cards, paypal,
coupon cards what so ever. This service is amazingly free and free only for you,
if you register today. Do you know how many people out there paying lot of money
but not getting exciting service, they always had problems with speed, connectivity.
.col-lg-4
.panel.panel-default
.panel-heading
h4 Who are we?
.panel-body
| We are top 10 listed Unfortune 500 companies, always wanted to give people
service with no money. There are similar services who can offer like free wifis,
metro wifi. Well their reach is limited. We are unlimited. Anywhere you go,
our services will follow. We are on different world and different platforms,
nobody can match us.
并创建 about.jade 文件，并将以下内容粘贴到其中。
about.jade
doctype html
html
head
title Sity Router Hub - A funny site
meta(name='viewport', content='width=device-width, initial-scale=1.0')
//
Bootstrap CSS
link(href='stylesheets/bootstrap.css', rel='stylesheet', media='screen')
link(href='mysite.css', rel='stylesheet', media='screen')
script(type='text/javascript', src='javascripts/jquery.js')
script(type='text/javascript', src='javascripts/bootstrap.min.js')
body
//
Navigation Bar
.bodykinda
.navbar.navbar-default
.navbar-header
button.navbar-toggle(type='button',
data-toggle='collapse', data-target='.navbar-responsive-collapse')
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='#')
| Sity Router Hub - A funny site- stories in this site
not directly related to any person on the earth or on other planets
.navbar-collapse.collapse.navbar-responsive-collapse
ul.nav.navbar-nav.navbar-right
li.active
a(href='#') Home
li
a(href='about') About
//
Navigation Bar
.jumbotron
h1 City Router Hub
p
| Do you wanna get connected to internet securely on the go for no money..?,
meaning always connected, even if you don't have any device...?,
and wondering if this is ever possible. Well you are not alone, you are on the right spot.
p
a.btn.btn-primary.btn-lg(href='about') Learn More
.col-lg-4
.panel.panel-default
.panel-heading
h4 Join us.
.panel-body
| Today if you make a choice, you are going to get ever connected to
internet all the time through out your life, even if you go to villages,
subways, paths, metros, bus, Gym, anywhere it follows. Guys isn't that exciting?,
do you wanna know how, take a minute and click on above Learn More link.
.col-lg-4
.panel.panel-default
.panel-heading
h4 Always Connected.
.panel-body
| You are absolutely free of money, credit cards, debit cards, paypal,
coupon cards what so ever. This service is amazingly free and free only for you,
if you register today. Do you know how many people out there paying lot of money
but not getting exciting service, they always had problems with speed, connectivity.
.col-lg-4
.panel.panel-default
.panel-heading
h4 Who are we?
.panel-body
| We are top 10 listed Unfortune 500 companies, always wanted to give people
service with no money. There are similar services who can offer like free wifis,
metro wifi. Well their reach is limited. We are unlimited. Anywhere you go,
our services will follow. We are on different world and different platforms,
nobody can match us.
如果上面的 jade 代码在这一点上真的让你太困扰，请不要担心，因为如果你知道 jade 模板，这真的不容易做到，如果你愿意，你也可以使用一些简单的东西。
现在让我们来 app.js 应用程序文件
app.js 文件基本上是应用程序的核心，在这里我们定义我们网站的中间件功能，例如 cookies、body parser、sessions、authentication、authorization、定义路由、csrf 等。 有很多现成的中间件框架功能与 express 框架一起提供。 如果您有兴趣，请访问 express 网站。
在这里，基本上您需要将我们在上面定义的 home、about 路由处理程序加载到应用程序中，在 node 中，您将使用 require 加载模块。 看一下下面。
var home = require('./routes/home');
var about = require('./routes/about');
现在我们加载了路由处理程序，但我们还没有定义路由，让我们这样做。 我们使用 app.get express API 来实现这一点。
app.get('/', home.home);
app.get('/home', home.home);
app.get('/about', about.about);
在上面的代码中，我们将默认的站点请求 ‘/’ 映射到我们的 home 路由处理程序，将特定的 ‘/home’ 映射到 home，将 ‘/about’ 映射到 about 路由处理程序。 好的，这些路由处理程序将要呈现定义在 Views 文件夹中的 jade 视图，因此我们告诉 node express 使用 jade 模板的方式如下所示。
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
如果您观察到上面的环境值 ‘view engine’ 被设置为 ‘jade’，我们也可以将其设置为其他 node 兼容的视图引擎。
您可以在您的中间件中定义错误处理程序，如下所示，如果任何 404 请求进入您的服务器，那么您如何显示默认错误消息，这里是方法。
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.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.render('error', {
message: err.message,
error: {}
});
});
这将使用默认的脚手架创建，但让我解释一下它的作用。 我们正在向 express 框架添加一个中间件函数，告诉它如何处理与任何已定义的路由都不匹配的任何请求，理想情况下这应该在您声明路由的末尾。 我们在其中一个中间件函数中创建了 404 错误，并将其传递给错误处理程序。 在这里，错误处理程序是为生产和开发环境定义的，只需更改 node 环境变量 ‘env’ 即可切换。 所以我们已经完成了所有修改。 了解如何在此处将此 node 应用程序托管在公共站点上。
您可以使用命令行 node app.js 运行该应用程序，并在 3000 端口访问该应用程序。
如果您想实时托管在 Cloud 上，请从 在 Cloud 中托管 了解如何操作。