芊雨的博客

简介写文章功能部分还有一个重要的功能没有完成，那就是图片上传。图片上传这里主要介绍两种实现方式：1、使用 MinIO 搭建图片服务，完成图片上传功能。2、使用七牛云对象存储使用 MinIO简介MinIO 是一个基于Apache License v2.0开源协议的对象存储服务。它兼容亚马逊S3云存储服务接口，非常适合于存储大容量非结构化的数据，例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等，而一个对象文件可以是任意大小，从几kb到最大5T不等。MinIO 中文文档：https://docs

简介删除文章删除功能比较简单，只需进行如下操作：调用删除接口删除文章然后再刷新文章列表修改文章在文章列表页面点击修改文章按钮跳转到写文章页面，同时带上文章 id 作为参数在写文章界面创建的时候判断，路由参数中是否有文章 id如果有文章 id 就查询文章信息，并赋值给 this.article如果没有文章 id 就不执行其他操作前端1、在@/api/article.js中添加调用修改文章、删除文章、根据 id 获取文章信息 api 的方法/** * 根据 id 删除文章

简介写文章页面，使用 Markdown 编辑器， 关于Markdown编辑器，vue-admin-template 默认使用的是 tui.editor ，这里使用 mavonEditor，因为 mavonEditor 的用法更加简单，文档也通俗易通，而且个人感觉样式更加美观，可以根据个人喜好自行选择。tui.editor : https://github.com/nhnent/tui.editormavonEditor : https://github.com/hinesboy/mavonEdito

简介退出登录的一种比较简单的实现是直接在客户端删除token，但是这存在一个问题，就是被删除的 token 依然有效，按理说注销登录之后 token 应该也是失效的。这一篇文章就主要介绍怎么让 token 失效网上方法有很多，可以参考这篇文章：JWT 身份认证优缺点分析以及常见问题解决方案这里我们使用 Redis 黑名单的方式安装Redis1、安装 docker （这里使用阿里云，系统 CentOS 7）# 安装需要的工具包sudo yum install -y yum-utils# 设置

后端实现用户登录1、用户登录之后可以使用很多方法来保存登录态，这里使用JWT引入依赖：<!-- jwt --><dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.1</version></dependency>2、封装 JWT 用到的

简介前面我们实现了博客系统的前台展示页面，还有留言功能没有实现，实现留言功能无非就是在后端增加留言表，对留言进行增删改查。和文章表类似，这里就不在赘述。既然作为一款动态博客，那么后台管理是必不可少的。为了不重复造轮子，我们直接使用开源项目 vue-element-admingithub: https://github.com/PanJiaChen/vue-element-admin中文文档：https://panjiachen.gitee.io/vue-element-admin-site/zh/

简介前端实现时间线功能就比较简单，因为 Element-UI 中已经有现成的组件，详情可参考：https://element.eleme.cn/#/zh-CN/component/timeline步骤1、js 部分只用发送一个请求即可import request from "@/http/request";export default { name: "TimeLine", data() { return { timelineData: [], }; },

简介其实在主界面写好之后，分类和标签页面其实就很简单了，下面主要来介绍一下我踩过的坑。实现标签页面1、因为主界面中的文章卡片可以复用，所以我们单独抽取成组件2、新建 @/components/ArticleItem.vue 组件<template> <el-card> <div slot="header"> <router-link class="main-text" :to="'/post/' + article.id" v-

后端处理要想实现分页，我们的数据量要比较大才行，我们可以使用 SpringBootTest 往数据库中批量添加数据。1、引入依赖<!-- 单元测试 --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test&lt

简介博客信息部分主要放在文章列表的右边，主要包含三个部分：1、个人信息，2、分类列表，3、标签列表代码实现因为博客信息在多个组件中用得到，所以可以将其存入 vuex 中, vuex 文档：https://vuex.vuejs.org/zh/先在 @/http/urls.js中新增url地址export default { baseUrl: "/api/v1", article: "/article", articles: "/articles", tags: "/tags",

简介由于本人不是专业的前端，所以写出来的界面可能会稍微有些丑陋，甚至有些地方的写法不是很专业，还请大家见谅主界面JS 部分首先是 js 逻辑部分我们先在@/http/request.js中定义获取文章信息的方法// 此处省略 axios 的封装，前面的文章中有export default { getArticles(page, limit) { return instance.get(urls.articles, { params: { page: pa

1、使用 vue-cli 创建项目，并且安装依赖vue-cli文档： https://cli.vuejs.org/zh/说明：博客样式仿照 reco ，官网：https://vuepress-theme-reco.recoluan.com/，reco 是基于 VuePress 的一个静态博客，如果只是想搭建静态博客的话 reco 可以是一个好的选择，托管到 gitee page 或者 github page 上都很方便。使用 npm install XXX 命令安装如下依赖： // pa

简介博客一般都会有一个时间线，本篇介绍时间线接口的实现代码实现1、开发时间线功能之前，我们先将数据库中的文章时间打乱，这样的话按照年份汇总会显得比较均匀package pers.qianyucc.qblog.service;import cn.hutool.core.util.*;import lombok.extern.slf4j.*;import org.junit.*;import org.junit.runner.*;import org.springframework.bean

简介一般博客信息包括，博客名称、博客描述、封面轮播图、博主头像、博主名称等等信息。这里提供两种思路：给用户提供页面表单，让用户第一次初始化博客的时候填写这些信息，然后存入数据库（这个数据表可以只有两个字段：key 和 value 专门用来存储博客配置），每次 Vue 实例创建的时候使用 created 钩子函数检查博客是否已经初始化。直接将这些信息写入配置文件，程序启动之后，后端直接加载进内存，前端需要的话就直接返回给前端。这里为了简单，我们使用第二种方法。Hutool 工具类中有配置文件相关

简介有了文章的CRUD，现在来写文章的标签和分类相关的接口标签首先我们要明确需求，现在我们需要的是：查询出全部的标签根据标签找到对应的文章列表1、新建 TagControllerpackage pers.qianyucc.qblog.controller;import io.swagger.annotations.*;import org.springframework.beans.factory.annotation.*;import org.springframework.we

简介数据库使用 MySQL 、持久层框架使用 Mybatis-plus，本篇文章介绍对文章表简单的增删改查。接口遵循 RESTful 规范，详情可参考：理解RESTful架构——阮一峰代码实现1、首先导入依赖<!-- mybatis-plus --><dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</

简介后端采用 SpringBoot 搭建项目，开发工具使用IDEA，为了简化开发，建议安装 Lombok 插件。步骤搭建web项目，集成knife4j1、新建maven工程，导入依赖<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance

基于 SpringBoot + Vue 的个人博客系统简介以前写过几篇类似的文章，也是SpringBoot + Vue 的博客系统，但是感觉都不尽如人意，至少现在看来简直水的一比。所以抽时间，将这个项目重写了一遍，虽然仍有不足，但是思路相对以前来说更加清晰。每篇文章对应的参考代码，我都会在下面标注。本项目适合刚学完 SpringBoot 和 Vue 的朋友进行练手使用。由于本人资质平平，如果项目有什么 Bug 或者文章上写的有疏漏的地方，欢迎在文章下方评论，避免误导他人，或在码云提 issue，我们可