Java Spring boot + Mongodb + Vue
2018-03-20 本文已影响1464人
竹杖芒鞋轻胜码
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 命令：
-
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">
