Blog management system | Design and implementation of personal blog system based on SpringBoot+Vue+ElementUI

Author Homepage: Programming Compass

About the author: High-quality creator in the Java field, CSDN blog expert, invited author of Nuggets, many years of architect design experience, resident lecturer in Tencent Classroom

Main content: Java project, graduation design, resume template, learning materials, interview question bank, technical mutual assistance

Favorites, likes, don't get lost, it's good to follow the author

Get the source code at the end of the article 

Item number: BS-PT-089

1. Project Introduction

With the rapid rise of the Internet, the Internet has gradually become the main medium for people to communicate in daily life, and the specific communication methods are constantly updated with the advancement of technology. In the past, people did not have their own blogs, so they could only express their thoughts and feelings in scattered and unorganized ways, such as instant messaging software or posting on forums, etc., but these methods are complicated to operate. The security protection performance of personal information is not very strong. Therefore, with the popularity of blogs on the Internet, people can express their thoughts and feelings through blogs, show themselves and let more people know you. It can be said that blogs are unlimited personal diaries on the Internet. As a training base for people to improve their writing level and a network carrier for expressing words, blogs focus on expressing self-feeling and life. Regular blogging can quickly hone bloggers’ writing skills and make their ideology more Deep and sharp.

A blog, also known as a weblog, is a website that is usually managed by an individual and publishes new articles from time to time. Articles on blogs are usually arranged in reverse order from newest to oldest according to the time of publication. Many blogs focus on providing commentary and news on specific topics, others serve as personal diaries. A typical blog combines text, images, links to other blogs or websites, and other relevant topic-based media. Being able to get readers to leave comments in an interactive way is an important element of many blogs. Most blog content is text-based, and blogs are part of social media networks.

Every major website has its own blog system, but the functions are different and limited. In order to realize our own blog system, we try to make the function simple, the page beautiful, and more convenient for the popular blog system .

The front desk contains 5 modules, as shown in Figure 1.

User login: Users need to log in and register before using the blog system. The registration method provides mobile phone number registration and email registration. After registration, verification code verification is required when logging in. Only after verification is successful can you enter the blog homepage.

Blog page display: The homepage displays everyone’s blog information, where users can search blogs based on keywords, comment on blogs, bookmark blogs they like, find blogs according to different types, and You can see high-quality blogs on the leaderboard.

Personal Center: The Personal Center displays personal information, order management, wallet management, and its own blog. In personal information, you can view browsing records, modify mobile phone numbers, email addresses, passwords, etc., and add an ID card authentication here. The order management is the record of purchasing paid blogs and advertisements. In the wallet, you can check the balance, recharge and withdraw cash, and the cash withdrawal is in the bank card.

Publish a blog: Before publishing a blog, you must first select the category of the blog. Add a new blog under the category, and you can also add pictures to the blog. After adding a blog, you can choose whether to charge or not.

Advertising module: This is a profitable function. When users read blogs, there will be advertisements nearby, and users can eliminate advertisements by spending money.

The background contains 6 modules, as shown in Figure 2.

User management: administrators can add new users, modify users, delete users, and query user information. Users can register themselves, or administrators can manually register. User names cannot be repeated. If users forget their passwords, they can contact the administrator for passwords. reset.

Blog review: The administrator needs to review the blogs posted by users, and some illegal information or violent content cannot be displayed. After the review is passed, the administrator can manually publish the post. If the review fails, the user will be prompted, and the review fails.

Advertisement management: administrators can add advertisements to the blog homepage, delete and modify advertisements, and view advertisements.

Blog management: administrators can delete blogs posted by users, modify user blogs, and query blogs.

Order management: When a user spends money to purchase a paid blog or advertisement, an unpaid order will be generated, and after the user finishes paying, it will be modified to a paid order, and the homepage can view the blog or eliminate the advertisement.

Recharge and withdrawal review: After the user clicks on withdrawal, selects the withdrawal amount and initiates a withdrawal. At this time, it will enter the withdrawal review status, and the background will receive it. When the administrator review status is changed to pass, the user's withdrawal amount can be deposited into the bank card , the administrator can also check the status of the review at any time.

1. Technical requirements

(1) Technical implementation plan

The blog system adopts the front-end and back-end separation technology. I use the vue framework, css, js, html, etc. for the front-end. The development tool used is WebStorm. The cache uses redis and the RESP visualization tool.

For the backend, I used SpringBoot to quickly develop scaffolding, the development tool I used was IDEA, the database I used was MySql, and the visualization tool was Navicat.

