美文网首页
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