小白搭博客（基于SpringBoot+Vue）
关注
分享
扫一扫
随着学习时间的增加渐渐发现，就算学了新的技术没有项目的驱动很快就会忘掉，于是就有了这个专栏，此专栏主要介绍笔者搭建博客的过程。主要用到的技术：前端Vue、后端Spring Boot
风絮_
愿你在山顶时有清风拂面，愿你在谷底时依然不孤不寒。
展开
-
基于Spring Boot+Vue的博客系统 23——博客前台细节优化
使用history路由vue-router 默认 hash 模式 —— 使用URL的hash来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。我们可以在/src/router/index.js中修改router配置，使用history模式的路由。当使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id。...原创 2019-10-26 14:47:54 · 564 阅读 · 1 评论 -
基于Spring Boot+Vue的博客系统 22——将博客部署到服务器
linux服务器管理宝塔面板：宝塔Linux面板是提升运维效率的服务器管理软件，支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理功能。有20个人的专业团队研发及维护，经过200多个版本的迭代，功能全，少出错且足够安全，已获得全球百万用户认可安装。官网：https://www.bt.cn/安装宝塔面板作用在于：安装完成之后我们就可以通过浏览器向...原创 2019-10-18 17:07:42 · 613 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 21——关于我界面的设计和一些细节的优化
关于我界面关于我界面这里暂且只在前端实现，不涉及后台交互。主要展示个人信息以及自我介绍。这里新建一个/src/components/page/aboutMe.vue组件，注册路由，修改导航栏，使其跳转。<template> <b-container class="main"> <b-row> <b-col cols="12" ...原创 2019-10-17 22:41:36 · 571 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 20——留言功能的实现
需求博客给浏览者提供留言功能，可以是指出博主文章的错误，也可以是关于博客设计上的不足。未登录的用户可以进行匿名留言，匿名留言展示默认头像和默认昵称。实现后端数据库设计与数据库中留言表对应实体类设计如下：package com.qianyucc.blog.model.entity;import lombok.*;import javax.persistence.*;/** * ...原创 2019-10-17 19:16:29 · 4048 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 19——博客信息展示和日志打印
博客信息展示博客信息包括博主昵称，描述，头像以及博客数量、浏览量、评论数、标签数量等后端设计在application.yml中配置管理员id在ArticleRepository添加计算文章总数的方法// 查询所有的浏览量@Query(value = "select sum(views) from article", nativeQuery = true)Long sumViews(...原创 2019-10-16 13:41:32 · 680 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 18——博客归档功能
需求博客归档界面单独设计一个页面，左边以月份的形式展示时间，右边分页按月份展示文章，默认展示最新月份的文章，点击左边时间右边会显示对应月份的文章。实现后端API实现数据库访问层（ArticleRepository）设计：// 查询出所有文章最后一次更新的时间@Query(value = "select gmt_update from article", nativeQuery = tr...原创 2019-10-16 10:07:25 · 955 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 17——点击分类或者标签跳转
需求在主页有两个面板分别是展示所有标签的面板和展示所有分类的面板，这里需要实现这两个面板，并且点击这两个面板上的链接可以更新articles.vue组件中的文章数据。实现后端api设计主要涉及到四个api，分别是：获取所有标签、获取所有分类、根据标签获取文章，根据分类获取文章Controller的设计如下：@GetMapping("/getCategories")public Lis...原创 2019-10-14 20:22:42 · 834 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 16——热门文章功能简单的实现
需求博客需要加入一个热门文章面板，此面板用于展示热门文章，热门文章在每天的固定时间更新（例如，每天六点钟统计热门文章），热门文章的优先级别按照阅读数和评论数来计算得出。实现SpringBoot定时任务由于每天都要在固定时间筛选出热门文章，所以要在SpringBoot项目中开启定时任务@SpringBootApplication@EnableScheduling // 启动定时任务pu...原创 2019-10-14 16:58:08 · 788 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 15——实现文章搜索功能（分词搜索）
需求在输入框输入一串带有关键词的字符串，后台可以将字符串分成若干个关键词，然后从数据库中查询出带有关键词的文章，在页面上显示，并且显示的时候关键词为红色后端实现一开始分词搜素功能使用的是ElasticSearch来实现的，最后发现只用使用一款分词工具就可以实现相同的功能，使用ElasticSearch简直是是大材小用，这里分词工具选用的是HanLP。使用HanLPHanLP是一系列模型...原创 2019-10-13 23:08:06 · 4303 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 14——使用策略模式实现评论功能
需求上一篇文章主要介绍了评论功能的实现，一条评论有一级评论和二级评论两种类型，在CommentService里面我们根据评论的类型的不同进行不同的操作，如下：这里我们可以使用策略模式实现对此功能的重构。（注意：重构之后的代码在性能上或许还没有原来的代码好，甚至还有一点画蛇添足，这里只用于练习策略模式的使用）使用策略模式之后使用策略模式之后的代码如下，业务层代码比之前更简单，而且扩展性更强...原创 2019-10-13 17:14:24 · 739 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 13——评论功能的实现
需求评论分为匿名评论和实名评论，匿名评论的评论者（也就是commentator字段）的值为0，头像为默认头像，用户登录之后可以进行实名评论在文章评论下面，还可以对一级评论进行评论，一级评论和二级评论的区别在于type字段的不同，一级评论为1，二级评论为2后端设计新建com.qianyucc.blog.model.dto.CommentDTO类，用于封装前端向后端传输的评论信息pa...原创 2019-10-13 14:18:08 · 5166 阅读 · 2 评论 -
基于Spring Boot+Vue的博客系统 12——实现文章展示功能
需求上一篇文章介绍了如何在主页展示文章列表，这篇文章主要介绍点击列表中文章标题跳转到文章详情界面功能的实现后端api设计首先封装一个ArticleVO类，用户存储一篇文章的详细信息package com.qianyucc.blog.model.vo;import lombok.*;/** * @author lijing * @date 2019-10-12 18:18 ...原创 2019-10-12 20:31:10 · 3442 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 11——展示博客列表功能的实现
需求在博客的“我的博文”组件中，我们需要将博客信息以列表形式显示，并且下方有分页功能。后端分页的实现创建com.qianyucc.blog.model.vo.SimpleArticleVO类，封装返回页面的文章信息package com.qianyucc.blog.model.vo;import lombok.*;/** * @author lijing * @date 2...原创 2019-10-12 18:06:24 · 1041 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 10——后端异常的设计与处理
处理在Controller产生的异常定义com.qianyucc.blog.exception.ApiException类，表示在Controller产生异常的超类package com.qianyucc.blog.exception;import lombok.*;/** * @author lijing * @date 2019-10-12 10:25 * @descri...原创 2019-10-12 12:26:14 · 448 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 02——导航栏设计
删除HelloWorld.vue，在components文件夹下面新建一个navBar.vue组件，用来展示导航栏。此处用到BootstrapVue中的Nav组件：navBar.vue<template><!-- variant属性用于调节导航栏的颜色 --> <b-navbar toggleable="lg" type="light" varia...原创 2019-10-09 19:35:01 · 1113 阅读 · 1 评论 -
基于Spring Boot+Vue的博客系统 03——设计主界面
0. 图标问题图标使用阿里巴巴矢量图标，官方网站：https://www.iconfont.cn/home/index使用方法：找到想要的图标，点击购物车，添加入库。选择完成后点击右上方购物车。添加至项目。复制链接，粘贴到index.html里面。然后点击复制代码，即可使用<i class="代码"></i>标签引入项目。1. 在/src.comp...原创 2019-10-09 23:28:05 · 1274 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 04——展示一篇文章
1. 实现MarkDown to HTML因为存入数据库中的文章内容为markdown格式，要像展示在网页上必须将markdown转换为HTML，这里用到一个开源项目：showdownjs项目地址为：https://github.com/showdownjs/showdown使用npm install showdown命令安装新建/src/components/page/arti...原创 2019-10-10 18:06:43 · 1279 阅读 · 1 评论 -
基于Spring Boot+Vue的博客系统 05——封装axios
0. 使用axiosaxios官网：http://www.axios-js.com/和后端交互主要使用axios进行请求发送，使用npm install axios进行安装新建/src/request/http.js，在文件中导入axios，并新建一个实例，导出import axios from 'axios'// 设置请求超时时间,并创建axios实例var instanc...原创 2019-10-10 19:03:03 · 443 阅读 · 1 评论 -
基于Spring Boot+Vue的博客系统 06——使用Vuex
0. vuex介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。官方网站：https://vuex.vuejs.org/...原创 2019-10-10 19:23:08 · 492 阅读 · 2 评论 -
基于Spring Boot+Vue的博客系统 07——创建Spring Boot项目
0. 前期准备后端使用SpringBoot创建单体应用，ORM使用Spring Data Jpa，数据库为了方便就使用H2了开发工具：IntelliJ IDEAJDK版本：1.8构建工具：maven1. 创建项目新建项目，选择maven填入GroupId和Artifactid，选择项目目录，创建完成。2. 添加依赖<?xml version="1.0" enco...原创 2019-10-11 10:07:19 · 381 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 08——数据库访问
0. 实体类设计新建com.qianyucc.blog.model.entity.ArticleDO对应数据库中文章表package com.qianyucc.blog.model.entity;import lombok.*;import javax.persistence.*;/** * @author lijing * @date 2019-10-11 10:10 ...原创 2019-10-11 11:25:55 · 547 阅读 · 0 评论 -
基于Spring Boot+Vue的博客系统 09——登录功能的实现（码云第三方登录）
0. 第三方登录的使用博客提供码云的第三方登录，用户可以通过码云账号登录博客登录码云，在下方找到OpenApi根据文档创建一个应用，注意这里应用主页可以随便填一个网址，因为项目上线的时候才用得到，应用回调地址为前端项目的URL地址，权限我们只需要用户信息就行。3. 需要注意的是：获取用户信息的api接口随着时间可能改变，当获取失败的时候可以找到官方文档看api是否发生了改变...原创 2019-10-11 18:36:03 · 2001 阅读 · 5 评论 -
基于Spring Boot+Vue的博客系统 01——博客简介和项目初始化
概述为什么要自己写博客？第一个原因是因为个人认为一个程序员应该有自己的博客，用来记录生活的点点滴滴，用来总结学习过程中踩过的坑。再者就是因为在网上看过很多教程，也有跟着网上的实战项目在做，但是这种跟着别人敲代码的感觉缺乏独立思考的过程。于是就想着自己做一个项目，尽可能地用到学过的知识。做到对学过知识的温故知新，加深记忆。博客简介前端主要用到 Vue、Vuex、BootstrapVue...原创 2019-10-09 18:28:25 · 1136 阅读 · 2 评论