和chatgpt学架构05-首页开发

我们上一篇只是简单写了一个首页，作为一个系统的管理后台，首页相对复杂，既包含菜单导航，又需要根据菜单显示具体的页面。我们本篇就让chatgpt帮我们生成一下首页。

首页提示词

要想让chatgpt帮你生成代码，需要给出明确的需求，下边是我们的提示词

帮我用vue3、elementplus写一个管理后台的首页，要用布局组件，分为侧边栏、顶部、主内容、底部，侧边栏主要是放菜单，外层是滚动容器，内层是menu，menu的一级菜单为首页、分类管理、商品管理、系统管理，系统管理的二级菜单为用户管理、角色管理、菜单管理。顶部用div包裹，是flex布局，水平对齐方式为两端对齐，内容左边放置一个图标，右侧放置用户的姓名，点击姓名出现子菜单，子菜单为个人中心，退出登录，主内容区域放置一个表格，底部显示版权信息

这是第一版生成的代码

<template>
  <div class="admin-home">
    <div class="sidebar">
      <el-scrollbar>
        <el-menu :default-active="activeMenu" class="menu" router>
          <el-menu-item index="home">首页</el-menu-item>
          <el-submenu index="management" v-if="showManagement">
            <template #title>分类管理</template>
            <el-menu-item index="category">商品分类</el-menu-item>
            <el-menu-item index="product">商品管理</el-menu-item>
          </el-submenu>
          <el-submenu index="system" v-if="showSystem">
            <template #title>系统管理</template>
            <el-menu-item index="user">用户管理</el-menu-item>
            <el-menu-item index="role">角色管理</el-menu-item>
            <el-menu-item index="menu">菜单管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </div>

    <div class="main-content">
      <div class="top">
        <div class="logo">
          <!-- 放置图标 -->
        </div>
        <div class="user-info" @click="toggleSubMenu">
          {
    
    {
    
     userName }}
          <el-dropdown v-model="subMenuVisible">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

      <div class="content">
        <!-- 放置表格 -->
      </div>

      <div class="footer">
        版权信息
      </div>
    </div>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      activeMenu: 'home',
      showManagement: true,
      showSystem: true,
      userName: 'John Doe',
      subMenuVisible: false,
    };
  },
  methods: {
    
    
    toggleSubMenu() {
    
    
      this.subMenuVisible = !this.subMenuVisible;
    },
  },
};
</script>

<style>
.admin-home {
    
    
  display: flex;
}

.sidebar {
    
    
  width: 200px;
}

.menu {
    
    
  width: 100%;
}

.main-content {
    
    
  flex-grow: 1;
  padding: 20px;
}

.top {
    
    
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
    
    
  /* 样式 */
}

.user-info {
    
    
  cursor: pointer;
}

.content {
    
    
  /* 样式 */
}

.footer {
    
    
  /* 样式 */
}
</style>

生成的代码是用div布局的，我们希望使用elementplus的container布局，重新补充一下提示词

使用container布局

上述代码中，布局组件需要用Container布局容器再重新改一下

<template>
  <el-container class="admin-home">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-active="activeMenu" class="menu" router>
          <el-menu-item index="home">首页</el-menu-item>
          <el-submenu index="management" v-if="showManagement">
            <template #title>分类管理</template>
            <el-menu-item index="category">商品分类</el-menu-item>
            <el-menu-item index="product">商品管理</el-menu-item>
          </el-submenu>
          <el-submenu index="system" v-if="showSystem">
            <template #title>系统管理</template>
            <el-menu-item index="user">用户管理</el-menu-item>
            <el-menu-item index="role">角色管理</el-menu-item>
            <el-menu-item index="menu">菜单管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header class="top">
        <div class="logo">
          <!-- 放置图标 -->
        </div>
        <div class="user-info" @click="toggleSubMenu">
          {
    
    {
    
     userName }}
          <el-dropdown v-model="subMenuVisible">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-main class="content">
        <!-- 放置表格 -->
      </el-main>

      <el-footer class="footer">
        版权信息
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      activeMenu: 'home',
      showManagement: true,
      showSystem: true,
      userName: 'John Doe',
      subMenuVisible: false,
    };
  },
  methods: {
    
    
    toggleSubMenu() {
    
    
      this.subMenuVisible = !this.subMenuVisible;
    },
  },
};
</script>

