nodejs 图解express+supervisor+ejs的用法(推荐)

下面来详细讲解“nodejs 图解express+supervisor+ejs的用法(推荐)”的完整攻略。

什么是Express、Supervisor、EJS

Express

Express是一个node.js的web应用框架，它提供了一系列的功能，可以帮助我们快速搭建Web应用或者API。

Supervisor

Supervisor是在开发过程中监控node.js应用程序中的文件更改的一个工具。当应用程序中任何文件更改时，自动重启应用程序，无需手动重启应用程序。这使得开发变得更加高效和快速。

EJS

EJS是一种简单的模板语言，可用于将数据注入HTML模板。EJS允许您将JavaScript嵌入HTML标记中，从而使HTML动态和有效，并使代码重用变得更加容易。

如何安装Express、Supervisor、EJS

安装Express

$ npm install express --save

安装Supervisor

$npm install supervisor -g

-g参数表示全局安装。

安装EJS

$ npm install ejs --save

这些框架、工具都安装好了之后，我们便可以开始使用它们进行开发。

Express+Supervisor+EJS的用法

1、创建一个Express应用

首先，我们在终端中创建一个名为“myapp”的Express应用程序：

$ express myapp
$ cd myapp

2、安装依赖

我们安装必要的依赖项：

$ npm install

3、配置Supervisor

新建一个文件夹“bin”并在其中创建一个名为“www”的文件。

在“www”文件中输入以下内容：

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('myapp:server');
var http = require('http');
var supervisor = require('supervisor');

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

// server.listen(port);
// server.on('error', onError);
// server.on('listening', onListening);

supervisor.run(['./bin/www']);
supervisor.startWatched();

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
   ...
}

4、启动应用

在终端中输入以下命令启动应用：

$ supervisor ./bin/www

5、编写EJS模板

将视图引擎设置为EJS，修改app.js文件：

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

然后在views文件夹中新建一个名为“index.ejs”的文件，其中代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

6、修改路由

我们需要修改routes文件夹下的index.js文件：

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express', message: 'Hello' });
});

module.exports = router;

运行应用和访问http://localhost:3000 ，你将会看到一个带有“Hello”的欢迎页面。

示例1：添加样式表

在public文件夹下新建一个名为“stylesheets”的文件夹，并在其中添加一个名为“style.css”的CSS文件。修改index.ejs文件如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
        <h1><%= message %></h1>
    </body>
</html>

示例2：添加脚本

在public文件夹下新建一个名为“javascripts”的文件夹，并在其中添加一个名为“script.js”的JavaScript文件。修改index.ejs文件如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
        <h1><%= message %></h1>
        <script src="/javascripts/script.js"></script>
    </body>
</html>

以上便是 “nodejs 图解Express+Supervisor+EJS的用法(推荐)” 的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：nodejs 图解express+supervisor+ejs的用法(推荐) - Python技术站