React基础之脚手架（四）- 数据请求与json server

脚手架 - 数据请求与json server

麒麒（小姐姐哦）来啦！！！今天的内容是`数据请求与json server`
代码是看不会的！！！~~~ 一定要动手呦！
如果对你有帮助 就支持下我呦！♥

一、插件下载

1. json-server：模拟数据 npm i json-server -g
2. axios：数据请求 npm i --save axios

二、使用步骤

1. 在项目根目录下新建文件夹 mock
2. 在mock中新建data.json，然后定义数据，如：

   {
       "arr": [
           {"id": 1, "name": "name1"},
           {"id": 2, "name": "name2"},
           {"id": 3, "name": "name3"},
           {"id": 4, "name": "name4"}
       ]
   }
   

三、启动 json-server ，具体步骤如下：

1. cd到 mock文件夹下
2. 使用：json-server --watch --port 4000 数据文件名，如：json-server --watch --port 4000 data.json
   执行这个命令的时候，可能会报如下错误：

   json-server : 无法加载文件 C:\AppData\Roaming\npm\json-server.ps1，
   因为在此系统上禁止运行脚本。
   

   （该问题解决可以参考 - 解决 — 脚本无法执行问题）
3. 打开浏览器，输入localhost:4000/arr 即可获得数据，如下图：
   

四、如何在页面中获得mock数据

1. 定义新组建HomeJson.js，输入rcc生成模板
2. 在HomeJson.js中引入axios，并请求数据，代码如下：

   import React, { Component } from 'react'
   import axios from 'axios'
   export default class HomeJson extends Component {
       componentDidMount() {
           this.ajaxFun()
       }
       ajaxFun () {
           axios.get("http://localhost:4000/arr").then((ok)=>{
               console.log('ok', ok)
           })
       }
       render() {
           return (
               <div>
               </div>
           )
       }
   }
   

3. 在app.js中引用组件HomeJson.js，为：<HomeJson></HomeJson>
4. 如图为请求的数据（在控制台）：