【课程设计】BitPic摄影照片版权交易系统全解

前言

也许你想从前端到后台、从部署到上线都自己操作一遍；也许你只是想做个后台项目不关心前端；项目不止代码，还会有前端环境搭建、跨域处理、Https证书、Nginx部署、IPFS等知识，不管怎样，这个项目都适合你

项目地址：https://github.com/Dengqlbq/BitPic

作为一个定位适合大部分人（高手除外）的Java Web项目，本文尽量以简洁易懂的方式对其解析，无论是前后都想搞懂还是只关心后端代码，这里都会给你答案。

---

项目架构

总体架构：

1. 前后端以Nginx作为通信代理，通过预先设计好的RESTful接口以Json格式进行通信。
2. 前端接收用户输入并封装成请求发往Nginx，将Nginx响应封装成视图返回给用户
3. 后端处理Nginx发过来的业务请求并和数据库和文件系统交互，将结果封装成响应返回
4. Nginx将前端的业务请求发往后端并将后端响应返回，遇到资源请求（如略缩图）则直接从文件系统读取后返回
5. 前后端使用HTTPS通信，并采用基于Token的身份认证机制

项目层次

1. 控制器层、服务层、数据持久层及公共层为一般分层模式中常见层次
2. 切面层进行身份认证、信息访问权限及文件下载权限认证
3. 拦截器层用于解决跨域问题
   

---

模块与功能划分

后端模块

后端共划分为四大模块，每个模块下再划分具体功能：

1. 权限验证模块（切面层）
2. 通用作品信息模块
3. 用户模块
4. 管理员模块

管理员模块处理所有的审核事务，这里将短信验证码划归管理员模块但目前调用该接口不需要管理员权限

用户模块功能繁多，包括普通用户和摄影师的功能

前端模块

前端分为两个部分独立运行，均采用组件化开发

1. 网站前台
2. 管理后台

---

存储

信息存储

信息主要为以下三种：

1. 用户个人信息（账号密码等）
2. 用户相关信息（订单等）及作品信息
3. Token

个人信息改动较少，存储在Mysql中。订单信息以及作品信息等量大且经常被查询，存储在ElasticSearch中。Token在每一个请求中都会被使用以进行各种认证，存储在Redis中

文件存储

系统中涉及众多类型的用户上传文件和系统生成的文件，文件的存储需要遵循一定规则才能使系统保持高效稳健的运行。

在设计文件存储规则时主要考虑以下几点：

1. 文件的类型有用户身份认证文件、作品文件、作品相关授权文件、作品略缩图、头像文件、作品打包文件、订单下载打包文件和购买凭证文件
2. 打包文件皆为zip格式，购买凭证文件为txt格式，其余文件为图片
3. 某些文件可被系统外部直接访问如作品略缩图，而某些文件不能
4. 对于可被系统外部直接访问的文件，系统在返回文件地址时应考虑节省网络流量
5. 相关联的文件应相邻存储；不同用途的文件不能混杂存储

基于以上考虑，系统开辟两个文件存储区域——对外图片区域和重要文件区域。对外图片区域存储作品略缩图和用户头像，重要文件区域存储其他所有文件。取对外图片区域根路径为imgServerRoot，取重要文件区域根路径为storeRoot。

文件类型	存储路径	备注
身份认证文件	storeRoot/userId/authenticate/	userId为用户编号，注册时系统生成
作品文件	storeRoot/userId/number/	number为作品编号，上传作品时系统生成
作品相关授权文件	storeRoot/userId/number/check/
作品略缩图	imgServerRoot/userId/number/
头像文件	imgServerRoot/userId/avatar/
作品打包文件	storeRoot/userId/number/	文件名统一为0.zip
订单下载打包文件	storeRoot/userId/orderId/	orderId为订单编号，创建订单时系统生成
购买凭证文件	storeRoot/userId/orderId/	文件名统一为certificate.txt

在系统设计时，作品文件以及购买凭证会加密压缩后上传到IPFS网络中，利用其不可篡改性，不可删除性保障用户和摄影师的利益。这项特性默认为关闭状态

---

运行

经过前面的介绍，你已经知道如何阅读源码了，现在将它运行起来
下面是必须要做的事：

1. Mysql安装及建表
2. ElasticSearch，Redis的安装
3. Nginx安装及配置

版本并不要求和项目一致，不过有概率遇到奇奇怪怪的问题

本地运行

本地运行可直接使用编译好的前端静态文件，配置好Nginx后再运行后端代码即可
注意：

1. Nginx配置中修改root路径为自己的路径
2. 后端代码中修改application.yml中的配置以及ThumbnailsConstant.java中标明的配置
3. 根目录需预先创建
4. 默认端口 Nginx：8089，后端：8080，网站前台：8088，管理后台：8091

# Nginx配置文件中添加以下location，均为静态文件路径
# image路径为网站前台使用
# store路径为管理后台使用

