当前位置:   article > 正文

博客管理系统|基于SpringBoot+Vue+ElementUI付费博客系统的设计与实现

博客管理系统

作者主页:编程指南针

作者简介:Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师

主要内容:Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助

收藏点赞不迷路  关注作者有好处

文末获取源码 

项目编号:BS-PT-089

二,环境介绍

语言环境:Java:  jdk1.8

数据库:Mysql: mysql5.7+Redis

应用服务器:Tomcat:  tomcat8.5.31

开发工具:IDEA或eclipse

后台开发技术:springboot+mybatis

前台开发技术:vue+elementUI

二,项目简介

随着网络的迅速崛起,让互联网逐渐成为人们日常生活沟通交流的主要媒介,而具体的交流方式也随着科技的进步不断更新。过去,人们并没 有己的博客,因此只能通过比较分散,又缺乏条理的方式来展现自己的想法与心情,例如通过即时聊天软件或是在论坛上发表贴子等,但这些方法操作复杂,对个人信息的安全保护性能也不是很强。因此随着博客在网络上的普及,人们便可以通过博客表达自己的思想与感受,展示自己并让更多的人了解你,可以说博客是不受局限,言论由的网络个人日记。博客作为一个可以让人们提高写作水平的训练基地,表达文字的网络载体,它注重对自我感受和生活表达,经常写博客能够极快的磨练博主的写作技巧,并能使其思想意识更加深刻、敏锐。

博客,又叫网络日志,是一个通常由个人管理,不定期发布新的文章的网站。博客上的文章通常根据发布的时间,用倒序的方式由新到旧排列。许多博客专注在特定的课题上提供评论和新闻,其他的被作为个人日记。一个典型的博客结合了文字、图像、其他博客或者网站的链接、以及其他相关的主题为主的媒体。能够让读者以互动的方式留下意见,是许多博客的重要要素。大部分的博客内容以文字为主,博客是社会媒体网络的一部分。

各大网站上都有自己的博客系统,但是功能上都有所不同和局限性,我们为了实现一种属于我们自己的博客系统,尽量做到功能简洁,页面美观,更方便于流行的博客系统。

前台包含有5个模块,如图1所示。

用户登录:用户在使用博客系统之前需要登录注册,注册的方式提供了手机号注册和邮箱注册,注册完后登录时还需要验证码验证,验证成功才能进入博客主页。

博客页面展示:主页展示的是所有人的博客信息,用户可以在这里可以根据关键词搜索博客,还可以评论博客,有喜欢的博客还可以收藏起来,还可以根据类型的不同找博客,还有排行榜可以看到优质博客。

个人中心:个人中心展示的是个人信息,订单管理钱包管理还有自己的博客,个人信息里面可以查看浏览记录,可以修改手机号码,邮箱,密码等等,这里还添加了一个身份证的认证。订单管理里面是购买收费博客和广告的记录。钱包里面可以查看余额,可以充值和提现,提现是提现在银行卡里面。

发表博客:发表博客之前要先选择博客的分类,在分类下去新增博客,还可以添加图片到博客中,博客新增完毕可以选择是否收费,选择完毕在发表。

广告模块:这是一个盈利的功能,当用户看博客的时候会有广告在附近,用户可以通过花钱的方式消除广告。

后台包含有6个模块,如图2所示。

用户管理:管理员可以新增用户,修改用户,删除用户,查询用户的信息,用户可以自己注册,也可以管理员手动进行注册,用户名不能重复,如果用户忘记了密码可以联系管理员进行密码重置。

博客审核:用户发布的博客,管理员需要审核,一些非法信息或者暴力的内容等不能展示出来,审核通过后管理员可以手动发布帖子,审核不通过会提示用户,审核不通过。

广告管理:管理员可以新增广告到博客主页上,还可以对广告进行删除,修改的操作,还可以查看广告。

博客管理:管理员可以删除用户发布的博客,也可以修改用户的博客,还可以查询博客。

订单管理:当用户花钱购买付费的博客或者广告时,会生成一个未支付订单,等用户付完款后会修改成已支付订单,主页才能查看博客或者消除广告。

