爱站程序员基地AI第三课电子相册搭建
- 前言
- 效果预览
- 主要结构
- 前端界面
前言
电子相册通过阿里云智能视觉平台提供的算法经行图片识别，会自动图片进行分类。
效果预览
主要结构
Application：启动的入口函数，
common：一般就是存放公共的类或者常量，或者枚举值，
config：装载或者是数据库的配置，我们都会放在 config 下面，webAP-Pconfig 是对我们的静态资源，比如说 css、js 还有一些图片，做了一个映射，比如说 static，然后我们把它映射到classpath:/static 目录下。
Controller：接收外部的请求，比如参数校验，之后通过接口调用或得到的数据返回给前端
Service: 把不同的请求 , 不同的服务把它抽象成一个 service，本项目有两个service，也可以认为是两个模块。
Utils: 存放公共的类或者工具函数
前端界面
前端可分为3部分
1.action
2.vue
3.v-tag
<!--前端界面代码--><!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/lib/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-uploadclass=\"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\"><v-tag :tags=\"tags\"></v-tag></div><script src=\"js/script.js\"></script></body></html>
![[翻译] Backpressure explained — the resisted flow of data through software-爱站程序员基地](https://aiznh.com/wp-content/uploads/2021/05/4-220x150.jpeg)
