下面去准备产品内容页面上需要的数据 .. 找到产品页面 .. pages .. product .. show.js .. 在这个文件里先添加一个 componentWillMount .. 在这个方法里可以向后端服务请求需要的数据 ..

里面用一下 this.fetchData ..

在文件的顶部导入之前我们创建的 fetchData 模块 .. 位置是上一级目录的上一级目录 utilities .. fetch-data ..

在页面里面再添加一个构造方法 .. constructor .. 在这个方法里设置一下让 this.fetchData 等于 上面导入的这个 fetchData ..

再去配置一下这个方法的使用 ... 添加一个 resource 属性 .. 它的值设置成 products .. 一会儿可以再改进一下 fetchData 让它支持一个 id 参数 ..

这个参数的值是在页面的参数里面 ... 在上面添加一个 id .. 把它从 this.$router.params 里面解构出来 .. 这个 params 对象里面的东西就是传递的地址参数 ..

然后在 fetchData 里面 .. 添加一个成功回调 .. 名字是 success .. 用一下 this.fetchDataSuccess .. bind 一个 this ..

在上面找个地方再去定义这个方法 .. 名字是 fetchDataSuccess .. 方法接收一个 response 参数 .. 表示请求回来得到的响应 ..

在方法里面 ... 先从 response 里面，把 data 解构出来 ..

下面用一下 this.setState .. 设置一下页面的 state .. 让 product 的值等于响应里的 data 属性的值 ..

然后在这个页面上再去添加一个 state .. 它里面可以有个 product .. 默认的值是一个空白的对象 ..

修改一下页面的视图 .. 在这个 View 里面 .. 绑定输出 product 里的 name ，就是产品的名字 ..

在 render 方法里面 .. 可以把 product ，从页面的 state 里面解构出来 ..

最后还得再去改造一下 fetchData 模块 .. 打开这个模块的定义 .. 在这个 fetchData 函数里面 .. 添加一个 id 参数 ..

下面添加一个 path .. 它的值可以判断一下 id 参数的值 .. 如果 id 参数有值 .. 这个 path 的值可以是 resouce 参数的值 ..斜线 .. 再加上 id 参数的值 .. 如果使用 fetchData 的时候没有传递 id 参数的值 .. 就让 path 的值等于 resource ..

下面这个 path 的值现在可以设置成上面定义的 path 的值 ..

回到模拟器 .. 按一下列表项目 .. 可以打开产品内容页面 .. 页面会去请求对应的产品数据 .. 在这里显示一个请求回来的产品标题 ..