静态资源服务器

@Static

创建静态资源服务器，供应用程序使用，如在线图片、在线视频、在线音乐

高效起见，没有使用原生 http 模块，而是依托 Express.js 框架创建

Steps

创建服务器目录

准备资源/数据

创建服务器脚本

开启服务

Procedure

创建一个空白文件夹作为服务器目录，如 server

在服务器目录创建资源文件夹，如 public

在资源文件夹 public 下，再创建若干文件夹，存放图片 imgs、视频 video、数据 data 等资源

在服务器目录：在空白处右键单击，选择"在终端中打开"或在资源管理器顶部地址栏输入 CMD 并回车，打开 CMD 命令行窗口

初始化服务器目录，用来创建 package.json 文件

npm init

推荐使用 -y 命令行参数，按照默认配置创建 package.json，如入口文件默认是 index.js

npm init -y

创建的 package.json 文件内容如下

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

继续操作 CMD 终端，安装 Express 依赖，服务器目录会增加一个存放各种依赖的 Module 目录

npm i express --save

创建服务器脚本：在服务器目录下，新建一个 JavaScript 文件，命名为 index.js，编辑如下

//引入包 express
const express = require('express');

//创建服务器实例
const app = express();

//指定服务器端口
const PORT = 3000

//指定静态文件位置
app.use(express.static('./public'));

//监听
app.listen(port, () => {
  console.log(`服务器启动成功，访问地址：http://127.0.0.1:${PORT}/资源名`);
});

继续操作 CMD 终端，开启服务

默认命令

node index.js

自定义命令启动服务：修改 package.json 里 script；下例重新定义了当前的服务器文件，并自定义了一个微信小程序的服务器文件；对应的服务器 js 文件应存在

"scripts": {
  "start": "node index.js",
  "wx": "node server.js",
}

执行

npm start

npm run wx

使用资源

用户使用浏览器访问 http://127.0.0.1:3000/资源路径和名字获取对应的资源

用户在H5项目中使用，如 <img> 元素

<img src="http://127.0.0.1:3000/资源路径和名字" alt="">

用户在微信小程序项目中使用，如 <image> 组件

<image src="http://127.0.0.1:3000/资源路径和名字" alt="">

日常开发建议使用 Vs Code 配合特定插件/扩展完成

更多数据交互，如读取文件并返回 JSON 数据，监听用户请求，需要进一步定制响应，完善服务器，更多信息，请访问动态资源服务器

Advanced

访问服务器时，渲染服务器特定页面，如主页，给出操作使用提示

思路：创建 html 页面，指定路由；读取并返回主页；需要文件系统模块 fs 的支持；文件位置和命名任意

方案1：修改服务器文件，增加核心代码如下

app.get('/', (req, res) => {
  fs.readFile('public/index.html', (err, data) => {
    if (err) throw err
    res.write(data)
    res.end()
  })
})

方案2：直接使用 res 的 sendFile()

app.get('/', (req, res) => {
  res.sendFile('./public/index.html')
})

方案3：终极必杀技

指定静态资源，且有主页文件，且名字为 index.html，即使没有定义路由也可以访问。。。