0. 项目基本需求:

1、实现用户的注册与登录。
2、相册管理，图片上传，图片标注，图片浏览
3、相册分类管理
4、相片分享，调用微博、微信的分享功能分享到互联网

最终效果演示：

Animation.gif

增加相册:

createAlbum_2.png

album_2.png

改相册名:

editAlbumName.png

Coffe.png

1.架构选型和设计

注册、登录流程.png

ER.png

1.1 前端

使用 Vue 和 element-ui -2.2 实现的SPA应用

1.2 后端

使用Java 的Spring boot 框架 , 数据库层使用的是MongoDb

1.2.1 实现:

• Java负责提供处理图片的RESTful API
• 上传到永久化存储的阿里云OSS .
• 上传后进行压缩(分别是 原图/ 720P / 预览图)和保存图片相关信息(如原图,720P,预览图的OSS保存地址,文件上传时间, 宽度,高度)

2. 代码编写

2.1 前提知识储备

element-ui 文档
http://element.eleme.io/

webpack零基础入门
http://webpackbook.rails365.net/467000

vue 文档
https://cn.vuejs.org/

2.2 前端构建

首先是 登录界面 :

login.png

可以自适应:

login-2.png

这里说一下登录逻辑:
通过向后台发起登录请求，该请求带着登录的账号和密码两个参数，如果请求成功的话，服务器会返回以下JSON信息：

{ msg: "login success", status: "1", token: "588e51e77f1b4b96b3eee0469344d994" }

对应的后台API处理逻辑如下:

    @PostMapping("login")
    public JSONObject login(HttpSession session,@RequestBody Map<String,String> reqMap){
        JSONObject msg;

        User user=new User();
        user.setAccount(reqMap.get("account"));
        user.setPassword(reqMap.get("password"));


        if(userDao.checkUserAccountPwd(user)){
            String token=Tools.GetGUID();
            msg=Tools.makeMsgJSON("login success","1",token);
            session.setAttribute("account",user.getAccount());
            session.setAttribute("token",token);

        }else{
            msg=Tools.makeMsgJSON("fail","0","");
        }
        return msg;

    }

前端发起请求使用了 axios 发起ajax:
若获取到status为1则将 token 存储到sessionStorage 中，然后使用 $router.push() 跳转页面

login.vue

  methods:{
      login(){
          this.$refs["loginForm"].validate((valid) => {
              if(valid){
                  axios.post("/api/login",this.loginForm).then(res=>{
                      console.log(res);
                     
                      if(res.data.status==="0"){
                          this.$message({
                            message: '对不起,账号或密码错误',
                            type: 'error'
                            });
                      }else{
                          sessionStorage.setItem("account",res.data.token);
                          this.$router.push("/album");
                      }
                    });
                }else{
                    return false;
                }
        });
      },
  }
};

关于相册集的CSS样式

Coffe.png

类似于多卡片堆叠的效果是通过设置 多层 box-shadow 来实现的:

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 
            0 8px 0 -3px #f6f6f6, 
            0 9px 1px -3px rgba(0, 0, 0, 0.2),
            0 16px 0 -6px #f6f6f6,
            0 17px 2px -6px rgba(0, 0, 0, 0.2);

防止跨域

这里注意一点就是 , webpack 服务器是 8080 端口 ,而API的后端服务器则是 9090端口 ，由于浏览器禁止跨域，所以前端请求 /api/login的时候，需要把它转发到 服务器端口的 /api/login中 ,这里需要在 前端项目根目录config 中的index.js中 添加 ProxyTable:

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
    dev: {

        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://localhost:9090/api/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
}

2.3 后端构建

后端项目结构一览

相册需要相册集管理，所以在实体类中需要 Album 和 Photo 类,
然后分别为它们实现 DAO接口类
相应地建立增删改查的DAO实现类

最后在 ApiController 响应 Http 请求即可

项目结构：

album-photo-project.png

数据库 使用的是 MongoDB , 本项目连接到的是 /test 数据库

