搜索
  • Node.js中Express框架的安装和使用(Express教程)
  • 发布于 2个月前
  • 440 热度
    0 评论
Express是Node.js的一个web应用框架，该框架提供了全面的功能来支持web和移动应用的开发。
如何安装Express
使用以下命令来创建Express：
npm install express
然后这样导入Express：
const express = require("express");
如何创建一个Express应用
使用以下命令来创建Express应用：
const app = express()
如何在端口3000启动服务器
app.listen(3000, () => { 
    console.log("Server running on port 3000");
}

你可以打开http://localhost:3000登录你创建的服务器。

这里的“cannot get /”意味着还没有定义路由“/” 。可以使用 app.get()函数定义“/”路由。app.get (route, callback function)函数被用于处理所有GET请求。

这个回调函数有两个参数，req和res，分别指代的是HTTP请求和期望的响应。参数名（req，res）并不是固定的，所以你可以重命名为其他值。
app.get("/", (req,res) => { 
    // app.get处理GET请求
    // req - http请求, res - 期望响应
    res.send("Hello World"); // 给这个路由发送Hello World
}
如何使用Express来创建Hello World程序
在这个部分中我们将使用Express创建基本的Hello World程序：
const express = require("express");
const app = express();
app.get("/", (req, res) => {  
    res.send("hello world");
});
app.listen(3000, () => {  
    console.log("Server running on 3000");
});
输出如下：

如何在Express中渲染静态文件
这部分介绍如何使用Express来渲染静态文件的概念。首先，创建一个新的项目文件夹，并且使用 npm init -y来初始化npm。使用 npm i express来安装Express，并创建一个名为app.js的文件。
创建一个app，并在端口3000监听：
const express = require("express);
const app = express();
app.listen(3000, () => {  
    console.log("Server running on 3000");
}
在根目录创建一个名为public的文件夹，来渲染静态web页面，如：HTML、CSS和JS。由于本教程重点在后端，所有我们不会花时间在前端部分，在public文件夹中，我们仅创建HTML文件。

我们将导入path模块，并将特定路径合并到一起： 

const path = require(“path”);

并使用以下命令来渲染这些文件：
app.use(express.static(path.join(__dirname, “/public”)));
__dirname →返回当前目录
const express = require("express");
const path = require("path");
const app = new express();
app.use(express.static(path.join(__dirname, "/public")));
app.listen(3000, () => {  
    console.log("Server running on 3000");
});
输出如下：

如何在Express中渲染动态文件
在这个部分我们将学习如何使用一个输入对象的值来渲染动态文件。有一些，如：pug、handlebars、ejs等模板用于动态页面的渲染。这些模板使得我们可以在运行时注入动态数据、if条件和循环。在这里我们将讨论handlebars。

安装包（express和hbs）：
npm i hbs express
创建文件名为app.js的文件，并且导入包：
const express = require(“express”);
const hbs = require(“hbs”);
const path = require(“path”);
创建Express，并在端口3000监听：
const app = express();
app.listen(3000, (req,res) => {  
    console.log("Server running on 3000");
}
将视图引擎（view engine）设置为hbs，使得handlebars生效：
app.set(“view engine”, “hbs”);
视图引擎使得我们可以使用特定模板来渲染动态页面。基本上，视图引擎会在根目录里寻找“视图（views）”文件夹。但为了避免报错，我们将“views”的路径包含在参数中：
app.set(“views”, path.join(__dirname,“/views”);
然后在根目录中创建 views 文件夹，并在文件夹中创建index.hbs文件（.hbs是handlebars的扩展名）并插入以下HTML代码：
index.hbs
<html>  
    <head> 
        <title>Dynamic Rendering</title> 
    </head>
    <body>  
      <h1>Dynamic Rendering</h1>   
      <p>{{author}}</p> <!--由服务器接受到的动态数据-->
    </body>
</html>
{{author}} — 是插入动态数据的语法。我们再创建一个app.get函数来处理路由"/"上的GET请求，并且发送动态数据author。
app.get("/", (req, res) => { 
    res.render("index", {    
        author: "Arash Arora", 
    });
});
res.render 是一个渲染视图的函数，在这里我们传入了两个参数。第一个是去掉扩展名的文件名，第二个是本地变量对象，比方说author。
app.js文件
const express = require("express");
const hbs = require("hbs");
const path = require("path");
const app = express();
app.set("view engine", "hbs");
app.set("views", path.join(__dirname, "/views"));
app.get("/", (req, res) => {  
    res.render("index", {    
        author: "Arash Arora", 
    });
});
app.listen(3000, (req, res) => { 
    console.log("Server listening on 3000");
});
文件夹结构

输出如下：

用户评论
可能感兴趣的话题