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

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

作者：小蓝xlanll | 2024-02-19 07:15:25

赞

踩

个人博客系统

作者简介：全栈开发工程，从事Java、Python、前端、小程序方面的开发和研究，对大数据应用与开发比较感兴趣，

主要内容：Java项目、前端项目、Python项目、小程序开发、大数据项目、单片机

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

文末获取源码 

感谢您的关注，请收藏以免忘记，点赞以示鼓励，评论给以建议，爱你哟

项目编号：BS-PT-089

一，项目简介

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

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

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

前台包含有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 配置。所以技术是完全可行的。

二，环境介绍

语言环境：Java:  jdk1.8

数据库：Mysql: mysql5.7

应用服务器：Tomcat:  tomcat8.5.31

开发工具：IDEA或eclipse

后台开发技术:springboot+mybatis

前台开发技术：vue+elementUI

三，系统展示

博客前台

 用户注册和登录

 

 手机验证码登录：

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

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

 提现

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

 博文分类浏览

 阅读排行榜

 我的收藏

 浏览记录

 个人中心

后台登录

 数据统计

 用户管理

 博客管理

 分类管理

 充值记录

 提现审核

 订单管理

 前端轮播广告图片管理

四，核心代码展示

  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/小蓝xlanll/article/detail/113313
推荐阅读
相关标签

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

  

闽ICP备14008679号