项目实战瑞客lesson6

项目实战项目实战whydva、项目实战项目实战whydva、roadhog理解UseumiwithlayoutHash路由Hash路由Antdumireactwhy开箱即用，内置react、react-router完善的插件体系splitting等支持静态页面导出开发启动快dllumireactwhy开箱即用，内置react、react-router完善的插件体系splitting等支持静态页面导出开发启动快dllhard-source-webpack-plugin等一键兼容到IE9umi-plugin-融合duckdirectorymodel的自动加载、codesplittingroadhogroadhogwebpackwebpackumiroadhog路由，思路类似React开发dvaumiroadhog之间并umi+dvadvareduxredux-saga的数据流方案，然后为了简化开发体验，dvareact-router和dva易学易用6apiredux用户尤其友好，umidvareduxredux-saga的数据流方案，然后为了简化开发体验，dvareact-router和dva易学易用6apiredux用户尤其友好，umi使用0elm概念reducers,e"ectssubscriptions插件机制dva-loadingloading，babel-plugin-dva-components、routesmodelsHMR1.Page作输入，侧重于展示型交互性逻辑ModelPage做数据、状态的读DVAredux、redux-sagareact-router的轻量级前作输入，侧重于展示型交互性逻辑ModelPage做数据、状态的读DVAredux、redux-sagareact-router的轻量级前e"ect副作用，处理异subscriptionsrouternamespace：model的命名空间，只能用字符串。一model，通过namespace区reducerstateaction对象。action（payload）state。effects：用于处理异步操作（例如：与服务端交互）action触发。但是，它不可stateactionreducerstate actionreducerse"ects的触发器，一般是一个对象，形如{type:'add',payload:todo，state actionreducerse"ects的触发器，一般是一个对象，形如{type:'add',payload:todo，typereducer或者e"ect，payload属性则是数据体，用于传送给reducere"ectUseumiwith自>=umi@2dvaumi-plugin-无需手写router.jsumimodelcomponent内置开箱即用dva、dva-loading、react-dom开箱即用dva、dva-loading、react-domdva+umisrccomponents组件con!g配置mocktestnode版本node版本新建立一个空文件夹：mkdirlesson6-进入文件夹：cdlesson6-创建：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首先创建umigpage创建父组件umigpageofLayout/_layout创建父组件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,使用状态：state使用状态：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>