Vue+SpringBoot开发V部落博客管理平台

V部落是一个多用户博客管理平台，采用Vue+SpringBoot开发。

演示地址： http://45.77.146.32:8081/index.html

项目地址: https://github.com/lenve/VBlog

登陆页面

文章列表

发表文章

用户管理

栏目管理

数据统计

技术栈

后端技术栈

后端主要采用了：

1.SpringBoot

2.SpringSecurity

3.MyBatis

4.部分接口遵循Restful风格

5.MySQL

前端技术栈

前端主要采用了：

1.Vue

2.axios

3.ElementUI

4.vue-echarts

5.mavon-editor

6.vue-router

还有其他一些琐碎的技术我就不在这里一一列举了。

快速运行

1.克隆本项目到本地

git@github.com:lenve/VBlog.git

2.找到blogserver项目中resources目录下的vueblog.sql文件，在MySQL数据库中执行

3.根据自己本地情况修改数据库配置，数据库配置在SpringBoot项目的application.properties中

4.在IntelliJ IDEA中运行blogserver项目

OK，至此，服务端就启动成功了，此时我们直接在地址栏输入 http://localhost:8081/index.html 即可访问我们的项目，如果要做二次开发，请继续看第五、六步。

5.进入到vueblog目录中，在控制台依次输入如下命令：

# 安装依赖
npm install
# 在 localhost:8080 启动项目
npm run dev

由于我在vueblog项目中已经配置了端口转发，将数据转发到SpringBoot上，因此项目启动之后，在浏览器中输入 http://localhost:8080 就可以访问我们的前端项目了，所有的请求通过端口转发将数据传到SpringBoot中（注意此时不要关闭SpringBoot项目）。

6.最后可以用WebStorm等工具打开vueblog项目，继续开发，开发完成后，当项目要上线时，依然进入到vueblog目录，然后执行如下命令：

npm run build

该命令执行成功之后，vueblog目录下生成一个dist文件夹，将该文件夹中的两个文件static和index.html拷贝到SpringBoot项目中resources/static/目录下，然后就可以像第4步那样直接访问了。

步骤5中需要大家对NodeJS、NPM等有一定的使用经验，不熟悉的小伙伴可以先自行搜索学习下，推荐Vue 官方教程 。

项目依赖

1. vue-echarts

2. mavonEditor

总结

