SpringBoot-vue 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
SpringBoot-vue 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 MIT
开发语言 Java 查看源码 »
操作系统 跨平台
软件类型 开源软件
所属分类 开发工具Java开发工具
开发厂商
地区 国产
提 交 者 boylegu
适用人群 未知
收录时间 2017-07-11

软件简介

SpringBoot + 前端MVVM 基于Java的微服务全栈快速开发实践。

如今Web开发领域,当有人提到Java时,总会让人觉得臃肿、古老而过时且开发效率没有某些动态语言高效,甚至在此之前还有人高喊“Java 已死!”,但是事实真是如此吗?其实如果你一直关注着Java,那你的感悟会更深,尽管它有很多的缺点和啰嗦,但不可否认,Java依然是工业界中最优秀的语言,而且它一直保持着与时俱进。本项目将使用SpringBoot + Vue2 + Webpack2 配合最简单CRUD的逻辑来展示一个基于Java的微服务全栈快速开发实践的Demo。

在某些时候,其开发效率已经并不比某些动态语言低。

这份小礼物,将献给所有刚走出校园、献给和我一样即将步入不惑之年、献给所有热爱开源的伙伴们,也纪念我入行6周年,Our Freedom~!

为什么是SpringBoot

首先先来简单的介绍一下Spring,它是目前Java生态中最广为人知、流行的企业级Web框架。不像其他一些框架仅聚焦在某个领域,Spring框架通过其容器化组件式管理及开发,可提供或定制各式各样的功能来满足企业化需求。

那么相较于Spring,Spring Boot的目标是更加容易的创建Spring应用、建立自动化、最少人为干预的生产级配置,真正意义做到开箱即用,并且对于新用户及Spring平台的用户极易上手,快速开发。

下图主要展示了Spring Boot在Spring庞大的生态圈中的层级关系

spring_vue

SpringBoot的目标主要:

  • 为所有Spring开发提供一个从根本上更快,且随处可得的入门体验。

  • 开箱即用,但通过不采用默认设置可以快速摆脱这种方式。

  • 提供一系列大型项目常用的非功能性特征,比如:内嵌服务器,安全,指标,健康检测,外部化配置。

绝对没有代码生成,也不需要XML配置。

下面展示的是本项目的SpringBoot相关代码片段,你觉得简单么?

@RestController
@RequestMapping("/api/persons")
public class MainController {

    @RequestMapping(
            value = "/detail/{id}", 
            method = RequestMethod.GET, 
            produces = MediaType.APPLICATION_JSON_VALUE
            )
    public ResponseEntity<Persons> getUserDetail(@PathVariable Long id) {

        /*
        *    @api {GET} /api/persons/detail/:id  details info
        *    @apiName GetPersonDetails
        *    @apiGroup Info Manage
        *    @apiVersion 1.0.0
        *
        *    @apiExample {httpie} Example usage:
        *
        *        http GET http://127.0.0.1:8000/api/persons/detail/1
        *
        *    @apiSuccess {String} email
        *    @apiSuccess {String} id
        *    @apiSuccess {String} phone
        *    @apiSuccess {String} sex
        *    @apiSuccess {String} username
        *    @apiSuccess {String} zone
        */

        Persons user = personsRepository.findById(id);

        return new ResponseEntity<>(user, HttpStatus.OK);
    }

}

为什么是MVVM

那么在我继续之前,我也想和大家回顾一下Web开发的发展简史:

  • 第一阶段: 网页三剑客,生猛的通过原生javascript直接操作Dom树;

  • 第二阶段: JQuery诞生,配合前端MVC为代表的Backbone.js, 让我们可以优雅而简单的操作Dom树;

  • 第三阶段: 后端架构升级为MVC,前后端分工更清晰,前端工程化、ECMAScript规范开始崭露头角;

  • 第四阶段: 后端架构进入了微服务时代,前端架构不仅升级为MVVM,ES6更是成为目前事实上的标准;

在这里,我不想过于神化MVVM有多么的先进,JQuery为代表的MVC有多么的落后,但确实MVVM有着很多先进的特性:

  • 低开销

  • 易维护

  • 可重用