mongodb.png

以Album相册集的增删改操作 作为示例
建立对应的 实体类 ， 接口类 ， 实现类 ：

实体类 Album:

public class Album {
    private String albumName;
    private String userAccount;
    private String albumPreviewURL;

    public Album(String albumName, String userAccount, String albumPreviewURL) {
        this.albumName = albumName;
        this.userAccount = userAccount;
        this.albumPreviewURL = albumPreviewURL;
    }
// 省略一系列的getter、setter
}

Album DAO 接口类

package com.hjg.demo.DAO;

import com.hjg.demo.Entity.Album;

public interface AlbumDao {
    public void createAlbum(Album album);
    public String findAllAlbum(String account);
    public void updateAlbumName(String oldValue,String newValue,String account);
    public void deleteAlbum(String AlbumName,String account);
}

Album DAO Impl 实现类

@Component
public class AlbumDaoImpl implements AlbumDao {
    @Autowired
    MongoTemplate mongoTemplate;

    @Autowired
    private PhotoDao photoDao;

    @Override
    public void createAlbum(Album album) {
        Query query=new Query(Criteria.where("albumName").is(album.getAlbumName()));
        Album isExistedAlbum=mongoTemplate.findOne(query,Album.class);
        if (isExistedAlbum==null){
            mongoTemplate.save(album);
        }

    }


    public String findAllAlbum(String account) {
        Query query=new Query(Criteria.where("userAccount").is(account));
        List<Album> list=mongoTemplate.find(query,Album.class);
        String rs= JSONArray.fromObject(list).toString();
        return rs;

    }

    @Override
    public void updateAlbumName(String oldAlbumName,String newAlbumName,String account) {
        Query query=new Query(Criteria.where("userAccount").is(account).and("albumName").is(oldAlbumName));
        Update update=new Update().set("albumName",newAlbumName);
        mongoTemplate.updateFirst(query,update,Album.class);

        //同时更新该相册内的图片
        photoDao.updatePhotoAlbumName(oldAlbumName,newAlbumName,account);
    }


    @Override
    public void deleteAlbum(String AlbumName,String account) {
        Query query=new Query(Criteria.where("userAccount").is(account).and("albumName").is(AlbumName));
        mongoTemplate.remove(query,Album.class);

    }
}

然后是 Api中的代码:

@RestController
@RequestMapping("/api")
public class ApiController {

    @Autowired
    private UserDao userDao;

    @Autowired
    private AlbumDao albumDao;

    @Autowired
    private PhotoDao photoDao;

    @RequestMapping("getAlbumList")
    public String getAlbumList(HttpSession session){
        String account=session.getAttribute("account").toString();
        return albumDao.findAllAlbum(account);

    }

    @RequestMapping("editAlbumName")
    public JSONObject editAlbumName(HttpSession session,@RequestBody Map<String,String> reqMap){
        String account=session.getAttribute("account").toString();

        albumDao.updateAlbumName(
                reqMap.get("oldAlbumName").toString(),
                reqMap.get("newAlbumName").toString(),
                session.getAttribute("account").toString()
        );
        return Tools.makeMsgJSON("修改成功","1","");
    }

    @RequestMapping("addAlbum")
    public  JSONObject addAlbum(HttpSession session,@RequestBody Map<String ,String > reqMap){
        String account=session.getAttribute("account").toString();
        String albumPreviewURL=reqMap.get("albumPreviewURL");
        albumPreviewURL=albumPreviewURL==""? "http://placehold.it/600x300/cdcdcd/ffffff?text=ORZ":albumPreviewURL;

        Album album=new Album(reqMap.get("albumName"),session.getAttribute("account").toString(),albumPreviewURL);


        albumDao.createAlbum(album);

        return Tools.makeMsgJSON("添加成功","1","");
    }