# 用户作品相关
location ~ "/images/\w{32}/\w{32}/" {
    root /Volumes/H/Java;
    autoindex on;
}
# 用户头像
location ~ "/images/\w{32}/avatar/" {
    root /Volumes/H/Java;
    autoindex on;

}

# 管理后台审核时需要原图，所以管理后台应该部署在内网环境防止原图泄露，但现在先不管
# 用户默认头像
location ~ "/images/avatar/" {
    root /Volumes/H/Java;
    autoindex on;

}

# 摄影师身份审核
location ~ "/store/\w{32}/authenticate/" {
    root /Volumes/H/Java;
    autoindex on;

}
# 摄影师作品审核
location ~ "/store/\w{32}/\w{32}/" {
    root /Volumes/H/Java;
    autoindex on;

}

# 摄影师作品授权文件审核
location ~ "/store/\w{32}/\w{32}/check/" {
    root /Volumes/H/Java;
    autoindex on;

}

此时可通过 http://localhost:8089 访问网站

服务器运行

与本地运行总体是一致的步骤，不同点如下：

1. 需要修改前端代码中写好的url并重新编译成静态文件
2. Nginx中需添加请求转发路径及前端静态文件路径

第一点只需搭建好前端环境，然后更改代码并编译即可
搭建环境可参考项目衍生文章：Vue + iView + Webpack 前端初探

Nginx配置如下：

# 在上一节本地运行的Nginx配置基础上加入以下location

# 请求转发
location /api {
    proxy_pass http://127.0.0.1:8090;    # 后端接口地址
}
# 前端（网站前台）静态文件地址，文件需放在 /var/www/bitpic文件夹内
location /bitpic {
     root /var/www/;
     index index.html;
}

# 前端（管理后台）静态文件地址
location /admin {
     root /var/www/;
     index index.html;
}

此时可通过 http://yourdomain/bitpic 访问网站

---

开启特性

HTTPS

部署HTTPS可以增强网站数据通信的安全性，并且提高网站SEO和可信任度
可参考项目衍生文章：基于阿里云免费SSL证书Nginx配置HTTPS

server {
    listen 443;
    server_name hahaha;    # 修改此处
    client_max_body_size 20M;
    ssl on;
    root html;
    index index.html index.htm;
    ssl_certificate   ssl/xxx.pem;    # 修改此处
    ssl_certificate_key  ssl/xxx.key;    # 修改此处
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    location / {
        root html;
        index index.html index.htm;
    }

	 # data redirect
     location /api {
          proxy_pass http://127.0.0.1:8090;
      }

      # user pictures
      location ~ "/images/\w{32}/\w{32}/" {
          root /var/www/;
          autoindex on;
      }

      # user avatar
      location ~ "/images/\w{32}/avatar/" {
          root /var/www/;
          autoindex on;

      }

      # user default avatar
      location ~ "/images/avatar/" {
          root /var/www/;
          autoindex on;

      }

	  # admin authenticate
      location ~ "/store/\w{32}/authenticate/" {
          root /var/www/;
          autoindex on;

      }

      # admin picture
      location ~ "/store/\w{32}/\w{32}/" {
          root /var/www;
          autoindex on;

      }

      # admin pic auth
      location ~ "/store/\w{32}/\w{32}/check/" {
          root /var/www/;
          autoindex on;

      }

	  # bitpic
	   location /bitpic {
	        root /var/www/;
	        index index.html;
	   }

	   # admin
	   location /admin {
	        root /var/www/;
	        index index.html;
	   }
}

短信验证码

项目中注册、修改密码和支付等都需要短信验证码，但目前默认关闭
项目使用腾讯云的短信服务，可自行开通服务并修改后端application.yml中相应配置，
然后取消SmsServiceImpl.java中的注释即可

IPFS

使用IPFS存储作品及购买凭证等是利用其不可篡改不可删除的特性保障用户及摄影师利益
因为网络环境原因默认关闭，可自行安装IPFS后取消代码中有关IPFS的注释即可

---

其他知识

身份认证及信息访问权限

登陆成功时系统随机生成32位字符串作为Token并写入Cookie中，然后再以Token_userId : {Token}的形式写入Redis中

Cookie以及Redis中的Token都有时效性，且用户退出登录会即时清除

涉及信息操作时，首先检查Cookie中有无Token，然后取出请求中的userId参数值，然后以Token_userId为key到Redis中查找并与Cookie中的Token比较，所有检查通过则放行请求

以上操作可防止未登录用户访问数据，防止已登录用户伪造userId非法访问他人数据

文件下载权限

下载文件首先会经过信息访问权限认证，然后系统读取相应订单信息并判断有无下载权限

跨域及前端数据存储

在系统层次划分中有介绍拦截器层是负责解决跨域问题的
具体可参考项目衍生文章：Vue + Spring boot 跨域、传参和数据相关解决方案

---