开发者学堂课程【视觉 AI 应用开发教程： 电子相册搭建（二）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/289/detail/3415
电子相册搭建（二）
4.前端页面：
<!DOCTYPEhtel>
chtml lang="en"
chead>
cnetacharset="UTF-8">
ctitle>智能电子相册</title>
cnetaname="viewport"content="width=device-width,initial-scale=1"s
<！—可无视—
clink rel='stylesheet' href='css/bootstrap.min.css'>clinkrel='stylesheet'href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'
<!一核心样式—
clink rel="stylesheet"href="css/style.css"s
<linkrel="stylesheet" href="https://unpkg.com/elen ui/1i5/t halk/index.css"
escript srce'https://unpkg.com/vue/dist/vue.js"sc/scripts
cscript srcw"https://unpkg.com/axios/dist/axios.min.fs">c/script>
escriptsrc="https://unpkg.com/clement-ui/lib/index.js"</script>
</head
cbody > I
cdiv id="appEvent"s
</divo
<div class="heading"
ch1>智能电子相册</h1>
</diva
ediv class="container's
ediv class="upload" id="upload"
cel-upload
class="upload-demo"
drag
有俩个不同的组件来实现不同的前端功能，这个上传图片要去访问后端的接口，就是往返的接口，然后说在成功之后应该做哪些事情，以及后面对应的要执行的函数这个 apps。
比如说上传成功之后要刷新页面，要添加下面的标签分类。第二部分，就是实现轮播图，然后以及这个列表就是通过一个一个组件，实现一个自定义标签的图像。
把它分成不同的分类，分类下面有不同的标签。
Vue.component( Te-gallery', 《
props:【'photos'],
data:function () (
return
activePhoto:null
)。
template:
ediv class="vueGallery">
cdiv class="activePhoto" :style=""background-image: url('+photos[activePhoto】+'); '"cbutton type="button" aria-label="Previous Photo"class="previous" @click="previousPhoto()"s <i class="fas fa-chevron-circle-left"s</1>
s/button>
cbutton type="button"aria-label="Next Photo" class="next" @cLick="nextPhoto()" ci class="fas fa-chevron-circle-right"></is
</button>
s/divp
ediv class="thumbnails''>
cdiv
v-for="(photo, index) in photos"
:src="photo"
:key="index"
@click="changePhoto(index)"
tclass="('active':activePhoto == index》":style="'background-image: url('+photo+')'" data()
5.第一个组件：
Gallery 这个就是实现的自定义的标签名，可以在这里面看到自定义的标签。
然后这定义一个属性，就是 photos 从后后台取回来的数据，然后把它渲染到前端的页面当中。它是一个组件，会有对应的一个模板。对整个模板，进行背景图片的处理，以及一些事件的定义。
整个事件，事件的数据流通过数据的不同的变化，去触发渲染，就比如说上传一张图片，可以从对应不同的组件进行交互。比如说通过上传图片，里面会显示普通的标签，这些都是通过事件的时间来驱动数据的变化。
:key="index"
@click="changePhoto(index)"
:class="('active':activePhoto ==index)"sstyle=""background-inage:url('+photo+') '"s
/divo
</div>
</divo
mounted()I
this.changePhoto(inder8)
document.addEventListener(tyoes listener(event: KeyboardEvent)
if (event.which== 37)
this.previousPhoto()
1f(event.w 39)
this.nextPhoto()
》,
methods:
changePhoto(index) 《
this.activePhoto = index
),
nextPhoto() 《
this.changePhoto(Indenthis.activePhoto +1<this.photos.length ? this.activePhoto 1:
)
previousPhoto() (
this.changePhoto(index:this.activePhoto-1>=07 this.activePhoto-1:this.photos.tength- 1)
emplate
这个图片变化，怎么进行调用，以及如何进行监听，按下不同的键，应该做哪些操作，是前张图片还是后一张图片？
这里面定义的一些方法，这些方法可以是在模板当中。访问下一张图片，可以看到变化是对应的，因此可以得知会有独特的的模板语言。可以认为是一个 ctrl 即一个控制器部分，data 里面的数据，就是定义在模板当中要用到的数据。可以看到在它的标签上，从负极会把定义一个 ID 叫 APP，此时可以把这个组件放在负的地位下面。然后在这个里面去根据模板进行渲染。
刷新页面以后，用这个接口把所有的图片获取过来，然后把它放到这个属性里面。此时检测到属性有值，通过数据去触发整个渲染的流程。一个模板语言就是一个循环，里面取到的数据，比如它的索引位置等以及这个图片的地址，把它放在这个背景图片里，然后完成整个的渲染过程。
综上所述就是一个组件的大致功能。
6.第二个组件：
div class="tags" transition="tags"
:style="(backgroundColor:bgc[getBgcNo()])"
v-for="(iten,index) in value"
:key="index"
<spanclass='content"@cLick="getPhotosByTag(key, item)"s((iten))</span>
</divs
</div>
</divs
data:function ()(
return(
//"tags": 《"cc";[Paa"."sb"], "dd": ["fff"：“333"1),
“bgc':['#e961b4',‘#ed664b',‘#7b6ac7',‘#56abd1', rf7af4c',‘#fe5467',‘#52c7bd',’#a479b7'.#cb81ce #Seabcs catehap':(expression't “表情” "scene t “场景》
),
nethods:(
getBgcNo:function () (
return Hath.ceil( xc Kath.random() * 10) -1
》,
data()
这个 data 就是在初始化的时候，进行了渲染。自己定义了一个不同的颜色，看着比较美观。由于后面返回的是英文，所以把它转化成汉字。
去取一个不同的 ID，然后选成不同的颜色，可以看到这有很多种颜色，通过取一个随机的下标，去把它分成不同的颜色。它是一个两层外部结构，第一层里面每层结构，比如这是表情的下面有几种表情场景相对的几种场景。
这是一个两层的结构，所以在渲染的时候，会对两层的 map 渲染第一层，第一层渲染完，对下面再渲染。下面的第二层数据，要看就是不同的去触发。
可以看到，比如说上传图片之后，上传成功之后会加一张图，找到上传组件。成功之后，把它绑定一个函数，成功之后会执行这个函数，会找到这个函数，然后去执行。利用了一个技术，就是由于不同的组件之间会进行通信。
那么这个通信就定义一个虚拟的一个实例，然后去把有实例的串联起来。通过refresh tag 发送一个事件。上传成功之后，把它加到图片的轮廓图里面，可以看到有一个 cartoon 对应着去接收。
