fastDfs图片访问格式和Freemarker模板引擎的使用

一. fastDfs图片访问介绍

介绍

fastDfs分布式文件存储服务器中可以设置图片的不同尺寸，这样就一张图片就不需要因为尺寸不同而上传多张尺寸不同内容一样的图片。但是上传的时候就要上传大图或原图，根据后缀可以显示不同的尺寸。fastDfs会自动帮助我们转换成不同的尺寸。
原图或大图建议尺寸800x800 - 可以实现物品详情页面放大镜功能：

http://123.207.27.208/group1/M00/00/72/rBEAA2BHi8OALsmkAAuQph4FcRE527.png
封面350x350 - 分页列表显示的封面【分页列表本身有样式，所以这里后缀可以省略】:

http://123.207.27.208/group1/M00/00/72/rBEAA2BHi8OALsmkAAuQph4FcRE527.png_350x350
中图430x430 - 详情页面的封面:

http://123.207.27.208/group1/M00/00/72/rBEAA2BHi8OALsmkAAuQph4FcRE527.png_430x430
小图60x60 - 详情页面的小图:

http://123.207.27.208/group1/M00/00/72/rBEAA2BHi8OALsmkAAuQph4FcRE527.png_60x60

二. 页面静态化

1. 为什么要做页面静态化

比如首页，并发比较高，每次访问都要请求后台从Mysql重新查询数据，然后合并数据渲染页面，这个是很消耗服务器性能的，并发高的时候会导致页面反应变慢，服务器压力大，甚至页面访问不到，用户体验极差再加上页面内容也不怎么变，多次查询这个首页看到的内容都是一样，对于如上2种情况，可以做页面静态化。

总结：页面并发高，页面内容不怎么该变，可以考虑做页面静态化

ps：主流的大型互联网网站例如淘宝，京东等等都使用了页面静态化技术

2. 什么是页面静态化

使用模板引擎【freemarker】生成静态页面html的过程。访问的时候直接返回html，不在需要重新查询数据渲染视图。减少数据库的查询次数，提高了加载效率，提升了用户体验度

原理就是：使用模板引擎【freemarker】将页面需要的数据，和模板事先进行合并，生成一个html

3. 没做页面静态化的页面渲染原理

当访问详情页面的时候，发送请求并传入id查询数据库，然后将响应回来的数据显示出来

4. 页面静态化原理

在添加或修改的时候，通过当前对象和已经准备好的模板生成静态页面，并且将静态页面的名称保存在数据库中
当要访问详情页面的时候，直接跳转到之前生成好的静态页面即可，不用查询数据库

三. 什么是FreeMarker

FreeMarker是其中的一款页面静态化技术，它是一款模板引擎：基于模板和要改变的数据

全称：FreeMarker Template Language (FTL)，所以FreeMarker 的模板是以.ftl为后缀的

市面上常见的模板引擎有：FreeMarker、Velocity、JSP、Themeleaf（SpringBoot推荐）

四. springboot集成FreeMarker

1. 导入依赖

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

2. yml配置

spring: 
 #freemarker
  freemarker:
    allow-request-override: false
    cache: true
    check-template-location: true
    charset: UTF-8
    suffix: .ftl
    templateEncoding: UTF-8
    templateLoaderPath: classpath:/templates/
    expose-request-attributes: true
    expose-session-attributes: true
    expose-spring-macro-helpers: true
templatedir: E:\springboot\pethome\src\main\resources\templates
htmldir: E:\vue-project\vue-pethome\pethome-front-user\pet

3. 准备模板

准备一个html页面，将后缀改成ftl，里面的内容使用EL表达式取值

                <!--价格-->
                <div class="tb-detail-price">
                    <li class="price iteminfo_price">
                        <dt>促销价</dt>
                        <dd><em>¥</em><b class="sys_item_price">${saleprice}</b>  </dd>
                    </li>
                    <li class="price iteminfo_mktprice">
                        <dt>原价</dt>
                        <dd><em>¥</em><b class="sys_item_mktprice">${saleprice*1.5}</b></dd>
                    </li>
                    <div class="clear"></div>
                </div>

4. 测试代码

package io.coderyeah;

import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import io.coderyeah.pet.domain.Pet;
import io.coderyeah.pet.mapper.PetMapper;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter;

/**
 * @author lqs
 * @date 2022/9/26 19:01
 */
@SpringBootTest(classes = PetHomeApplication.class)
@RunWith(SpringJUnit4ClassRunner.class)
@SuppressWarnings("all")
public class FreemarkerTest {
    @Autowired
    private PetMapper petMapper;
    // 注入模板配置
    @Autowired
    private FreeMarkerConfigurer freeMarkerConfigurer;
    // 获取配置文件中的值
    @Value("${templatedir}")
    private String templatedir;
    @Value("${htmldir}")
    private String htmldir;


    @Test
    public void test() throws IOException, TemplateException {
        // 创建模板技术的核心配置对象
        Configuration configuration = freeMarkerConfigurer.getConfiguration();
        // 设置页面中静态内容的编码集
        configuration.setDefaultEncoding("UTF-8");
        // 指定模板的加载路径
        File file = new File(templatedir);
        // 设置模板的默认加载路径
        configuration.setDirectoryForTemplateLoading(file);
        // 获取模板对象
        Template template = configuration.getTemplate("petDetail.ftl");
        // 查询一条数据测试
        Pet pet = petMapper.getPetById(2L);
        // 待生成的文件名
        String filename = System.currentTimeMillis() + ".html";
        FileOutputStream fos = new FileOutputStream(new File(htmldir, filename));
        final OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");
        template.process(pet, osw);
    }
}

五. 使用流程（举例）

可以在后台系统列表中增加一个“页面静态化”按钮(也可以在新增、编辑的时候操作)
编写页面静态化逻辑
2.1. 事先准备好页面的模板：/templates/petDetail.ftl
2.2. 查询页面所需要的数据
2.3. 使用模板引擎合并模板生成html : petDetail_01(宠物ID).html
2.4. 把html保存到前端项目中的/views/pet/detail/petDetail_01(宠物ID).html
2.5. 把html路径和当前宠物数据绑定(可以在t_pet中添加一个url字段专门用来保存当前宠物的静态页面名称)
2.6. 在主站宠物列表点击的超链接指定为 /views/petDetail_01(宠物ID).html即可