开发者学堂课程【视觉AI应用开发课程：电子相册搭建】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/749/detail/13217
电子相册搭建
主要内容
一、搭建电子相册
二、后端结构及功能、操作
三、前端结构及功能、操作
四、课后操作
一、搭建电子相册
电子相册是阿里云平台提供的算法进行图片识别，根据图片识别的结果对以上图片进行分类。
1、运行项目。项目在8080端口运行，网址 index.html ，就是主页。
2、上传图片。通过点击上传或拖拽可以上传图片。
3、图片识别。例如拖拽上传的人模图，下面的图片分类运用了两类识别算法，一类是表情识别，一类是场景识别。可以通过点选不同图片看到不同的效果。有惊讶、生气的表情，以及露营、户外、人物等场景类别，通过这种方式可以查看图片和功能。
二、后端结构及功能、操作
1、后端功能
（1）打开后可以看到 AlbumApplication , 这是入口函数。
（2）common 中有公共的类，常量或枚举值都可以放在其中。
（3）Config 的功能为装载或数据库的配置。WebAPPconfig 功能为对静态资源如css 、gs以及图片做的映射。例如将static 映射到classpath:/static/ 路径下，在目录中写下此格式，可以自动找到对应的资源。
（4）大部分的web 项目都是采用了mac 方式提供服务，Controller 的作用为接收web的请求，做参数校验，通过接口调用得到的数据再返回前端。
（5）Service 的功能为把不同的请求和服务抽样。例如在本项目当中，一共有两个模块。
①Resource 的作用为加载数据时为了简单保存数据，不做复杂的数据接入，例如持久化到数据库，为了简单起见且方便学习，将数据直接保存到本地文件当中。
②vision 的功能是为图片的识别算法部分提供服务。
Recognizescene 函数可以用来识别图片符合哪些场景。
RecognizeExpression 函数可以用来识别人脸图片包含哪些表情。
本期将以上述两个识别的场景作为讲解内容。
（6）utils 里面可以放公共的类及工具函数。
2、后端操作
（1）service 模块的主要逻辑
①controller 的主要实现功能，第一获取图片，所有图片都是通过get all photos 获取的。通过获取分类以及标签获取图片；包括通过分类获取图片列表。
第二上传文件，在其中会做几件事。第一件事要完成上传，把上传的文件保存到文件当中。并调用两个识别函数，即在service 当中提到的两个函数。
②注意事项。通过MaltipartFile 获取的是文件的输入流，输入流只能读取一次，若重复读取会变成空。所以需要转换成ByteArrayInputStream 流，在每次用完之后可以进行reset ，在进行mark 0这时可以重新使用。ByteArrayInputStream 会将流保存在内存当中。在线下尽量不要用这种方法，图片较大会占用内存空间。由于上传图片可能会有重名，为了避免重名，可以给图片取一个md5值作为函数名 。
③resourceservice ，可以将其看做一个资源管理器，其中postconstruct 和predestroy 是比较特殊的两个函数，postconstruct 的功能为装载bean的时候会先执行这个函数 ，之后在切入点把保存在本地的数据取出来并加载到内存里。销毁对象的时候把这些数据保存到本地文件data.json 数据中。
里面为空是由于需要停止之后再去打开才可以看到内容，停止时会执行函数。这时便可以将数据保存。
3、后端结构。
浏览器中输入json.cn 即可以看到整个数据存储结构。
（1）Allimg 中是上传的图片。
（2）Catemap 中将图片按两类场景进行分类，一类是场景识别，一类是表情识别。
①表情识别中放所有识别出来的表情如惊讶、生气等，场景识别中有如户外、人物、运动等，这些是为了更快地查询，通过分类可以快速找到某一个分类下所有的识别标签。
（3）Expressionmap 中存放的内容是表情标签中存放的图片，scenemap 与其功能类似。
（4）Imglabels 存放的是反向查找的过程，通过图片识别其中具有的标签。如此可以通过不同维度的查询实现简洁地删除图片而不用变动结构。
（5）Addimg 即上述讲解的上传图片如何构造结构并方便查询。
（6）visionservice ，它的作用是识别不同的场景和表情。将上传的图片流传到接口，可以从服务端识别场景和表情。
①早期版本是通过UR这种方式上传，但其中有限制，必须使用 oss的对象才能够识别。
②新版本则可以通过本地上传图片来识别。
三、前端结构及功能、操作
index.html 就是通过网页访问照片的页面。
前端页面是通过vue 加上gallery 来实现前端的逻辑。
1、结构及功能
（1）第一部分作用为通过上传的组件实现拖拽上传和点选。组件中有不同的功能。
①action 的作用为显示上传的图片将要访问后端的某个接口，事件是指产生后要做什么事，后面对应的是将要执行的函数。
②uploadSuccess 意为上传之后要刷新页面，添加下面的标签、分类等。
（2）第二部分的作用为实现页面下方的轮廓图和列表。
①v-tag 是一个自定义标签组件，对应的是表情类和场景类不同的分类和不同的标签。
②vue-gallery 功能为实现的自定义的标签名，可以在index 中看到。
③Photos 是定义的属性，将后台取回来的数据渲染到前端的html页面中，组件有其对应的模板。
可以在模板中进行对背景图片的处理 以及事件的定义。
④回到html 中，vue 是一个事件的数据流，通过数据不同的变化可以触发渲染，例如上传一张图片可以通过不同的组件进行不同的交互，下面会显示新上传的图片所具备的标签，这些都是通过事件来驱动数据的变化。
⑤mounted 定义的是事件，例如图片变化如何调用，按下不同的键要如何操作，是前一张图片还是后一张图片，定义的是方法，这些方法都在模板当中。例如点击next photo 就可以访问下一张图片。页面与代码之间的变化是对应的。
⑥vue 有自己的模板语言，可以生成一个变量，可以认为是vue 的视图，下图则是vue 的控制器部分。
⑦data 里的数据定义的是模板当中需要用到的数据。El 后面是ID的绑定，可以将组件放在div 下方，从而根据模版进行渲染。
2、渲染
（1）v-for
在script 中，刷新页面之后可以请求接口来获取图片放在photos 属性里面。当属性出现值就会渲染模板，即通过数据触发渲染流程。把属性变动到photos 变量上，就可以在script 中使用。v-for 是一个vue 的for 循环，把里面取到的数据如索引位置以及图片的地址放到背景图片里来，完成整个渲染过程。
(2)v-tag
图片下方的标签就是v-tag 渲染的结果。
①data 的作用是在处理化的时候进行渲染，可以自己定义颜色。
②catmap 后面返回的是英文，需要转化成汉字在页面中显示出来。
通过取随机的下标，可以将其渲染成不同的颜色。
③index 中的tags 就是绑定在script 中的数据。这个数据是一个两层的map 结构，所以渲染时会对两层的map 进行渲染。
3、触发
(1)不同触发的实现运用的是scrape 中的uploadsuccess ，这是绑定成功之后执行的一个函数。这个函数可以执行各项逻辑，利用技术不同的组件之间进行通信，定义一个虚拟的event的实例，通过它把所有不同的vue 实例串联起来。例如通过emit Uploadsuccess 发送事件，就是通过这个实例给其他的实例发送事件。上传成功之后要把它加到图片的人模图里。
(2) customevent on 其中的on 代表接收下面的emit 传过来的uploadSuccess 事件，如果得到了uploadsuccess 事件，可以通过从后端获取数据对页面进行刷新操作。
（3）refresh ，成功后要对整个tag刷新，把识别出来的不同的场景标签进行刷新。
四、课后操作
1、把本地存储的逻辑替换为数据库存储，方便查询。
2、扩充更多的识别算法，可以在文档当中实现不同的识别，对图片进行美妆、美型、美颜等，以及对文字进行识别。