为什么选择Vue.js

Vue.js是MVVM设计模式中目前最火热的一个前端框架之一,除了性能表现优异之外,与类似React相比,更轻量级、更容易上手。

通过Vue中的&ldquo;单文件组件&rdquo;特性,更灵活的定义组件,不仅使代码结构更清晰,而且能与任何其他组件进行随意组合,更具复用性。

sanic_vue

Webpack是什么

Webpack提供了一整套前端工程自动化的解决方案

Demo

一个简单的&ldquo;上海人员信息查询系统&rdquo;作为例子

demo-image

本项目主要技术栈

  • Java 1.7

  • Spring Boot 1.5.x

  • Maven

  • sqlite (not recommend, only convenience example)

  • vueJS 2.x

  • webpack 2.x

  • element ui

  • axios

准备工作

  • 安装JDK1.7或更新的版本

  • 安装Node.js/NPM

安装

  • 编译前端开发环境

      cd springboot_vue/frontend
    
      npm install

使用

  • 运行Spring Boot后端服务

      cd springboot_vue/target/
    
      java -jar springboot_vue-0.0.1-SNAPSHOT.jar

  • 运行前端服务

      cd springboot_vue/frontend
    
      npm run dev

你也可以在生产环境中运行cd springboot_vue/frontend;npm run build进行编译并配合Nginx

未来计划

本项目可以作为工作参考、学习或者教学演示,之后将陆续以版本的形式,即每个版本都会新增不同的功能演示项,不定期进行发布更新,有以下功能已经在计划之中:

  1. 用户认证

  2. 引入更高级的vuex组件通信机制

  3. 演示vue-route的使用

  4. 加入docker部署环境

  5. 新增针对yarn的支持 ... ...

相关项目

