使用json-server搭建虚拟后台服务器,并完成数据的增删改查

web 专栏收录该内容
8 篇文章 0 订阅

在很多前后端分离的项目中,前后端同时开工,当前段项目已完成部分后,就需要获取数据来做部分调试,但是这个时候后台服务器往往还没有完成,这个时候就需要我们自己搭建一个虚拟的后台服务器,无意中发现一款好用的"神器",我把自己搭建服务器和进行一些增删改查操作的具体步骤记录了下来,以供大家参考;

第一步 利用json-server搭建虚拟服务器

1.新建一个文件夹jsonServer,并在根目录下生成package.json文件;

package.json文件可通过以下命令来生成

npm init

2.安装json-server

npm install json-server -g

执行如下命令,检查json-server是否安装成功

json-server -h

如果安装成功,控制台会出现如下:

E:\JsonServer>json-server -h
index.js [options] <source>

Options:
  --config, -c               Path to config file   [default: "json-server.json"]
  --port, -p                 Set port                            [default: 3000]
  --host, -H                 Set host                     [default: "localhost"]
  --watch, -w                Watch file(s)                             [boolean]
  --routes, -r               Path to routes file
  --middlewares, -m          Paths to middleware files                   [array]
  --static, -s               Set static files directory
  --read-only, --ro          Allow only GET requests                   [boolean]
  --no-cors, --nc            Disable Cross-Origin Resource Sharing     [boolean]
  --no-gzip, --ng            Disable GZIP Content-Encoding             [boolean]
  --snapshots, -S            Set snapshots directory              [default: "."]
  --delay, -d                Add delay to responses (ms)
  --id, -i                   Set database id property (e.g. _id) [default: "id"]
  --foreignKeySuffix, --fks  Set foreign key suffix (e.g. _id as in post_id)
                                                                 [default: "Id"]
  --quiet, -q                Suppress log messages from output         [boolean]
  --help, -h                 Show help                                 [boolean]
  --version, -v              Show version number                       [boolean]

Examples:
  index.js db.json
  index.js file.js
  index.js http://example.com/db.json

https://github.com/typicode/json-server

3.在根目录下创建db.json文件,此文件保存前端测试需要的数据文件;

我文件内只保存了部分测试数据,如下;

{
  "users": [
    {
      "id": 6985851,
      "username": "lnx132133",
      "phone": "13212345678",
      "mail": "12345678@qq.com",
      "gender": "女",
      "department": "研发三部",
      "avatar": "../../../static/img/avatar.jpg",
      "character": "普通用户",
      "remarks": "张九"
    },
    {
      "id": 6985852,
      "username": "dsfa132133",
      "phone": "13312345678",
      "mail": "13345678@qq.com",
      "gender": "男",
      "department": "研发二部",
      "avatar": "../../../static/img/avatar.jpg",
      "character": "管理员",
      "remarks": "李明"
    },
    {
      "id": 6985424,
      "username": "dsdfa132133",
      "phone": "13412345678",
      "mail": "13345678@qq.com",
      "gender": "男",
      "department": "研发二部",
      "avatar": "../../../static/img/avatar.jpg",
      "character": "管理员",
      "remarks": "刘震"
    },
    {
      "id": 6985754,
      "username": "dsfg132133",
      "phone": "13512345678",
      "mail": "13345678@qq.com",
      "gender": "女",
      "department": "客服部",
      "avatar": "../../../static/img/avatar.jpg",
      "character": "管理员",
      "remarks": "徐梅"
    },
    {
      "id": 6985132,
      "username": "dsfa132133",
      "phone": "13612345678",
      "mail": "13345678@qq.com",
      "gender": "男",
      "department": "市场部",
      "avatar": "../../../static/img/avatar.jpg",
      "character": "管理员",
      "remarks": "张强"
    },
    {
      "id": 6985715,
      "username": "dsfa132133",
      "phone": "13712345678",
      "mail": "13345678@qq.com",
      "gender": "男",
      "department": "研发二部",
      "avatar": "../../../static/img/avatar.jpg",
      "character": "管理员",
      "remarks": "宋杰"
    },
    {
      "id": 6985741,
      "username": "dsfa132133",
      "phone": "13812345678",
      "mail": "13345678@qq.com",
      "gender": "男",
      "department": "研发二部",
      "avatar": "../../../static/img/avatar.jpg",
      "character": "普通用户",
      "remarks": "何宇"
    },
    {
      "id": 69858965,
      "username": "dsfa132133",
      "phone": "13912345678",
      "mail": "13345678@qq.com",
      "gender": "男",
      "department": "研发二部",
      "avatar": "../../../static/img/avatar.jpg",
      "character": "普通用户",
      "remarks": "强东"
    },
    {
      "id": 6988959,
      "username": "lnx132199",
      "phone": "13212345678",
      "mail": "12345678@qq.com",
      "gender": "男",
      "department": "研发一部",
      "avatar": "../../../static/img/avatar.jpg",
      "character": "普通用户",
      "remarks": "张八"
    },
    {
      "id": "6988960",
      "username": "lnx132199",
      "phone": "13212345678",
      "mail": "12345678@qq.com",
      "gender": "男",
      "department": "研发一部",
      "avatar": "../../../static/img/avatar.jpg",
      "character": "普通用户",
      "remarks": "张八"
    }
  ]
}

