java毕设课设基于 SpringBoot和Vue的旅游分享博客系统

概要

本系统基于 SpringBoot+Vue 的开发框架，采用了前后端分离的开发模式设计，并从用户端与管理端两方面出发，完成系统基本功能的实现。在本系统中，用户可与其他网友分享在旅游地见闻、体验，发表自己的观点，给其他还未打卡该景点的游客提供宝贵的建议。采用的技术包括SpringBoot，MybatisPlus，Vue2，ElementUI，WangEditor，Mysql。

需求分析

旅游分享博客系统主要包括以下功能：

1. 用户信息管理功能：用户进行基本的登录注册功能，注册成功后，为用户分配的 token，在用户登录后根据 token 绑定用户的相关操作，用于区分不同用户；用户可以修改自己的基本信息；
2. 内容发布管理：用户编辑并发布自己的旅游见闻，通过富文本编辑器，记录用户所填写的内容；
3. 首页推荐功能：在首页向用户推荐不同旅游心得博客信息，并设置相关置顶博客；
4. 关键词查询：通过搜索框输入关键词查询博客，关键词包括文章标题、作者名、文章内容；
5. 用户日常操作：用户点击查看博客后能够进行点赞评论操作，且能订阅不同博主；
6. 景区体验评分：游客发布博客时，能够对此次旅游体验进行评分；
7. 用户反馈：添加用户反馈功能，第一时间获取用户的建议，以便对相应功能进行完善改进；
8. 评论区：每条博客下绑定评论区，为用户提供互动的平台，父评论可包含一个或多个子评论；
9. 景区信息简介：用户可查看相关博客对应的景区信息简介，包括所在省份、城市等信息。

用户端具体实现

博客模块实现

(1) 发布博客
在发布博客页面，指定信息填写在页面指定位置，如下图所示：

(2) 查看博客
在文章首页、或者点击上方搜索功能根据关键词进行搜索，可以查看到博客大致信息，如图所示。点击博客后，便能够查看博客内容。

(3) 修改博客内容
博主本人点击在指定位置点击修改后，跳转到修改页面，与发布博客页面不同的是，进入修改页面后，各字段自动填充，点击保存后，完成对博客信息修改，如图所示。

(4) 图片地标识别
在用户发布博客时，通过调用百度云图片地标识别接口，根据用户上传的图片自动识别图片所属的景区地标位置，再从返回的 JSON 结果中提取出地标名，在对应博客对应位置展示。如下图

个人信息模块实现

在首页显示相关个人信息，点击后进入用户信息编辑界面，查看或者更新对应的信息。

评论区模块实现

每条博客下绑定了对应的评论区，用户进入博客后，便可查看、发布评论，完成用户与用户之间的互动，用户端后端提供给前端的评论列表为树形结构列表。

核心代码如下。

public static List<Comment> processComments(List<Comment> list) {
	Map<Long, Comment> map = new HashMap<>(); // (id, Comment)
	List<Comment> result = new ArrayList<>();
	// 将所有根评论加入 map
	for(Comment comment : list) {
		if(comment.getParentId() == null)
			result.add(comment);
		map.put(comment.getId(), comment);
	}
	// 子评论加入到父评论的 child 中
	for(Comment comment : list) {
	Long id = comment.getParentId();
	if(id != null) { // 当前评论为子评论
		Comment p = map.get(id);
		if(p.getChild() == null) // child 为空，则创建
			p.setChild(new ArrayList<>());
			p.getChild().add(comment);
		}
	}
	return result;
}

注册登录模块实现

在用户未登录时，进入网站自动跳转到登录页面，或者点击导航栏上的退出登录的按钮跳转到登录页面，在登录页面点击用户注册进入注册页面。
导航栏设计如下

用户登录界面：

用户反馈模块实现

点击导航栏上反馈页面位置，进入到反馈页面，用户输入想要反馈信息后，点击提交，完成对反馈信息的提交，对于反馈提交的图片采用转换为二进制流的方式存储在数据库中。如下图所示。

图片转换核心代码如下。

if (file.isEmpty()){
	return ResultResponse.fail("请选择图片");
}
try {
	InputStream is = file.getInputStream();
	byte[] pic = new byte[(int)file.getSize()];
	is.read(pic);
	TbFeedback tbFeedback=new TbFeedback();
	JSONObject jsonObject = new JSONObject(tbFeedbackJson);
	// 从外层 JSON 中获取 data 字段的值
	tbFeedback.setBackcontent(jsonObject.getString("backcontent"));
	tbFeedback.setFeedEmail(jsonObject.getString("feedEmail"));
	tbFeedback.setUserid(jsonObject.getString("userid"));
	tbFeedback.setFeedImage(pic);
	tbFeedbackService.save(tbFeedback);
} catch (IOException e) {
	e.printStackTrace();
}

点赞模块实现

进入博客详情界面后，用户浏览博客后，根据自己观感对该博客进行点赞、取消点
赞的操作，页面显示博客获得的点赞总数，如下图所示

在导航栏可以进入点赞列表页面，查看用户的点赞记录，如下图所示

收藏模块实现

进入博客详情界面并浏览完博客后，根据观感也能对博客进行对应收藏、取消收藏操作，也能从导航栏进入自己的收藏列表界面，如下图所示

管理端具体实现

博客审核模块实现

用户发布博客后，经过管理端审核，审核通过后，所发布博客才能展示在用户端上。管理员登录管理端后，依次点击左部导航栏、博客管理、博客审核管理，即可进入博客审核页面，审核页面如下图所示

系统公告模块实现

在系统需要进行维护、更新时，管理员进入公告管理页面，发布公告通知，同步到用户端展示，及时通知给用户相关信息。

评论管理模块实现

管理员进入到管理端，点击评论区列表，查看具体评论信息，根据实际情况进行删除的操作，父评论状态为已删除，所有子评论状态也修改为已删除。

小结

需要源码或文档的可以从主页添加我的微信