展示图片--系统篇

        这个标题包含了系统篇3个字，是什么意思呢？我在这里做出解释，系统篇意指包含前台和后台的关联性功能实现，同时重心放在逻辑解释上。

        可能会有人好奇，既然有系统篇，那么相对系统篇还有哪些篇呢？这里我就按照商业价值从小到大罗列几个不同种类的篇章，帮助读者选择性地阅读我的文章。（如果要发布成一本书，这里就相当于序言。）就像修炼一样，划分不同的境界，每个境界有特定的标识。分别还有入门篇、进阶篇、接口篇。也就是按照商业价值从小到大分别是入门篇、进阶篇、接口篇、系统篇。

        现在解释下每个篇的含义。系统篇在第一段已经解释过了，后面就不重复解释了。入门篇意指某种技术框架学习前所涉及的一些安装、配置、工具等支撑性东西的介绍。进阶篇意向某种技术框架的技术点的语法用法解释。接口篇意指前端后端数据交换的展示、解释等，目前接口篇我没在标题中标明，只是在标题中涵盖了前端和后端的框架名。

        回归本篇文章正题，展示图片。这里的展示图片指的是前台展示图片，为了配合前台展示图片，还实现了后台上传图片和删除图片，下面先展示下后台效果图和前台效果图，帮助读者建立一个感性的认识。

        这是后台效果图

        这是前台H5端的效果图

        这是前台抖音小程序端的效果图

        后台效果图中那个V字logo图不用看，这是建立工程时自带的展示，我没有删掉。

        后台效果图是一个PC端的浏览器的展示界面，重点看圈出来的写着Click to upload的按钮，这个按钮就是负责上传图片功能的，点击这个按钮会弹出选择图片的窗口。图中还展示了3张上传好的图片，没上传之前是空白的，其中鼠标移到第2项上传好的图片提示项中就会显示出这一项圈出来的删除交叉符。点击这个删除交叉符这里还实现了删除图片功能。

        前台效果图有2张，以抖音小程序效果图为例介绍就好。

        抖音小程序效果图展示了两部分内容，一部分是导航，导航是通过一个底部tabbar展示，点击组件项后所看到的页面，这个不是首页。然后在组件页内置一个tabbar，然后点击Posts页再看到如今的效果图。第二部分就是Posts页下图片列表的展示。

        这里再介绍下所用到的技术框架，前台前端使用uniapp框架，后台前端使用Vue3+ElementPlus框架，后端统一使用thinkphp8框架。

        要在前台展示，那么就要先在后台实现对应接口功能

        实现接口功能，需要在mysql数据库先建立一张图片表来支撑

CREATE TABLE `am8_head2` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8

        name这个字段用来存放图片路径就好。

        后端采用自动多应用模式建立项目，建立admin应用，分别建立Index控制器和Head2模型。

        在Index控制器中实现上传图片接口如下

public function upload()
    {
        $head = new Head2;
        
        $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' => 'http://auto.multi.tp8.com/storage/'.$savename
        ]);
    }

        该接口分3步实现，第一步获取图片并保存图片，代码如下

        $file = request()->file('image');

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

        第二步将文件路径写入head2数据表并获取