1.安裝dva-cli
-
npm install dva-cli -g
2.建立應用
dva new dvadashboard
[dvadashboard為項目名]
3.安裝mockjs
- npm install mockjs --save
4.配置mockjs
- 打開.roadhogrc.mock.js 設定如下
const fs=require('fs');
const path=require('path');
const mockPath=path.join(__dirname+'/mock');
const mock={};
fs.readdirSync(mockPath).forEach(file=>{
Object.assign(mock,require('./mock/'+file));
});
module.exports=mock;
5.模拟使用者管理API
mock檔案夾下建立user.js
API設定:
這裡隻模拟倆個api 1.擷取所有使用者資料 2.添加使用者
const Mock=require('mockjs');
let db=Mock.mock({
'data|3-6':[{
id:'@id',
name:'@name',
'age|18-32':1
}]
});
module.exports={
[`GET /api/users`](req,res){
res.status(200).json(db);
},
[`POST /api/users`](req,res){
let user=req.body;
console.log(req);
user.id=Mock.mock('@id');
db.data.push(user);
res.status(200).json(user);
}
} 接下來看一下api能不能使用， 進入項目目錄， 執行 npm start 啟動
進入預設頁面 預設端口号 8000 如下是項目啟動後預設頁面
通路下api http://localhost:8000/api/users 好了，可以通路 成功傳回模拟使用者清單資料
6.安裝antd
-
npm install antd babel-plugin-import --save
babel-plugin-import 是用來按需加載 antd 的腳本和樣式的
安裝完成後,配置使用antd 修改.roadhogrc檔案
添加 ["import",{ "libraryName":"antd","style":"css" }] 最後檔案如下所示：
{
"entry": "src/index.js",
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr",
"transform-runtime",
["import",{ "libraryName":"antd","style":"css" }]
]
},
"production": {
"extraBabelPlugins": [
"transform-runtime",
["import",{ "libraryName":"antd","style":"css" }]
]
}
}
} 7.定義路由
- 在src/routes/ 檔案夾下建立 usersPage.js
這可能是最簡單的一個頁面了
import { connect } from 'dva';
const UserPage=()=>{
return (
<div>
<h1>UserPage</h1>
</div>
);
};
export default connect()(UserPage); - 注冊路由資訊 修改src/router.js檔案
順手加了個元件動态加載
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic';
import IndexPage from './routes/IndexPage';
function RouterConfig({ history,app }) {
const UserPage=dynamic({
app,
component:()=>import('./routes/usersPage')
});
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
<Route path="/users" exact component={UserPage} />
</Switch>
</Router>
);
}
export default RouterConfig;
檢視一下路由配置效果 通路http://localhost:8000/#/users
顯示内容了
8.添加與服務端通訊
- 修改src/utils/request.js如下 用于提供基礎的ajax資料通路
也有不少使用axio的 具體優缺點還沒研究。
import fetch from 'dva/fetch';
const checkStatus=(response)=>{
if(response.status>=200 && response.status<=200){
return response;
}
const error=new Error(response.statusText);
error.response=response;
throw error;
};
export default async function request(url,options={}) {
options.headers={
'Content-Type':'application/json'
}
const response=await fetch(url,options);
checkStatus(response);
const data=await response.json();
return data;
} 這裡為了了解簡單 省略一層 user.service (封裝基礎ajax通訊 提供業務接口) 在業務層中直接調用request裡方法 【隻是為了學習友善】
- 然後在src/models下建立user.js
import request from '../utils/request';
const User={
namespace:"user",
state:{
list:[],
visibleModal:false
},
reducers:{
save(state,{ payload:{ data:list } }){
return {
...state,
list
};
}
},
effects:{
* query({},{ call,put }){
const { data }=yield call(request,'/api/users',{ method:'GET' });
yield put({type:'save',payload:{ data }});
},
* create({ payload:{ user } },{ call,put }){
yield call(request,'/api/users',{
body:JSON.stringify(user),
method:'POST'
});
yield put({type:'query',payload:{ }});
}
},
subscriptions:{
setup({ dispatch,history }){
console.log('running subscriptions ...');
return history.listen(({ pathname,search })=>{
console.log(`pathname: ${pathname}`);
dispatch({ type:'query'});
});
}
}
};
export default User; 這裡主要展現dva對redux react-saga的封裝處理 一目了然了
- 然後注冊model 修改路由處代碼為：
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic';
import IndexPage from './routes/IndexPage';
function RouterConfig({ history,app }) {
const UserPage=dynamic({
app,
models:()=>[
import('./models/user')
],
component:()=>import('./routes/usersPage')
});
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
<Route path="/users" exact component={UserPage} />
</Switch>
</Router>
);
}
export default RouterConfig;
9.建立使用者資料清單元件 使用antd的Tabel承載
順手也把添加使用者的表單建了吧
user.js
import { Table,Button } from 'antd';
import { connect } from 'dva';
import UserModal from './create';
const UserTable = ({ list,dispatch }) => {
const createUser=(user)=>{
dispatch({
type:'user/create',
payload:{
user
}
});
};
const columns=[
{
Title:'ID',
dataIndex:'id'
},
{
Title:'NAME',
dataIndex:'name'
},
{
Title:'AGE',
dataIndex:'age'
}
];
return (
<div>
<UserModal record={ {} } ok={ createUser }>
<Button type="primary">NEW</Button>
</UserModal>
<Table
columns={ columns }
dataSource={ list }
rowKey={ t=>t.id }
pagination={ false }>
{/* users datatable */}
</Table>
</div>
);
};
export default connect(({ user }) => {
console.log(user);
return {
list: user.list
};
})(UserTable); create.js
import React,{ Component } from 'react';
import { Modal,Form,Input } from 'antd';
class UserModal extends Component{
constructor(props){
super(props);
this.state={
visible:false
};
}
render(){
const { children,form:{ getFieldDecorator },record,ok }=this.props;
const showModal=()=>{
this.setState({
visible:true
});
};
const hideModal=()=>{
this.setState({
visible:false
});
};
const save=()=>{
this.props.form.validateFields((err,val)=>{
//val ==> record
// console.log(val);
ok(val);
hideModal();
});
};
return (
<div>
<span onClick={ showModal }>
{ children }
</span>
<Modal
title="Create User"
visible={ this.state.visible }
onCancel={ hideModal }
onOk={ save }>
<Form>
<Form.Item label="Name">
{
getFieldDecorator('name', {
initialValue: record.name
})(<Input />)
}
</Form.Item>
<Form.Item>
{
getFieldDecorator('age',{
initialValue:record.age
})(<Input />)
}
</Form.Item>
</Form>
</Modal>
</div>
);
};
}
export default Form.create()(UserModal); usersPage.js
import { connect } from 'dva';
import Main from '../components/layout/main';
import UserTable from '../components/user/user';
const UserPage=()=>{
return (
<Main>
<h1>UserPage</h1>
<UserTable />
</Main>
);
};
export default connect()(UserPage);
10.效果示範
11. 源碼下載下傳
https://pan.baidu.com/s/1bo1R7o7
原文釋出時間為：2017年12月21日
原文作者：
gaojinbo010本文來源：
開源中國如需轉載請聯系原作者