React+Ant.design 从零开始搭建个人博客实战教程04 —— 配置json-server 提供虚拟数据

简介：刚入手一个服务器打算搭个个站，平时工作都是用vue ；为了扩展自己的实战能力来从头开始实战用用react吧；结合ant-design一起开发，然后后台nodejs来写；编写我的第一个教程文章，从头到尾记录整个过程因为是实战项目；部分基础的创建react的和基本语法什么的话各位就自便了如果有需要的话我是可以开篇博客的；需要的留言— —
ღ( ´･ᴗ･` )比心
因为并不是很熟悉这两个框架所以如果有做的不好的请各位大神指导下小弟谢谢了

作者：webmxj
csdn博客名:div_ma
联系方式：[email protected]
微信：webmxj
QQ交流群:734585334
QQ:642525655 加我请备注前端

上次我们配置完基本的框架现在需要布局为了方便布局和后期的数据交互所以我们现在需要先配置一些虚拟数据的来布局；这我们使用json-server来提供虚拟数据

一.安装json-server

首先你的电脑中需要安装nodejs，建议使用最新版本。然后全局安装json server.
npm install json-server -g

安装成功后可以使用 json-server -h 检查是否安装成功成功会出现

index.js [options] <source>

选项：
  --config, -c               Path to config file    [默认值: "json-server.json"]
  --port, -p                 Set port                             [默认值: 3000]
  --host, -H                 Set host                        [默认值: "0.0.0.0"]
  --watch, -w                Watch file(s)                                [布尔]
  --routes, -r               Path to routes file
  --middlewares, -m          Paths to middleware files                    [数组]
  --static, -s               Set static files directory
  --read-only, --ro          Allow only GET requests                      [布尔]
  --no-cors, --nc            Disable Cross-Origin Resource Sharing        [布尔]
  --no-gzip, --ng            Disable GZIP Content-Encoding                [布尔]
  --snapshots, -S            Set snapshots directory               [默认值: "."]
  --delay, -d                Add delay to responses (ms)
  --id, -i                   Set database id property (e.g. _id)  [默认值: "id"]
  --foreignKeySuffix, --fks  Set foreign key suffix (e.g. _id as in post_id)
                                                                  [默认值: "Id"]
  --quiet, -q                Suppress log messages from output            [布尔]
  --help, -h                 显示帮助信息                                 [布尔]
  --version, -v              显示版本号                                   [布尔]

示例：
  index.js db.json
  index.js file.js
  index.js http://example.com/db.json

https://github.com/typicode/json-server

二.运行

成功安装之后，新建mock文件夹在里面的创建一个db.json文件并写入虚拟数据
这里写图片描述
然后在文件夹根目录运行

json-server mock/db.json -p 3003

这里写图片描述
然后打开http://localhost:3003/demo 和 http://localhost:3003/article就可以看到刚刚定义的假数据了

但是这样我们每次使用虚拟数据都得单独去起这个服务，所以为了方便，我们来配置package.json 让执行npm run start的时候同时执行json-server mock/db.json -p 3003

要同时执行依赖于concurrently模块
我们全局安装concurrently模块

npm insatll -g concurrently

然后修改package.json中的script

"server":"react-app-rewired start",
"json_server":"json-server mock/db.json --port 3003",
"start": "concurrently \"npm run json_server\" \"npm run server\" ",

然后我们执行一下npm run start 这个时候打开http://localhost:3000/#/home可以看到我们熟悉的画面，然后
这里写图片描述
然后打开http://localhost:3003/demo 也是照样可以看到数据
接着我们就通过接口拿数据了

三.配置package.json 引入数据测试

在package.json文件中增加以下代码

"proxy": {
    "/": {
      "target": "http://localhost:3003",
      "ws": true,
      "changeOrigin": true,
      "secure": false
    }
  }

这里写图片描述
proxy的配置
1.左边“/”代表：/ 字符后的链接都会被代理
2.“target”：代理到的地址这里是我们json-server设置的 localhost:3000
3.”ws”:ws协议不开启的话会报一个错误
4.”changeOrigin”:是否支持跨域这里也是要打开的因为端口号不同跨域了
5.“secure”：安全协议主要针对https的

然后在src/routes/Home.js中测试一下能否拿到数据
修改home.js为

/**
 * Created by [email protected] 2018/5/28.
**/
import React,{Component} from "react";
export default class Home extends Component{
    constructor(props){
        super(props);
        fetch("/demo",{method:'GET'}).then(
            function(res){
                console.log(res);
                res.json().then(function(data){
                    console.log(data);
                });
            }
        )
    }
    render(){
        return (
            <div id="Home">
                首页
            </div>
        )
    }
}

然后我们运行npm run start 这里一定得重新运行因为改过package.json 得重启才会看得到效果；
然后打开localhost:3000/home 并按f12打开FireBug;

这里写图片描述
如图可以看到我们定义的数据
这里我们要手动生成数据那么有没有更方便的方法呢？

请看下一篇引入mockjs