【Node.js教程】Express框架入门：从搭建到动态渲染商品列表-EW帮帮网

前言

Visual Studio Code（简称VSCode）是微软开发的一款免费开源跨平台代码编辑器，凭借其免费、开源、跨平台的特性，以及丰富的插件生态和美观的界面，成为前端开发者的首选工具。

本文将带你从零开始学习Express框架，包括搭建项目、配置路由、使用中间件以及实现动态渲染功能。这篇教程凝结了大量心血，如果你觉得有帮助，欢迎点赞、收藏、关注三连支持！

Node.js

Node.js 既不是传统意义上的前端，也不是后端，而是一个运行环境，但它主要用于后端开发。

从技术角度看：

前端通常指浏览器端的开发（HTML/CSS/JavaScript），运行在用户的浏览器中
后端指服务器端的开发，运行在服务器上

Node.js 的特点是：

基于 JavaScript 语言（前端常用语言）
运行在服务器端（而非浏览器）
可以操作文件、数据库、处理网络请求等后端功能

因此，Node.js 让 JavaScript 跳出了浏览器的限制，能够用于开发服务器端程序，所以它主要被归类为后端开发技术，但本质上是一个跨领域的运行环境。

例如 Express 框架，就是基于 Node.js 构建的后端 Web 框架，用于处理 HTTP 请求、路由、服务器逻辑等后端任务。

基础概念解析

什么是动态渲染？

动态渲染指的是模板结构（如表格、列表等）保持不变，但展示的内容可以动态变化的技术。通过这种方式，我们可以用同一个模板展示不同的数据，大大提高了代码的复用性和维护性。

什么是终端？

在VSCode中，终端可以理解为一个内置的命令行窗口（类似Windows的CMD），我们可以通过它执行各种命令，如安装模块、运行程序等。

准备工作

首先，确保你已经安装了Node.js环境，然后全局安装Express：

npm install express -g

说明：-g参数表示全局安装，这样以后创建Express项目时就无需再次安装，实现"一劳永逸"

同样，我们还需要安装ejs模板引擎用于动态渲染：

npm install ejs -g

创建VSCode项目的注意事项

不要打开包含多个项目的总文件夹，以免项目之间相互影响
直接打开项目所在的目录作为工作区
确保端口不被占用（如提示8888端口已占用，说明可能启动了多个服务器）

自定义模块：在JS文件中调用其他JS文件的函数

在Node.js中，我们可以通过模块系统实现代码的复用。下面是一个简单的例子：

module.js

// exports是一个内置对象，用于导出函数和属性
// 导出一个加法函数
exports.add = function(a, b) {
   
   
    return a + b;
}

// 导出一个属性
exports.msg = '给诗书画唱三连！Hello world！\n' + 
             '看到这句话说明demo.js成功调用module.js中的内容！';

demo.js

// 引入当前文件夹下的module.js
// ./表示当前文件夹，.js后缀可以省略
let m = require('./module');

// 调用模块中的函数
let num = m.add(3, 4);
console.log(num);

// 访问模块中的属性
console.log(m.msg);

运行方式：在终端中输入node demo.js即可执行。

Express框架基础

创建第一个Express项目

首先创建一个package.json文件：

{
   
   
    "name": "helloapp",
    "description": "我的第一个express项目",
    "version": "1.0",
    "private": true,
    "dependencies": {
   
   
        "express": "4.x"
    }
}

创建主程序文件（如app.js）：

let express = require("express");
let app = express();

// 配置路由：访问根路径时的响应
app.get("/", function(request, response) {
   
   
    response.send("欢迎访问本网站！");
});

// 启动服务器，监听8888端口
app.listen(8888);
console.log("服务器启动完毕！访问地址：http://127.0.0.1:8888");

运行程序：在终端输入node app.js，然后在浏览器访问http://127.0.0.1:8888

使用Express访问静态HTML文件

如果需要访问静态HTML文件，可以使用express.static中间件：

创建public文件夹，并在其中创建index.html：

<!DOCTYPE html>

【Node.js教程】Express框架入门：从搭建到动态渲染商品列表

前言