dva开发cnode网站（三）

时间：2023-04-04 01:25:28 Node.js

完成详情页渲染，使用react-markdown渲染先看效果：1在components下新建一个Detail.jsimportReact,{Component}from'react';import{Card,Avatar,Spin,Icon,Comment,Tooltip,List}from'antd';importPropTypesfrom'prop-types';import{connect}from'dva';importReactMarkdownfrom'react-markdown';import'./my.css';classDetailextendsComponent{render(){const{Meta}=Card;返回({typeof(this.props.data.author)=='object'?({this.props.data.title}

}extra={

发表于{this.props.data.create_at}*作者{this.props.data.author.loginname}*{this.props.data.visit_count}次访问*来自分享

(<评论作者={item.author.loginname}avatar={item.author.avatar_url}content={}datetime={item.create_at}/>)}/>):''})}componentWillMount(){const{par}=this.propsthis.props.dispatch({type:'detail/find',payload:{id:par}})}}Detail.propTypes={id:PropTypes.string.isRequired,};函数mapStateToProps(state){const{id,data}=state.detail;return{id,data,loading:state.loading};}//exportdefaultListData;export默认连接（mapStateToProps）（详细信息）；使用了antd中的一些组件，可以去官网参考如何使用。my.css中定义了一些样式，主要是解决markdown渲染后里面的图片太宽的问题，重新设置宽度。一个{文字装饰：无;color:#333;}img{max-width:1300px;}2在models下创建对应的modeldetail.jsimport*aslistServicefrom'../services/list';exportdefault{namespace:'detail',state:{id:'',data:{}},effects:{*find({payload:{id}},{call,put}){constresult=yieldcall(listService.find,{id})yieldput({type:'updateData',payload:{result,id}})}},reducers:{'updateData'(state,{payload:data}){letr=data.result.dataconst{id}=数据返回{...state,id,data:r}}},subscriptions:{setup({dispatch,history}){}},};3在service中添加获取详情的apilist.jsimportrequestfrom'../utils/request';exportfunctionquery({page,pageSize,type}){returnrequest(`/api/v1/topics?page=${page}&limit=${pageSize}&tab=${type}`);}exportfunctionfind({id}){returnrequest(`/v1/topic/${id}?mdrender=false`);}设置mdrender参数为false获取markdown数据，true获取html数据4创建详情页routes/DetailPage.jsimportReactfrom'react';import{connect}from'dva';importHeaderfrom'../components/Header';importDetailfrom'../components/Detail';functionDetailPage(props){const{params}=props.matchreturn(

);}DetailPage.propTypes={};exportdefaultconnect()(DetailPage);使用您自己定义的Header和Detail组件将路由绑定到router.js中的页面：importReactfrom'react';从'dva/router'导入{Router,Route,Switch};从'./routes/IndexPage'导入IndexPage；importDetailPagefrom'./routes/DetailPage';functionRouterConfig({history}){return();}exportdefaultRouterConfig;使用参数路由，在DetailPage.js中，可以从props.match.params中获取id值对于Detail组件5，不要忘记在index.js中注册模型和插件importdvafrom'dva';import'./index.css';importcreateLoadingfrom'dva-loading';//1.Initializeconstapp=dva();//2.Pluginsapp.use(createLoading());//3.Modelapp.model(require('./models/listdata').default);app.model(require('./models/detail').default);//4.Routerapp.router(require('./router').default);//5.Startapp.start('#root');前面两节课忘了提dva-loading，这里需要用到组件中获取loading属性6ListData组件添加路由跳转详情页import{Link}from'dva/router';{item.title}使用Link来做跳转，顺便把我们的Header组件的跳转也改了主页开始使用API关于注册登录大功告成，看看效果吧。欢迎关注我无所不能的公众号mike，了解更多