# Album-application云端智慧相册应用 **Repository Path**: wudongo/album-application ## Basic Information - **Project Name**: Album-application云端智慧相册应用 - **Description**: 中国软件杯-云端智慧相册应用-前端部分 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 3 - **Created**: 2021-04-10 - **Last Updated**: 2024-12-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 智慧云相册平台WEB. 2021-07-02 ### ⭐作者信息 开发周期：**2个月** 一切界面皆由本文档作者设计、无抄袭作假嫌疑 ### ⭐开发依赖&项目结构 本次前端WEB开发基于**Vue框架**，vue2.0，其中使用了**element组件**、**lodash**、**qrcodejs**、**three.js**、**tailwindcss**、**vue-table-export**以及其它基本组件、依赖, 并且后续有可能的话将考虑修改开发模式为**组合式API**开发，降低代码耦合度。 Git仓库使用Gitee码云进行管理、使用git cz代替git commit规范化提交。 **项目结构**： src ├── api **接口文件** ├── asset **静态资源文件** ​ ├── css **全局CSS样式表** ├── canvas **自定义canvas常用函数库** ├── components **公用自定义组件** ├── icons **图标库** ├── router **路由** ├── store **持久化仓库** ├── styles **常用基本样式** ├── utils **工具类** ├── views **页面** ### ⭐基本功能详情 #### 一、登录 **简述**：用于让用户登录的界面 **处理逻辑**：表单监听focus及相关事件，将用户名和用户密码POST到后台获取Token **使用接口**： /api/user/loginVerify **登录接口** **组件**：/views/login/login.vue #### 二、注册 **简述**：用于用户注册新账号 **处理逻辑**：表单监听focus及相关事件，将表单内容POST到后台，获取返回结果 **使用接口**：/api/user/registerUser **注册接口** **组件**：/views/register/register.vue #### 三、 用户设置 **简述**：用于让用户重新设置用户名、密码、手机号等信息，更换背景主题、更换精彩集锦音乐、分享相册、登出等 **处理逻辑**：信息的重新设置通过接口更新，背景主题和音乐的替换通过父子组件通信和Vuex实现，相册的分享通过qrcode.js实现 **使用接口**：/api/updateUserInfo **更改用户信息接口** **组件**：/views/setting/setting.vue #### 四、 历史记录 **简述**：用于展示用户近几次的相册使用记录， 并给出对应事件等级的危险程度（如删除相册定义为危险行为），包括相册的新增、相册的删除、图片的上传、图片的删除、用户的登入登出等，并且支持用户下载历史记录的EXCEL表格，还配有客服人员的联系二维码，可供用户下载后提供给客服人员进行问题定位。 **处理逻辑**：客服的联系二维码使用qrcode.js实现，记录由SpringBoot后端做接口记录，在前端需要的时候返回，EXCEL表由前端的vue-table-export生成。 **使用接口**：/api/log/getLog **获取历史记录接口** **组件**：/views/personalInfo/personalInfo.vue #### 五、 人脸检索(搜索)（基本要求） **简述**：用户能通过页面顶部的输入框来提供人脸图片，检索出智慧相册中存在的类似的人脸图片，并展现在页面中，支持在任意页面上皆可以搜索，自动输入走马文字是此处前端亮点。 **处理逻辑**：通过focus事件定位图片的输入，并通过路由参数的变化来刷新路由(key值的变化)，重新渲染页面。 **使用接口**：/api/photo/faceSearch **人脸搜索接口** **此处使用到了移动云API（加分项）** **组件**：/views/home/home.vue ### ⭐主要功能详情 #### 一、我的相册 **简述**：相册管理中，用于展示当前用户的所有相册，该界面中有两个部分，第一个是自定义相册，用户可以选择自行创建相册、删除相册，上传图片保存，下载等，另一个是系统自动分类的相册，智慧相册，用户上传图片后会经我们所设计的算法自动分类相片及人脸识别。 **处理逻辑**：两个模块通过变量activeName来切换，其中我自定义了相册/相片显示组件(将选择框、图片显示、点击事件、排版等封装好的自定义组件)AlbumList, 该组件在两个模块中和相片的显示都使用到了，一共有如下几个地方调用了此组件：自定义相册、智慧相册、相片显示、二级相册(人脸分类相册)、三级相片显示(人脸分类相册下的相片显示), 这几个组件调用的区分由变量albumMode、lastMode来区分。 **组件**：/views/home/album/album.vue #### 1.1 自定义相册 **简述**：自定义相册支持用户创建相册，自定义相册名称、相册描述、支持相册名称和描述的修改，支持用户选择相册批量上传200+张图片，支持用户批量下载相册、批量删除相册、相片。 **处理逻辑**：此处大功能实现基本依赖于接口的使用 **使用接口**：/api/album/getAlbum **相册获取接口** /api/album/creatUserAlbum **新建自定义相册接口** /api/album/updateUserDescription **更新自定义相册描述接口** /api/album/deleteAlbum **指定相册的删除接口** /api/album/deleteAlbum **指定相册的删除接口** /api/photo/getImage **获取特定相册的图片接口** /api/photo/deletePhoto **指定图片的删除接口** /api/photo/uploadImage **图片批量上传接口** /api/download/photo **图片批量下载接口** #### 1.2 智慧相册（基本要求） **简述**：智慧相册支持用户批量上传200+张图片，支持用户批量下载相册、批量删除二级相册、相片，支持相片自动分类，人脸自动聚类。**一级相册为分类相册**，官方要求4种类别，我小组提高了要求，分类了8个类别，算法由python实现，python算法也提供了文档，**二级相册为人脸相册，即人脸的聚合功能**， 人脸相册点击后进入对应的人脸相片展示。 **处理逻辑**：此处大功能实现基本依赖于接口的使用 **使用接口**：/api/album/getAlbum **相册获取接口** /api/album/updateFaceAlbumName **二级人脸相册更改名称接口** /api/album/deleteFaceAlbum **二级人脸相册的删除接口** /api/album/getFaceAlbum **二级人脸相册的获取接口** /api/photo/getImage **获取特定相册的图片接口** /api/photo/deleteWisdomAllPhoto **智慧相册的所有图片一键删除接口** /api/photo/deleteFacePhoto **三级人脸相片的指定删除接口** /api/photo/uploadImage **图片批量上传接口** /api/photo/getPersonImage **获取特定二级人脸相册中图片接口** /api/download/photo **图片批量下载接口** #### 二、我的最爱 **简述**：暂时保留该功能，在后期优化中将实装（展示用户查看最多次，翻看最多次数的若干个相册或相片） **处理逻辑**：/ **使用接口**：/ **组件**：/views/home/myfavorite/myfavorite.vue #### 三、精彩集锦（基本要求） **简述**：用户在该页面下可按照”选择相册“-”选择相片“-”点击生成瞬间“-"查看瞬间"-"下载瞬间"的顺序进行操作和使用，该页面支持用户选择至少2张、至多12张的图片，进行精彩时刻视频的生成，并且支持精彩时刻视频的保存（包括音频和视频），视频的特效目前还较少，后期优化中考虑新增若干个合适的动效供用户选择。 **处理逻辑**：相册和相片的获取通过接口获得，使用canvas实现视频的生成和保存，使用waterfull实现瀑布流形式的图片展示 **使用接口**：/api/album/getAlbum **相册获取接口** /api/photo/getImage **获取特定相册的图片接口** /api/photo/getPersonImage **获取特定二级人脸相册中图片接口** /api/album/getFaceAlbum **二级人脸相册的获取接口** **组件**：/views/home/wonderfulMoment/wonderfulMoment.vue #### 四、时光统计 **简述**：暂时保留该功能，在后期优化中将实装（类似于月终成绩单，通过Echarts和相关依赖实现特定用户的相册使用情况） **处理逻辑**：/ **使用接口**：/ **组件**：/views/home/timeAnalyse/timeAnalyse.vue #### 五、关于我们 **简述**：此页面主要用于展示作者信息，包括作者的自述和二维码 **处理逻辑**：qrcode.js生成 **使用接口**：/ **组件**：/views/home/about/about.vue