api文件夹：用来存放与数据相关的链接，组件所有的数据资源都通过该文件夹中的request.js 获取,不在页面组件中获取，便于以后的操作管理
assets 文件夹：主要用来存放静态资源，像图片，视频之类的资源，达到静态资源的统一操作管理
pages 文件夹：用于放置路由跳转相关的页面
components 文件夹用来放置除去路由页面以外的组件
routes：管理组件的所有路由
技术栈
安装依赖
项目主要功能实现
底部导航栏高亮的实现??
- 实现的效果
- 根据路由的性质，Link 标签中的to属性会改变url的中pathname的值，此处还使用了classnames，在每个组件上添加一个动态的类，当地址包含设置的地址值时，将active效果施加给对应的Link
获取数据??
在线接口工具fastmock,提供一个假接口进行在线模拟ajax请求，实现前端的页面数据展示。
点击前往fastmock
- 实现代码
-
api目录下的request.js只负责做axios的数据请求
-
useEffect中使用async + await 实现数据导入
-
数据导入后通过数组的map方法展示到组件中
轮播图??
- 实现的效果
-
useEffect需要传一个[]即空数组当第二个参数，传空数组则表示轮播图的更新什么都不依赖。
-
swiper轮播实现的：固定的html结构 .swiper-container>.swiper-wrapper>.swiper-slide{n}
模态框??
- 实现的效果
-
父子组价传值：父组件向子组件传值，通过，将父组件的传递给了子组件
-
子组件通过调用父组件传递到子组件的方法向父组件传递消息的。父组件收到参数后将值赋给父组件的state。
父组件 => home组件 通过将方法传递给子组件 => Modal组件
子组件 => Modal 通过调用自己的方法去执行父组件=>home的方法
-
子组件Modal中
只有当时，模态框才得以真正体现
二级路由实现??
- 实现的效果
- 实现的代码
//Stock主页面下的index.jsximport React,{useEffect} from 'react'// import StockDetail from './StockDetail'import StockHead from './StockHead'import StockNav from './StockNav'import { Outlet,useNavigate } from 'react-router'import { Wrapper } from './style'export default function Stock() { const navigate = useNavigate() useEffect(() => { navigate('/stock/curviews') console.log('--------') },[]) return ( )}
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！