1、 json-sever模拟数据

好似是故人

已于 2023-04-29 11:06:02 修改

阅读量349

点赞数

分类专栏：工具栏文章标签： json

于 2023-04-29 11:02:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51081700/article/details/130438898

版权

工具栏专栏收录该内容

6 篇文章

订阅专栏

文章介绍了如何使用json-server在前端本地创建一个用于存储和操作JSON数据的服务器。通过npm全局安装json-server，然后运行命令启动服务，可以自动生成db.json文件并提供HTTP接口进行CRUD操作。此外，还展示了如何修改默认端口和通过package.json管理启动命令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

json-server，json-server是一个在前端本地运行，可以存储json数据的server

json-server官网：https://github.com/typicode/json-server#getting-started

1、全局安装

1.1使用`npm`全局安装`json-server`：

npm install -g json-server

1.2通过查看版本号，来测试是否安装成功：

json-server -v

D:\Desktop\vue\code\sever>npm install -g json-server

added 205 packages, removed 63 packages, and changed 110 packages in 13s

D:\Desktop\vue\code\sever>json-server -v
0.17.3

2、创建json数据

2.1初次运行

在任意一个文件夹下，在命令行执行代码，会自动在文件夹下创建出一个db.json文件

json-server --watch db.json

D:\Desktop\vue\code\sever>json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Oops, db.json doesn't seem to exist
  Creating db.json with some default data

  Done

  Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

  Home
  http://localhost:3000

根据结果提示，可以在浏览器中访问 http://localhost:3000

`2.2再次启动命令`

json-server --watch db.json

3、修改端口号

从上面启动日志可以看到，json-server默认是3000端口，但也可以自己指定端口，指令如下：

json-server --watch db.json --port 3001

上面的启动命令有点长，可以考虑使用package.json文件来管理启动命令，在db.json同级文件夹下新建一个package.json，编写如下配置信息：

{
    "scripts": {
        "mock": "json-server db.json --port 3001"
    }
}

再启动服务时只需要执行如下指令

npm run mock

4、简单使用

4.1准备页面

<el-button type="success"
               @click="getUserInfo()">查询</el-button>
    <el-button type="success"
               @click="addUserInfo()">增加</el-button>
    <el-button type="success"
               @click="modifyUserInfo()">修改</el-button>
    <el-button type="success"
               @click="deleteUserInfo()">删除</el-button>

4.2请求数据

4.2.1查询全部数据

getUserInfo () {
      axios.get("http://localhost:3000/posts").then(res => {
        console.log(res);
      })
    },

4.2.2根据查询id

getUserInfo () {
      axios.get("http://localhost:3000/posts/1").then(res => {
        console.log(res);
      })
    },

4.3增加数据

addUserInfo () {
      const obj = {
        uname: "添加张三",
        pwd: "123"
      }
      axios.post("http://localhost:3000/posts", obj).then(res => {
        console.log(res);
      })
    },

4.4 根据id修改数据

modifyUserInfo () {
      const obj = {
        uname: "修改张三",
        pwd: "123"
      }
      axios.put("http://localhost:3000/posts/7", obj).then(res => {
        console.log(res);
      })
    },

4.5删除数据

deleteUserInfo () {
      axios.delete("http://localhost:3000/posts/7").then(res => {
        console.log(res);
      })
    }