zoukankan      html  css  js  c++  java
  • 使用json-server创建mock数据

    json-server的作用就是在不需要后端提供接口的情况下,自行搭建json服务器。

    写mock数据首先就是要会写接口文档,才能写json数据。我们先说如何使用json-server;

    json-server没有办法配置api;

    1. npm中搜索json-server用法

    npm i json-server -g json-server命令提示

    2. 暴露json数据

    ```
    var poslist = require('./polist.json')
    module.exports = function(){
    return {
    list:poslist
    }
    }
    ```
    3. json-server ./static/mock/mock.js 9000 json数据和端口号

    显示url来访问json数据;此时可以手动修改url可以查看到json文件;

    mock.js:
    ```
    挂载数据:
    componentDidMount(){
      fetch('/api/position/list') //当前请求的路径
      .then((response)=>response.json())
      then((res)=>{
      this.data.list = res.data.subjects
     })
    }
    遇到api时候跳转到目标路径,需要在node_module中找到react-script进行配置跨域:
    proxyTable:{
    '/api':{
    target:'http://localhost:9000',//自己配置的url,
    changeOrigin:true,
    <!-- pathRewrite:{//将/api从url中去掉;接口最好加api,因为知道他是个接口;
    '^/api':''
    } -->
    }
    
    }


    此时访问的路径只能是/api/list,而且是利用pathRewrite的方法;而在暴露接口的时候不支持'/',而他支持list.jsp的方式,因此可以配置路由:

    因此配置jsonserver的路由:
    router:{
    '/api/position/list':'/list' //配置路由进行跳转,不是vue路由
    }
    ```

    假如你只配置/api/list就不需要配置上面的路由了。




  • 相关阅读:
    GCC编译错误小结
    Sword libcurl使用
    Python 包
    Python __all__系统变量
    Python 模块导入
    Python 异常处理
    Python 单例模式
    乐乐课堂_leleketang.com
    靠刷题考进了清华?学霸告诉你答案
    python logging配置时间或大小轮转
  • 原文地址:https://www.cnblogs.com/naniandongzhi/p/9297744.html
Copyright © 2011-2022 走看看