jsonserver

学习前端框架时，想模拟一下真实数据，又不想写大段的增删改查代码，可以借助jsonserver来搭建本地的数据接口。

安装

1. 安装全局的json-server：

npm install  -g json-server

查看版本号判断是否安装成功：

json-server -v

卸载

npm uninstall -g json-server

模拟数据

新建了一个 zhh-jsonserver 文件夹，在该文件下运行终端：

json-server --watch db.json

运行完后就会出现db.json文件，然后运行 http://localhost:3000

点第一个就会看到数据了（使用谷歌浏览器插件JSON-handle）

重新定义数据：

{
  "users": [
    {
      "id": 1,
      "name": "Sam",
      "mail": "sam@try.com",
      "content": "My name is Sam!",
      "gradeId": 1
    },
    {
      "id": 2,
      "name": "Tony",
      "mail": "tony@try.com",
      "content": "My name is Tony!",
      "gradeId": 1
    },
    {
      "id": 3,
      "name": "Amy",
      "mail": "amy@try.com",
      "content": "My name is Amy!",
      "gradeId": 2
    },
    {
      "id": 4,
      "name": "Lucy",
      "mail": "lucy@try.com",
      "content": "My name is Lucy!",
      "gradeId": 3
    }
  ],
  "grades": [
    {
      "id": 1,
      "gname": "大一"
    },
    {
      "id": 2,
      "gname": "大二"
    },
    {
      "id": 3,
      "gname": "大三"
    }
  ]
}

1. GET

//获取name=Sam并且mail=sam@try.com的数据
http://localhost:3000/users?name=Sam&mail=sam@try.com

//获取包含父资源的数据（相当于表连接）
http://localhost:3000/users?_expand=grade

//获取users中id为1的学生信息以及班级名称
http://localhost:3000/users/1?_expand=grade

//获取包含子资源的数据
http://localhost:3000/grades?_embed=users

//获取年级名称为大二的所有学生信息
http://localhost:3000/grades/?gname=大二&_embed=users

//按照id倒序
http://localhost:3000/users?_sort=id&_order=desc

//多个条件排序
http://localhost:3000/users?_sort=name,mail&_order=desc,asc

//查询id大于等于2并且小于等于4的学生
http://localhost:3000/users?id_gte=2&id_lte=4

//查询除了Tony以外所有学生
http://localhost:3000/users?name_ne=Tony

//like模糊查询
http://localhost:3000/users?name_like=s

//全局搜索
http://localhost:3000/users?q=a

//users数据一页两条，显示第二页数据
http://localhost:3000/users?_limit=2&_page=2

2. POST

this.formitem.name = 'Sam';
this.formitem.mail = 'Sam@XX.com';
this.$axios({
    method: 'post',
    url: "http://localhost:3000/users",
    data: this.formitem
}).then(res => {
     // return
});

3. PUT

this.formitem.name = 'Sam';
this.formitem.mail = 'Sam@XX.com';
this.$axios({
     method: 'put',
     url: "http://localhost:3000/users/"+this.id,
     data: this.formitem
 }).then(res => {
     // return
 });

4. DELETE

this.$axios({
  	method: "delete",
   	url: "http://localhost:3000/users/" + id
 }).then(res => {
   	// return
 });