您的位置:首页 > 财经 > 产业 > 编程猫下载_长沙优化公司_怎么推广软件让别人下载_重庆森林电影

编程猫下载_长沙优化公司_怎么推广软件让别人下载_重庆森林电影

2024/11/16 3:08:58 来源:https://blog.csdn.net/xiaohuatu/article/details/142965325  浏览:    关键词:编程猫下载_长沙优化公司_怎么推广软件让别人下载_重庆森林电影
编程猫下载_长沙优化公司_怎么推广软件让别人下载_重庆森林电影

        我的迭代小系统要更新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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com