The front-end and back-end interaction means that the front-end uses Ajax to access data from the back-end across domains, and returns to the front-end after getting the data.

(2) System test plan

Collect information for in-depth study and use of IDEA development tools, Java language, Mysql database, and Vue framework. According to the system analysis, the blog system is classified and designed in detail. According to the system design and detailed design, carry out the system realization of each function. Carry out a complete test on the system according to the regulations, find out the existing problems, and further improve the blog system.

2. Job requirements

(1) Technical feasibility:

Use Vue+SpringBoot to realize the front-end and back-end development of the project. Vue is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and various supporting libraries, Vue is also fully capable of powering complex single-page applications. Vue uses two-way data binding, that is, when the data changes, the view also changes, and when the view changes, the data also changes synchronously, which is the essence of Vue. SpringBoot, in the current Internet back-end development, JavaEE occupies a dominant position. For JavaEE development, the preferred framework is the Spring framework. In traditional Spring development, it is necessary to use a large number of business-independent XML configurations to make the Spring framework run, which has been criticized by many developers. In order to further simplify the development of Spring applications, SpringBoot was born. Its design purpose is to further simplify the construction and development process of Spring applications. Spring Boot makes it easy to create stand-alone, production-grade Spring-based applications that you can "just run". We've taken a hard-nosed view of the Spring platform and third-party libraries so you can get started easily. Most Spring Boot applications require minimal Spring configuration. So the technology is totally doable.

Second, the environment introduction

Locale: Java: jdk1.8

Database: Mysql: mysql5.7

Application server: Tomcat: tomcat8.5.31

Development tools: IDEA or eclipse

Background development technology: springboot+mybatis

Front-end development technology: vue+elementUI

Three, system display

blog front desk

 User registration and login

 

 Mobile phone verification code login:

 

The feature of this blog is that you can set paid blog posts and free blog posts, and you need to deduct fees from your personal account to view paid blog posts

 In the personal center, you can bind your own bank card and perform online recharge and cash withdrawal

 withdraw

 

You can choose to pay or free when publishing blog posts

 Browse by category

 read leaderboard

 my collection

 browsing history

 personal center

Background login

 

 Statistics

 User Management

 blog management

 Category management

 Recharge record

 Cash withdrawal review

 order management

 Front-end carousel advertisement image management

Fourth, the core code display

package com.dys.controller;

import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.dys.R.R;
import com.dys.pojo.Classification;
import com.dys.pojo.Posts;
import com.dys.service.ClassificationService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/classification")
public class ClassificationController {

    @Autowired
    private ClassificationService classificationService;

    /**
     * 前端
     * 查询所有的分类信息
     * @return
     */
    @PostMapping
    public R getClassification(){
        List<Classification> list = classificationService.list(null);
        System.out.println("数据"+list);
        return R.ok(list);
    }

    /**
     * 条件分页查询,根据传来的条件去找到对应的数据
     * @param page  分页
     * @param search    条件
     * @return R
     */
    @GetMapping("/selectClassification")
    public R selectClassification(Page<Classification> page,@RequestParam String search){
        Page<Classification> classificationPage = classificationService.selectClassification(page, search);
        return R.ok(classificationPage);
    }

    /**
     * 新增分类
     * @param classification 分类对象
     * @return R
     */
    @PostMapping("/addClassification")
    public R addClassification(@RequestBody Classification classification){
        boolean isOk = classificationService.addClassification(classification);
        return isOk ? R.ok() : R.error();
    }

    /**
     * 修改分类
     * @param classification 分类对象
     * @return R
     */
    @PostMapping("/updateClassification")
    public R updateClassification(@RequestBody Classification classification){
        boolean isOk = classificationService.updateClassification(classification);
        return isOk ? R.ok() : R.error();
    }

    /**
     * 删除分类
     * 注:删除分类的同时还要删除有这个分类对应的博客
     * 在根据博客id删除收藏,历史记录,排行榜里面的对应的博客信息
     * 在根据博客里面的用户id删除对应的创作博客信息
     * @param id 分类ID
     * @return R
     */
    @DeleteMapping("/deleteClassification/{id}")
    public R deleteClassification(@PathVariable String id){
        boolean isOk = classificationService.deleteClassification(id);
        return isOk ? R.ok() : R.error();
    }

