如何搭建 Express 网站

Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架,为 Web 和移动应用程序提供一组强大的功能。nenggou 使用您提议的各种 HTTP 实用程序方法和中间件,快速方便地创建强大的 API。Express 提供精简的基本 Web 应用程序功能,而不会隐藏您了解和青睐的 Node.js 功能。

这篇教程会指导您使用express框架快速地生成站点,使用模板,创建基本录用,并将其部署到Internet上。要做到这些,您需要拥有一个云服务器CVM以及一个站点域名。没有云服务器的同学可以到腾讯云官网点击产品中的云服务器,进行购买。您也可以到这里免费领取一台腾讯云服务器。腾讯云现在有域名金秋盛惠,最低仅需1元起。也可以在购买云服务器时进行加购减免,比正常价格要便宜50%哦。

搭建Node.js和npm环境

在开始我们的教程之前,您需要安装Node.js以及npm开发环境。您可以点击腾讯云实验室的这篇Express快速入门来进行查看,同时还可以在实验室环境中进行模拟,可以帮助您更好的掌握相关方法。当您完成这篇教程后,您的Express环境及应用应该已经搭建好了。

创建Express站点

安装了Express之后,我们可以创建一个快速应用程序。

express -c stylus express_example

您应该看到以下输出:

create : express_example
create : express_example/package.json
create : express_example/app.js
create : express_example/public
create : express_example/routes
create : express_example/routes/index.js
create : express_example/routes/users.js
create : express_example/views
create : express_example/views/index.jade
create : express_example/views/layout.jade
create : express_example/views/error.jade
create : express_example/bin
create : express_example/bin/www
create : express_example/public/javascripts
create : express_example/public/images
create : express_example/public/stylesheets
create : express_example/public/stylesheets/style.styl
​
install dependencies:
 $ cd express_example && npm install
​
run the app:
 $ DEBUG=express_example:* npm start

根据说明,您需要安装依赖项,因此请执行此操作

cd express_example && npm install

这将安装包,你会看到很多输出。完成后,您可以启动您的应用程序。

启动应用程序

这就是你需要的所有设置。现在您可以启动应用程序了。如果您使用的是OSX或Linux,请使用以下命令。

DEBUG=express_example:* npm start

如果您在Windows上,请使用以下命令。

set DEBUG=express_example:* & npm start

您应该看到Express server listening on port 3000,如果您打开 http://127.0.0.1:3000,您将看到默认的Express页面。

使用Git

Git是一个版本控制系统,在Node.js生态系统中大量使用,特别是Github。我们将使用git对我们的网站进行版本化并发布它。如果您的Express服务器仍在运行,请按CTRL + C来停止它。

git init
echo 'node_modules' > .gitignore
git add .
git commit -m 'initial commit'

开发Node.js站点

通常,当您开发Node.js站点时,每次进行更改时都需要重新启动应用程序。Nodemon会在每次更改时重新加载您的应用程序,因此您无需重新启动它。接下来我们安装并运行它:

npm install -g nodemon

然后用应用程序启动:

DEBUG=express_example:* nodemon

Nodemon会自动查找项目设置以查找相应的文件并设置为启动服务器。如果这不起作用,请尝试以下命令:

DEBUG=express_example nodemon npm start

使用nodemon意味着每次进行更改时都不必重新启动应用程序。有关nodemon的更多信息,请参阅自述文件

Express中的HTML

Express对于您使用的模板语言是不可知的。在示例中,我们使用jade来设置布局模板。

doctype
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/stylesheets/chunkfive-fontface.css')
  body
    header
      nav
        ul
          li 
            a(href="/") Home
          li 
            a(href="/about") About
          li 
            a(href="/contact") Contact
    section#wrapper
        block content
        footer 
          section.css-table
            section.four-column
              section.cell
                p Mauris porttitor <br />felis eu leo aliquet<br /> ac rutrum odio aliquet
              section.cell
                p Mauris porttitor <br />felis eu leo aliquet<br /> ac rutrum odio aliquet
              section.cell
                p Mauris porttitor <br />felis eu leo aliquet<br /> ac rutrum odio aliquet
              section.cell
                p Mauris porttitor <br />felis eu leo aliquet<br /> ac rutrum odio aliquet

