spring boot之集成页面

超、凢脫俗 2022-06-09 01:47 137阅读 0赞

上篇博客把正常spring后台应用都集成进来，搭建成功，但是还没有页面应用啊，这儿有个思路，一是可以自己搞个web系统，把spring boot项目当做纯粹的后台提供服务的java项目，web系统通过http client的方式来调用；二是直接就在spring boot的基础上进行开发（新颖）。

目前Spring官方已经不推荐使用**JSP**来开发WEB了，而是推荐使用如下几种模板引擎来开发：

*  Thymeleaf(Spring官方推荐)
 *  FreeMarker
 *  Velocity
 *  Groovy
 *  Mustache

目前业界使用最广泛的还是FreeMaker和Velocity。  
依赖包为：

<dependency> 
    <groupId>org.springframework.boot</groupId> 
    <artifactId>spring-boot-starter-freemarker</artifactId> </dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

这儿我们先成功的搭建一套再说，我们先用freemaker搭建一下：  
在src/main/resources下新建一个templates的文件夹（spring boot默认存放模板的路径）；  
在templates下新建hello.ftl（注意后缀），内容如下：

<html>
    <head></head>
    <body>
        Welcome
        <p>当前时间为：${vv}</p>
    </body>
    </html>

Controller为：

//注意不是restController
    @Controller
    //@RequestMapping("/*")
    public class testController {
    
    //在application.properties中定义了vv=a
         @Value("${vv}")
         private String vv; 
    
        @RequestMapping(value="/hello")
        //注意这儿没有@responseBody
        public String welcome(ModelMap map){
            Date date = new Date();
            //获取配置文件中的信息vv
            System.out.println(vv);
            //传到template模板中（会把模板中能找到的所有的ftl文件中的名称都替换掉）
             map.addAttribute("vv", date.toString());
            //返回页面hello.ftl
            return "hello";
        }
    
    }

很简单吧，这么快就搭建完成了；主要还是spring boot把这种定义进行规范了，我们只要按照模板规定的做法进行使用就很快；

现在页面有了，当然得有js和css以及图片等静态资源啊，哪有没渲染的空页面玩的，别着急，spring boot也规范好了。

Spring Boot默认提供静态资源目录位置需置于classpath下，目录名需符合如下规则（/\*\*对应的，也就是说访问时在根目录下：[http://localhost:2600/][http_localhost_2600]就访问到这级目录了）：

/static  
/public  
/resources  
/META-INF/resources  
或者可以更改默认路径：[http://www.cnblogs.com/magicalSam/p/7189476.html][http_www.cnblogs.com_magicalSam_p_7189476.html]  
举例：我们可以在src/main/resources/目录下创建static，在该位置放置一个图片文件。启动程序后，尝试访问[http://localhost:8080/D.jpg][http_localhost_8080_D.jpg]。如能显示图片，配置成功。不过这种理论上是正确的，但我并没有测试成功，在/static下建了个images文件夹，放个d.jpg文件，访问：[http://localhost:8080/images/D.jpg][http_localhost_8080_images_D.jpg]

一般情况下我们把页面放在templates中，静态资源放在static中就OK了，页面引用这些静态资源时,注意相对路径，因为/static为/\*，所以不需要引用到static那级；  
像上面的目录机构，/images/d.jpg就可以了  
还有另外一种引用静态文件的方法，使用webjars

WebJars是一个很神奇的东西，可以让大家以jar包的形式来使用前端的各种框架、组件。

什么是WebJars

什么是WebJars？WebJars是将客户端（浏览器）资源（JavaScript，Css等）打成jar包文件，以对资源进行统一依赖管理。WebJars的jar包部署在Maven中央仓库上。

为什么使用

我们在开发Java web项目的时候会使用像Maven，Gradle等构建工具以实现对jar包版本依赖管理，以及项目的自动化管理，但是对于JavaScript，Css等前端资源包，我们只能采用拷贝到webapp下的方式，这样做就无法对这些资源进行依赖管理。那么WebJars就提供给我们这些前端资源的jar包形势，我们就可以进行依赖管理。

如何使用

1、 WebJars主官网 查找对于的组件，比如Vuejs

<dependency>
        <groupId>org.webjars.bower</groupId>
        <artifactId>vue</artifactId>
        <version>1.0.21</version>
    </dependency>

2、页面引入

就可以正常使用了！

这样大家就可以开始绘制你们的页面了；  
写几个另外的那个框架的案例Thymeleaf：  
包含模板配置的参数：  
[http://www.jianshu.com/p/23bea93e34c7][http_www.jianshu.com_p_23bea93e34c7]  
博客里有一些新奇的玩意儿啊：  
[http://blog.csdn.net/u012702547/article/details/53784992][http_blog.csdn.net_u012702547_article_details_53784992]

[http_localhost_2600]: http://localhost:2600/
[http_www.cnblogs.com_magicalSam_p_7189476.html]: http://www.cnblogs.com/magicalSam/p/7189476.html
[http_localhost_8080_D.jpg]: http://localhost:8080/D.jpg
[http_localhost_8080_images_D.jpg]: http://localhost:8080/images/D.jpg
[http_www.jianshu.com_p_23bea93e34c7]: http://www.jianshu.com/p/23bea93e34c7
[http_blog.csdn.net_u012702547_article_details_53784992]: http://blog.csdn.net/u012702547/article/details/53784992