    /**
     * 后端
     * 图表数据查询,先查询出所有的分类ID
     * 在根据ID去博客表找对应的博客的数量
     * 返回每个分类有多少个博客
     * @return R
     */
    @GetMapping("/selectEChartsData")
    public R selectEChartsData(){
        List<Classification> list = classificationService.selectEChartsData();
        return R.ok(list);
    }

}
package com.dys.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.OrderItem;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.dys.R.R;
import com.dys.mapper.CollectionMapper;
import com.dys.pojo.Collection;
import com.dys.pojo.Posts;
import com.dys.service.CollectionService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/collection")
public class CollectionController {

    @Autowired
    private CollectionService collectionService;

    /**
     * 新增收藏记录
     * @param collection
     * @return
     */
    @PostMapping("/addCollection")
    public R addCollection(@RequestBody Collection collection){
        //加上@RequestBody后可以接收前端传来的数据,把数据新增到数据库中
//        boolean isOk = collectionService.saveCollection(collection);
        //返回数据,当数据为真时返回成功,为假时返回失败
//        return isOk ? R.ok() : R.error("已经收藏过了");
        //TODO
        collectionService.save(collection);
        String id = collection.getId();
        return R.ok(id);
    }

    /**
     * 删除收藏记录
     * @param id
     * @return
     */
    @DeleteMapping("/deleteCollection/{id}")
    public R deleteCollection(@PathVariable String id){
//        Collection collection = new Collection();
//        collection.setUsersId(usersId);
//        collection.setPostsId(postsId);
//        boolean isOk = collectionService.deleteCollection(collection);
        boolean isOk = collectionService.removeById(id);
        return isOk ? R.ok() : R.error();
    }

    /**
     * 查询是否收藏
     * @param collection
     * @return
     */
    @PostMapping("/listCollection")
    public R listCollection(@RequestBody Collection collection){
        LambdaQueryWrapper<Collection> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(Collection::getUsersId,collection.getUsersId()).eq(Collection::getPostsId,collection.getPostsId());
        return R.ok(collectionService.getOne(wrapper));
    }

    /**
     * 根据用户id查询所有已收藏的博客
     * 上面是数据没分页,下面是将数据分页
     * @param id
     * @return
     */
//    @PostMapping("/listAllCollection/{id}")
//    public R listAllCollection(@PathVariable String id){
//        return R.ok(collectionService.listAllCollection(id));
//    }
    @GetMapping("/listAllCollection/{id}")
    public R listAllCollection(Page<Collection> page,@PathVariable String id){
        page.addOrder(OrderItem.desc("create_time"));
        return R.ok(collectionService.listAllCollection(page,id));
    }

}
package com.dys.controller;

import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.OrderItem;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.dys.R.R;
import com.dys.pojo.Classification;
import com.dys.pojo.Posts;
import com.dys.pojo.dto.PostsDTO;
import com.dys.service.ClassificationService;
import com.dys.service.PostsService;
import com.dys.service.UsersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.Comparator;
import java.util.List;

@RestController
@RequestMapping("/posts")
public class PostsController {

    /**
     * 博客表
     */
    @Resource
    private PostsService postsService;

    /**
     * 分类表
     */
    @Autowired
    private ClassificationService classificationService;

    /**
     * 用户表
     */
    @Autowired
    private UsersService usersService;

    /**
     * 后台
     * 条件分页查询
     * @param page      分页类,获取里面三个值:total:一共有多少个数据,size:每页可以存放的数据条数,current:当前是第几页
     * @param search    搜索的关键字
     * @return  R
     */
    @GetMapping("/postsPagingQuery")
    public R postsPagingQuery(Page<Posts> page, @RequestParam String search){
//        //mybatis-plus中的条件构造器,需要用到Lambda语法,使用Wrapper
//        LambdaQueryWrapper<Posts> lambdaQueryWrapper = new LambdaQueryWrapper<>();
//        //调用了like方法,实现模糊查询,lambda表达式查询条件,::获取实体类中的方法         ::--》Java8后:获取方法
//        //StrUtil--》一个工具类,isNotEmpty和isNotBlank都是非空判断的方法(isNotBlank会排除空格,isNotEmpty不会排除空格)
        if (search == null){

        }
//        lambdaQueryWrapper.like(StrUtil.isNotBlank(search),Posts::getTitle,search);
//        //按照修改时间降序排列
//        Page<Posts> postsPage = page.addOrder(OrderItem.desc("update_time"));
//        //mybatis-plus好用自带的分页的方法,可以传两个参数(分页的起始位置,结束位置),接收前端传来的参数,查询的数量
//        Page<Posts> servicePosts = postsService.page(postsPage, lambdaQueryWrapper);
//
//        List<Posts> records = servicePosts.getRecords();
//        records.forEach(item->{
//            //TODO 填充typeName
//            String typeName = classificationService.getTypeNameByTypeId(item.getClassificationId());
//            String usersName = usersService.getUserNameByUsersId(item.getUsersId());
//            item.setTypeName(typeName);
//            item.setUsersName(usersName);
//        });
//        //返回数据
//        return R.ok(servicePosts);

        Page<Posts> postsPage = postsService.postsPagingQuery(page, search);
        List<Posts> records = postsPage.getRecords();
        records.forEach(item->{
            //TODO 填充typeName
            String typeName = classificationService.getTypeNameByTypeId(item.getClassificationId());
            String usersName = usersService.getUserNameByUsersId(item.getUsersId());
            item.setTypeName(typeName);
            item.setUsersName(usersName);
        });
        return R.ok(postsPage);
    }


