引进Menu菜单与新增验证上传图片功能--系统篇

        我的迭代小系统要更新2点。一是后台需要引进一种导航，众多导航之中我选择了Menu菜单。二是上传图片接口需要新增验证上传图片环节。先看看更新2点后的效果

        引进Menu菜单效果如下，这部分修改后台前端代码

        引进Menu菜单后，Menu菜单的默认数据我还没处理，先把第一项一级菜单下的第一项二级菜单改名为上传图片，然后设置为初始选中菜单，然后把vue的v型logo删掉，将剩下的上传按钮和提示放到上传图片菜单对应的响应页面中，接下来看看代码

<script lang="ts" setup>

import type {MenuItemRegistered} from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const selectEvent=(obj:MenuItemRegistered)=>{
  console.log(obj.index)
}

</script>

<template>
    <el-row class="tac">
        <el-col :span="6">
          <h5 class="mb-2">Default colors</h5>
          <el-menu
            router
            default-active="/addImage"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>Navigator One</span>
              </template>
              <el-menu-item-group title="Group One">
                <el-menu-item index="/addImage" @click="selectEvent">上传图片</el-menu-item>
                <el-menu-item index="/users/abc/posts/123">item two</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group Two">
                <el-menu-item index="1-3">item three</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title>item four</template>
                <el-menu-item index="1-4-1">item one</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <span>Navigator Two</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <el-icon><document /></el-icon>
              <span>Navigator Three</span>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><setting /></el-icon>
              <span>Navigator Four</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="18">
        <router-view></router-view>
        </el-col>
      </el-row>
        
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>
        代码内容很多，不过很多都是和这次更新菜单无关，现在我挑出改动部分介绍

        把第一项一级菜单下的第一项二级菜单改名为上传图片，关注如下代码

 <el-menu-item index="/addImage" @click="selectEvent">上传图片</el-menu-item>

        设置初始选中菜单，关注如下代码

        default-active="/addImage"

        将上传按钮和提示放到上传图片菜单对应的响应页面中，关注如下代码

        <el-col :span="18">
        <router-view></router-view>
        </el-col>

        最后再说下，导航是非常重要的东西。如果说在一个技术框架中写个上传功能，对于进阶期只能算是初期的修炼，因为上传功能只是一个功能，当您需要写第2个功能时，2个功能会混在一个页面，久而久之，当您需要快速寻回某一个功能时反而变得很艰难，进阶期初期的修炼成果就不大了，不牢固了。而导航就是解决问题的关键，会使得进阶期初期的修炼成果得到提升，导航可以认为是进阶期中期的东西，对初期成果有提升作用。进阶期后期才是整合功能的时候，修炼初期没必要强行去整合功能到一个页面。

        新增验证图片功能效果如下，这部分后台前端代码没变，仅修改后台后端代码

        注意到按钮下面的提示文字，提示只允许jpg和png图片上传，还要求大小要在500KB以下，代码如下

public function upload()
    {
        $head = new Head2;
        
        $files = request()->file();
        try {
            validate(['image'=>'fileSize:512000'
                . '|fileExt:png,jpeg,jpg|fileMime:image/png,image/jpeg'])
                ->check($files);
            
            $file = request()->file('image');

            $savename = \think\facade\Filesystem::disk('public')
                    ->putFile( 'topic', $file);

            $head->name = $savename;
            $head->save();
            $head_id = $head->getKey();

            return mySuccessResponse([
                'id' => $head_id,
                'name' => $savename,
                'url' => Config::get('app.server_url').'storage/'.$savename
            ]);
            
        } catch (\think\exception\ValidateException $e) {
            return myFailResponse(1, $e->getMessage());
        }
        
    }

        新增验证图片功能，关注如下代码

validate(['image'=>'fileSize:512000'
                . '|fileExt:png,jpeg,jpg|fileMime:image/png,image/jpeg'])
                ->check($files);

        还有一个改变是将直接写的域名归到配置文件中配置，然后再引用，这样做有利于用开发机以外设备进行测试，只需要更改域名为IP。如果要考虑好处，那么将系统部署到多个地方，也缩短域名修改时间等等，关注代码如下

'url' => Config::get('app.server_url').'storage/'.$savename