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，如圖：