充值提现审核:用户点击提现后,选择提现的金额,发起提现,此时会进入提现审核状态,后台会收到,当管理员审核状态修改成通过时,用户提现的金额才能存到银行卡中,管理员还可以随时查看审核的状态。

1.技术要求

(1)技术实施方案

博客系统采用了前后端分离的技术,前端我使用了vue框架,css,js,html等,使用的开发工具是WebStorm,缓存使用了redis,使用了RESP可视化工具。

后端我使用了SpringBoot快速开发脚手架,使用的开发工具是IDEA,数据库方面我用的是MySql,可视化工具采用的是Navicat。

前后端交互是前端使用Ajax进行跨域访问到后端的数据,得到数据后就返回到前端。

(2)系统测试方案

收集资料对IDEA开发工具,Java语言,Mysql数据库,vue框架进行深入学习和使用。根据系统分析对博客系统进行分类设计和详细设计。根据系统设计和详细设计对各功能进行系统实现。按规定对系统进行完整的测试,找出存在的问题,进一步完善博客系统。

2.工作要求

(1)技术可行性:

使用Vue+SpringBoot实现项目的前后端开发。Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。Vue使用了双向数据绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化,这就是Vue的精髓所在。SpringBoot,在当前互联网后端开发中,JavaEE占据了主导地位。对JavaEE开发,首选框架是Spring框架。在传统的Spring开发中,需要使用大量的与业务无关的XML配置才能使Spring框架运行起来,这点备受许多开发者诟病。为了进一步简化Spring应用的开发,SpringBoot诞生了。其设计目的是为了进一步简化Spring应用的搭建及开发过程。Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序,您可以“直接运行”这些应用程序。我们对 Spring 平台和第三方库采取了固执的观点,因此您可以轻松上手。大多数 Spring Boot 应用程序需要最少的 Spring 配置。所以技术是完全可行的。

三,系统展示

博客前台

 用户注册和登录

 

 手机验证码登录:

本博客的特点是可以设置收费的博文和免费的博文,查看收费的博文需要从个人账户中扣费

 个人中心中可以绑定自己的银行卡并进行在线充值和提现

 提现

发布博文时可以选择收费或是免费的

 博文分类浏览

 阅读排行榜

 我的收藏

 浏览记录

 个人中心

后台登录

 数据统计

 用户管理

 博客管理

 分类管理

 充值记录

 提现审核

 订单管理

 前端轮播广告图片管理

