响应式网站 像素优化培训内容
我的迭代小系统要更新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