整合开发 Angular2 Bootstrap4 Nodejs Eclipse Spring SpringMVC Mybatis

我的其它博客将同步更新：CSDN、简书、github
标题看上去还是蛮吓人的，首先这不是标题党，也不是最终解决方案，用于项目需谨慎！

Angular2 中秋发布一来，有很多大神尝鲜，活跃在论坛上，但是基本都是前端开发的部分，很少或是没有找到于后端相关的。作为长期前后端一起做的苦逼程序员，没有前端妹子支持，只好多琢磨了。

一、先来看下我们的目标：

上图是我昨天给同事发的，描述了基本的结构。

二、环境准备：

开发工具：

1、Eclipse Neon Release (4.6.0)、及maven 等相关插件
 2、NodeJs、Git
 3、angular2-eclipse 插件
 4、联网

准备工作：
如果你想过整合上述关键词的话，我想你应该看过如下类似文章：
1、Angular2 eclipse中angular2开发环境的搭建
2、Angular 2 directives based on Bootstrap’s markup and CSS
3、SSM框架——详细整合教程（Spring+SpringMVC+MyBatis）
4、使用Mybatis-Generator自动生成Dao、Model、Mapping相关文件
在这里，我们的重点是Angluar2与JavaWeb，假设你都看过。
并且很幸运跑起来了。

补充下：《Angular2 eclipse中angular2开发环境的搭建》文中

//  执行命令时不要最后面的点“.”，且执行该命令之前你得先安装好Git、Python27，
 //  需要访问网络，而且各种慢
 //  注意是Python2.7版本，我安装过高版本不行...
 npm install -g angular-cli

三、整合：

现在你的后端开发是这样的：

前端开发的效果是这样的

创建一个项目真不容，网上下载慢，还要被墙，哎。。。

接下来就是我们正题了：
Angular1的时候Eclipse安装插件后，可以转成Angular项目，很可惜Angular2没有

选择java web项目右键 > configure > convent to angular project

选择java web项目右键 > Properties > Deployment Assembly
 And > Folder > 选择 web/dist > ok

!And > Folder > 选择 web/dist > ok

其实最主要得就是这一步，这样angular2 编译后得文件在dist里面，添加映射后，Java web Run As Server 时会把dist里面得文件放到与src/main/webapp/编译后相同的地方，也就是web根目录，优先级是后面的，也就是dist。

http://localhost:8080/ovit-java-framework/

而angular路径是这样的

http://localhost:4200/

不一样的是有一个以项目命名的虚拟路径，所以我们得更改web/dist/index.html 的base

 
 
 
   
 
 加载中...
 
 

让我们整理下思路，回顾下开发过程

总结

其实这`（是）`算`（不）`不`（是）`上`（有）`是`（扁）`项`（我）`目`（的）`整`（冲）`合`（动）`，很牵强。

弊端，或者说有还没配合好的地方

作为一个比较懒程序员，我总是先加入一些自动生成代码、通用服务的功能能，以保证做大量重复的业务的编码时偷懒，从而形成我的懒人开发模式 ^-^。