devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：我家小花儿 | 2024-02-15 13:12:39

赞

踩

博客管理系统

作者主页：编程指南针

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

五，项目总结

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

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

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号