将此文件另存为/views/layout.jade覆盖生成器创建的文件。这是我们可以重用的常用模板。该行block content从其使用的页面中提取内容。Express还支持给模板传递变量。在这种情况下,我们传递title变量。更多信息可以查阅Express文档

Express中的CSS

对于此示例我使用的是Stylus,您可以使用您喜欢的CSS语言。其支持变量,mixins,函数等。这是我们的样式表中的一个例子:

body
  font 62.5%/1.5  Helvetica, Arial, "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif
  text-align center
  background #000
​
#wrapper
  width 920px
  text-align left 
  margin-left auto 
  margin-right auto
  background #fff
  padding 20px
  border-bottom-radius(15px)

在Express中路由

Sinatra路由允许您设置RESTful路由。

在这个例子中,我们在routes / index.js中设置了三个路由:

var express = require('express');
var router = express.Router();
​
router.get('/', function(req, res){
  res.render('index', {
    title: 'Home'
  });
});
​
router.get('/about', function(req, res){
  res.render('about', {
    title: 'About'
  });
});
​
router.get('/contact', function(req, res){
  res.render('contact', {
    title: 'Contact'
  });
});
​
module.exports = router;

有关更多信息,请参阅Express文档

发布您的网站

本文介绍了如何使用Node.js和Express创建一个非常基本的站点。它介绍了Node.js生态系统中的一些内容,并向您展示了如何部署应用程序。最后一步,我们需要在云服务器上托管它。我们可以使用腾讯云服务器来对其进行托管,可以点击这里进行免费的服务器资源申请。如果您想长期保持您的网站的话,您也可以点击这里购买腾讯云的服务器,其可以提供稳定,安全,快速的云服务,并且可以对服务器上的内容进行定期快照,保护您的网站数据不会丢失。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端吧啦吧啦

手把手教你全家桶之React(一)

4449
来自专栏前端儿

iPhone页面的常用调试方法

某些页面需要设置HOST才能进行访问,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们

3611
来自专栏张戈的专栏

借助PageSpeed,为Nginx网站服务器提速

网站加载速度越快,访客互动性、留住率和转换率就越高,这早已不是什么秘密。网站每延迟 100 毫秒,亚马逊的销售额就会减少 1%;延迟增加 500 毫秒,这意味着...

3897
来自专栏崔庆才的专栏

只会用Selenium爬网页?Appium爬App了解一下

2.8K5
来自专栏freesan44

加载RAM磁盘编译Xcode项目

每次对Xcode iOS项目进行clean、build或者在iOS虚拟机上launch,Xcode都会在DeriveData文件夹中进行读写操作。换句话说,就是...

962
来自专栏技术小讲堂

探寻ASP.NET MVC鲜为人知的奥秘(1):对LESS的支持

在ASP.NET MVC3中(从那时开始),我们拥有了对js和css等文件的捆绑(Bundling)和压缩(Minification)的能力,这是ASP.NET...

2736
来自专栏FreeBuf

EKFiddle:基于Fiddler研究恶意流量的框架

EKFiddle是一个基于Fiddler web debugger的,用于研究漏洞利用套件、恶意软件和恶意流量的框架。

1090
来自专栏Web 开发

用fiddler进行debug

昨晚在家里调试一个页面,弄了好一会,fiddler都没有抓到数据。最后Google之,才发现因为我等都装了SwitchySharp这类自动翻墙插件。导致Chro...

760
来自专栏yukong的小专栏

【SpringBoot系列01】初识SpringBoot

【SpringBoot系列02】SpringBoot之使用Thymeleaf视图模板

1575
来自专栏小尘哥的专栏

前后端分离Nuxt.js解决SEO问题

背景:由于后端程序猿通常对CSS 、JS掌握不是特别好,通常的开发模式,UI把静态html做好交给程序猿,程序猿开发,把静态html变成动态的时候经常会有各种样...

3854

扫码关注云+社区

领取腾讯云代金券