IDEA+SpringBoot+Freemark 构造一个简单的页面

访问地址 http://localhost:8083/m2detail 

1.在Controller中配置

/**
     * m2detail
     */
    @RequestMapping(value = "/m2detail")
    public ModelAndView m2detail(ModelAndView modelAndView){
        modelAndView.setViewName("pc/m2detail");
        return modelAndView;
    }

其中

"/m2detail"就是URL后面的那个

"pc/m2detail" 就是 m2detail.ftl 文件所在的路径

2. 新建 m2detail.ftl 文件，一般多页面的项目 都会有 公共 或者 基础 的模版，当新建时，直接引入套用就可以了。这里的css,swiper等等都是其他文件夹引入的。

主要是：

<#import "/default/pcLayout.ftl" as myDefault> 表示要使用

/pcLayout.ftl中定义的宏，变量... 使用方式

<@myDefault.htmlHead 参数 x = "">
这中间可加html

</@myDefault.htmlHead>

ftl语法可参考：
http://freemarker.foofun.cn 
https://www.cnblogs.com/jpfss/p/8445200.html
https://zhuanlan.zhihu.com/p/51270249         知乎

<#import "/default/pcLayout.ftl" as myDefault>

<@myDefault.htmlHead title="m2detail">
<link rel="stylesheet" href="${basePath}/static/css/pc/m2detail.css">
<link rel="stylesheet" href="${basePath}/static/3rd_party/swiper/swiper.min.css">
</@myDefault.htmlHead>

<@myDefault.htmlBody headType=2>

这里写自己要做的内容

</@myDefault.htmlBody>

<@myDefault.htmlScripts>

<!--<script src="${basePath}/static/js/home/home.js"></script>-->

<!-- Swiper JS -->
<script src="${basePath}/static/3rd_party/swiper/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>

    var swiper = new Swiper('.swiper-container', {
      slidesPerView: '2',

      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>


</@myDefault.htmlScripts>

3. 写好之后，一键启动SpringBoot就行了，在网页中输入http://localhost:8083/m2detail 就可以了

4. 效果图：