前后端分离个人博客（Vue+SpringBoot+element ui)

最新推荐文章于 2023-09-04 07:46:05 发布

ekin_7012

最新推荐文章于 2023-09-04 07:46:05 发布

阅读量778

点赞数 2

本文链接：https://blog.csdn.net/jie_7012/article/details/107158343

版权

本文详细介绍了使用SpringBoot、MybatisPlus、Shiro、JWT等技术栈构建前后端分离项目的全过程，涵盖接口开发、结果封装、会话共享、登录及博客接口设计，以及Vue前端页面开发和路由权限拦截等内容。

摘要由CSDN通过智能技术生成

1.前后端分离项目

实现效果：
在这里插入图片描述

技术栈：

SpringBoot
Rabbitmq
ElasticSearch
mybatis plus
shiro
lombok
redis
hibernate validatior
jwt

2.Java后端接口开发

1.SpringBoot整合Mybatis Plus

2.统一结果封装
这里我们用到了一个Result的类，这个用于我们的异步统一返回的结果封装。一般来说，结果里面有几个要素必要的

是否成功，可用code表示（如200表示成功，400表示异常）
结果消息
结果数据

3.整合shiro+jwt，并会话共享

4.登录接口开发

5.博客接口开发

6.ElasticSearch+Rabbitmq实现搜索引擎

3.Vue前端页面开发

1.Vue环境准备，新建项目

2.安装element-ui，axios
引入element-ui组件（element.eleme.cn），这样我们就可以获得好看的vue组件，开发好看的博客界面。

3.页面路由
我们在views文件夹下定义几个页面：

BlogDetail.vue（博客详情页）
BlogEdit.vue（编辑博客）
Blogs.vue（博客列表）
Login.vue（登录页面）
Search.vue（搜索页面）

4.路由权限拦截

记录一下开发中遇到的问题

1.vue-route路由跳转同一个子页面时数据不会更新，要刷新一次页面才会更新数据。

2.ES查询运行时报错

Caused by: java.lang.NoSuchMethodError: org.elasticsearch.search.SearchHits.getTotalHits()J
	at org.springframework.data.elasticsearch.core.ElasticsearchTemplate.doCount(ElasticsearchTemplate.java:513) ~[spring-data-elasticsearch-3.2.5.RELEASE.jar:3.2.5.RELEASE]
	at org.springframework.data.elasticsearch.core.ElasticsearchTemplate.count(ElasticsearchTemplate.java:490) ~[spring-data-elasticsearch-3.2.5.RELEASE.jar:3.2.5.RELEASE]

查看代码很容易看出es 的getTotalHits返回的类型为TotalHits,而spring-data-elasticsearch3.1.5返回类型却为long。明显是spring-data的代码版本没更新引用的代码错误。

尝试更新到最新的spring-data-elasticsearch 3.2.5，仍然是未对totalhits作处理。怎么办呢？看来是无法使用es7.X.X版本了，不然得对spring-data-elasticsearch 作更改，当然不是不行，而是代价太大（比如可以用aspectj对报错方法进行拦截），最简单的只能是降低ES的版块（目前3.2.5支持的elasticsearch最高版本为6.8.6，将es版本换下来，即可正常运行。也可不使用spring-data-elasticsearch，直接直接elasticsearchTemplate调用）。