啊胡

V1

2022/09/18阅读:21主题:绿意

07 接口测试平台 前端页面布局

别人写的平台再垃圾,也是用来淘汰你的。

代码更新地址:https://github.com/ahu965/api-automator.git

Python环境没有的,请自行安装,本教程采用的是python 3.9。

Django官网 https://www.djangoproject.com/

Node环境没有的,请自行安装,本教程采用的是node v17.6.0。

Vue.js官网 https://cn.vuejs.org/

本节主要是进行前端页面布局的确定,后面章节就可以直接向框架中填写具体的内容了。

确定整体布局

首先打开Ant Design Vue,在Components中选择Layout,官网提供了非常多的页面布局样式,可以根据自己的喜好和平台具体的功能选择布局,本教程选择的是以下布局:

src/views/HomeView.vue将作为除登录页外的其他页面的父页面,在官网上将页面代码拷贝到HomeView.vue文件中,然后进行部分语法的样式调整,最终效果如下:

  • 侧边栏用于展示LOGO和菜单
  • 顶栏展示个人信息,包括退出登录等功能
  • Content区域用于展示页面的内容,将使用<RouterView />挂载其他页面

左侧菜单栏数据完善

Ant Design Vue上拷贝的代码是用来演示的,菜单数据都是固定的,因此需要改成动态的。

总体思路是:每个页面如果要进行访问,都需要在src/router/index.js配置路径,所以可以在进入Home页面时获取一次路由列表,然后将需要展示的路由作为菜单信息进行展示。

  • 首先路由配置文件中,在home下新增三个子路由,如下
  • 然后在HomeView文件中新增onMonted()函数,用来在加载home页面时动态获取菜单
let menus = ref([]);

onMounted(() => {
  let routes = router.getRoutes().filter((item) => item.name === "home");
  menus.value = routes[0].children;
});
  • 最后将固定的菜单更换为menus的内容
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
  <a-menu-item v-for="(item, index) in menus" :key="index">
    <span>{{ item.name }}</span>
  </a-menu-item>
</a-menu>
  • 再次启动页面,可以看到能够正常展示菜单数据

引入iconfont图标

与之前样式不同,动态记载的菜单没有展示图标,因为是动态加载的数据所以图标也需要进行动态配置,这里引入阿里巴巴的iconfont图标。官网提供非常多的图标,可以挑选自己喜欢的图标。

  • 在官网上选择自己喜欢的图标,然后点击【添加入库】
  • 保存到自己的项目之后,选择「font class」,然后【下载到本地】
  • 下载完成后解压,将下列样式文件拷贝到项目中的src/asserts/icons/iconfont/目录下
  • src/main.js中引入iconfont样式
// 引入阿里云字体图标css
import "./assets/icons/iconfont/iconfont.css";

  • 在iconfont图标管理页选择【复制代码】,然后在路由中新增icon字段,将复制的代码拷到这里。
  • 之后在HomeView的菜单中使用图标
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
  <a-menu-item v-for="(item, index) in menus" :key="index">
    <a-icon class="iconfont" :class="item.icon" style="margin-right: 10px;"></a-icon>
    <span>{{ item.name }}</span>
  </a-menu-item>
</a-menu>
  • 重启项目,刷新页面,就可以看到图标了

菜单路由功能

菜单样式完成后,最后来完成菜单的路由功能,即点击后可以跳转到对应的页面。

因为项目已经引入了vue-router,所以可以直接使用<router-link>标签进行跳转。

<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
  <a-menu-item v-for="(item, index) in menus" :key="index">
    <a-icon
      class="iconfont"
      :class="item.icon"
      style="margin-right: 10px"
    >
</a-icon>
    <router-link :to="item.path">{{ item.name }}</router-link>
  </a-menu-item>
</a-menu>

重启项目,点击菜单,可以看到右侧内容区域展示之前路由到的AboutView页面了

分类:

后端

标签:

软件测试

作者介绍

啊胡
V1