在本系列博客中,我们将使用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