当前位置: 首页 > news >正文

引进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

相关文章:

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

我的迭代小系统要更新2点。一是后台需要引进一种导航&#xff0c;众多导航之中我选择了Menu菜单。二是上传图片接口需要新增验证上传图片环节。先看看更新2点后的效果 引进Menu菜单效果如下&#xff0c;这部分修改后台前端代码 引进Menu菜单后&#xff0c;Menu菜单的默认数据我…...

安装Python及pip使用方法详解

一、安装Python Python是一种广泛使用的高级编程语言&#xff0c;其安装过程相对简单。以下是具体步骤&#xff1a; 访问Python官网&#xff1a; 打开浏览器&#xff0c;访问Python的官方网站[python.org](https://www.python.org/)&#xff0c;确保下载的是最新版本的Python安…...

利用Arcgis进行沟道形态分析

在做项目的时候需要学习到水文分析和沟道形态分析的学习&#xff0c;所以自己摸索着做了下面的工作和内容。如有不对请多指正&#xff01;&#xff01; 一、沟道形态分析概述 沟道形态分析是水文分析的一个重要方面&#xff0c;用于研究河流的形态和特征。沟道形态分析可以帮助…...

Excel:vba实现筛选出有批注的单元格

实现的效果&#xff1a;代码&#xff1a; Sub test() Dim cell As RangeRange("F3:I10000").ClearlastRow Cells(Rows.Count, "f").End(xlUp).Row MsgBox lastrow For Each cell In Range("a1:a21")If Not cell.Comment Is Nothing ThenMsgBox…...

RabbitMQ 发布确认模式

RabbitMQ 发布确认模式 一、原理 RabbitMQ 的发布确认模式&#xff08;Publisher Confirms&#xff09;是一种机制&#xff0c;用于确保消息在被 RabbitMQ 服务器成功接收后&#xff0c;发布者能够获得确认。这一机制在高可用性和可靠性场景下尤为重要&#xff0c;能够有效防止…...

【面试题】什么是SpringBoot以及SpringBoot的优缺点

什么是SpringBoot以及SpringBoot的优缺点 什么是SpringBoot SpringBoot是基于Spring的一个微框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。 SpringBoot的优点 可以创建独立的Spring应用程序&#xff0c;并且基于其Maven或Gradle插件&#xff0c;可以创建可执…...

git区分大小写吗?如果不区分,那要如何设置?

git区分大小写吗&#xff1f;如果不区分&#xff0c;那要如何设置&#xff1f; "Git在文件名的大小写方面是区分大小写的&#xff0c;但在某些操作系统&#xff08;如Windows和macOS&#xff09;上&#xff0c;文件系统默认是不区分大小写的。这可能导致一些问题&#xf…...

Docker 安装使用

1. 下载 下载地址&#xff1a;Index of linux/static/stable/x86_64/ 下载好后&#xff0c;将文件docker-18.06.3-ce.tgz用WinSCP等工具&#xff0c;上传到不能外网的linux系统服务器 2. 安装 解压后的文件夹docker中文件如下所示&#xff1a; 将docker中的全部文件&#xff…...

Linux Docker配置镜像加速

Docker配置常用镜像加速地址包含阿里、腾讯、百度、网易 1. 编辑docke配置文件 vim /etc/docker/daemon.json写入以下内容 {"registry-mirrors": ["https://docker.mirrors.aliyuncs.com","https://registry.docker-cn.com","https://mi…...

了解CSS Typed OM

CSS Typed OM&#xff08;CSS Typed Object Model&#xff09;是一项前沿的技术&#xff0c;旨在改变我们编写和操作CSS的方式。以下是对CSS Typed OM的详细解析&#xff1a; 一、CSS Typed OM概述 CSS Typed OM是一个包含类型和方法的CSS对象模型&#xff0c;它暴露了作为Ja…...

[ 钓鱼实战系列-基础篇-6 ] 一篇文章让你了解邮件服务器机制(SMTP/POP/IMAP)-2

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

在 Docker 中搭建 PostgreSQL16 主从同步环境

1. 环境搭建 本文介绍了如何在同一台机器上使用 Docker 容器搭建 PostgreSQL 的主从同步环境。通过创建互联网络和配置主库及从库&#xff0c;详细讲解了数据库初始化、角色创建、数据同步和验证步骤。主要步骤包括设置主库的连接信息、创建用于复制的角色、使用 pg_basebacku…...

SpringCloud无介绍快使用,sentinel服务熔断功能与持久化(二十四)

TOC 问题背景 从零开始学springcloud微服务项目 注意事项&#xff1a; 约定 > 配置 > 编码IDEA版本2021.1这个项目&#xff0c;我分了很多篇章&#xff0c;每篇文章一个操作步骤&#xff0c;目的是显得更简单明了controller调service&#xff0c;service调dao默认安装ngi…...

判断浏览器环境,前端打开微信浏览器

我们知道微信浏览器有自带针对微信的组件(比如&#xff1a;微信JSAPI支付使用的WeixinJSBridge)&#xff0c;那么&#xff0c;有办法在普通浏览器中打开微信浏览器并跳转页面吗&#xff1f;(似乎微信已禁用外部浏览器调用的普通页面直接跳转&#xff0c;只能通过“weixin://前缀…...

【算法笔记】前缀和算法原理深度剖析(超全详细版)

【算法笔记】前缀和算法原理深度剖析&#xff08;超全详细版&#xff09; &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;算法笔记 文章目录 【算法笔记】前缀和算法原理深度剖析&#xff08;超全详细版&#xff09;前言一.一维前缀和1.1题…...

linux之网络子系统- 地址解析协议arp 源码分析和邻居通用框架

一、arp 的作用 ARP&#xff08;Address Resolution Protocol&#xff0c;地址解析协议&#xff09;是将IP地址解析为以太网MAC地址&#xff08;物理地址&#xff09;的协议。在局域网中&#xff0c;当主机或其他网络设备有数据要发送给另一个主机或设备时&#xff0c;它必须知…...

经典动态规划问题:含手续费的股票买卖【从 O(n) 到 O(1) 的优化解析】

题目理解 我们要在给定的股票价格数组 prices 中进行买卖操作&#xff0c;并尽可能多次交易以获取最大利润。每次交易都需要支付一定的手续费 fee&#xff0c;因此我们必须考虑如何通过合适的交易策略最大化利润。 在本题中&#xff0c;每一天可以选择&#xff1a; 不进行任…...

Python画笔案例-088 绘制 滚动的汉字

1、绘制 滚动的汉字 通过 python 的turtle 库绘制 滚动的汉字,如下图: 2、实现代码 绘制 滚动的汉字,以下为实现代码: """滚动的汉字.py """ import time from turtle import * from write_patch import *width,height...

Redis 5.0 安装配置(Windows)

Redis 5.0之后支持Redis Stream等功能 下载地址&#xff1a;Releases tporadowski/redis GitHub 点击运行redis-server.exe 此外&#xff1a;Redis 6.0及以后版本目前都没有Windows版...

金融行业:办公安全防护专属攻略

在中国金融市场快速迈向数字化转型的进程中&#xff0c;数据安全与隐私保护成为了不容忽视的关键议题。面对不断升级的网络威胁和日益严格的监管要求&#xff0c;构建一个既能支持创新又能提供坚实防护的信息安全体系变得尤为重要。亿格云不断深耕办公安全领域&#xff0c;为金…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...