SpringBoot整合Angular应用第一弹-基础环境配置

从今天开始我们通过使用详细的代码以及文档详细讲诉SpringBoot整合Angular去做前端展示系统.这篇文章主要讲述在使用SpringBoot整合Angular的时候的基础环境的配置.

• 创建一个maven项目(可使用idea或者其他编辑器)

mvn archetype:generate -DgroupId=com.edurt -DartifactId=springboot-angular-integration -DarchetypeArtifactId=maven-archetype-quickstart -Dversion=1.0.0 -DinteractiveMode=false

等待下载依赖(此时下载可能会慢,建议使用自主的maven私服或者是国内的maven镜像), 完成项目的创建, 完成后将项目导入编辑器中.

• 在项目的pom文件中引入需要的springboot和jdbc依赖

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.edurt</groupId>
  <artifactId>springboot-angular-integration</artifactId>
  <packaging>jar</packaging>
  <version>1.0.0</version>
  <name>springboot-angular-integration</name>
  <url>http://maven.apache.org</url>
 
  <properties>
    <system.java.version>1.8</system.java.version>
    <dependency.springboot.version>1.5.6.RELEASE</dependency.springboot.version>
    <plugin.springboot.version>1.5.9.RELEASE</plugin.springboot.version>
  </properties>
 
  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
      <version>${dependency.springboot.version}</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
 
  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
        <version>${plugin.springboot.version}</version>
        <configuration>
          <fork>true</fork>
        </configuration>
      </plugin>
    </plugins>
 
  </build>
 
</project>

• 删除src/test下的所有java类

删除该文件是为了方便我们在编译的时候出现编译错误.

• 修改App类使其支持springboot程序

package com.edurt;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
/**
 * Hello world!
 */
@SpringBootApplication
public class App {
 
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
 
}

• 测试运行检查应用是否支持springboot属性

mvn spring-boot:run

此时我们的 springboot 应用程序已经搭建完成.

• 初始化angular项目(使用angular cli)

ng new springboot-angular-integration-web

此处会下载需要的 node 依赖会慢, 慢慢等待即可, 这个时候我们的 springboot 和 angular 环境都已经搭建配置完成

• 复制生成的angular 代码到指定的 src → angular 目录中