首页 > 编程语言 >[附源码]超简洁个人博客网站搭建+SpringBoot+Vue前后端分离

[附源码]超简洁个人博客网站搭建+SpringBoot+Vue前后端分离

时间:2024-09-18 10:34:58浏览次数:9  
标签:Vue SpringBoot nodejs hadluo 博客 blog 源码 文章

今天带来一款优秀的项目:个人博客系统源码 。 系统采用的流行的前后端分离结构,内含功能包括 "写博客文章",“修改博客文章”,“富文本编辑器”,“评论管理”“管理员角色”,“游客角色”,“文章标签”,“文章分类”

如果您有任何问题,也请联系小编,小编是经验丰富的程序员!

 

一. 系统演示视频

 https://githubs.xyz/show/264.mp4      

后端代码结构

二. 系统功能概述

  • 角色权限分为:管理员账号+游客账号(管理员可以管理文章,评论等)
  • 评论系统(可以评论图片,链接等)
  • 富文本编辑器(边写边预览)
  • 博客文章的增删改查
  • 分类+标签+时间归档
  • 热门推荐

三. 技术栈

前端技术栈

  • Vue

后端技术栈

  • SpringBoot+SpringMVC+MyBatis
  • MySQL8.0
  • Redis
  • JDK8

四. 源码获取

lz-code/hadluo-blog

 

五. 部署项目

安装mysql8.0,然后新建数据库"hadluo-blog" ,然后导入hadluo-blog.sql文件。

打开idea,导入maven后端项目,然后等待包下载完毕。

修改数据库信息为你数据库信息,信息在 application.yml里面

安装redis环境,不会的请参见下面这篇文章

老罗教知识:Windows安装Redis环境1 赞同 · 1 评论文章

修改redis的配置

在磁盘新建一个上传图片的存储路径,比如我新建的D://ftp

新建文章时需要上传封面图,这个图片就上传到D://ftp下面了,配置路径在:

然后启动 com.hadluo.blog.BlogApplication 主类 ,出现启动成功。

没有成功的,请联系小编。到此我们后端项目部署完成。下面开始部署前端。

安装nodejs, 版本为:v20.17.0, 版本必须为这个,否则可能会出现问题。到下面这个官网上下载nodejs

https://nodejs.org/zh-cn/download/prebuilt-installer​nodejs.org/zh-cn/download/prebuilt-installer

 

找到 v20.17.0版本,下载后直接安装就行了。

nodejs安装完成后,进入到 "hadluo-blog-h5" 前端目录

路径输入cmd ,回车

打开了cmd窗口,输入下面命令设置npm下载镜像

npm config set registry https://registry.npmmirror.com

执行安装依赖

npm install

运行

set NODE_OPTIONS=--openssl-legacy-provider 
npm run serve

具体功能见演示视频

标签:Vue,SpringBoot,nodejs,hadluo,博客,blog,源码,文章
From: https://www.cnblogs.com/java-bigdata/p/18418056

相关文章

  • Vue3.5中解构props,让父子组件通信更加丝滑
    前言在Vue3.5版本中响应式Props解构终于正式转正了,这个功能之前一直是试验性的。这篇文章来带你搞清楚,一个String类型的props经过解构后明明应该是一个常量了,为什么还没丢失响应式呢?本文中使用的Vue版本为欧阳写文章时的最新版Vue3.5.5关注公众号:【前端欧阳】,给自己一个进阶vu......
  • [Vue] v-html、v-show、v-if 的区别
    v-if作用:根据条件动态创建或销毁DOM元素。原理:v-if实际上是按需渲染的,它会根据表达式的真假值来决定是否在DOM树中插入或移除元素。如果条件为false,该元素不会存在于DOM中。性能:因为v-if会真正地添加或移除元素,因此它在初次渲染时的开销较大,特别是当需要频繁切换时会......
  • Vue实战指南:Vue中将一维对象数组转换为二维对象数组
    Vue实战指南:Vue中将一维对象数组转换为二维对象数组引言一维对象数组与二维对象数组的概念一维对象数组二维对象数组Vue中转换的方法示例一:使用计算属性实现转换示例二:使用methods中的函数实现转换示例三:使用Vue自定义指令实现转换示例四:使用Vuex进行状态管理实际开发......
  • Java计算机毕业设计校园疫情防控系统(开题报告+源码+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着全球疫情的持续演变,教育领域面临着前所未有的挑战。校园作为人员密集、流动性大的场所,其疫情防控工作直接关系到师生的生命健康与安全,以及教学秩......
  • Java计算机毕业设计校园二手物品交易平台(开题报告+源码+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育的普及和校园生活的丰富多彩,学生们在追求知识的同时,也积累了大量的二手物品,如书籍、电子产品、生活用品等。这些物品往往因使用周期短、......
  • Java计算机毕业设计校园二手交易平台(开题报告+源码+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育的普及与校园生活的丰富多彩,学生间的物质交流日益频繁。然而,传统的校园内二手物品交换方式往往受限于时间、空间及信息不对称等问题,导致......
  • springboot贵州特色产品销售管理系统-计算机毕业设计源码80943
    摘 要随着信息技术的快速发展和电子商务的广泛应用,传统的销售管理模式已经难以满足现代企业的需求。特别是在贵州这样一个充满特色产品的地区,如何有效地推广和销售当地特色产品,成为了一个亟待解决的问题。为此,开发一套基于SpringBoot+Vue的贵州特色产品销售管理系统,不仅可以......
  • springboot二手书交易系统-计算机毕业设计源码81264
    目录1绪论1.1选题背景与意义1.2国内外研究现状1.3论文结构与章节安排2系统分析2.1可行性分析2.2 系统功能分析2.2.1功能性分析2.2.2非功能性分析2.3 系统用例分析2.4 系统流程分析2.4.1 数据流程2.4.2 业务流程2.5本章小结3 系统总体......
  • 使用pnpm、monorepo 来构建 vue + 独立组件库项目
    新建项目使用pnpm进行安装pnpmcreatevue@latest在根目录下创建pnpm-workerspace.yaml文件packages:-'components/**'此处,components为根目录中的components文件夹,他是独立于我们项目的一个组件库,不包含在src内,此时目录结构如下:root-components-node_modules......
  • 基于Java的服装商店管理系统的设计和实现(源码+LW+调试文档)
    目录:完整视频演示:系统架构:程序运行截图:核心代码参考:   数据库sql:项目技术介绍:java介绍:Mysql数据库介绍:为什么选择我:获取源码:......