写一个完整前后端分离项目二

该节主要内容：布置vue页面样式，设置路由，写一个上传下载功能

前端页面和路由

整一个好看的vue页面

1.创建好相关文件夹和文件
components下创建一个api文件夹，里面创建hw.js
components下创建一个vue文件夹，里面创建downloadFile.vue和uploadFile.vue

2.访问Ant Design Vue官网选取页面样式，并将样式应用到HelloWorld.vue页面
我选的最后一种基本布局

前端引用该框架代码HelloWorld.vue
给位尽量自己引用试试，不要上来就复制我的代码，自己引用成功后，想怎么布局就怎么布局

<template>
  <div>
    <div id="components-layout-demo-basic">
      <a-layout>
        <a-layout-sider>
          <div>
            <a-menu
              :default-selected-keys="['1']"
              :default-open-keys="['sub1']"
              mode="inline"
            >
              <a-menu-item key="1">
                <a-icon type="pie-chart" />
                <span>
                </span>
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="desktop" />
                <span>
                </span>
              </a-menu-item>
              <a-menu-item key="3">
                <a-icon type="inbox" />
                <span>Option 3</span>
              </a-menu-item>
              <a-sub-menu key="sub1">
                <span slot="title"
                  ><a-icon type="mail" /><span>Navigation One</span></span
                >
                <a-menu-item key="5"> Option 5 </a-menu-item>
                <a-menu-item key="6"> Option 6 </a-menu-item>
                <a-menu-item key="7"> Option 7 </a-menu-item>
                <a-menu-item key="8"> Option 8 </a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub2">
                <span slot="title"
                  ><a-icon type="appstore" /><span>Navigation Two</span></span
                >
                <a-menu-item key="9"> Option 9 </a-menu-item>
                <a-menu-item key="10"> Option 10 </a-menu-item>
                <a-sub-menu key="sub3" title="Submenu">
                  <a-menu-item key="11"> Option 11 </a-menu-item>
                  <a-menu-item key="12"> Option 12 </a-menu-item>
                </a-sub-menu>
              </a-sub-menu>
            </a-menu>
          </div>
        </a-layout-sider>
        <a-layout>
          <a-layout-header style="height: 150px">
            <a-page-header title="Title" sub-title="This is a subtitle">
              <!-- @back="() => $router.go(-1)" -->
              <template slot="tags">
                <a-tag color="blue"> Running </a-tag>
              </template>
              <template slot="extra">
                <a-button key="3"> 上传 </a-button>
                <a-button key="2"> 下载 </a-button>
                <a-button key="1" type="primary"> 奥里给 </a-button>
              </template>
              <a-row type="flex">
                <a-statistic title="作者" value="L" />
                <a-statistic
                  title="指导老师"
                  prefix="@"
                  value="L"
                  :style="{
                    margin: '0 32px',
                  }"
                />
                <a-statistic title="吃瓜群众" prefix="@" value="各位" />
              </a-row>
            </a-page-header>
          </a-layout-header>
          <a-layout-content style="height: 650px">
            <div>
            </div>
          </a-layout-content>
          <a-layout-footer style="height: 120px">
            <div>
              <h1>---热烈欢迎 吃瓜群众 前来参观指教---</h1>
            </div>
          </a-layout-footer>
        </a-layout>
      </a-layout>
    </div>
    <upl