使用 Express.js 创建基本网站

Express 被描述为一个轻量级的 Web 框架，这意味着我们可以用它来创建网站。今天我将介绍它的基础知识。这个网站只有几个静态页面，我们可以浏览这些页面。

与现在大多数框架一样，Express 也自带项目生成器。至少在初期，使用生成器是个不错的选择，它能让你了解一种项目结构。需要注意的是，Express 本身并没有预设的框架结构。虽然模板代码的结构是固定的，但你可以根据自己的需要来构建 Express 项目。

在本教程中，我将介绍一些基础知识。教程结束时，我们将拥有一个包含三个页面的网站。

我们开始吧。

创建项目文件夹。然后在终端中运行以下两行命令。

npm init
npm install --save express

第一行创建package.json文件，它本质上是初始化项目。第二行安装 Express。注意，该--save标志只是将 Express 添加到 packages 文件中，这样如果需要再次重新安装包，它package.json就能知道/记住项目需要哪些包。

现在创建一个server.js文件。我们将在这里编写代码。

让我们从最基本的结构开始。

import express from 'express';
const app = express()
app.get('/', (req, res) => {
    res.send('Hello World')
})
app.listen(5656, () => {
    console.log('http://localhost:5656')
})

我们创建了一个基本网站，运行在本地主机端口 5656 上。

我们可以通过终端修改端口号。具体做法是，将上面的代码修改成类似这样的内容：

const port = process.env.PORT || 5656;
app.listen(port, () => {
    console.log(`http://localhost:${port}`)
})

这样，您就可以运行PORT=8081 npm start该命令来更改端口号；当然，npm run默认情况下，端口号为5656

在浏览器中渲染 HTML。

目前我们的网站简直无聊透顶。我们根本无法用这种方式创建网站。我们不想向浏览器发送一串文本（尽管这串文本可以是 HTML），而是想向浏览器发送 HTML 页面。

Express 允许我们使用模板引擎而不是 HTML。当我们开始使用动态内容时，这项功能就变得非常有用。

有很多模板引擎可供选择，我最喜欢的是[pug此处应填写具体名称]。诚然，与其他选项相比，它对新手不太友好，但我很喜欢它。我们不需要打开和关闭任何标签。让我们进行一些设置，以便 Express 知道我们打算使用什么。

pug它本身就是一个软件包，所以首先让我们在终端中安装它npm --save pug。现在让我们告诉 Express 我们正在使用它。

app.set('view engine', 'pug');

好了，我们已经设置好了模板引擎pug。现在，我们不Hello world向浏览器发送请求，pug而是渲染一个页面。

app.get('/', (req, res) => {
    res.render('index')
})

设置 `<index>` 时view engine，Express 期望pug页面位于名为 `<directory>` 的目录中views，因此我们创建该目录并添加索引文件：`<index>.index.html` views/index.pug。我们在该文件中添加要在浏览器中显示的代码。让我们给它一个 Pug 版本的 Hello World 示例：

    #message
        h1 Hello World 
        h3 pug's in the house

我相信您能猜到以上内容如何转换成 HTML 代码。

    <div id="message">
        <h1>Hello World</h1>
        <h3>pug's in the house</h3>
    </div>

基本上就是这样！这就是 express 的基本用法。

让我们创建一个网站

为了演示 Express 的基本用法，我创建了以下网站。这是一个页面不多的网站。每个页面都介绍了一位艺术家的相关信息。它展示了如何在 React 应用中使用资源（图片、CSS、JS）以及更详细地使用路由。

让我们来处理路由问题。

从上面的截图中可以看出，这个网站将包含三个简单的页面。以下是创建路由的方式。

    app.get('/charles', (req, res) => {
        res.render('chaplin')
    })
    app.get('/marilyn', (req, res) => {
        res.render('monroe')
    })
    app.get('/jean', (req, res) => {
        res.render('jimmons')
    })

就是这样。如果用户导航到/charles某个chaplin.pug模板，该模板就会在页面上呈现。

在我们的例子中，每个艺术家的结构都完全相同，因此路由器将渲染相同的 pug 模板！

    app.get('/charles', (req, res) => {
        res.render('index')
    })
    app.get('/marilyn', (req, res) => {
        res.render('index')
    })
    app.get('/jean', (req, res) => {
        res.render('index')
    })

