Python测试开发之前端二

书接上回

XEUtils通用函数库

xe-utils提供了一套实用的基础函数、任意格式的日期转换函数，浏览器相关操作函数等。提供了100多个函数，应有尽有。总之，如果你有判断、处理、转换的一些需求，尽管来这里找找看

官网地址：https://gitee.com/x-extends/xe-utils

API文档：https://vxeui.com/xe-utils/#/start/useUtil/install

安装：

npm i xe-utils

导入

import XEUtils from 'xe-utils

然后，我们可以直接在此目录下，创建一个Demo1.mjs文件，导入然后进行简单运行

然后我们举一个树形结构的例子

import XEUtils from 'xe-utils'
let list1 = [
                  {id: 1, name: '111'},
                  {id: 2, parentId: 1, name: '222'},
                  {id: 3, name: '333'},
                  {id: 4, parentId: 2, name: '444'}
                ]
const abc=XEUtils.toArrayTree(list1)
//onsole.log(abc)
console.log(JSON.stringify(abc))

运行之后的结果

我们把返回结果摘出来，可以很清晰的看出来结构

我们再看下查找树

var tree1 = [
    { id: 1 },
    {
    id: 2,
    children: [
        { id: 0 }
    ]
    },
    {
    id: 3,
    children: [
        {
        id: 30,
        children: [
            { id: 3001 }
        ]
        },
        { id: 31 }
    ]
    }
]
const abc = XEUtils.searchTree(tree1, item => item.id === 3)
console.log(JSON.stringify(abc))

运行结果

我们也很清楚的能看到返回的这个树的结构

动态菜单

这里的动态菜单指的是我们这里的菜单

也就是说，我们要实现的是 这里的菜单，要通过接口返回的形式动态获取

那么，我们就基于在登陆成功你之后进行获取，也就是点击登录的时候去获取

首先我们在api.js文件中添加获取菜单权限的接口

然后我们调用获取菜单的API

然后再将菜单数据转化成树型结构

最后将树型菜单存储到localStorage

这两个步骤，其实就是我们要封装的函数对应要处理的数据

最后，我们看下效果，我们登录之后，看到了，接口返回的效果

并且本地存储也会有

既然我们已经获取到了菜单，那么，接下来，我们就需要使用这个菜单了，我们将使用这个菜单也封装为一个组件，创建一个文件

我们在SideBar里面导入注册SideBarItem

接下来我们就要在SideBarItem里面进行循环遍历和使用接口返回的菜单了

我们将其分为有子菜单和无子菜单的情况

调用获取菜单方法并对结果进行转化

我们看下效果

我们发现 ，这里的菜单，已经是接口返回对应的菜单了

全局路由守卫

这个路由守卫的意思就是，我们在开发过程中，很多页面我们都是直接通过页面路径链接直接跳转到对应页面进行开发的，但是，在实际的应用页面，我们在通过路径访问的时候，我们要做判断，是否能够访问该页面，就比如说，如果不存在登录态，那么，我们就让它返回到登录页面

路由，我们直接在router/index.js页面进行添加代码即可

面包屑的开发

我们之前讲到过，展开和手收起的联动，类似于该场景，当我们选择不同的菜单的时候，面包屑位置也应该动态的展示我们选中的菜单，这就是本次我们要实现的功能场景

同样的道理，我们在common文件中创建一个vue文件

我们获取当前路径，在当前路径也就是当前树结构中查找数据

同时，在这里进行展示获取的信息

在NvaBar中，我们删除之前的写死的数据，并引入 BreadCrumb

我们看下效果

多TAB选项卡场景开发

多tab场景就有些类似于下面图片的场景

我们创建一个多TAB的vue组件

我们可以先固定写几个tab

然后激活并处理这几个tab

再在模板里面去引用

我们看下效果

当我们要通过点击菜单来进行实现的时候，我们就需要使用到状态管理进行实现

内容页布局组件

在业务系统中，业务功能菜单展示的内容，大部分布局是：上、中、下三栏布局，即顶部搜索区、中间数据表格、底部数据分页。因此，我们可以单独创建一个内容页面组件(MainLayout)。在该组件中，再单独引入Search、Tables、Paginator三个子组件

跨组件通讯

目前，我们组件之间的数据通信，还停留在父传子，子传孙的情况，

但是如果组件的层级过深，这种方式就不合适了。

因此vue推出了另种数据传递方式，Provide/Inject，

具体可以参考以下内容

https://cn.vuejs.org/guide/components/provide-inject#处理响应性

https://cn.vuejs.org/api/composition-api-dependency-injection#设想场景

跨组件通讯语法是使用Provide（提供）和Inject（注入）进行数据传递

父组件可以作为所有子组件的依赖项提供数据，而不管组件层次结构有多深。

这种特性有两个部分：

父组件有一个Provide选项用于提供数据；

子组件有一个Inject选项用于接收这个数据。

在父组件setup函数中使用Provide方法时，

首先要从Vue中导入Provide方法，

然后在调用Provide方法时，定义每个属性。

Provide方法有两个参数：属性名（String 类型）属性值

例如：provide( 'name' , '张三' )

其中，name为属性名，属性值为：张三

Inject方法

在子组件setup函数中使用Inject方法时，

首先要从Vue中导入Inject方法，

然后就可以调用Inject方法接收父组件传递过来的数据。

Inject方法有两个参数：

要注入的属性名默认的值（可选）

例如：const realName = inject( 'name', '某某' )

其中，变量realName用于接收Provide提供的name数据，如果没有接收到，则默认值为某某

我们以表格主键为例，也就是说，我们来封装表格组件

在components/common/下，创建Tables.vue组件

模板我们使用如下数据

其中：

data 属性：绑定的数据，是一个对象数组

prop 属性：显示的数据列

label 属性：显示的标题

绑定的数据

表格组件，

需要的响应式变量有：

columns：需要显示的列头，是一个对象数组

tableData：需要显示的数据，是一个对象数组

multiple：是否需要多选框

ids：数组类型，多选时用，表示已经勾选的数据ID

defaultImg：缺省头像图片，即：当头像图片为空时，显示此图片

触发的事件

selection-change事件：当选择项（多选）发生变化时会触发该事件

这里并没有实现太多，只有列和接收数据

这里主要是inject接收数据

对于搜索组件时同样的道理，我们上代码

同样的也是用来接收组件

对于提供方我们看下

我们最终来看下效果