    @RequestMapping("deleteAlbum")
    public  JSONObject deleteAlbum(HttpSession session,@RequestBody Map<String ,String > reqMap){
        String account=session.getAttribute("account").toString();
        albumDao.deleteAlbum(reqMap.get("albumName"),account);

        return Tools.makeMsgJSON("删除成功","1","");
    }

上传文件:

原有思路是通过上传到服务器然后再上传到 阿里云 OSS ,但是这样一来一回会耗费两层流量,所以采用的是在用户端直传到阿里云OSS , 为了安全性 ,所以需要 服务器端的签名.

采用官方给出的DEMO:
主要签名逻辑如下:

    public JSONObject getSignature(){
        JSONObject sign=null;
        try {

            long expireTime = 30;
            long sysTime=System.currentTimeMillis();
            long expireEndTime = sysTime + expireTime * 1000;
            Date expiration = new Date(expireEndTime);


            //条件限制
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = client.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);

            //计算出签名
            String postSignature = client.calculatePostSignature(postPolicy);

            //返回签名等参数
            Map<String, String> respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", accessKeyId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            respMap.put("sysTime",String.valueOf(sysTime/1000));
            sign = JSONObject.fromObject(respMap);
            System.out.println(sign.toString());

        }catch (Exception e){
            e.printStackTrace();
        }
        return sign;
    }

然后发现了很烦人的事情 , 因为没有回调.
从官方文档中想要获取回调 , OSS会主动向服务器发起回调信息 , 所以对于没有公网IP的本地调试服务器来说非常不方便.

无奈之下,只能先上传到服务器中,获取图片相关信息,如图片归属人,图片归属相册集,宽高大小等等信息保存到本地数据库后再上传到OSS.

在启动程序中加入:

package com.hjg.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.MultipartConfigFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.session.data.mongo.config.annotation.web.http.EnableMongoHttpSession;

import javax.servlet.MultipartConfigElement;

@SpringBootApplication
@EnableMongoHttpSession
public class AlbumPhotoApplication {

    public static void main(String[] args) {
        SpringApplication.run(AlbumPhotoApplication.class, args);
    }

    @Bean
    public MultipartConfigElement multipartConfigElement() {

        MultipartConfigFactory factory = new MultipartConfigFactory();

        //// 设置文件大小限制 ,超了，页面会抛出异常信息，这时候就需要进行异常信息的处理了;

        factory.setMaxFileSize("15MB"); //KB,MB

        /// 设置总上传数据总大小

        factory.setMaxRequestSize("100MB");

        //Sets the directory location where files will be stored.

//      factory.setLocation("./tmp/upload");
        factory.setLocation("G:/spring-boot-examples-master/album-photo/tmp/");

        return factory.createMultipartConfig();

    }

}

API Controller 中获取表单的图片上传，然后使用element-ui的上传组件,上传地址填入 /api/uploadPhoto 即可:

    @PostMapping("uploadPhoto")
    public String uploadPhoto(HttpSession session, HttpServletRequest req,String albumName){
        String account=session.getAttribute("account").toString();
//        String albumName=albumName;
        String path=account;

        //上传到阿里云
        List<MultipartFile> files=((MultipartHttpServletRequest) req).getFiles("file");
        AlbumOSS albumOSS=new AlbumOSS();
        albumOSS.UploadFiles(files,path);

        //保存图片到数据库
        for (MultipartFile file:files){
            photoDao.savePhoto(account,albumName,path+"/"+file.getOriginalFilename());
        }
        return "ok";
    }

前端:

<el-upload
  class="upload-demo"
  action="/api/uploadPhoto"
  :data="uploadParams"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="handleUploadSuccess"
  :before-remove="beforeRemove"
  multiple
  :file-list="fileList">

  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

3. 测试

3.1 测试单元

image.png

以 AlbumDaoImpl 的测试类为实例:

package com.hjg.demo.DAO;

import com.hjg.demo.Entity.Album;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

@RunWith(SpringRunner.class)
@SpringBootTest
public class AlbumDaoImplTest {
    @Autowired
    private AlbumDao albumDao;

