神刀安全网

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

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

说在前头

首先,开始项目前,电脑的必备开发环境要首先具备。如, JDKnodemavenbower等常用工具要具备。废话不多说了。

  • 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包依赖,如果本地仓库没有,就会自动去中央仓库下载。因此此时的项目结构如下:
从零开始构建一个spring boot + angular web应用(1)
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);     }  }

接着运行项目,发现,报如下错误:

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

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

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

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

从零开始构建一个spring boot + angular web应用(1)
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:

从零开始构建一个spring boot + angular web应用(1)
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。启动成功:
    从零开始构建一个spring boot + angular web应用(1)
    Paste_Image.png

    访问localhost:8080。结果如下:

    从零开始构建一个spring boot + angular web应用(1)
    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)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址