快速了解Vue & SpringBoot2.0开发架构

分享&成长

vboot是一个 Vue 和 SpringBoot2.0的组合基础工程。如果你喜欢使用这两个框架做前后台开发,而又不知道如何让它们很好的组合,那么这个项目可能会是你入手学习的一个很好选择。

VBoot主要依赖四大框架.

Vue 2.x

SpringBoot 2.x

AdminLTE 2.x

vx-easyui

前端插件的使用

vue-select

bootstrapvalidator

Qs

vue-snotify

axios

font-awesome

lodash

pretty-checkbox-vue

vue-cropper

项目结构说明

项目后台构建使用gradle,前端构建使用webpack。项目目录结构是这两者的综合体,config、static和 wbuild 是 webpack 构建的配置。前后台代码都在 src 目录下,front目录表示所有的前端代码,main 保留了原始的标准 java 项目结构。

前端依赖配置为package.json 后台依赖配置为build.gradle

初始化项目前端依赖

npm install

or

yarn install

导入开发工具,建议使用idea

一般 idea 导入 gradle 项目都会进行自动构建和下载依赖,如果没有,在 idea 的右边栏有 gradle 的工具类,点击刷新按钮即可。首次初始化,可能会需要比较长时间的下载,需要耐心等待。

数据库和数据源配置

基础数据在 vboot.sql中,自行创建好数据库导入数据即可。

数据源的修改则在application.yml中对应配置即可,对于熟悉springboot的你,这都不是问题。

运行项目

后台启动项配置: 

前台启动项配置: 

前端编译: 

启动说明:

后台服务端口配置在application.yml的server.port默认配置8088,如果是开发模式下,只需启动服务即可,不需要使用浏览器访问。如果是准备发布,则需先执行如上配置的 front-build,再启动项目访问即可。

开发模式需要同时启动 front 服务和 boot 项目。 front 前端端口为8081。启动 front 服务后,访问 http://localhost:8081/,开发时所有的数据请求都会被代理到后台 boot 端进行处理。build 发布后自动能够无缝切换环境。

front 目录结构说明

如果你熟悉 vue 开发,那么这个结构你应该不会太陌生。

api 数据接口的配置和接口访问规则定义

assets 不需要经常改变的静态资源

components 自定义的全局组件

directive 自定义指令,注意是定义了权限控制指令

filters 全局的过滤器,这个暂时没用到,功能少,预留的标准结构。

router 前端的路由配置

store 全局数据状态管理

styles 样式,app.scss 为全局样式

utils 工具包

views 所有的页面都在此处了

App.vue vue 程序的主界面

bootstrap.js 一些全局的加载项和配置项

main.js 前端入口 js

mixins.js vue组件的全局配置。

项目截图

功能演示

源码地址:

https://gitee.com/gson/vboot

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,449评论 25 707
  • 科技 我们被人工智能歧视了吗? 毛西2018-06-09 毛西 剑桥大学二语教育硕士 英语戏剧导演 今日导读 人工...
    Kitlen阅读 505评论 0 1
  • 今天老师发给我三朵小花。我们开学一个礼拜了,下星期一我们就要上新课了。今天老师发了试卷儿,我和爸爸一起完成的
    马涵晴阅读 195评论 0 0
  • 2017.6.3,阴,周六 今天上午,我们一家驱车前往市区“金瑞酒店”参加朋友马东海之子结婚宴席。中午12点...
    万仕君阅读 321评论 0 1
  • 时间流逝 白驹过隙 但此后 再无并肩
    爱吃蜜饯的陈阅读 238评论 0 2