    @Test
    public void createAlbum() throws Exception {
        Album album=new Album("人像","123","http://placehold.it/600x300/45a2ff/ffffff?text=人像");
        albumDao.createAlbum(album);
    }

    @Test
    public void updateAlbumName() throws Exception {
        albumDao.updateAlbumName("风景","卡通","123");
//        albumDao.updateAlbumName();
    }
    @Test
    public void findAllAlbum() throws Exception{
        String rs=albumDao.findAllAlbum("123");
        System.out.println(rs);

    }

    @Test
    public void deleteAlbum() throws Exception {
        albumDao.deleteAlbum("卡通","123");
    }

}

4. 部署

4.1 安装:

部署环境：

① 基础的 JDK 环境 : Java 1.8
② Web 服务器: Tomcat
③ 数据库: Mongodb

JDK 1.8

在命令行模式下载压缩包：
* cd /opt
* sudo wget http://211.138.156.198:82/1Q2W3E4R5T6Y7U8I9O0P1Z2X3C4V5B/download.oracle.com/otn-pub/java/jdk/8u72-b15/jdk-8u72-linux-x64.tar.gz

• 默认 CentOS 有安装 openJDK，建议先卸载掉

  • 检查 JDK 命令：java -version
  • 查询本地 JDK 安装程序情况； rpm -qa|grep java

    • 查询出来的结果如下：

      java-1.6.0-openjdk-1.6.0.38-1.13.10.0.el6_7.x86_64
      java-1.7.0-openjdk-1.7.0.95-2.6.4.0.el6_7.x86_64
      tzdata-java-2015g-2.el6.noarch
      

    • 卸载上面三个文件（--nodeps 的作用：忽略依赖的检查）：

    • sudo rpm -e --nodeps java-1.6.0-openjdk-1.6.0.38-1.13.10.0.el6_7.x86_64

    • sudo rpm -e --nodeps java-1.7.0-openjdk-1.7.0.95-2.6.4.0.el6_7.x86_64

    • sudo rpm -e --nodeps tzdata-java-2015g-2.el6.noarch

• JDK 1.8 安装

  • 以安装 jdk-8u72-linux-x64.tar.gz 为例
  • 在 /usr 目录下创建一个 program 用来存放各种解压后的软件包
  • 使用第三方源：EPEL、RepoForge，如果出现 yum install XXXXX 安装不成功的话，很有可能就是没有相关源
  • 解压安装包：sudo tar -zxvf jdk-8u72-linux-x64.tar.gz
  • 移到解压包到安装目录下：mv jdk1.8.0_72/ /usr/program/
  • 配置环境变量：

    • 编辑配置文件：sudo vim /etc/profile

    • 在该文件的最尾巴，添加下面内容：

        JAVA_HOME=/usr/program/jdk1.8.0_72
        JRE_HOME=$JAVA_HOME/jre
        PATH=$PATH:$JAVA_HOME/bin
        CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
        export JAVA_HOME
        export JRE_HOME
        export PATH
        export CLASSPATH
      

    • 执行命令，刷新该配置（必备操作）：source /etc/profile

    • 检查是否使用了最新的 JDK：java -version

Linux平台安装MongoDB

MongoDB 提供了 linux 各发行版本 64 位的安装包，可以在官网下载安装包。

下载完安装包，并解压 tgz 。

curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.0.6.tgz    # 下载 tar -zxvf mongodb-linux-x86_64-3.0.6.tgz  # 解压 mv  mongodb-linux-x86_64-3.0.6/ /usr/local/mongodb # 将解压包拷贝到指定目录

MongoDB 的可执行文件位于 bin 目录下，所以可以将其添加到 PATH 路径中：

export PATH=<mongodb-install-directory>/bin:$PATH

<mongodb-install-directory> 为MongoDB 的安装路径。如/usr/local/mongodb 。

创建数据库目录

