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

前端付豪
351 阅读4分钟

1、详情页面布局

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

image.png

  • style.js

image.png

2、使用 redux 管理页面数据 

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

image.png

  • index.js

image.png

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

image.png

image.png

  • 页面使用 数据

image.png

  • 页面展示

image.png

3、异步获取 数据 

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

image.png

  • details index.js didMount

image.png

image.png

  • actionCreators.js

image.png

  • reducer.js

image.png

  • contants.js

image.png

  • 页面效果 非常的nice ～

image.png

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

  • 先说第一种动态路由的方式 获取参数 
0、找到 List.js 页面 找到跳转到 details 页面的位置 

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

image.png

  • App.js

image.png

image.png

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

image.png

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

image.png

image.png

image.png

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

image.png

  • 非常 nice ～

  • 第二种方法

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

  • List.js

image.png

  • App.js

image.png

  • details index.js

image.png

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

image.png

5、登陆页 布局开始 

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

image.png

  • login index.js

image.png

  • style.js

image.png

  • 页面效果 展示

image.png

6、登陆功能实现 

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

image.png

  • reducer

image.png

  • 放到大的 store 中

image.png

  • header index.js

image.png

image.png

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

    1、外层添加 Link

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

image.png

image.png

  • 开始写 登陆页面的逻辑 

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

  • 拿到 input 的值

image.png

  • 拿到账号密码

image.png

image.png

  • 触发 action

image.png

  • 模拟后端数据

image.png

  • actionCreators 产生 action

image.png

image.png

  • 再写一个 action 用来改变 reducer

image.png

  • reducer.js

image.png

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

image.png

  • 接下来需要解决 跳转 

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

  • login 取值

image.png

  • 使用这个值

image.png

  • 此处有个注意点 Redirect 使用报错 改成 Navigate

  • 页面效果 非常nice ～

  • 接下来需要解决 退出 

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

  • header index.js

image.png

image.png

image.png

  • logout

image.png

  • reducer.js

image.png

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

7、登陆鉴权 和 代码优化 

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

  • write index.js

image.png

  • App.js

image.png

  • Header index

image.png

  • 未登陆时 点击写文章

image.png

  • 登陆时 点击写文章

image.png

  • 非常 nice ～

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

 1、安装 yarn add react-loadable
 2、直接用这个 example 即可 details 文件夹下 添加 loadable.js 文件 
 3、需要修改一下 App.js
  • 为什么要做的原因 ？

image.png

  • 添加 loadable.js 文件

image.png

  • 修改 App.js

image.png

  • 尝试当前效果

image.png

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

  • 完结 撒花 🎉🎉🎉

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

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

avatar
文章
阅读
粉丝