从零开始构建一个spring boot + angular web应用(1)

原创性声明：本文完全为笔者原创，请尊重笔者劳动力。转载务必注明原文地址。

说在前头

首先，开始项目前，电脑的必备开发环境要首先具备。如， JDK、node、maven、bower等常用工具要具备。废话不多说了。

• step 1
  创建maven项目，随便找个地方创建一个文件夹demo，cmd进入该目录下，执行如下maven命令：

mvn archetype:generate -DgroupId=com.mycompany.app -DartifactId=my-app -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false

其中，

• mvn archetype:generate:固定格式
• -DgroupId:组织标识（包名）
• -DartifactId:项目名称
• -DarchetypeArtifactId:指定构建的项目类型，maven-archetype-quickstart是一个通用的java 项目。
• DinteractiveMode:是否使用交互模式

• Step 2
  更改pom.xml文件，内容如下：

    4.0.0

    com.example
    demo
    0.0.1-SNAPSHOT
    war

    demo
    Demo project for Spring Boot

    
        org.springframework.boot
        spring-boot-starter-parent
        1.4.1.RELEASE
         
    

    
        UTF-8
        UTF-8
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-data-jpa
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
          mysql
          mysql-connector-java
        
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

关于pom.xml 的更多介绍可以参见这篇博客

• step 3
  在sts或eclipse中导入这个maven项目。此时，maven会自动根据你的pom.xml文件中的依赖去本地仓库加载jar包依赖，如果本地仓库没有，就会自动去中央仓库下载。因此此时的项目结构如下：

Paste_Image.png

可以看到， Maven Dependencies已经有了(注意sts要首先添加maven依赖,，可以参考: 这里。

• step 4
  编辑App.java，如下：

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.support.SpringBootServletInitializer;

@SpringBootApplication
public class App extends SpringBootServletInitializer
{
    public static void main( String[] args )
    {
        SpringApplication.run(App.class, args);
    }

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
        // TODO Auto-generated method stub
        return builder.sources(App.class);
    }
    
}

接着运行项目，发现，报如下错误：

Paste_Image.png

缺少数据库驱动，需要在配置文件里配置，但是发现，我们项目中没有自动生成 application.properities文件，因此点击项目根目录右击新建文件夹 src/main/resources,如果 resources文件夹被建在了这个位置：

Paste_Image.png

不用担心，右击项目根目录，执行Maven->Update Project，maven会自动更新项目结构，执行结果如下：

Paste_Image.png

• step 5
  在resources下创建application.properties文件：

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/demo_test?autoReconnect=true
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=123456

上面内容配置了数据库信息。接着在webapp下创建index.html:

Paste_Image.png

内容如下：

  首页

• step 6
  运行demo项目，Run As-> Spring Boot App。启动成功：
  
  

  Paste_Image.png
  
  访问localhost:8080。结果如下：
  
  

  Paste_Image.png
  
  至此，一个基本的spring boot搭建成功！关于angular搭建，见下篇。

补充

• 除了完全手动搭一个spring boot，也可以采用其他很多方式。例如：
  1. 在sts中创建一个maven项目，选择maven-archetype-quickstart,然后根据需要去编辑pom.xml，编辑主类和配置文件。
  2. 在官方提供的自动生成器中生成:点这里;
  3. 其他方式。
• 除了使用application.properties配置文件外，还可以使用application.yml文件。
  例如，在src/main/resources下创建文件夹config,在其下在创建application.yml文件，内容如下：

spring:
    datasource:
      url: jdbc:mysql://127.0.0.1:3306/demo_test?autoReconnect=true
      driver-class-name: com.mysql.jdbc.Driver
      username: root
      password: 123456

程序完全可以正常运行。

tip:无论配置文件是application.properties还是application.yml，也无论配置文件在哪个目录下，spring boot程序似乎都能访问到，但是为了项目结构的标准型，务必合理部署。