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就不需要配置上面的路由了。




  • 相关阅读:
    js 基础(面试前必看)
    typescript 使用的几种情况
    flutter 命令卡主的问题
    React 通过注释自动生成文档
    jest 测试入门(一)
    react hooks 全面转换攻略(三) 全局存储解决方案
    缓存穿透、击穿、雪崩区别和解决方案
    java8 lambda表达式
    maven中snapshot快照库和release发布库的区别和作用
    初识 Nacos 以及安装
  • 原文地址:https://www.cnblogs.com/naniandongzhi/p/9297744.html
Copyright © 2011-2022 走看看