开发者学堂课程【达摩院视觉 AI 精品课：第四节课——【图像识别项目及使用说明】】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/912/detail/14421
第四节课——【图像识别项目及使用说明】（二）
五、VisionService
VisionService 是为了不停的识别场景、表情，通过上传的图片流传到接口里，然后通过服务端去识别场景。（部分代码）public List<String> recognizeScene(InputStream inputStream)throws Exception {RecognizeSceneAdvanceRequest request = new RecognizeSceneAdvanceRequest();
request.imageURLObject =inputtream;
List<String labels = new ArrayLists<>();
try {com.aliyun.imagerecog.Client client = getImageRecogClient(imageRecogEndpoint);RecognizeSceneResponse resp = client.recognizeSceneAdvance(request，new RuntimeObject());for(RecognizeSceneResponse.RecognizeSceneResponseDataTags tag: resp.data.tags) {
labels.add(tag.value);
}
} catch (ClientException e) {
log.error("ErrCode:{}, ErnNsg:{}，RequestId:{}", e.getErrCode()，e.getErrMsg()，e.getRequestId());
}
return labels;
}
六、前端页面
接下来看一下前端页面怎么做的：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>智能电子相册</title>
<meta name="viewport" content="width=device-width. initial-scale=1">
<link rel='stylesheet' href='css/bootstrap.min.css'>
<!--图标库-->
<link rel=’stylesheet' href=' https: //cdnjs.cloudflare.com/
ajax/Libs/font-awesome/5.8.2/css/all.min.css’>
<!--核心样式-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https ://unpkg.com/element-ui/lb/theme-chalk/index.css">
<script src="https: //unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg. com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="appEvent">
</div>
<div class="heading" >
<h1>智能电子相册</h1>
</div>
<div class="container">
<div class="upload" id="upload">
<el-upload>
class="upload-demo"
dragaction=http://127.0.0.1:8080/album/v1/upload
:on-success="uploadSuccess"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload_text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload_tip" slot="tip">只能上传 jpg/png文件，且不超过500kb
</div>
</el-upload>
</div>
</div>
<div class="container" id="app">
<vue-gallery :photos="photos"></vue-gallery>
</div>
<div class="container" id="my-custom-tags">
<y-tag : tags="tags"></v-tag>
</div>
<script src="js/script.js"></script>
</body>
</html>
vue 实现的组件放在了 script.js里面，’vue-gallery’就是实现自定义的标签名，可以在 index.html 里看到；script.js里定义了一个属性叫’photos’，就是从后台取到的数据，然后渲染到前端的 html 页面当中。
vue 整个是一个事件的数据流，通过数据普通的变化可以去触发渲染。
七、mounted
mounted 定义了一些事件，如图片的变化应该怎么去调用，以及监听按下不同的键应该做什么操作，是前一张图片还是后一张图片：
mounted() {
this.changePhoto( index: 0)
document.addEventListener( type:"keydown"，listener: (event :KeyboardEvent ) =>{
if (event.which == 37)
this.priviousPhoto()
if (event.which == 39)
this.nextPhoto()
})
},
八、控制器部分
下面这一部分可以认为是一个 control，也就是控制器部分。data里面的数据定义的是在模板中要用到的数据；e 是id 的绑定，如’#app’在标签中的上从负极会定义 id 为 app，这时候可以把组件放在负的低位下面，然后在这里面根据模板渲染。
let albumIns = new Vue({
el: ‘#app',
data() {
return {
photos:[ ]
}
},
created() {
this.getData()
},
mounted() {
customEvent.$on( e: ' uploadSuccess', n: success => {
this.getData();
//箭头函数内部不会产生新的this，这边如果不用=>, this指代 Event
customEvent.$on( e: “getPhotosByCateAndLabel",n: (cate，tag)=> i
hotosByCateAndLabel(cate,tag)
然后如果刷新页面就会请求接口，这个就是把所有的图片都获取过来，放到 photos属性里面，相当于是把属性放在 photos 变量上，可以使用 photos 变量，做了 vue 模板语言的 for 循环，当它发现了属性有值了，它就会渲染模板，这个就是通过数据去触发渲染的流程。
九、识别实现的方法
识别实现的方法：
methods: {
getBgcNo: function() {
return Math.ceil( x: Math. random( ) * 10) – 1
},
getPhotosByTag(cate,tag) {
customEvent.$emit( e: 'getPhotosByCateAndLabel', cate,tag);
},
getCate(cate) {
customEvent.$emit( e: 'getPhotosByCate', cate);
}
}
uploadSuccess：
let uplandIns =new Vue({
el: '#upload ' ,
methods: {
uploadSuccess: function(esponse, file, fileList) {
customEvent.$emit( e: ' uploadSuccess', true);
customEvent.$emit( e: 'refreshTag ', true)
}
}
});
let vm=new Vue({
el: ‘#appEvent',
components: {
upload': uplandIns,
album' :albumIns,
"custom-tags": tagIns,
}
});