四,核心代码展示

  1. package com.dys.controller;
  2. import cn.hutool.core.util.StrUtil;
  3. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
  4. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  5. import com.dys.R.R;
  6. import com.dys.pojo.Classification;
  7. import com.dys.pojo.Posts;
  8. import com.dys.service.ClassificationService;
  9. import org.springframework.beans.factory.annotation.Autowired;
  10. import org.springframework.web.bind.annotation.*;
  11. import java.util.List;
  12. @RestController
  13. @RequestMapping("/classification")
  14. public class ClassificationController {
  15. @Autowired
  16. private ClassificationService classificationService;
  17. /**
  18. * 前端
  19. * 查询所有的分类信息
  20. * @return
  21. */
  22. @PostMapping
  23. public R getClassification(){
  24. List<Classification> list = classificationService.list(null);
  25. System.out.println("数据"+list);
  26. return R.ok(list);
  27. }
  28. /**
  29. * 条件分页查询,根据传来的条件去找到对应的数据
  30. * @param page 分页
  31. * @param search 条件
  32. * @return R
  33. */
  34. @GetMapping("/selectClassification")
  35. public R selectClassification(Page<Classification> page,@RequestParam String search){
  36. Page<Classification> classificationPage = classificationService.selectClassification(page, search);
  37. return R.ok(classificationPage);
  38. }
  39. /**
  40. * 新增分类
  41. * @param classification 分类对象
  42. * @return R
  43. */
  44. @PostMapping("/addClassification")
  45. public R addClassification(@RequestBody Classification classification){
  46. boolean isOk = classificationService.addClassification(classification);
  47. return isOk ? R.ok() : R.error();
  48. }
  49. /**
  50. * 修改分类
  51. * @param classification 分类对象
  52. * @return R
  53. */
  54. @PostMapping("/updateClassification")
  55. public R updateClassification(@RequestBody Classification classification){
  56. boolean isOk = classificationService.updateClassification(classification);
  57. return isOk ? R.ok() : R.error();
  58. }
  59. /**
  60. * 删除分类
  61. * 注:删除分类的同时还要删除有这个分类对应的博客
  62. * 在根据博客id删除收藏,历史记录,排行榜里面的对应的博客信息
  63. * 在根据博客里面的用户id删除对应的创作博客信息
  64. * @param id 分类ID
  65. * @return R
  66. */
  67. @DeleteMapping("/deleteClassification/{id}")
  68. public R deleteClassification(@PathVariable String id){
  69. boolean isOk = classificationService.deleteClassification(id);
  70. return isOk ? R.ok() : R.error();
  71. }
  72. /**
  73. * 后端
  74. * 图表数据查询,先查询出所有的分类ID
  75. * 在根据ID去博客表找对应的博客的数量
  76. * 返回每个分类有多少个博客
  77. * @return R
  78. */
  79. @GetMapping("/selectEChartsData")
  80. public R selectEChartsData(){
  81. List<Classification> list = classificationService.selectEChartsData();
  82. return R.ok(list);
  83. }
  84. }
  1. package com.dys.controller;
  2. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
  3. import com.baomidou.mybatisplus.core.metadata.OrderItem;
  4. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  5. import com.dys.R.R;
  6. import com.dys.mapper.CollectionMapper;
  7. import com.dys.pojo.Collection;
  8. import com.dys.pojo.Posts;
  9. import com.dys.service.CollectionService;
  10. import org.springframework.beans.factory.annotation.Autowired;
  11. import org.springframework.web.bind.annotation.*;
  12. @RestController
  13. @RequestMapping("/collection")
  14. public class CollectionController {
  15. @Autowired
  16. private CollectionService collectionService;
  17. /**
  18. * 新增收藏记录
  19. * @param collection
  20. * @return
  21. */
  22. @PostMapping("/addCollection")
  23. public R addCollection(@RequestBody Collection collection){
  24. //加上@RequestBody后可以接收前端传来的数据,把数据新增到数据库中
  25. // boolean isOk = collectionService.saveCollection(collection);
  26. //返回数据,当数据为真时返回成功,为假时返回失败
  27. // return isOk ? R.ok() : R.error("已经收藏过了");
  28. //TODO
  29. collectionService.save(collection);
  30. String id = collection.getId();
  31. return R.ok(id);
  32. }
  33. /**
  34. * 删除收藏记录
  35. * @param id
  36. * @return
  37. */
  38. @DeleteMapping("/deleteCollection/{id}")
  39. public R deleteCollection(@PathVariable String id){
  40. // Collection collection = new Collection();
  41. // collection.setUsersId(usersId);
  42. // collection.setPostsId(postsId);
  43. // boolean isOk = collectionService.deleteCollection(collection);
  44. boolean isOk = collectionService.removeById(id);
  45. return isOk ? R.ok() : R.error();
  46. }
  47. /**
  48. * 查询是否收藏
  49. * @param collection
  50. * @return
  51. */
  52. @PostMapping("/listCollection")
  53. public R listCollection(@RequestBody Collection collection){
  54. LambdaQueryWrapper<Collection> wrapper = new LambdaQueryWrapper<>();
  55. wrapper.eq(Collection::getUsersId,collection.getUsersId()).eq(Collection::getPostsId,collection.getPostsId());
  56. return R.ok(collectionService.getOne(wrapper));
  57. }
  58. /**
  59. * 根据用户id查询所有已收藏的博客
  60. * 上面是数据没分页,下面是将数据分页
  61. * @param id
  62. * @return
  63. */
  64. // @PostMapping("/listAllCollection/{id}")
  65. // public R listAllCollection(@PathVariable String id){
  66. // return R.ok(collectionService.listAllCollection(id));
  67. // }
  68. @GetMapping("/listAllCollection/{id}")
  69. public R listAllCollection(Page<Collection> page,@PathVariable String id){
  70. page.addOrder(OrderItem.desc("create_time"));
  71. return R.ok(collectionService.listAllCollection(page,id));
  72. }
  73. }
  1. package com.dys.controller;
  2. import cn.hutool.core.util.StrUtil;
  3. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
  4. import com.baomidou.mybatisplus.core.metadata.OrderItem;
  5. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  6. import com.dys.R.R;
  7. import com.dys.pojo.Classification;
  8. import com.dys.pojo.Posts;
  9. import com.dys.pojo.dto.PostsDTO;
  10. import com.dys.service.ClassificationService;
  11. import com.dys.service.PostsService;
  12. import com.dys.service.UsersService;
  13. import org.springframework.beans.factory.annotation.Autowired;
  14. import org.springframework.web.bind.annotation.*;
  15. import javax.annotation.Resource;
  16. import java.util.Comparator;
  17. import java.util.List;
  18. @RestController
  19. @RequestMapping("/posts")
  20. public class PostsController {
  21. /**
  22. * 博客表
  23. */
  24. @Resource
  25. private PostsService postsService;
  26. /**
  27. * 分类表
  28. */
  29. @Autowired
  30. private ClassificationService classificationService;
  31. /**
  32. * 用户表
  33. */
  34. @Autowired
  35. private UsersService usersService;
  36. /**
  37. * 后台
  38. * 条件分页查询
  39. * @param page 分页类,获取里面三个值:total:一共有多少个数据,size:每页可以存放的数据条数,current:当前是第几页
  40. * @param search 搜索的关键字
  41. * @return R
  42. */
  43. @GetMapping("/postsPagingQuery")
  44. public R postsPagingQuery(Page<Posts> page, @RequestParam String search){
  45. // //mybatis-plus中的条件构造器,需要用到Lambda语法,使用Wrapper
  46. // LambdaQueryWrapper<Posts> lambdaQueryWrapper = new LambdaQueryWrapper<>();
  47. // //调用了like方法,实现模糊查询,lambda表达式查询条件,::获取实体类中的方法 ::--》Java8后:获取方法
  48. // //StrUtil--》一个工具类,isNotEmpty和isNotBlank都是非空判断的方法(isNotBlank会排除空格,isNotEmpty不会排除空格)
  49. if (search == null){
  50. }
  51. // lambdaQueryWrapper.like(StrUtil.isNotBlank(search),Posts::getTitle,search);
  52. // //按照修改时间降序排列
  53. // Page<Posts> postsPage = page.addOrder(OrderItem.desc("update_time"));
  54. // //mybatis-plus好用自带的分页的方法,可以传两个参数(分页的起始位置,结束位置),接收前端传来的参数,查询的数量
  55. // Page<Posts> servicePosts = postsService.page(postsPage, lambdaQueryWrapper);
  56. //
  57. // List<Posts> records = servicePosts.getRecords();
  58. // records.forEach(item->{
  59. // //TODO 填充typeName
  60. // String typeName = classificationService.getTypeNameByTypeId(item.getClassificationId());
  61. // String usersName = usersService.getUserNameByUsersId(item.getUsersId());
  62. // item.setTypeName(typeName);
  63. // item.setUsersName(usersName);
  64. // });
  65. // //返回数据
  66. // return R.ok(servicePosts);
  67. Page<Posts> postsPage = postsService.postsPagingQuery(page, search);
  68. List<Posts> records = postsPage.getRecords();
  69. records.forEach(item->{
  70. //TODO 填充typeName
  71. String typeName = classificationService.getTypeNameByTypeId(item.getClassificationId());
  72. String usersName = usersService.getUserNameByUsersId(item.getUsersId());
  73. item.setTypeName(typeName);
  74. item.setUsersName(usersName);
  75. });
  76. return R.ok(postsPage);
  77. }
  78. /**
  79. * 博客数据按浏览量排序
  80. * @param posts
  81. * @return
  82. */
  83. @GetMapping("/getPostsAndViews")
  84. public R getPostsAndViews(Posts posts){
  85. // //按照浏览量降序排列
  86. // Page<Posts> postsPage = page.addOrder(OrderItem.desc("views"));
  87. // //mybatis-plus好用自带的分页的方法,可以传两个参数(分页的起始位置,结束位置),接收前端传来的参数,查询的数量
  88. // Page<Posts> servicePosts = postsService.page(postsPage);
  89. List<Posts> list = postsService.list();
  90. //list.sort(Comparator.comparing(Posts::getViews).reversed()); .reversed() --》 根据条件进行降序排序
  91. list.sort(Comparator.comparing(Posts::getViews).reversed());
  92. //返回数据
  93. return R.ok(list);
  94. }
  95. /**
  96. * 查看博客详情,多表查询,根据用户id,类型id查询对应的名字
  97. * @param id
  98. * @return
  99. */
  100. @GetMapping("/{id}/{isStatus}")
  101. public R getPostsId(@PathVariable boolean isStatus,@PathVariable String id){
  102. // Posts byId = postsService.getByIdWithTypeNameUsersName(id);
  103. PostsDTO byId = postsService.getByIdWithTypeNameUsersName(isStatus,id);
  104. return R.ok(byId);
  105. }
  106. /**
  107. * 根据分类id查询对应的分类数据
  108. * @param id
  109. * @return
  110. */
  111. @GetMapping("/classificationByIdData/{id}")
  112. public R classificationByIdData(Page<Posts> page,@PathVariable String id){
  113. // List<Posts> typeData = postsService.getByIdWithTypeData(page,id);
  114. Page<PostsDTO> typeData = postsService.getByIdWithTypeData(page,id);
  115. return R.ok(typeData);
  116. }
  117. /**
  118. * 新增方法
  119. * @param posts Posts实体类
  120. * @return R
  121. */
  122. @PostMapping
  123. public R savePosts(@RequestBody Posts posts){
  124. //加上@RequestBody后可以接收前端传来的数据,把数据新增到数据库中
  125. boolean isOk = postsService.save(posts);
  126. //返回数据,当数据为真时返回成功,为假时返回失败
  127. return isOk ? R.ok() : R.error();
  128. }
  129. /**
  130. * 修改方法
  131. * @param posts Posts实体类
  132. * @return R
  133. */
  134. @PatchMapping("/updatePosts")
  135. public R updatePosts(@RequestBody Posts posts){
  136. boolean isOk = postsService.updateById(posts);
  137. return isOk ? R.ok() : R.error();
  138. }
  139. /**
  140. * 删除博客,删除博客的同时要删除历史记录中的博客和收藏的博客
  141. * @param id Posts实体类
  142. * @return R
  143. */
  144. @DeleteMapping("/{id}")
  145. public R deletePosts(@PathVariable String id){
  146. boolean isOk = postsService.deletePosts(id);
  147. return isOk ? R.ok() : R.error();
  148. }
  149. /**
  150. * 前端
  151. * 条件分页查询根据用户ID查找自己创作的博客
  152. * @param id 用户ID
  153. * @param postsPage 分页
  154. * @param search 搜索条件
  155. * @return R
  156. */
  157. @GetMapping("/selectBlogById")
  158. public R selectBlogById(Page<Posts> postsPage,@RequestParam String id,@RequestParam String search){
  159. Page<Posts> page = postsService.selectBlogById(postsPage, id, search);
  160. return R.ok(page);
  161. }
  162. }

五,项目总结

本项目开发实现了一个博客平台系统,相较于传统的博客系统来讲,它可以实现付费博文的功能,作者可以通过付费的知识型博文来进行收费获得一定的收益,这就像CSDN上可以发布收费的博客或专栏一样,希望本项目的实现能给大家一些参考思路。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/84762
推荐阅读
相关标签
  

闽ICP备14008679号