使用Spring boot，Thymeleaf，AngularJS从零开始构建新的Web应用程序-第2部分

在本系列博客中，我们将使用Springboot，Angular等构建完整的Web应用程序。

在上一个博客中，我们与Thymeleaf建立了基本的登录页面。 在此博客中，我们将介绍bower ，它用于管理前端依赖项，例如CSS，JS。

1.）凉亭
使用此链接安装bower。 安装凉亭后，我们需要对其进行配置以在我们的应用中使用。 要配置Bower，我们只需在项目的根文件夹中添加两个文件，即.bowerrc文件和bower.json文件。 .bowerrc文件可帮助我们配置依赖项应放在哪个目录中。 默认情况下，它会在当前目录中创建一个bower_components文件夹，但我们希望将其放入src / main / resources / static中，因为默认情况下，Spring会在该位置拾取所有静态资源，并使它们可供使用。

.bowerrc文件：

{
  "directory": "src/main/resources/static/bower_components",
  "json": "bower.json"
}

然后运行：

$ bower init

这将在您的根文件夹中安装文件bower.json。 下一步是将Jquery和Bootstrap依赖项添加到我们的应用程序中，这可以通过以下命令完成：

$ bower install --save jquery bootstrap

现在我们已经为我们的应用程序配置了Jquery和bootstrap，让我们为应用程序创建一个漂亮的登录页面。 要找到目标网页的模板，我们可以在此处签出任何设计：
http://startbootstrap.com/有一些很酷的免费html模板，选择任何一个并下载源文件。

例如，我下载了此模板： http : //blackrockdigital.github.io/startbootstrap-freelancer/
要使其作为我们的主页工作，我们需要执行以下操作：
1）将内容index.html文件复制到我们的index.html中。 2）用我们的bower_components路径替换所有的bootstrap / JQuery CSS / JS路径。 3）复制下载的所有自定义CSS或JS文件，并将其放在我们应用程序的静态文件夹中，在index.html中更新其路径 4）将所有字体，图像等静态文件复制到静态文件夹中，并在index.html中更新其路径

现在让我们使用mvn clean package构建我们的应用程序，并使用mvn spring-boot运行它：

如果所有路径都正确并且所有文件都存在。 我们将拥有漂亮的响应式登录页面作为我们的主页。

在下一个博客中，我们将添加登录/注销/注册功能，并为客户端MVC添加Angular。

翻译自: https://www.javacodegeeks.com/2016/05/build-new-web-application-scratch-using-spring-boot-thymeleaf-angularjs-part-2.html