什么叫页面静态化?
使用FreeMaker技术(全称FreeMarker Template Language (FTL)),它是一款模板引擎: 即一种基于模板(.ftl)和要改变的数据(Map对象或Java实体 ,但是List集合不行,但是它们可以放到Map里)
其实就是数据库中有很多条记录,它们的展示界面都差不多,就比如淘宝里的商品,只是信息不一样,但是展示页面都是一样的。然而每次用户访问时都要查询一次数据库,大量的访问增加了数据库的压力。
所以为了减轻数据库的压力,就每次在添加或者修改商品的时候,在对数据库数据改动之前,将对应数据放到模板中,每个商品都生成一个对应的html页面;到时候用户之间跳转访问
优点:减轻数据库压力、提高响应速度、提升用户体验
缺点:占用空间,一条数据就会有一个html
总结:以空间换时间
==========================================================
步骤一:导包:freemarker.jar
二:抽取成为工具
public class FreeMarkerUtils {
public static String CreateFile(String path, String name, String suffix, Object data) {
OutputStreamWriter out = null;
try {
// 1.导入freemarker.jar
// 2.获取模板(Template)对象
// 获取Configuration对象 -- 为了获取模板对象
Configuration config = new Configuration(Configuration.VERSION_2_3_28);
// 设置默认加载路径
File file = new File(path); // 参数1: String path
config.setDirectoryForTemplateLoading(file);
// 设置默认编码
config.setDefaultEncoding("utf-8");
// 获取模板
Template template = config.getTemplate(name); //参数2: String name
// 3.准备数据,就是传递进来的Data
// 4.template.process()生成静态资源 // 参数4: String suffix
String url = System.currentTimeMillis()+suffix;
out = new OutputStreamWriter(new FileOutputStream(new File(file, url)), "UTF-8");
//FileWriter out = new FileWriter(new File(file, "test.html"));
template.process(data, out);
return url;//返回url,是为了插入数据库里,之后前端展示
} catch (Exception e) {
e.printStackTrace();
} finally {
// 关流
if(out != null) {
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return null;
}
}
三:在增加,或者修改使用工具
@Override
public void save(Article article, HttpServletRequest req) {
// 生成模板
String realPath = req.getServletContext().getRealPath("/static/template");
File file2 = new File(realPath);
// 如果不存在,则创建
if(!file2.exists()){
file2.mkdirs();
}
// name : 当前模板名字
String url = FreeMarkerUtils.CreateFile(realPath, "article.ftl", ".html", article);
article.setUrl(url);
if(article.getId()==null) {//根据隐藏域Id是否有值
// 添加
mapper.add(article);
}else {
// 修改
// 查询
Article arc = mapper.findOne(article.getId());
File file = new File(realPath,arc.getUrl());
if(file.exists()){
file.delete();
}
mapper.update(article);
}
}
四、后台查询
@Override
public Map<String, Object> findByCode() {
Map<String, Object> map = new HashMap<String, Object>();
// 应该有三个list,每个list放入 技术文章 行业新闻, 学科咨询
// 技术文章
List<Article> list1 = mapper.findByCode(BaseCode.TECHNOLOGY);
// 行业新闻
List<Article> list2 = mapper.findByCode(BaseCode.INDUSTRY);
// 学科咨询
List<Article> list3 = mapper.findByCode(BaseCode.SUBJECT);
map.put(BaseCode.TECHNOLOGY, list1);
map.put(BaseCode.INDUSTRY, list2);
map.put(BaseCode.SUBJECT, list3);
return map;
}
五、前台展示
$(function() {
$.ajax({
type: "post",
url: "/home/article/findAll",
dataType: "json",
success: function(msg){
// 获取技术文章的所有信息
var technology = msg.technology;
$.each(technology,function(i,n){//i表示下标,n表示遍历对象
$("#technology").append('<a target="_blank" href="/static/template/'+n.url+'"><li class="flex-box"><div class="ellipsis-line" title="'+n.title+'"></div><div class="date">'+n.createDate+'</div></li></a>');
});
// 获取行业新闻的所有信息
var industry = msg.industry;
$.each(industry,function(i,n){
$("#industry").append('<a target="_blank" href="/static/template/'+n.url+'"><li class="flex-box"><div class="ellipsis-line" title="'+n.title+'"></div><div class="date">'+n.createDate+'</div></li></a>');
});
// 获取学科咨询的所有信息
var subject = msg.subject;
$.each(subject,function(i,n){
$("#subject").append('<a target="_blank" href="/static/template/'+n.url+'"><li class="flex-box"><div class="ellipsis-line" title="'+n.title+'"></div><div class="date">'+n.createDate+'</div></li></a>');
});
}
});
})