美文网首页
json server

json server

作者: Poiey | 来源:发表于2019-12-25 14:27 被阅读0次

有时候我们需要用到一些假数据,这里归纳总结一下 json server 的一些使用方法

首先需要安装

npm install -g json-server

在项目public文件夹下创建一个 db.json 文件夹
启动 json server 服务

json-server  --watch  db.json   --port  9090 ( 更改端口号时用 默认3000端口 )

请求方式

  • GET
  • POST
  • PUT
  • PATCH
  • DELETE
  • OPTIONS

get 方式 主要是查询获取,但是方法还是很多的


//获取所有用户信息
http://localhost:3000/users
//获取id为1的用户信息
http://localhost:3000/users/1
//获取公司的所有信息
http://localhost:3000/companies
//获取单个公司的信息
http://localhost:3000/companies/1
//获取所有公司id为3的用户
http://localhost:3000/companies/3/users
//根据公司名字获取信息
http://localhost:3000/companies?name=Google
//根据多个名字获取公司信息
http://localhost:3000/companies?name=Google&name=Apple
//获取一页中只有两条数据
http://localhost:3000/companies?_page=1&_limit=2
//升序排序  desc降序  asc升序
http://localhost:3000/companies?_sort=name&_order=asc
//获取年龄为30以及30以上的
http://localhost:3000/users?age_gte=30
//获取年龄为30到40之间的
http://localhost:3000/users?age_gte=30&age_gte=40
//搜索用户信息
http://localhost:3000/users?q=d

总结 :
1、http://localhost:3000/db 访问的是db.json文件下的所有内容;
2、http://localhost:3000/layoutList?categoryName= 模拟接口参数可筛选该目录下内容
3、分页查询 参数为 _start, _end, _limit,并可添加其它参数筛选条件
如:http://localhost:3000/posts?_start=6&_limit=3
http://localhost:3000/posts?_start=3&_end=6
4、排序 参数为_sort, _order
如:http://localhost:3000/posts?_sort=id&_order=asc
http://localhost:3000/posts?_sort=user,views&_order=desc,asc
5、操作符 _gte, _lte, _ne, _like
_gte大于,_lte小于, _ne非, _like模糊查询
6、q全局搜索(模糊查询)

post 请求 常用于增加数据

post请求的方式传入一个对象,用于增加数据,要有id属性,否则会报错

   addtableList() {
            let num = this.tableData.length
            let obj = {}
            obj.date = new Date().getTime()
            obj.name = ""
            obj.address = ""
            obj.id = num + 1
            this.tableData.push(obj)
            axios.post("http://localhost:3000/users", obj)
          }

delete请求 常用于删除一组数据

这里要在请求时的url地址后面加id,告诉他要删哪一条数据

  handleDelete(index, row) {
            console.log(row)
            this.tableData.splice(index, 1)
            axios.delete(`http://localhost:3000/users/${row.id}`)
          },

patch请求 常用于修改一组数据

这里也是根据id,来确认时要修改哪一条数据。

  handletrue(index, row) {
            let index1 = this.tableData.findIndex(item => item.id === this.myid)

            if (index > -1) {
              let obj = {}
              obj.date = this.tableData[index].date
              obj.name = this.username
              obj.address = this.useraddress
              obj.id = this.tableData[index].id
              axios.patch(`http://localhost:3000/users/${row.id}`, obj)
            }
          },

这里不一一列举,方法的使用都差不多
这里出的最多的问题就是数据增加不进去,一直报错。其中很大的原因是没有 id 属性。切记,数据一定要有 id 属性

相关文章

网友评论

      本文标题:json server

      本文链接:https://www.haomeiwen.com/subject/godcoctx.html