    /**
     * 博客数据按浏览量排序
     * @param posts
     * @return
     */
    @GetMapping("/getPostsAndViews")
    public R getPostsAndViews(Posts posts){
//        //按照浏览量降序排列
//        Page<Posts> postsPage = page.addOrder(OrderItem.desc("views"));
//        //mybatis-plus好用自带的分页的方法,可以传两个参数(分页的起始位置,结束位置),接收前端传来的参数,查询的数量
//        Page<Posts> servicePosts = postsService.page(postsPage);
        List<Posts> list = postsService.list();
        //list.sort(Comparator.comparing(Posts::getViews).reversed());     .reversed() --》 根据条件进行降序排序
        list.sort(Comparator.comparing(Posts::getViews).reversed());
        //返回数据
        return R.ok(list);
    }


    /**
     * 查看博客详情,多表查询,根据用户id,类型id查询对应的名字
     * @param id
     * @return
     */
    @GetMapping("/{id}/{isStatus}")
    public R getPostsId(@PathVariable boolean isStatus,@PathVariable String id){
//        Posts byId = postsService.getByIdWithTypeNameUsersName(id);
        PostsDTO byId = postsService.getByIdWithTypeNameUsersName(isStatus,id);
        return R.ok(byId);
    }

    /**
     * 根据分类id查询对应的分类数据
     * @param id
     * @return
     */
    @GetMapping("/classificationByIdData/{id}")
    public R classificationByIdData(Page<Posts> page,@PathVariable String id){
//        List<Posts> typeData = postsService.getByIdWithTypeData(page,id);
        Page<PostsDTO> typeData = postsService.getByIdWithTypeData(page,id);
        return R.ok(typeData);
    }

    /**
     * 新增方法
     * @param posts     Posts实体类
     * @return      R
     */
    @PostMapping
    public R savePosts(@RequestBody Posts posts){
        //加上@RequestBody后可以接收前端传来的数据,把数据新增到数据库中
        boolean isOk = postsService.save(posts);
        //返回数据,当数据为真时返回成功,为假时返回失败
        return isOk ? R.ok() : R.error();
    }

    /**
     * 修改方法
     * @param posts     Posts实体类
     * @return      R
     */
    @PatchMapping("/updatePosts")
    public R updatePosts(@RequestBody Posts posts){
        boolean isOk = postsService.updateById(posts);
        return isOk ? R.ok() : R.error();
    }

    /**
     * 删除博客,删除博客的同时要删除历史记录中的博客和收藏的博客
     * @param id        Posts实体类
     * @return      R
     */
    @DeleteMapping("/{id}")
    public R deletePosts(@PathVariable String id){
        boolean isOk = postsService.deletePosts(id);
        return isOk ? R.ok() : R.error();
    }

    /**
     * 前端
     * 条件分页查询根据用户ID查找自己创作的博客
     * @param id 用户ID
     * @param postsPage 分页
     * @param search 搜索条件
     * @return  R
     */
    @GetMapping("/selectBlogById")
    public R selectBlogById(Page<Posts> postsPage,@RequestParam String id,@RequestParam String search){
        Page<Posts> page = postsService.selectBlogById(postsPage, id, search);
        return R.ok(page);
    }

}

V. Project Summary

This project has developed and implemented a blog platform system. Compared with the traditional blog system, it can realize the function of paid blog posts. Authors can obtain certain benefits by charging for paid knowledge-based blog posts, which is like CSDN. Like publishing a paid blog or column, I hope the realization of this project can give you some reference ideas.

Guess you like

Origin blog.csdn.net/whirlwind526/article/details/128693557