静态资源服务器

Steps

1. 创建服务器目录
2. 准备资源/数据
3. 创建服务器脚本
4. 开启服务

Procedure

1. 创建一个空白文件夹作为服务器目录，如 server
2. 在服务器目录创建资源文件夹，如 public
3. 在资源文件夹 public 里面，再创建若干文件夹，存放不同的资源，如图片 img、视频 video、数据 data 等
4. 返回服务器目录：在空白处右键单击，选择"在终端中打开"或在资源管理器顶部地址栏输入 CMD 并回车，打开 CMD 命令行窗口
5. 按照默认配置，初始化服务器目录，创建 package.json 文件；如 server 是项目名，也是文件夹名，主入口文件 main 是 index.js；也可以不带 -y，自己指定相关字段内容

npm init -y

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

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

npm i express

7. 创建服务器脚本：在服务器目录下，新建一个 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}/资源名`);
});  

8. 继续操作 CMD 终端，开启服务；也可以修改 package.json 里的 script，定制命令

node index.js

Usage

• 日常开发建议使用 Vs Code 配合特定插件/扩展完成
• 更多数据交互，如读取文件并返回 JSON 数据，监听用户请求，需要进一步定制响应，完善服务器
• 更多信息，请访问 代理、动态资源服务器
• 使用浏览器访问 http://127.0.0.1:3000/资源路径和名字获取对应的资源
• H5项目中使用

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

• 微信小程序项目中使用

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

HomePage

• 访问服务器时，渲染服务器特定页面，如主页，给出操作使用提示
• 思路：创建 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，即使没有定义路由也可以访问。。。

Customize

• 修改 package.json 里 script；增加了一个微信小程序的服务器文件 wx.js

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

• 启动服务

npm start

npm run wx