智能点餐系统项目总结（2）

红色  重点

紫色  问题

知识点回顾：

    react中的跳转逻辑+传参逻辑

1、关于跳转

•    在项目的初步，先写好跳转逻辑。项目组的其它成员就可以根据这个跳转到对应的页面，方便于查找到对应的页面+方便查看整体的效果。（整体效果的查看很重要！！不然后期要修改很久）
• 在App.js中，使用Router进行导航。先是HashRouter进行全包裹，然后div中是页面中显示的跳转按钮，Routes显示的跳转的逻辑。（Link to=/AIndex"）就是跳转到AIndex中。
• 如果要查看整体的效果，可以将div整体display:'none'。就可以查看出没有导航栏的效果。
• 在其它页面的跳转，根据navigate进行。import { useNavigate } from 'react-router-dom';

2、关于传参

 从其它页面调转的时候希望带参数进行传递。

      

react中的数据更新问题（会出现数据更新后但是没有立刻显示在页面中，反应比较慢）

1、用户的个人中心（可以在表格中显示数据并且直接在表格中进行更改）

2、使用echarts时，遇到在option的时候就已经画好了图表，导致数据其实还没有加载完就画好图了。

方法：使用loading setLoading。就是添加一个加载，在完全获取完数据后再setLoading.

方法二：直接使用强制页面刷新的方法，就是在获取数据的那一刻进行强制刷新。（这种方法更适用于在编辑页面后进行强制更新。）

就是开始设置setLoading（true），然后在axios获取数据之后，再使用finally,setLoading(false)进行加载的取消，如果一直在加载，就返回提前写好的一个加载逻辑。

这样就能保证展示的时候有数据。

关于Fecharts页面

1、从后台获取数据后按照日期从大到小的排序

res.data.sort((a,b)=>new Date(b.orderDate)-new Date(a.orderDate));

先提取日期信息（作为图表的x轴坐标）

const orderDates=res.data?.map(item=>item.orderDate);

再提取金额信息（作为图表的展示数据）

const dayCount=res.data?.map(item=>item.totalMoney);

将数组转换成对象，其中的每个键是订单的日期，对应的值是一个对象，包含了该日期的总收入。

reduce方法是一个高阶函数，对数组进行累加操作。接受一个回调函数和一个初始值。回调函数的参数包含累加器和当前元素.

如果res.data中有多个对象的orderDate相同，后面的记录会覆盖前面的记录。

如果是希望按日期汇总收入，而不是覆盖，可以修改成下面的代码：

注意：echarts使用的时候，一定要转换成其能够使用的数据格式。

//转换成符号条件的格式

 const data=res.data;

const salesDataM=data?.map(item=>({

value:item.dishcount,//销量

name:item.dishname //菜品分类

category:'销量'  //固定分类

})

找到销量最高的菜品名

const highSalesDish=data.reduce((max,current)=>{

return current.dishcount>max.dishcount?current :max;

})

初始化：

使用：

salesChartRef是一个Ref,用于引用一个DOM元素（通常是一个<div>）这个元素是ECharts图表的容器。

• if(salesChartRef.current)确保只有在容器元素存在时候才执行后续代码。
• 初始化EChartt图表，const chart=echarts.init(salesChartRef.current)  使用ECharts的init方法初始化图表，传入容器元素salesChartRef.current.
• 配置图表选项：const options

关于图表的设置问题;

data就是salesDataA.map就是遍历完item，并且itemStyle就是给每一个item设置对应的样式。

折线图（包含x轴和y轴）