json-server 的搭建与使用

json-server 是一个零代码快速搭建本地 RESTful API 的工具，它使用 JSON 文件作为数据源，并提供了一组简单的路由和端点，可以模拟后端服务器的行为。通过 json-server，前端开发人员可以在不依赖后端 API 的情况下进行开发，快速生成 REST API 风格的后端服务‌。

1. 安装

安装 json-server

npm install -g json-server

2. 启动服务器

创建一个 db.json 文件，这将作为我们的数据库。例如：

{
  "users": [
    { "id": 1, "name": "Alice", "age": 30 },
    { "id": 2, "name": "Bob", "age": 25 }
  ]
}

使用 json-server 启动服务器：

json-server --watch db.json

这将启动一个默认监听在 3000 端口的服务器。

报错处理

在启动服务器时可能会遇到的报错

import { parseArgs } from 'node:util';SyntaxError: The requested module 'node:util' does not provide an export named 'parseArgs'

是因为node 版本过低造成，需要升级到18以上 查看node版本

node -v

推荐使用nvm-windows 管理 Node.js ，可以轻松切换不同版本的 Node.js且保留之前的node版本。 官网下载最新的nvm-setup.zip 文件并解压。 运行解压后的 nvm-setup.exe 文件完成安装。 安装最新的 LTS 版本：

nvm install --lts

查看node版本

node -v 

如果nvm安装node后显示'node' 不是内部或外部命令，也不是可运行的程序或批处理文件。

nvm list  //查看是否有原先的node版本，如果没有进行安装

nvm use xxx  //切换node版本

例如安装之前低版本的node

nvm install 16.15.0

再次查看node列表

nvm list
//nvm list
// 22.14.0
//* 16.15.0 (Currently using 64-bit executable)

查看node安装路径情况

where node

3.发起请求

请求所有数据

init() {
        uni.request({
                url: 'http://localhost:3000/users', 
                success: (res) => {
                        this.dataNumber = res.data
                }
        });
}

增加数据

add() {
        uni.request({
                url: 'http://localhost:3000/users', 
                method: 'POST',
                data: {
                        name: 'New Post',
                        age: 1
                },
                success: (res) => {
                        this.init()
                }
        });
}

删除数据

del(id) {
        uni.request({
                url: 'http://localhost:3000/users/' + id, 
                method: 'DELETE',
                success: (res) => {
                        this.init()
                }
        });
}

联表查询合并数据（注意：字段关联，uses表中依靠positionId字段与positions表关联）

1. 表名必须为复数形式
2. 关联字段必须与表名字段相同且为表名的单数加Id形式
3. 关联字段的数据类型（positionId数据类型）必须与positions表中id数据类型相同且值相同

//db.json文件
{
  "positions": [
    {
      "id": 1,
      "name": "aaa"
    },
    {
      "id": 2,
      "name": "bbb"
    },
    {
      "id": 3,
      "name": "ccc"
    },
    {
      "id": 4,
      "name": "ddd"
    },
    {
      "id": 5,
      "name": "eee"
    }
  ],
  "users": [
    {
      "id": "1",
      "name": "Alice",
      "age": 30,
      "positionId": 1
    },
    {
      "id": "2",
      "name": "Bob",
      "age": 25,
      "positionId": 2
    },
    {
      "id": "7171",
      "name": "New Post",
      "age": 1,
      "positionId": 3
    },
    {
      "id": "4716",
      "name": "New Post",
      "age": 1
    }
  ]
}

//进行字段关联
usersWithPosition(id) {
    uni.request({
            url: `http://localhost:3000/users?_embed=position`, 
            success: (res) => {
                    this.findData = res.data.position
            }
    });
}
//进行筛选后关联
usersWithPosition(id) {
    uni.request({
            url: `http://localhost:3000/users/${id}?_embed=position`, 
            success: (res) => {
                   this.findData = res.data.position
            }
    });
}
//三个表进行关联
usersWithPosition(id) {
    uni.request({
            url: `http://localhost:3000/users/${id}?_embed=position&_embed=temp`, 
            success: (res) => {
                   this.findData = res.data.position
            }
    });
}