为了账号安全,请及时绑定邮箱和手机立即绑定

【React.js模仿大众点评webapp】实战教程(10)开发详情页

2017.01.22 20:26 5030浏览
商户详情页面的开发

源码地址:
购买实战课程后,在播放视频页面右侧可查看到章节源代码。

页面效果

路由配置

进入路由配置文件./app/router/routeMap.jsx找到详情页的配置代码,可以看到引用的是./app/containers/Detail页面

<Router history={this.props.history}>
    <Route path='/' component={App}>
        ......
        <Route path='/detail/:id' component={Detail}/>
        ......
    </Route>
</Router>

这里简单注意两点

  • App父组件
  • 路由配置中id参数
页面入口

所有的商户详情页,都是在列表页进入的。而所有的列表页,都是通过./app/components/List这个组件来显示的,而List中每一项,又都是Item组件来实现的。

因此在Item组件中,增加一个<Link>作为链接将原来的内容包括起来。

<Link to={'/detail/' + data.id}>
    ...原来的内容...
</Link>
Header

从页面最终效果看来,该页面的头部和选择城市页面的头部完全一样,因此直接可以引用之前的Header组件 (体会一下组件化的好处,抽离出组件即可通用)

<Header title="商户详情"/>
获取后端数据

进入页面之后,首先可以拿到商户的id,然后就可以获取商户的信息了。开发./app/fetch/detail/detai.js,即可看到获取后端数据的接口

// 获取商户信息
export function getInfoData(id) {
   const result = get('/api/detail/info/' + id)
   return result
}

// 获取评论数据
export function getCommentData(page, id) {
    const result = get('/api/detail/comment/' + page + '/' + id)
    return result
}
商户信息模块

看最终效果图,这部分需要获取数据之后再展示数据,完全符合创建subpage的条件。因此在subpage中创建Info.jsx子页面。然后将子页面引用到Detail页面中,并将id传入进去。

<Info id={id}/>

Info子页面中,要根据传入的id获取后端数据,然后传递给一个组件来展示。创建DetailInfo组件,并引用到Info页面中,将获取的数据传递过去。

<DetailInfo data={this.state.info}/>

具体到DetailInfo页面就比较简单了,即把需要展示的信息展示出来即可。最后就是样式。

点评列表

Info子页面一样,点评列表也需要创建一个子页面。在subpage中创建Comment.jsx,并引用到Detail页面中,把商户的id传入。注意,这里还引用了同目录下的一个style.less,不要忘记

<Comment id={id}/>

到这里之后,代码讲解暂停,将Comment子页面相关的代码都直接还原出来,直接看最终的运行效果————上拉加载更多

至此为止,上拉加载更多的页面已经遇到三个:

  • 首页的“猜你喜欢”
  • 搜索结果页的列表
  • 此处的“用户评论”

这里的用户评论跟之前两个的实现方式也是完全一样的,不同的地方在于引用的ListComponent组件不一样。因为列表的样式不一样,这个无可厚非。但是实现逻辑是一样的。但是LoadMore组件是公用的。

  • var ListComponent = require('../../../components/List')
  • var ListComponent = require('../../../components/CommentList')

这里我们当然不会再去赘述开发过程,即便是这里的ListComponent引用的组件不一样,我们也不去挨行写代码来讲了。

这里我们跳出具体的代码实现,考虑一个层次更高的问题 ———— 如何保证这种类似功能或者页面的实现一致性? ———— 即,一个地方实现了,其他类似的地方可以直接引用或者照搬,不必再做不一样的实现。我总结的主要有两点:

  • 后端返回数据的高度统一性,例如都是{data: [...], hasMore: true}这种形式
  • 前端组件的高度拆分和抽象,以便做到最大极限的灵活拼接

最后引出的这个问题,非常重要,可能在不同的项目中就会有不同的解决方案。我根据本次教程的代码总结这两点,对于大家来说也只能是抛砖引玉。最重要的是,大家要学会这种思考方式。

点击查看更多内容
16人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消