如何在本地搭建一台微型服务器

第一步：先在本地建立一个文件夹

为了方便后续讲解，称此新建的文件夹为demo

第二步：用vscode打开此文件夹

用vscode打开demo

第三步：打开终端

可以利用快捷键ctrl+`打开终端

第四步：运行初始化 npm 项目的命令

在终端运行如下命令

npm init

命令解析：

在执行这个命令后，npm 会询问一系列关于项目的问题，并生成一个 package.json 文件，用于描述和管理你的项目。

具体来说，执行 npm init 命令时，npm 会提示你回答一些问题，包括项目名称、版本号、作者、项目描述等。你需要根据你的实际情况回答这些问题，或者直接按下回车键跳过某些问题使用默认值。

在回答完所有问题后，npm 将根据你提供的信息生成一个 package.json 文件，该文件包含了项目的元数据和依赖信息。package.json 是一个重要的配置文件，它定义了项目的名称、版本、作者、许可证等基本信息，同时也记录了项目所依赖的第三方包及其版本范围。

通过 npm init 命令生成的 package.json 文件是一个纯文本文件，你可以手动编辑该文件以添加、修改或删除依赖项，或者在之后使用 npm install 安装新的依赖。

总结来说，npm init 命令用于初始化 npm 项目，并创建 package.json 文件，使你能够轻松地管理项目的元数据和依赖。

第五步：运行安装 Express 框架的 npm 命令

在终端运行如下命令

npm i express

命令解析：

执行这个命令后，npm 会从 npm 仓库下载 Express 包，并将其安装到你的项目中。

具体来说，npm i express 命令会在当前项目的目录下创建一个名为 node_modules 的文件夹（如果该文件夹不存在），并在其中下载 Express 包及其依赖项。此外，该命令还会在你的项目根目录下自动更新 package.json 文件中的 dependencies 部分，将 Express 添加为一个依赖项，并指定所安装的版本号。

通过安装 Express，你可以在你的 Node.js 项目中使用 Express 框架来构建 Web 应用程序或 API。Express 是一个流行的、灵活且易于使用的 Web 框架，它简化了开发过程，并提供了许多有用的功能和中间件，如路由处理、请求处理、模板引擎等。

总结来说，npm i express 命令用于安装 Express 框架及其依赖项，以便在你的 Node.js 项目中使用 Express 来构建 Web 应用程序。

第六步：在文件夹根目录下创建server.js文件，使用 Express 框架创建的简单的 Node.js 服务器

在文件内部写以下代码：

//引入 Express 框架模块，将其赋值给变量 express
const express=require('express')
//引入 connect-history-api-fallback 中间件模块，用于处理前端路由的历史记录模式。将其赋值给变量 //history，这不一定要引入，如果路由器模式为history才需要，模式为hash不需要
const history=require('connect-history-api-fallback')
//创建了 Express 应用程序实例，并将其赋值给变量 app
const app= express()
//将中间件应用到 Express 应用程序中，以便在处理前端路由时使用历史记录模式
app.use(history())
//将静态文件服务中间件应用到 Express 应用程序中，指定了静态文件的目录为 __dirname + //'/static'，即当前文件所在目录下的 static 文件夹
app.use(express.static(__dirname+'/static'))
//定义了一个处理 GET 请求 /timingzhe 的路由处理函数。当客户端发起 /timingzhe 的 GET 请求时，
//服务器将返回一个 JSON 格式的响应，其中包含 name 和 age 的信息
//此处可以自己任意定义信息
app.get('/timingzhe',(request,response)=>{
    response.send({
        name:'dongdongyao',
        age:18
    })
})
//启动服务器，监听在本地的 5005 端口。如果没有错误发生，将输出 "服务器启动成功" 的消息到控制台
app.listen(5005,(err)=>{
    if(!err)
    console.log('服务器启动成功');
})

代码解析：

这段代码是一个使用 Express 框架创建的简单的 Node.js 服务器。下面是对代码的解析：

1. 首先，通过 const express = require('express') 引入了 Express 框架模块，将其赋值给变量 express。
2. 接着，通过 const history = require('connect-history-api-fallback') 引入了 connect-history-api-fallback 中间件模块，用于处理前端路由的历史记录模式。将其赋值给变量 history。
3. 然后，通过 const app = express() 创建了 Express 应用程序实例，并将其赋值给变量 app。
4. 使用 app.use(history()) 将 connect-history-api-fallback 中间件应用到 Express 应用程序中，以便在处理前端路由时使用历史记录模式。
5. 使用 app.use(express.static(__dirname + '/static')) 将静态文件服务中间件应用到 Express 应用程序中，指定了静态文件的目录为 __dirname + '/static'，即当前文件所在目录下的 static 文件夹。
6. 使用 app.get('/person', (request, response) => { ... }) 定义了一个处理 GET 请求 /person 的路由处理函数。当客户端发起 /person 的 GET 请求时，服务器将返回一个 JSON 格式的响应，其中包含 name 和 age 的信息。
7. 最后，通过 app.listen(5005, (err) => { ... }) 启动服务器，监听在本地的 5005 端口。如果没有错误发生，将输出 "服务器启动成功" 的消息到控制台。

这段代码创建了一个简单的 Express 服务器，提供静态文件服务，并定义了一个路由处理函数。当访问 /person 路由时，服务器返回一个 JSON 响应。你可以根据自己的需求来进一步添加路由和处理其他类型的请求。

可以自己在浏览器访问localhost:5005/timingzhe 看看能不能访问到你所写的数据

第七步：在文件夹根目录下建立static文件夹

把打包后生成的文件夹dist内的文件复制到static文件夹下

完成后，vscode导航栏应该如下图

特殊步骤：如果路由器模式为history才需要

在终端运行使用 npm 命令安装 connect-history-api-fallback 包

npm i connect-history-api-fallback

命令解析：

connect-history-api-fallback 是一个用于处理前端路由的中间件，通常与 Express 或 Connect 框架一起使用。它解决了使用历史记录模式（History Mode）时，前端路由刷新页面出现 404 错误的问题。

在单页应用（SPA）中，前端路由通过修改 URL 来实现页面之间的切换，而不需要重新加载整个页面。但是，当用户手动刷新或直接访问某个具体的子路由时，服务器会认为这是一个真实存在的文件路径，并返回 404 错误。这时候就需要使用 connect-history-api-fallback 中间件来将这些路径重定向到主页或其他合适的页面上，避免返回 404 错误。

通过运行 npm i connect-history-api-fallback 命令，你会将 connect-history-api-fallback 包及其依赖项下载并安装到你的项目中。安装完成后，你可以在 Express 或 Connect 应用程序中使用 connect-history-api-fallback 中间件，以确保前端路由在刷新或直接访问子路由时能够正常工作，而不出现 404 错误。

最后一步：启动 Node.js 服务器

node server

命令解析：

在这种情况下，假设你有一个名为 server.js 的文件，这是一个用 Node.js 编写的服务器代码文件。通过在命令行中运行 node server.js 或 node server，你可以启动这个服务器，使其开始监听指定的端口并处理来自客户端的请求。

node 是指 Node.js 运行时环境的命令。server.js 是你的服务器代码文件，其中包含了实现服务器功能的 JavaScript 代码。

当你执行 node server.js 或 node server 命令后，Node.js 会读取 server.js 文件，并按照其中的代码逻辑创建一个服务器实例，并开始监听指定的端口。这样，你的服务器就可以接受来自客户端的请求，并通过定义的路由和处理函数来处理这些请求。

请注意，在执行 node server.js 或 node server 命令之前，你需要确保已经安装了 Node.js，（如果没有安装那就去官网安装吧-----nodejs官网下载）并在命令行中位于 server.js 文件所在的目录下。

运行结果

只需要在浏览器输入localhost:5005就可以看到你写好的前端页面啦