項目實戰(zhàn)瑞客lesson6

項目實戰(zhàn)項目實戰(zhàn)whydva、項目實戰(zhàn)項目實戰(zhàn)whydva、roadhog理解UseumiwithlayoutHash路由Hash路由Antdumireactwhy開箱即用，內置react、react-router完善的插件體系splitting等支持靜態(tài)頁面導出開發(fā)啟動快dllumireactwhy開箱即用，內置react、react-router完善的插件體系splitting等支持靜態(tài)頁面導出開發(fā)啟動快dllhard-source-webpack-plugin等一鍵兼容到IE9umi-plugin-融合duckdirectorymodel的自動加載、codesplittingroadhogroadhogwebpackwebpackumiroadhog路由，思路類似React開發(fā)dvaumiroadhog之間并umi+dvadvareduxredux-saga的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗，dvareact-router和dva易學易用6apiredux用戶尤其友好，umidvareduxredux-saga的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗，dvareact-router和dva易學易用6apiredux用戶尤其友好，umi使用0elm概念reducers,e"ectssubscriptions插件機制dva-loadingloading，babel-plugin-dva-components、routesmodelsHMR1.Page作輸入，側重于展示型交互性邏輯ModelPage做數(shù)據(jù)、狀態(tài)的讀DVAredux、redux-sagareact-router的輕量級前作輸入，側重于展示型交互性邏輯ModelPage做數(shù)據(jù)、狀態(tài)的讀DVAredux、redux-sagareact-router的輕量級前e"ect副作用，處理異subscriptionsrouternamespace：model的命名空間，只能用字符串。一model，通過namespace區(qū)reducerstateaction對象。action（payload）state。effects：用于處理異步操作（例如：與服務端交互）action觸發(fā)。但是，它不可stateactionreducerstate actionreducerse"ects的觸發(fā)?，一般是一個對象，形如{type:'add',payload:todo，state actionreducerse"ects的觸發(fā)?，一般是一個對象，形如{type:'add',payload:todo，typereducer或者e"ect，payload屬性則是數(shù)據(jù)體，用于傳送給reducere"ectUseumiwith自>=umi@2dvaumi-plugin-無需手寫router.jsumimodelcomponent內置開箱即用dva、dva-loading、react-dom開箱即用dva、dva-loading、react-domdva+umisrccomponents組件con!g配置mocktestnode版本node版本新建立一個空文件夾：mkdirlesson6-進入文件夾：cdlesson6-創(chuàng)建：yarncreate安裝依賴：啟動：yarnstart或者umi其他例子：如umi-antd-mobile建立pages下面的單頁面umigpage建立文件夾more(默認是建立pages下面的單頁面umigpage建立文件夾more(默認是umigpagemore/index--importrouterfrom'umi/router'umi訪問index:訪問about:umipagesumigpageimportstylesfromexportumigpageimportstylesfromexportdefaultfunction({match}){return(<div<h1>Pagepath:'/product/:id',component:'./product/$id',umi$umigpageexportdefaultfunction({location,const{id}=match.exportdefaultfunction({location,const{id}=match.params;return(<div<h1>Page<p>{id||'沒有path:'/channel/:id?',component:'./channel/$id$umi_layout.js_layout.jslayout。layout首先創(chuàng)建umigpage創(chuàng)建父組件umigpageofLayout/_layout創(chuàng)建父組件umigpageofLayout/_layoutexportdefaultfunction(props){return<h1>Pageumigpageexportdefaultfunction(){return(<div<h1>Pageindex</h全局全局exportdefaultfunction(props)return(<Header{props.children<Footer不同的全局layout，umi不支持這樣的配置，但你仍可以在layouts/index.js對location.pathlayout。/loginexportdefaultfunction(props)if(props.location.exportdefaultfunction(props)if(props.location.pathname===returnreturn<Header{<Footerumiumi/linkReactimportLinkfromexportdefault()=><Linkto="/list">GotolistimportrouterfromfunctiongoToListPage()importrouterfromfunctiongoToListPage(){更多命令式的跳轉方法，詳見api#umi/routerumiBrowserHistoryHashexportdefault{history:'hash,使用狀態(tài)：state使用狀態(tài)：statepagemore/index--importReact,{Component}from'react';import{PageHeaderWrapper}from'@ant-import{Card,Form,Input,Button,Table}from'antd';import{connect}from'dva';importstylesfrom'./index.less';constcolumns=title:'姓名',dataIndextitle:'姓名',dataIndex'name',key:'name',title:'年齡',dataIndex'age',key:'age',title:'住址',dataIndex'city',key:'city',exportdefaultconnec(({more})=>({}),getMoreData:()=>({type:'more/getChannelData'}),getMoreDataBySearch:search=>({type:'more/getChannelDataBySearch',payload:searchclassMoreextendsComponent{componentDidMount(){onFinish=values=>{console.logonFinish=values=>{console.log('values',values);//sy-logonFinishFailed=err=>{console.log('err',err);//sy-logrender()const{data}=ps.more;console.log('oo',thisprops);//sy-logreturn(<PageHeaderWrapper<FormonFinish={this.onFinish}labe="姓名"rulesrequiredtrue,message:'請輸入姓名查詢'}]}<Inputplaceholder="請輸入姓名更新模型import{getChannelData更新模型import{getChannelData,}fromconstmodel={namespace:'more',state:{data:effects:<Buttontype="primary"<TabledataSource={data}{columns}rowKey="id"*getChannelData({payload},{*getChannelData({payload},{constresponse=yieldcall(getChannelData,payload);yieldtype:'channelData',payload:response,*getChannelDataBySearch({pyload},call,put}){constresponse=call(getChannelDataBySearch,console.log('has,response,pyieldtype:'channelData,payload:response,reducers:channelData(state,{payloadreturn{...state,data:[...payload.data]})exportdefault importrequestexportdefault importrequestfrom'@/utils/request';exportasyncfunctiongetChannelData(params)returnrequest('/api/getChannelData',{method:'get',exportasyncfunctiongetChannelDataBySearch(params){method:'post',data:mock目錄和src平級，新建constchannelTableData=[];for(leti=0;i<10;i++){id:i,name'名字age:city'城市city'城市functionsearchChannelData(name){constres=[];for(leti=0;i<10;i++)if>