react项目开发-模拟数据的增删改查（前三篇续）

今天，我们增加一下对数据的增删改查的开发，这里不涉及用后台数据，而是使用json-server这个模拟数据的工具（可自行学习，这里不做详述）来实现。

我们索性就对音乐页面做开开发吧：https://localhost:9999/music，现有截图如下：

好，废话不多说，下面开始：

1 安装json-server，运行cnpm i json-server --save-dev；根目录下新建mock.json文件，代码如下：

{
    "music": [
        { 
          "id": 1, 
          "name": "High歌", 
          "author": "黄龄" ,
          "publish_time": 1530538214436
        },
        { 
            "id": 2, 
            "name": "底线", 
            "author": "黄宗泽" ,
            "publish_time": 1530138214436
        }
    ]
}

2 在根目录下，单独开启shell窗口，运行：node_modules\.bin\json-server --watch mock.json，启动成功后访问http://localhost:3000/music如下：

好了，配置模拟数据已经OK。

3 修改routes/music/index.js文件

4 修改models/music.js文件

5 services下增加music.js文件：

import {request} from '../utils';

export async function queryMusic () {
  
  return request({
    url: `http://localhost:3000/music`,
    method: 'get'
  })
}

整体目录如下：

 

效果如下：

 

代码资源：

https://download.csdn.net/download/xw505501936/10561328

已更新为：https://download.csdn.net/download/xw505501936/10570123

github地址：https://github.com/HeavyShell/create-react-app-dva

修正路由问题，layout/auth.js文件中，import { withRouter } from 'dva/router'，使用withRouter，如图：