My Final Thoughts

      .   ____          _
     /\\ / ___'_ __ _ _(_)_ __  __ _
    ( ( )\___ | '_ | '_| | '_ \/ _` |
     \\/  ___)| |_)| | | | | || (_| |
      '  |____| .__|_| |_|_| |_\__, |
\  ===========|_|==============|___/== ▀
\- ▌          SpringBoot-vue             ▀
 - ▌                            (o)        ▀
/- ▌            Go Go Go !               ▀
/  =================================== ▀
                    ██
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (45)

加载中
那个问编辑器是什么的别走!!!
2018/04/19 20:55
回复
举报
2019/12/20 08:20
回复
举报
相同的功能不想写
2018/04/02 20:48
回复
举报
为什么还要安装node.js
2018/02/26 13:52
回复
举报
作者不错,放出了两个版本。
2018/02/02 14:50
回复
举报
相同的功能用springboot去写: @RestController @RequestMapping("/api/persons") public class MainController { @RequestMapping("/") public Person getUserDetail(String personId) { return personMapper.findByPerson(personId) } }
2017/12/09 12:41
回复
举报
就是把一个前端项目放到了springboot的目录下,其中前端部分封装一般般,可以参考vue官方脚手架。总体来说,作者的这种思想还是值得跟进的
2017/11/22 00:05
回复
举报
看不起你们这些用java5的,故意拖后腿。有本事用java8,我佩服你们
2017/08/23 01:03
回复
举报
打分: 力荐
那些写“相同的功能用XXX去写”的,你们是猴子请来的逗比么? 茴香豆的“茴”有十八种写法,速速去研究下。
2017/08/08 16:13
回复
举报
虽然我自己也用java,但是不得不说,当你用过php,python,node.js开发的框架来做web,才发现原来他娘的web可以简单到毫无技术含量
2017/07/29 21:00
回复
举报
感觉 还行 不知道有没有具体文档!我看看怎么用
2017/07/16 20:44
回复
举报
更多评论
暂无内容
发表了博客
2019/06/20 17:27

springboot与vue集成

<!-- wp:heading {"level":3} --> <h3><strong>背景</strong>:vue项目一般是单独开发单独部署,但是某些时候我们既想使用vue的各种方便组件与双向数据绑定,又想直接把开发好的vue文件集成到springboot的web项目中集成打包。<br><br></h3> <!-- /wp:heading --> <!-- wp:heading {"level":3} --> <h3>先执行npm run bui...

0
0
发表了博客
2019/04/10 10:10

vuejs之vue和springboot后端进行通信

一、新建一个vue项目,建立好后的相关文件 查看一下新建好的vue项目的结构: 当前各个文件中的内容: App.vue:主入口 <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </...

0
0
发表于大前端专区
07/07 10:23

springboot项目集成vue

由于特殊原因,所以临危受命将vue集成到springboot的项目中,终于在忙活了一天之后成功搞定,下面就分享一下这次的集成过程: 1.创建springboot和vue项目 springboot以及vue项目都已经由前后端同事分别开发完成,...

0
0
发表了博客
2019/04/02 11:01

springboot vue简单整合

1.vue项目   (1)修改config/index.js        (2) 修改webpack.prod.conf.js,不然会提示vue的外插件路径问题    (3) 执行 npm run build 生成静态文件,在dist目录    2.springboot项目   (1)在src/main/resources/static(目录没有,可自行创建),添加静态文件(dist目录下文件),修改下目录结构,去掉...

0
0
发表了博客
2019/11/26 14:41

vue传时间到springboot

vue端可以通过moment转换格式 formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => { if (j === 'createTime') { return moment(v\[j\]).format('YYYY-MM-DD HH🇲🇲ss......

0
0
发表于服务端专区
2018/09/24 16:55

springboot整合vue小试牛刀

序 本文主要研究一下如何在springboot工程整合vue maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> ...

0
27
发表了博客
2019/08/29 13:10

Springboot +vue 实现导出功能

最近在工作遇到vue和Springboot 实现导出功能,翻看很多资料,发现一些博客写法都过时了,所以自己特此记录下,使用版本vue2,Springboot 2x以上,chrome浏览器 76.0.3809.100 vue 2写法 let blob = new Blob([res.data], { type: 'application/octer-stream' }); 其中我发现很多博客用这样的写法,但是我发现打印res的时候...

0
0
发表了博客
2019/08/23 13:53

springboot vue下载文件

最近碰到下载一个后端生成的文件问题,前端是使用Vue写的前后端分离。 最开始使用post请求,跨域问题,前端接受问题乱七八糟的问题,就改成get方式传值。思想就是生成一个文件,前端通过一个链接进来下载。 1、前...

0
0
发表了博客
2019/11/01 13:46

Vue-cli3与springboot项目整合打包

一、需求 使用前后端分离编写了个小程序,前端使用的是vue-cli3创建的项目,后端使用的是springboot创建的项目,部署的时候一起打包部署,本文对一些细节部分进行了说明。 二、Vue项目具体配置 (1) vue正常开发使用代理与后台交互,在打包时候,有些配置需要和后端保持一致 (2)配置生产时环境变量: (file: .env.pr...

0
0
发表了博客
02/19 16:34

【程序源代码】Springboot-vue管理系统

关键字:springboot vue 后台管理系统 前后端分离 项目简介 一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue的前后端分离的后台管理系统 主要特性 使用最新技术栈,社区资源丰...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于服务端专区
2019/11/24 21:27

springBoot 打包时出现错误,请教高手如何处理

近期,我在打包一个SpringBoot的后端代码准备上线,遇到了一个错误,折磨了好几天了,始终无法解决,不知哪位高手能给出建议或思路。由于是内网项目,无法直接张贴代码和pom文件,我把照片贴出来。 我用mvn package打包时出现的错误如下: 父项目的pom文件中build部分代码如下: 子项目的web模块的Pom文件的代码build部分...

14
0
发表于开发技能专区
2018/01/22 11:06

spring boot中接受文件到问题

现在前台用的vue,后台是springboot,现在情况是后台接受不到文件。 前台数据格式是这样的: 这其中的attachments是一个文件数组,handleUpload是监控文件变化。

1
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
45 评论
545 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部