Spring Boot框架开发Web项目之五 使用Webjars实现质感设计

本系列文章主要索引详情 点击查看

---

现在我们已经很棒了，但是在美学方面却差很多。你可能听说过质感设计（material design），这是Google的扁平化设计。

我们将使用Materialize（http://materializecss.com）,这是一个非常漂亮的CSS和JavaScript库，和Bootstrap类似。

工具

IntelliJ IDEA 16
JDK 1.8
Maven 3.5
Tomcat 1.8

开始使用

1、首先我们需要添加依赖，打开我们的 pom.xml 文件，编辑如下

       
            org.webjars
            materializecss
            0.96.0
        

        
            org.webjars
            jquery
            2.1.4
        

2、页面中引入CSS和JS
每个WebJar的结构都是标准的，JS和CSS文件都会放在 /webjars/{lib}/{version}/*.js中。
例如，如果要添加JQuery到我们的页面中，那么Web页面只需要添加如下代码：

在视图中，将Materialize CSS包含进来

使用布局

我们可以将UI中可以重用的代码块放在一个模块中，想要实现这个功能，我们需要使用thymeleaf-layout-dialect依赖，它已经包含在项目的spring-boot-starter-thymeleaf依赖里面。

在src/main/resources/templates/layout之中创建一个新的文件，命名为default.html，它包含每个页面都重复出现的代码：

    
    

    
    

X

    

        
Page content goes here
    

    
    

现在我们再新建一个页面src/main/resources/templates/profile/下新建一个ProfilePage.html页面，让它使用布局，内容如下：

    
    


    


        
Prosonal info

        

            

                

                    
                    Last name
                
                

                    
                    Email
                
            

            

                

                    
                    Birth Date
                
            
            

                Submit 
            
        

    

其中 layout:decorator="layout/default"表明当前页面去哪里查找布局，“@{}”语法将会为资源构建完整路径，它会将服务器上下文路径（如：localhost:808）添加到他的参数上。
最后我们还需要创建一个相关的控制器ProfileController

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ProfileController {

    @RequestMapping("/profile")
    public String displayProfile(){
        return "profile/profilePage";
    }
}

现在，我们访问http://127.0.0.1:8080/profile的话，就可以看到一个非常漂亮的表单了。

上一篇： Spring Boot框架开发Web项目之四 将数据传递给视图.

下一篇：Spring Boot框架开发Web项目之六 表单数据提交