【技术实践】iot前台开发环境:搭建 SpringBoot+angularJs2
一、安装软件 1、安装nodejs 和 angularjs/cli https://nodejs. org/en/ 安装 nodejs 安装 angularjs/cli: npm install -g @angular/cli 执行 npm instal
一、安装软件
1、安装nodejs 和 angularjs/cli
https://nodejs.org/en/
安装 nodejs

安装 angularjs/cli: npm install -g @angular/cli


执行 npm install

执行 ng build,编译前台代码输出到 spring boot 资源目录

2、安装augury
在google网上应用商店添加插件augury ,用来调试前端代码



3、新建普通的 angular 项目 - ng new hello
通过命令 ng new hello 生成一个新项目以及应用的骨架代码
通过命令 ng server 启动项目,默认端口4200。

二、Spring boot 和 angular 集成
Spring boot 需要修改的地方在angular-cli.json中:

1、在springboot项目中新建/复制 angular 项目
方法一: 在src 目录下通过命令添加angular项目 : ng new angular
方法二: 将之前创建好的项目copy进来
设置angular项目的输出目录为springboot的资源目录
修改angular-cli.json 配置文件的name 和 outDir
该项目下name为 iot_hub
outDir 为../resources/static(静态资源路径,系统可以直接访问且路径下的所有文件均可被直接读取)
编译angular项目,产生输出到springboot资源目录
npm install
ng server --proxy-conf proxy.conf

ng build

2、启动工程
1、启动Spring boot
2、启动前端angular工程调试:npm start

3、访问服务
http://localhost:8080
http://localhost:4200

三、附录 - 常见问题
1、解决跨域问题
加一个这样的文件

同时修改package.json中的start

2、热部署调试工程

buildscript {
ext {
springBootVersion = '1.5.9.RELEASE'
}
repositories {
maven {
url "http://repo.iop.inspur.com:8081/nexus/content/groups/public"
}
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
}
}
apply plugin: 'java'
apply plugin: 'idea'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
group = 'com.inspur.iot'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8
repositories {
maven {
url "http://repo.iop.inspur.com:8081/nexus/content/groups/public"
}
}
bootRun {
addResources = true
}
configurations.all {
exclude module: 'google-collections'
}
dependencies {
compile('org.springframework.boot:spring-boot-starter')
compile('org.springframework.boot:spring-boot-starter-web')
compile('io.springfox:springfox-swagger2:2.6.1')
compile('io.springfox:springfox-swagger-ui:2.6.1')
compile('org.springframework.boot:spring-boot-starter-jdbc')
compile('org.springframework.boot:spring-boot-starter-data-jpa')
compile('mysql:mysql-connector-java:5.1.21')
compile('org.springframework.boot:spring-boot-starter-data-redis')
// compile("org.springframework:spring-orm")
compile("org.springframework.boot:spring-boot-devtools")
compile ("org.springframework.boot:spring-boot-maven-plugin:1.5.9.RELEASE")
testCompile('org.springframework.boot:spring-boot-starter-test')
}
作者:梁圣奇
职务:云服务集团云计算产品中心高级架构师
专业领域:微服务架构
专家简介:近二十年软件开发与架构设计经验,深入了解多种软件设计模式,在微服务架构治理、物联网服务平台设计研发等领域拥有丰富实战经验,同时专注技术分享,帮助开发者成长。