MongoDB的数据存储在data目录的db目录下，但是这个目录在安装过程不会自动创建，所以需要手动创建data目录，并在data目录中创建db目录。

以下将data目录创建于根目录下(/)。

注意：/data/db 是 MongoDB 默认的启动的数据库路径(--dbpath)。

mkdir -p /data/db

命令行中运行 MongoDB 服务

在命令行中执行mongo安装目录中的bin目录执行mongod命令来启动mongdb服务。

注意：如果数据库目录不是/data/db，可以通过 --dbpath 来指定。

$ ./mongod 2015-09-25T16:39:50.549+0800 I JOURNAL [initandlisten] journal dir=/data/db/journal 
2015-09-25T16:39:50.550+0800 I JOURNAL [initandlisten] recover :  no journal files present,  no recovery needed 
2015-09-25T16:39:50.869+0800 I JOURNAL [initandlisten] preallocateIsFaster=true  3.16  
2015-09-25T16:39:51.206+0800 I JOURNAL [initandlisten] preallocateIsFaster=true  3.52  
2015-09-25T16:39:52.775+0800 I JOURNAL [initandlisten] preallocateIsFaster=true  7.7

Tomcat8

先进入home目录下，创建tomcat8文件夹

[root@hjg /]# cd home
[root@hjg home]# mkdir tomcat8
[root@hjg home]# ls

然后将apache-tomcat-8.5.8.tar.gz复制到新创建的文件夹中，解压文件

[root@hjg tomcat8]# tar -zvxf apache-tomcat-8.5.8.tar.gz

解压之后，进入解压的文件

[root@hjg apache-tomcat-8.5.8]# ls
bin  conf  lib  LICENSE  logs  NOTICE  RELEASE-NOTES  RUNNING.txt  temp  webapps  work

bin目录中存放Tomcat的一些脚本文件，最重要的也是用的最多就是启动和关系tomcat服务脚本。
conf：存放Tomcat服务器的各种全局配置文件，其中最重要的是server.xml和web.xml
webapps：Tomcat的主要Web发布目录，默认情况下把Web应用文件放于此目录
logs：存放Tomcat执行时的日志文件

那么进入bin目录将tomcat启动

[root@hjg apache-tomcat-8.5.8]# cd bin
[root@hjg bin]# ./startup.sh
Using CATALINA_BASE:   /home/tomcat8/apache-tomcat-8.5.8
Using CATALINA_HOME:   /home/tomcat8/apache-tomcat-8.5.8
Using CATALINA_TMPDIR: /home/tomcat8/apache-tomcat-8.5.8/temp
Using JRE_HOME:        /usr
Using CLASSPATH:       /home/tomcat8/apache-tomcat-8.5.8/bin/bootstrap.jar:/home/tomcat8/apache-tomcat-8.5.8/bin/tomcat-juli.jar
Tomcat started.

执行后发现最后有提示Tomcat started，表示服务已经启动。

对于结束服务可以在bin目录执行./shutdown.sh。也可以使用下面命令

[root@hjg bin]# kill -9 50
[root@hjg bin]# ps -ef|grep tomcat
root      5  5  0 :8 pts/0    00:00:00 grep --color=auto tomcat

kill -9后面的数字就是服务的进程号，如果想启动再次执行./shutdown.sh就可以了。再次把服务打开，然后在本机访问Linux Tomcat ，发现并不能访问，但是在Linxu内部的浏览器却是可以的，这种原因一般是防火墙的问题。关闭下防火墙就可以访问了

[root@hjg sysconfig]# systemctl stop firewalld

安装好Tomcat后，把jar包直接放到webapps下面

导出项目为jar包

Export To jar.png

部署项目只需要把项目复制到Tomcat的Webapps下即可。这也是最简单的一种方式。如果想更改tomcat服务接口，那么可以到tomcat下的conf目录，里面有个server.xml文件。重要的配置信息在这里

  <Connector port="8080" protocol="HTTP/."
               connectionTimeout="0000"
               redirectPort="8" />
  <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">