<style>
.admin-home {
    
    
  height: 100vh;
}

.top {
    
    
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
    
    
  /* 样式 */
}

.user-info {
    
    
  cursor: pointer;
}

.content {
    
    
  /* 样式 */
}

.footer {
    
    
  /* 样式 */
}
</style>

代码看上去问题不大，我们把代码贴入我们的HomePage中，然后启动一下工程

这里提示一个错误

  33:31  error  `slot` attributes are deprecated  vue/no-deprecated-slot-attribute

我们问一下chatgpt是啥问题

这个错误是由Vue的ESLint规则vue/no-deprecated-slot-attribute引起的。它指出在Vue 3中，slot属性已被弃用，不再建议使用。相反，你应该使用新的语法来定义和使用插槽。

在Vue 3中，插槽使用新的v-slot指令来定义和引用。例如，以前的写法是：

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

在Vue 3中，应该使用v-slot指令来重写上面的代码：

如果你在Vue 3项目中遇到了这个错误，请根据新的语法规则重写相关代码，以避免使用已经被弃用的slot属性。这样可以确保你的代码与Vue 3兼容，并且不会产生任何警告或错误。

那搜索一下我们代码中哪个地方是由solt的

主要是下拉菜单这有问题，这就需要回到官方文档，我们看看示例是如何写的

https://element-plus.org/zh-CN/component/dropdown.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95

按照官方文档将下拉菜单的代码改为如下

 <el-dropdown v-model="subMenuVisible">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

访问首页http://localhost:8080，目前的效果是这样的

现在的问题有四个，点击菜单打开了新页面，我们希望是点击菜单，表格内容在主内容区域显示。图标没有正常显示出来，而且页面有纵向的滚动条，再就是菜单的顺序不对，现在是罗列的菜单，没有形成层级关系。

正确的显示菜单的层级

查看官方文档

https://element-plus.org/zh-CN/component/menu.html#%E4%BE%A7%E6%A0%8F

主要是因为子菜单的标签不对，正确的代码应该是

 <el-menu :default-active="activeMenu" class="menu" router>
          <el-menu-item index="home">首页</el-menu-item>
          <el-sub-menu index="management" v-if="showManagement">
            <template #title>分类管理</template>
            <el-menu-item index="category">商品分类</el-menu-item>
            <el-menu-item index="product">商品管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="system" v-if="showSystem">
            <template #title>系统管理</template>
            <el-menu-item index="user">用户管理</el-menu-item>
            <el-menu-item index="role">角色管理</el-menu-item>
            <el-menu-item index="menu">菜单管理</el-menu-item>
          </el-sub-menu>
        </el-menu>

图标显示不正常

我们需要使用elementplus的图标组件，先需要安装对应的包

npm install @element-plus/icons-vue --save

安装好了之后需要在main.js中引入

import {
    
     createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router/index.js';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)

app.use(ElementPlus)
app.use(router);
app.mount('#app')
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    
    
    app.component(key, component)
  }

然后调整一下header中的代码

<div class="user-info" @click="toggleSubMenu">
          {
    
    {
    
     userName }}
          <el-dropdown v-model="subMenuVisible">
            <el-icon><CaretBottom /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>

解决纵向滚动条的问题

查看页面源代码，滚动条主要是因为body设置了外边距的原因导致的。我们需要添加全局样式来覆盖body的默认样式。在assets目录下新建styles文件夹，里边新建global.css，并写入如下样式

body {
    
    
    margin: 0;
  }

限于篇幅的问题，我们菜单打开新页面的问题放在下一节中解决。