4.启动josn-server服务器

在控制台执行如下命令

json-server --watch db.json

执行成功后的结果

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/users

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

第二步 对数据进行增删改查操作

json-server支持的操作方法如下

GET /users-------------------------------------------------------------------------------------------获取列表
GET /users/id ---------------------------------------------------------------------------------------获取指定id的数据
POST /users ----------------------------------------------------------------------------------------新增一个数据对象
PUT /users/id--------------------------------------------------------------------------------------- 更新指定id对象的数据
DELETE /users/id ----------------------------------------------------------------------------------删除指定id的数据

注:篇幅限制,在此就不一一介绍,需要详细了点这里→https://www.npmjs.com/package/json-server

1.查询数据---GET /users

        //请求用户数据
        $.ajax({
            type:"GET",
            url:"http://localhost:3000/users",
            dataType:"json",
            success:function (data) {
                console.log(data);
            },
            error:function (err) {
                console.error(err);
            }
        });

输出结果:

2.获取指定id的数据---GET /users/id

        //获取指定用户
        $("#getUser").click(function(){
            $.ajax({
                type:"GET",
                url:"http://localhost:3000/users/6985715",
                dataType:"json",
                success:function(data){
                    console.log(data);
                },
                error:function(err){
                    console.error(err)
                }
            })
        });

输出结果:

3.新增用户数据-------POST /users

        //增加用户数据
        $("#addUser").click(function(){
            var newUser={
                "id": 6988960,
                "username": "lnx132199",
                "phone": "13212345678",
                "mail": "12345678@qq.com",
                "gender": "男",
                "department": "研发一部",
                "avatar": "../../../static/img/avatar.jpg",
                "character": "普通用户",
                "remarks": "张八"
            };
            $.ajax({
                type:"POST",
                url:"http://localhost:3000/users",
                data:newUser,
                success:function(data){
                    console.log("添加成功");
                },
                error:function(err){
                    console.error(err)
                }
            })
        });

结果:

查看db.json文件中已经有了新增的数据

4.更改指定对象数据------PUT /users/id

        //修改用户数据
        $("#updateUser").click(function(){
            var updateuser={
                "id": 6985851,
                "username": "lnx132133",
                "phone": "13212345678",
                "mail": "12345678@qq.com",
                "gender": "男",
                "department": "研发四部",
                "avatar": "../../../static/img/avatar.jpg",
                "character": "普通用户",
                "remarks": "刘工"
            };
            $.ajax({
                type:"PUT",
                url:"http://localhost:3000/users/6985851",
                data:updateuser,
                success:function(data){
                    console.log(data)
                },
                error:function(err){
                    console.error(err)
                }
            })
        });

控制台输出结果:

查看db.json文件,指定用户的信息也已经更改过来了;

5.删除指定用户----------DELETE /users/id

        //删除用户
        $("#delUser").click(function(){
            var delUserId=6988960;
            $.ajax({
                type:"DELETE",
                url:"http://localhost:3000/users/"+delUserId,
                dataType:"json",
                success:function(data){
                    console.log(data)
                },
                error:function(err){
                    console.error(err)
                }
            })
        })

执行完删除指定用户指令后,会返回一个空对象;

查看db.json文件发现指定id 的对象已经删除

以上就是使用json-server做数据虚拟操作的全部步骤,我最近还在更加深入的学习,学习完成后再进行更新;

  • 10
    点赞
  • 0
    评论
  • 13
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值