以上所述是小编给大家介绍的Vue+SpringBoot开发V部落博客管理平台，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • spring boot+vue 的前后端分离与合并方案实例详解

    springboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发. 2.[推荐]使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部

  • Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

    Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

    环境搭建 spring boot的简介 以往我们开发时用到spring总是避免不了繁琐的配置,例如我们要配置一个数据库连接,可能需要以下几步: 1.编写jdbc.properties配置文件: 2.创建spring的配置文件,加入spring配置文件前缀.配置数据库连接信息以及sqlsessionFactory等等: 3.还要在web.xml文件中加入spring的监听. springboot的出现大大简化了项目的搭建过程(spring配置以及maven配置),让我们专注于应用功能的开发,而不是

  • Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)

    Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)

    在上篇文章给大家介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一),接下来我们添加分页相关的依赖,时间紧张,直接上代码了,贴上我的pom文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=

  • Vue+SpringBoot开发V部落博客管理平台

    Vue+SpringBoot开发V部落博客管理平台

    V部落是一个多用户博客管理平台,采用Vue+SpringBoot开发. 演示地址: http://45.77.146.32:8081/index.html 项目地址: https://github.com/lenve/VBlog 登陆页面 文章列表 发表文章 用户管理 栏目管理 数据统计 技术栈 后端技术栈 后端主要采用了: 1.SpringBoot 2.SpringSecurity 3.MyBatis 4.部分接口遵循Restful风格 5.MySQL 前端技术栈 前端主要采用了: 1.Vue

  • Python采用Django开发自己的博客系统

    Python采用Django开发自己的博客系统

    好久之前就想做一下自己的博客系统了,但是在网上查了查好像是需要会一些Node.js的相关知识,而且还要安装辣么多的库什么的,就不想碰了.但是我遇到了Django这么一款神器,没想到我的博客系统就这么建立起来了.虽然是最基础的类型.但是也算是成功了,这篇博客比较适合对Django有了一定了解的童鞋,如果是新手的话,建议先看一下django的基础知识点再来做实验,这样效率更高! 好了,话不多说,开始吧. 搭建框架  •创建项目及应用 搭建框架的意思,就是安装Django以及做好相关的配置.因为我是在

  • 利用Vue.js+Node.js+MongoDB实现一个博客系统（附源码）

    前言 这篇文章实现的博客系统使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的修改和删除).文章编辑(Markdown).标签分类等功能. 前端模仿的是 hexo 的经典主题 NexT,本来是想把源码直接拿过来用的,后来发现还不如自己写来得快,就全部自己动手实现成 vue components. 实现的功能 1.文章的编辑,修改,删除 2.支持使用 Markdown 编辑与实时预览 3.支持代码高亮 4.给文

  • 详解vue.js 开发环境搭建最简单攻略

    详解vue.js 开发环境搭建最简单攻略

    做为一名学习路上的小白,起初就对 vue.js 有着莫名的好感,知道 vue.js 也能实现 angular.js 的双向绑定等一些功能后,妥妥的先把 angular.js 和 node.js 丢到后面再去学, 看了看 vue 文档,首先要搭建一个开发环境,因为自己太小白,看了一些搭建开发环境的博客,表示专业术语太多依然还是一脸懵逼. 具体流程大概如下: 很难理解?没关系,我也没理解,跟着操作就行了,我是window系统. 1.安装node.js 起初是很不理解的,我学 vue.js 还要掌握

  • Python使用Django实现博客系统完整版

    今天花了一些时间搭了一个博客系统,虽然并没有相关于界面的美化,但是发布是没问题的. 开发环境 操作系统:windows 7 64位 Django: 1.96 Python:2.7.11 IDE: PyCharm 2016.1 功能篇 既然是博客系统,发布的自然是博客了.让我们想想,一篇博客有什么属性.所以我们要有能添加博客,删除博客,修改博客,以及给博客发评论,贴标签,划分类等功能. 关系分析 属性 博客:标题,内容. 标签:标签名 分类:分类的名称 评论:评论人,评论人email,评论内容 关

  • SpringBoot前后端分离实现个人博客系统

    SpringBoot前后端分离实现个人博客系统

    目录 一.项目简介 二.环境介绍 三.系统展示 四.核心代码展示 五.项目总结 一.项目简介 本项目使用springboot+mybatis+前端vue,使用前后端分离架构实现的个人博客系统,共7个模块,首页,写博客,博客详情页,评论管理,文章分类,标签管理和文章归档.该项目没有后端管理功能,比较适合用于大作业! 二.环境介绍 语言环境:Java:  jdk1.8 数据库:Mysql: mysql5.7/redis 应用服务器:Tomcat:  tomcat8.5.31 开发工具:IDEA或ec

  • 使用java springboot制作博客管理系统

    使用java springboot制作博客管理系统

    目录 前言 需求分析 用户管理. 文章管理. 链接管理. 日志管理. 数据管理. 系统管理. 功能分析 部分表设计 部分代码实现 前言 博客,又译为网络日志. 部落格或部落阁等,是一种通常由个人管理.不定期张贴新的文章的网站. 博客上的文章通常根据张贴时间, 以倒序方式由新到旧排列. 许多博客专注在特定的课题上提供评论或新闻, 其他则被作为比较个人的日记. 一个典型的博客结合了文字.图像. 其他博客或网站的链接. 及其它与主题相关的媒体. 能够让读者以互动的方式留下意见,是许多博客的重要要素.大

  • 使用springboot制作博客管理系统

    使用springboot制作博客管理系统

    目录 前言 需求分析 用户管理. 文章管理. 链接管理. 日志管理. 数据管理. 系统管理. 功能分析 部分表设计 部分代码实现 前言 博客,又译为网络日志. 部落格或部落阁等,是一种通常由个人管理.不定期张贴新的文章的网站. 博客上的文章通常根据张贴时间, 以倒序方式由新到旧排列. 许多博客专注在特定的课题上提供评论或新闻, 其他则被作为比较个人的日记. 一个典型的博客结合了文字.图像. 其他博客或网站的链接. 及其它与主题相关的媒体. 能够让读者以互动的方式留下意见,是许多博客的重要要素.大

  • node.js博客项目开发手记

    需要安装的模块 body-parser 解析post请求 cookies 读写cookie express 搭建服务器 markdown Markdown语法解析生成器 mongoose 操作Mongodb数据库 swig 模板解析引擎 目录结构 db 数据库存储目录 models 数据库模型文件目录 public 公共文件目录(css,js,img) routers 路由文件目录 schemas 数据库结构文件 views 模板视图文件目录 app.js 启动文件 package.json a

  • SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程

    一.简介 这是一款基于 JS 实现的超轻量级桌面版聊天软件.主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket.也支持web网页聊天实现.文字聊天,互传文件,离线消息,群聊,断线重连等功能. 先看一下效果,下图左边是web版,右边为PC版. 二.本地搭建 2.1 技术栈 后端技术栈: springboot: 让开发人员快速开发的一款Java的微服务框架. tio: 是百万级网络框架oauth2.0: OAuth 2.0 是一个行业的标准授权协议. OAuth 2

随机推荐