最后，按照上述配置，如果用户访问网站根目录，将会收到错误提示，Cannot GET /因为我们移除了根路由（app.get('/', (req, res) => {})）。为了解决这个问题，我们可以将用户重定向到我们想要访问的另一个页面。

    app.get('/', (req,res) =>{
        res.redirect('/charles')
    })

处理动态数据

我们可以从路由向 Pug 模板传递数据。以下是一个示例：

    app.get('/charles', (req, res) => {
        res.render('index', {
            firstname: 'Charles',
            lastname: 'Chaplin',
            tag: 'The Little Tramp',
            content: '...',
            movies: [...]
        })
    })
    app.get('/marilyn', (req, res) => {
        res.render('index', {
            firstname: 'Marilyn',
            lastname: 'Monroe',
            tag: 'Being normal is boring',
            content: '...',
            movies: [...]
        })
    })

我们仍然请求渲染index.pug页面，但同时也向其传递了一个对象。然后index.pug页面的一部分看起来会像这样。

    body
        .wrap
            .profile.hide
                a(href='#').menu
                    span Movies
            .information
                .information__heading
                    span.information__heading__tag= tag
                h1.information__name 
                    small=firstname  
                    | #{lastname}
                p.information__description= content

看看我们通过路由传递的 JSON 信息是如何被使用的。Pug 可以读取我们传递的所有数据变量，如果只需要渲染一个变量，可以使用等号；或者像这样包装变量my name is #{name}。

资源文件

每个网站都需要样式和图片。以下是我如何将样式表和前端 JavaScript 代码关联起来的方法。

    doctype html 
    html
        head
            title=title
            link(rel='stylesheet', href='/styles/style.css')
            meta(name='viewport' content='windth=device-width, initial-scale=1')
        body
            .wrap
                ...
        script(src='js/script.js')

即使将/styles/style.css和js/script.js正确放置在各自的目录中，express 也不会像我们预期的那样，通过上述设置使它们可供使用。

我们首先需要告诉 Express 这些文件在哪里。换句话说，我们需要告诉 Express 我们的静态内容存放在哪里。静态内容指的是样式表、JavaScript 文件、库，甚至字体等所有内容。

要进行此设置，我们需要写入以下代码行server.js：

app.use(express.static(__dirname + '/public'));

完成这些步骤后，我们需要创建一个public目录，并在该目录中创建 `.htm` 和/styles/style.css`.htm`js/script.js文件。最后，正如我们从上面的 pug 代码片段中看到的，public文件夹中的所有内容都可以从根目录访问，也就是说，public/js/script.js它们都可以通过 `.htm` 访问/js/script.js。

从 JSON 文件获取内容

虽然这超出了本教程的范围，但这些艺术家的内容将存储在数据库中，而不是像我们之前那样硬编码到路由中。不过，今天我们可以将内容存储在一个单独的 JSON 文件中，并在路由中使用它。这将有助于我们更好地管理数据。

    import data from './data/artists.json'
    ...
    app.get('/charles', (req, res) => {
        res.render('index', data.artist[0])
    })
    app.get('/marilyn', (req, res) => {
        res.render('index', data.artist[1])
    })
    app.get('/jean', (req, res) => {
        res.render('index', data.artist[2])
    })

现在每条路线获取的数据都不同，从而生成以下三个页面：

概要

好了，我们已经讲解了路由器、模板和静态文件。这就是我们应该包含的全部代码server.js。剩下的就是常规的前端代码了。

    import express from 'express';
    import data from './data/artists.json';
    const app = express();
    app.set('view engine', 'pug');
    app.use(express.static(__dirname + '/public'));
    const port = process.env.PORT || 5656;
    app.get('/', (req,res) =>{
        res.redirect('/charles')
    })
    app.get('/charles', (req, res) => {
        res.render('index', data.artist[0])
    })
    app.get('/marilyn', (req, res) => {
        res.render('index', data.artist[1])
    })
    app.get('/jean', (req, res) => {
        res.render('index', data.artist[2])
    })
    app.listen(port, () => {
        console.log(`http://localhost:${port}`)
    })

您可以在GitHub上查看完整的项目。

文章来源：https://dev.to/aurelkurtula/creating-a-basic-website-with-expressjs-j92

菜单

分享

使用 Express.js 创建基本网站

使用 Express.js 创建基本网站

在浏览器中渲染 HTML。

让我们创建一个网站

让我们来处理路由问题。

处理动态数据

资源文件

从 JSON 文件获取内容

概要

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码