React开发实践（9）实战部分 详情页和登陆功能开发

1、详情页面布局

1、details index.js 写基本样子
2、基本样子包括 DetailsWrapper Header Content
3、写对应的 style.js 
4、页面效果 
复制代码

• index.js

• style.js

2、使用 redux 管理页面数据

1、类似于 home 需要创建 几个基本文件 reducer 中定义初始数据
2、创建好之后 需要将 这个 reducer 放到根路径下的 大的reducer中 
3、然后页面使用 redux 中的数据 
4、查看页面内容 
5、
复制代码

• reducer

• index.js

• 将这个小的 reducer 加到大的 reducer 下  放入之后页面 redux 可以看到数据

• 页面使用 数据

• 页面展示

3、异步获取 数据

1、需要新建一个 模拟数据 getDetails.json 放在 public 下
2、将 reducer.js 里的数据清除 放到 json 中
3、details index.js didMount 需要发请求 拿到数据
4、需要 触发 事件  
5、写 actionCreators.js 
6、更改 reducer.js 数据
7、更新 页面数据
复制代码

• getDetails.json

• details index.js didMount

• actionCreators.js

• reducer.js

• contants.js

• 页面效果 非常的nice ～

4、页面路由参数 如何传递 ？

• 先说第一种动态路由的方式 获取参数

0、找到 List.js 页面 找到跳转到 details 页面的位置 
复制代码

1、App 页面 就需要传递参数 
2、然后 details index.js 拿到 url 上这个 id 并使用 
3、将这个 id 传递给 接口请求时
4、这样 点击不同的 item 发送请求 接口 就会携带 这样的 id 了 
复制代码

• List.js

• App.js

• 然后点击 每个 item 就可 在 url 上展示 对应的数值

• details index.js 拿到 url 的 id 并使用

• 可以在发请求 时就可 传递这个 id 了

• 非常 nice ～
  
• 第二种方法

1、直接?id= 'id'
2、App.js 更改一下
3、details index.js 取数据方式 稍微改一下
复制代码

• List.js
  

• App.js

• details index.js

• 非常nice 页面依旧非常 正常

5、登陆页 布局开始

0、App.js 路由需要 配置一下 
1、新建 login 文件夹 index.js style.js
2、然后 style.js 写一些样式 引入
3、
4、
复制代码

• App.js 路由配置一下

• login index.js

• style.js

• 页面效果 展示

6、登陆功能实现  

1、需要在 login 下新建 store 文件夹 并添加需要的几个文件 
2、然后在 reducer 中 添加一个 字段叫 login
3、在 header index.js 引入这个字段 并判断 
4、需要将 login 的 reducer 放到 大的 store 下的 reducer 中
复制代码

• store

• reducer

• 放到大的 store 中

• header index.js

• 接下来 需要 可以跳转到登陆页面

1、外层添加 Link 
复制代码

• 外层加 link 使得点击登陆 可以跳转到登陆页面
  

• 开始写 登陆页面的逻辑

1、先给两个 input 添加 ref 拿到 value 
  2、点击登陆时 需要添加点击事件
  3、点击事件触发 login 这个需要在 mapDispatchToProps 中定义
  * 模拟后端数据
  4、actionCreators.js 定义 action
  5、constants 定义常量 
  6、完善 reducer.js 处理 变量login 变成 true 
  7、
复制代码

• 拿到 input 的值
  

• 拿到账号密码

• 触发 action

• 模拟后端数据

• actionCreators 产生 action

• 再写一个 action 用来改变 reducer

• reducer.js

• 页面效果 非常nice 点击登陆 login变成 true 登陆--> 退出

• 接下来需要解决 跳转  

1、如果登陆成功 跳转到 / 首页
  2、只需要 在 login 组件内拿到 login 这个值 
  3、使用这个值判断 是否 Redirect 到首页
复制代码

• login 取值
  

• 使用这个值

• 此处有个注意点  Redirect 使用报错 改成 Navigate
  
• 页面效果 非常nice ～
  
• 接下来需要解决  退出  

1、header index.js 拿到 login 
  2、主要是需要引入 login 的 actionCreator 
  3、然后创建一个 logout 
  4、更改 reducer.js 的 login 变成 false
  5、页面效果 
复制代码

• header index.js
  

• logout
  

• reducer.js
  

• 页面效果 非常nice 点击 退出 可以变成登陆状态 ~
  

7、登陆鉴权 和 代码优化  

1、添加 登陆后 可点击写文章
 2、没有登陆 点击写文章时 去登陆页面 
 3、需要添加 一个 write 文件夹 并拿到 loginStatus 状态
 4、App.js 引入 这个路由 
 5、Header 里 Link to='/write' 包裹在 写文章外层 
复制代码

• write  index.js
  

• App.js

• Header index
  

• 未登陆时 点击写文章

• 登陆时 点击写文章

• 非常 nice ～
  

8、异步组件 及 withRouter 路由方法的使用

1、安装 yarn add react-loadable
 2、直接用这个 example 即可 details 文件夹下 添加 loadable.js 文件 
 3、需要修改一下 App.js
复制代码

• 为什么要做的原因 ？

• 添加 loadable.js 文件
  

• 修改 App.js

• 尝试当前效果
  

• 此时 如果 有报错 关于 路由相关的 可以使用 withRouter  帮助这个组件拿到路由信息
  
• 完结 撒花 🎉🎉🎉
  

更多项目请访问 github  github.com/huanhunmao

gitee 项目地址 gitee.com/huanhunmao/…