从零开始构建一个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文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>demo</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.4.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
          <groupId>mysql</groupId>
          <artifactId>mysql-connector-java</artifactId>
        </dependency>
        
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

关于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

内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  首页
</body>
</html>

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程序似乎都能访问到，但是为了项目结构的标准型，务必合理部署。

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

说在前头

补充

推荐阅读更多精彩内容