【技术实践】iot前台开发环境:搭建 SpringBoot+angularJs2

2019-02-14 人浏览 点击收藏: 分享至:

  一、安装软件

  1、安装nodejs 和 angularjs/cli

  https://nodejs.org/en/

  安装 nodejs

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125154527115-327719307.png

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

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125155909584-1566494916.png
https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125160004928-287490622.png

  执行 npm install

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125160524850-1842704396.png

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

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125160641756-1502252844.png

  2、安装augury

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

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125154754287-453359144.png
https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125160401459-1959589430.png
https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125160331287-1050967144.png

  3、新建普通的 angular 项目 - ng new hello

  通过命令 ng new hello 生成一个新项目以及应用的骨架代码

  通过命令 ng server 启动项目,默认端口4200。

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125155007444-1467724016.png

  二、Spring boot 和 angular 集成

  Spring boot 需要修改的地方在angular-cli.json中:

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125155025053-109932582.png

  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

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180127102130115-1593790299.png

  ng build

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125161054162-358751559.png

  2、启动工程

  1、启动Spring boot

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

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125171402178-1914025935.png

  3、访问服务

  http://localhost:8080

  http://localhost:4200

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125161330912-303507664.png

  三、附录 - 常见问题

  1、解决跨域问题

  加一个这样的文件

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125161428069-1527392662.png

  同时修改package.json中的start

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125161817444-417789917.png

  2、热部署调试工程

https://images2017.cnblogs.com/blog/1099841/201801/1099841-20180125173815444-1688180041.png

  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')

  }

  作者:梁圣奇

  职务:云服务集团云计算产品中心高级架构师

  专业领域:微服务架构

  专家简介:近二十年软件开发与架构设计经验,深入了解多种软件设计模式,在微服务架构治理、物联网服务平台设计研发等领域拥有丰富实战经验,同时专注技术分享,帮助开发者成长。


查看全部
相关文章推荐相关文章推荐
技术实践iot前台开发环境搭建 SpringBoot+angularJs2 技术实践SpringBoot的重要特性 技术实践】安装 go 语言环境 技术实践】Dockerfile入门 技术实践】ssl双向认证 浪潮网站服务器搭建,保障数据安全性 技术实践】istio的优势在哪里 技术实践】什么是微服务架构 技术实践】kubernetes 手绘画 技术实践】Spark使用hive元数据
热门解决方案热门解决方案
数据迁移上云解决方案_云数据迁移_数据迁移解决方案 智能安检解决方案_企业安全生产实施方案_安全生产管理标准 机械制造行业MES解决方案_机械加工行业mes系统_机械行业MES生产制造 数控机床联网和智能运维解决方案_云服务运维解决方案 LIMS平台质检服务解决方案_检化验信息管理系统构建_质检管理系统 化工行业重大危险源监控及事故预警系统解决方案_危险源监控_事故预警系统搭建 移动域名解析解决方案_移动域名解析服务 云进销存解决方案_云进销存管理平台_企业进销存管理系统 汽车行业PDM解决方案-汽车行业研发产品管理平台 转动设备(采煤、化工行业)健康智能监测解决方案_转动设备在线监测预警系统
热门产品推荐热门产品推荐
热门标签热门标签