項(xiàng)目實(shí)戰(zhàn)瑞客lesson6

項(xiàng)目實(shí)戰(zhàn)項(xiàng)目實(shí)戰(zhàn)whydva、項(xiàng)目實(shí)戰(zhàn)項(xiàng)目實(shí)戰(zhàn)whydva、roadhog理解UseumiwithlayoutHash路由Hash路由Antdumireactwhy開(kāi)箱即用，內(nèi)置react、react-router完善的插件體系splitting等支持靜態(tài)頁(yè)面導(dǎo)出開(kāi)發(fā)啟動(dòng)快dllumireactwhy開(kāi)箱即用，內(nèi)置react、react-router完善的插件體系splitting等支持靜態(tài)頁(yè)面導(dǎo)出開(kāi)發(fā)啟動(dòng)快dllhard-source-webpack-plugin等一鍵兼容到IE9umi-plugin-融合duckdirectorymodel的自動(dòng)加載、codesplittingroadhogroadhogwebpackwebpackumiroadhog路由，思路類(lèi)似React開(kāi)發(fā)dvaumiroadhog之間并umi+dvadvareduxredux-saga的數(shù)據(jù)流方案，然后為了簡(jiǎn)化開(kāi)發(fā)體驗(yàn)，dvareact-router和dva易學(xué)易用6apiredux用戶(hù)尤其友好，umidvareduxredux-saga的數(shù)據(jù)流方案，然后為了簡(jiǎn)化開(kāi)發(fā)體驗(yàn)，dvareact-router和dva易學(xué)易用6apiredux用戶(hù)尤其友好，umi使用0elm概念reducers,e"ectssubscriptions插件機(jī)制dva-loadingloading，babel-plugin-dva-components、routesmodelsHMR1.Page作輸入，側(cè)重于展示型交互性邏輯ModelPage做數(shù)據(jù)、狀態(tài)的讀DVAredux、redux-sagareact-router的輕量級(jí)前作輸入，側(cè)重于展示型交互性邏輯ModelPage做數(shù)據(jù)、狀態(tài)的讀DVAredux、redux-sagareact-router的輕量級(jí)前e"ect副作用，處理異subscriptionsrouternamespace：model的命名空間，只能用字符串。一model，通過(guò)namespace區(qū)reducerstateaction對(duì)象。action（payload）state。effects：用于處理異步操作（例如：與服務(wù)端交互）action觸發(fā)。但是，它不可stateactionreducerstate actionreducerse"ects的觸發(fā)?，一般是一個(gè)對(duì)象，形如{type:'add',payload:todo，state actionreducerse"ects的觸發(fā)?，一般是一個(gè)對(duì)象，形如{type:'add',payload:todo，typereducer或者e"ect，payload屬性則是數(shù)據(jù)體，用于傳送給reducere"ectUseumiwith自>=umi@2dvaumi-plugin-無(wú)需手寫(xiě)router.jsumimodelcomponent內(nèi)置開(kāi)箱即用dva、dva-loading、react-dom開(kāi)箱即用dva、dva-loading、react-domdva+umisrccomponents組件con!g配置mocktestnode版本node版本新建立一個(gè)空文件夾：mkdirlesson6-進(jìn)入文件夾：cdlesson6-創(chuàng)建：yarncreate安裝依賴(lài)：?jiǎn)?dòng)：yarnstart或者umi其他例子：如umi-antd-mobile建立pages下面的單頁(yè)面umigpage建立文件夾more(默認(rèn)是建立pages下面的單頁(yè)面umigpage建立文件夾more(默認(rèn)是umigpagemore/index--importrouterfrom'umi/router'umi訪問(wèn)index:訪問(wèn)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||'沒(méi)有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對(duì)location.pathlayout。/loginexportdefaultfunction(props)if(props.location.exportdefaultfunction(props)if(props.location.pathname===returnreturn<Header{<Footerumiumi/linkReactimportLinkfromexportdefault()=><Linkto="/list">GotolistimportrouterfromfunctiongoToListPage()importrouterfromfunctiongoToListPage(){更多命令式的跳轉(zhuǎn)方法，詳見(jiàn)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:'請(qǐng)輸入姓名查詢(xún)'}]}<Inputplaceholder="請(qǐng)輸入姓名更新模型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平級(jí)，新建constchannelTableData=[];for(leti=0;i<10;i++){id:i,name'名字age:city'城市city'城市functionsearchChannelData(name){constres=[];for(leti=0;i<10;i++)if>