今天,我们增加一下对数据的增删改查的开发,这里不涉及用后台数据,而是使用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,如图: