qq_35991370的博客

通过pinia的store来进行组件状态的统一管理，包括点击侧边栏实现tab页面的切换，这样大家都可以共用到这个组件的状态信息，就可以实现组件的联动

通过使用element-plus的tab插件来实现系统中比较常用的tab主题切换，内容也一同进行切换，是一个比较重要的功能。具体包括组件的引入、创建、编辑和与目前路由的联动。

本节通过构建用户编辑的接口，进行mock拦截，触发点击事件并重复利用新增用户的dialog的页面进行用户编辑窗口功能的实现

本节通过点击事件，对于用户进行新增的操作，期间还是用到了mock进行拦截以及对于日期格式的处理。

本节通过构建dialog对话框来实现新增用户的功能，通过rules的属性来进行表单的规范校验

本节主要介绍了如何进行用户删除的操作，包括前端点击事件的编写、删除逻辑的编写，如何从前端获取用户的数据、如何将数据进行拦截并进行提示等，具有很强的操作意义

本节将实现用户分页的功能，点击不同的页码，展示不同页码下的用户数据，重点可以学习到分页组件的相关属性和方法的使用

实现用户搜索的功能，输入关键字，可以搜索出对应的用户信息

本小结通过使用api的接口，通过mock进行拦截，同时通过mock生成200个用户的假数据来进行展示，最后通过在前端对表头和表格数据进行渲染，实现前端的表格的动态接口展示。

本节主要阐述了如何创建用户管理的页面以及进行搜索框和用户管理表格的静态实现，具体包括：创建跳转路由、创建user的页面，使用elementplus的表格组件代码来构建静态页面，样式调整的方式等，有很强的实践意义。

本文详细介绍了通过监听模块来对图形大小进行动态的调整，主要阐述了ResizeObserver API 的使用方式，包括1、创建观察者；2、定义监听回调；3、定义观察的目标对象；4、取消观察

1、Object.keys的用法是取出数组里面的属性的名称，如：{name: "张三", age: 25}，输出["name", "age"],这里的Object.keys(orderData.data[0])的结果就是：[苹果、小米、华为等]一、在HOME.VUE里面通过card容器来进行渲染。使用echarts进行折线图、柱状图和饼图的渲染。

总结：首先安装echarts的组件，接着在API中添加getchartData的数据、准备mock拦截后的请求数据、添加拦截路径和新的请求方法，最后在前端通过axios实例调用API的接口来获取数据，如果在网页检查元素中能够获取到这个数组就表明已经成功了。echarts官网https://echarts.apache.org/handbook/zh/get-started/通过echarts的组件来进行前端的图表，包括折线图、柱状图和饼图的渲染。使用正则表达式来匹配getChartData的路径。

目标：本节实现的是右侧汇总卡片数据的展示，意义：将熟练掌握数据接口的制作以及卡片的前端布局，是较为经验的前端展示方式，有很强的实践意义。

这个的好处是：在配置文件中进行了一个全局的mock的设置，但是我们在具体的api接口中需要单独的进行mock的打开和关闭，就可以通过后面的这个设置来实现。（1）关于get请求参数的调整，因为在axios里面如果是get请求，传的是param，如果是put请求，传的是data，因此将api里面传的数据全部用data来写，就要进行相应的转换。，这个单独的api的接口就会被拦截：例如：getTableData里面设置了false，则getTableData的数据将会被拦截，然后使用的是home里面的数据。

如果在HOME.VUE里面去写axios，那么每次拦截一个请求都要写一段代码，非常的不方便，因此要进行axios的二次封装，将它放到一个公共的位置里面，就能够对公共的请求进行处理，后续代码就很容易进行管理。4、然后就可以将原来在HOME.VUE里面写的axios的代码给删除了，统一使用api下面的request和api里面封装的axios的代码了，这样也可以从我们设置的接口取到数据。1引入getcurrentinstance。2、创建proxy创建实例。

最终的效果，原来表格使用的是HOME.VUE里面静态的表格数据，现在使用的是axios接口里面，被mock拦截的制造的数据；只要将main.js里面的mock注销，那前端页面又会回到HOME.VUE里面使用静态数据的状态，大家可以切换了看下效果。这个是拦截器的开关，当我们需要制造假数据，验证我们写的接口是否可用的时候就可以添加下面这个注册语句，如果使用的是真实的接口就把下面的语句注销就行。axios官网：https://www.axios-http.cn/docs/intro。

v-for的使用在本次表格的渲染和aside侧边栏的导航中的用法基本相同，需要掌握呢。在coloum的属性里面进行遍历，要不效果是出不来的，只会显示一串乱码。

同样，回顾一下，我们可以看到在App.vue里面我们就进行过了路由的http://localhost:5173/#/ 根目录的入口的植入。实现当我们到http://localhost:5173/#/的这个根目录的时候进行自动的跳转到home的页面，要在router-index.js里面增加重定向的功能。--设置折叠的过渡样式，如果是false就是立即折叠，如果是true就是慢慢的折叠，因此我们需要的是快速的折叠-->3、就是鼠标放上去的阴影效果，就是将鼠标移上去的时候会有一个阴影的效果。

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的。3、编辑components下的CommonHeader.vue：获取左侧导航组件的状态，并定义点击折叠的动作。pinia官网：https://pinia.vuejs.org/zh/core-concepts/1、编辑components下的CommonAside.vue。来共享一个全局状态。

准备好了右侧头部导航栏的页面之后，当然是要引入才能在整体的大框架中看得到呢：大框架就是main.vue的这个框架页面：通过在main.vue里面引用这两个vue页面，来插入到真正的main的主页面中，关联关系是在这。align-items是指文字是中间对齐。4、首页导航引入面包屑的组件代码，并进行样式的调整，注意：这里面再次用到了调用照片的小技巧，大家可以熟悉下呢，这个技巧多次都用到的呢。2、布局的话，分了左右两个盒子：采用了space-between的布局，这样首页就可以在最左边，退出就能在最右边了。

这两行的意思是在我定义的数组里面，可以进行筛选，第一个将没有children的数组的数据返回出来，第二个是将有children的数组的数据返回出来，就比较的灵活了，这个应该是属于一个技巧了，左侧导航栏的展示内容就可以进行动态的修改，只要修改我们的list数组就行。进行循环的修改，其中运行后报错，最主要是要看检查元素-控制台-下面的报错信息-点击后可以直接定位到代码的哪一行，还是非常的方便的呢。在vue的主页面上如果是化了线的就基本上是有问题，要检查下拼写是否正确以及英文和中文的字符、空格等的问题；

1、在src里面新建一个router的文件夹，在router的文件夹里面新建index.js的文件，添加路由的信息并将路由暴漏出来，为之后的引用做准备；其实mian.js的文件就是进行引用的：现在要引用的就是router的路径，然后这个APP采用这个路径的文件；5、由于是动态更新的，因此直接在浏览器中进行查看显示，如果显示的是main的页面就证明已经完成了相应的配置，所有的代码都是对的。2、在src文件夹下面建立views的文件夹，并在下面建立Main.vue的文件，将APP.vue的内容copy到里面。