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

代码更新地址：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页面了