使用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

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

使用Spring boot，Thymeleaf，AngularJS从零开始构建新的Web应用程序–第3部分
在之前的博客中,我们使用Thymeleaf,Bower和Bootstrap构建了登录页面,并将其部署到了Heroku. 在此博客中,我们将介绍用于前端的AngularJS和在后端的Spring Boo ...
使用Spring boot，Thymeleaf，AngularJS从零开始构建一个新的Web应用程序-第3部分
在之前的博客中,我们使用Thymeleaf,Bower和Bootstrap构建了登录页面,并将其部署到了Heroku. 在此博客中,我们将介绍用于前端的AngularJS和在后端的Spring Boo ...
Spring Boot - Thymeleaf模板简介以及集成
文章目录 Spring Boot - Thymeleaf模板简介以及集成 1.什么是Thymeleaf? 2.标准表达式 2.1 变量表达式 2.2 选择表达式/星号表达式 2.3 URL表达式 2. ...
Spring Boot中使用Swagger2构建RESTful APIs
关于 Swagger Swagger能成为最受欢迎的REST APIs文档生成工具之一,有以下几个原因: Swagger 可以生成一个具有互动性的API控制台,开发者可以用来快速学习和尝试API. S ...
Spring Boot + Thymeleaf 创建web项目
本篇文章将引导你创建一个简单的Spring Boot web程序示例,涉及到的组件有:嵌入的Tomcat + Thymeleaf 模板引擎,可执行的 JAR 文件包. 开发工具: 1.Spring B ...
Spring Boot 中使用 Swagger2 构建强大的 RESTful API 文档
项目现状:由于前后端分离,没有很好的前后端合作工具. 由于接口众多,并且细节复杂(需要考虑不同的HTTP请求类型.HTTP头部信息.HTTP请求内容等),高质量地创建这份文档本身就是件非常吃力的事,下 ...
Spring Boot：构建一个RESTful Web应用程序
介绍: REST代表表示状态传输 ,是API设计的体系结构指南. 我们假设您已经具有构建RESTful API的背景. 在本教程中,我们将设计一个简单的Spring Boot RESTful Web应 ...
java Spring Boot中使用Swagger2构建API文档
1.添加Swagger2的依赖在pom.xml中加入Swagger2的依赖 <dependency><groupId>io.springfox</groupId> ...
Spring boot+Thymeleaf+easyui集成：js创建组件页面报错
开发工具:Ideal 使用场景:Demo 前提: 环境:Spring boot +Thymeleaf+easyui 引入thymeleaf模板引擎 1 <html lang=&qu ...

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

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

最新文章

热门文章