美文网首页Spring Boot半栈工程师前端Vue专辑
快速了解Vue & SpringBoot2.0开发架构

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

作者: __夏悸 | 来源:发表于2018-08-18 15:57 被阅读204次
    分享&成长

    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

    相关文章

      网友评论

      • 1ffa1065c722:话说你是easy-ui中文社区的群主吧,UC的人么?
        __夏悸:@记忆丶抹不去 嗯,在UC呆过。
      • acooler15:正好需要,感谢

      本文标题:快速了解Vue & SpringBoot2.0开发架构

      本文链接:https://www.haomeiwen.com/subject/ncufiftx.html