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

相关推荐
TE-茶叶蛋15 分钟前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
遇到困难睡大觉哈哈20 分钟前
CSS中的Element语法
前端·css
Real_man26 分钟前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中27 分钟前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术29 分钟前
日历插件-FullCalendar的详细使用
前端·javascript
咔咔一顿操作31 分钟前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
LuckyLay2 小时前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu1682 小时前
aksk前端签名实现
java·前端·javascript
烛阴2 小时前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw02 小时前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript