免费注册

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

2019-02-14 人浏览

一、安装软件 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

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

  }

  作者:梁圣奇

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

  专业领域:微服务架构

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


上一篇: 【技术实践】kubernetes 手绘画
下一篇: 【技术实践】Dockerfile入门

相关文章