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


Posted in Javascript onDecember 27, 2017

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

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

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

登陆页面

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

文章列表

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

发表文章

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

用户管理

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

栏目管理

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

数据统计

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

技术栈

后端技术栈

后端主要采用了:

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部落博客管理平台,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js获取视频时长代码
Apr 10 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
简单的Vue异步组件实例Demo
Dec 27 #Javascript
Vue.js组件间的循环引用方法示例
Dec 27 #Javascript
全面介绍vue 全家桶和项目实例
Dec 27 #Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
浅谈vue-router 路由传参的方法
Dec 27 #Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 #Javascript
You might like
PHP数组实例总结与说明
2011/08/23 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
vue跨域解决方法
2017/10/15 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
python中实现php的var_dump函数功能
2015/01/21 Python
Python第三方库的安装方法总结
2016/06/06 Python
Python连接DB2数据库
2016/08/27 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
化验室技术员岗位职责
2013/12/24 职场文书
保险公司年会主持词
2014/03/22 职场文书
政府法律服务方案
2014/06/14 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers