json数据怎么增删改 java jsonserver增删改查

转载

编程梦想编织者 2023-12-23 23:09:26

文章标签 json数据怎么增删改 java json 数据普通用户 文章分类 Java 后端开发

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

第一步利用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);
            }
        });

输出结果：

json数据怎么增删改 java jsonserver增删改查_json

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)
                }
            })
        });

输出结果：

json数据怎么增删改 java jsonserver增删改查_json数据怎么增删改 java_02

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)
                }
            })
        });

结果：

json数据怎么增删改 java jsonserver增删改查_json_03

查看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)
                }
            })
        });

控制台输出结果：

json数据怎么增删改 java jsonserver增删改查_json_04

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

json数据怎么增删改 java jsonserver增删改查_数据_05

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做数据虚拟操作的全部步骤，我最近还在更加深入的学习，学习完成后再进行更新；

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。