整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
之前我介绍了在spring boot中使用thymeleaf模板，这次我会给大家介绍在spring boot中使用freemarker模板技术，同时利用freemarker生成静态html页面。生成静态html页面就能实现网站的静态化进而提高网站的访问速度以及提高SEO能力。
首先在pom.xml中添加依赖
添加依赖
<dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.23</version> </dependency>
application配置
在application.properties中添加freemarker的配置参数
##freemarker spring.freemarker.cache=false spring.freemarker.charset=UTF-8 spring.freemarker.check-template-location=true spring.freemarker.content-type=text/html spring.freemarker.enabled=true spring.freemarker.suffix=.ftl spring.freemarker.template-loader-path=classpath:/templates
Controller和ftl模板
下一步我们就建一个基础Controller类和配套的ftl模板
Controller类
package com.hw.myp2c.common.controller;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.Resource;
import java.io.*;
import java.net.URISyntaxException;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("")
public class MainController {
@GetMapping
public String main(Model model){
String w="Welcome FreeMarker!";
Map root=new HashMap();
root.put("w",w);
model.addAttribute("w","Welcome FreeMarker!");
return "test";
}
}
可以看到很简单，跟之前的thymelefa和jsp的没有区别。
freemarker模板
<html>
<head>
<title>Welcome!</title>
<link rel="stylesheet" href="/bootstrap.min.css">
<script src="/lib/jquery.min.js"></script>
</head>
<body>
<h1>Hello ${w}!</h1>
</body>
</html>
这样之后我们就能完成了基础freemarker的使用，更多的使用参见freemarker官方网站，这里不做过多的描述。
这里我们已经完成了标准的freemarker集成，下面我们将介绍如何利用freemarker生成静态html页面，直接上代码，作为演示我们还是在Controller中完成，在实际应用中我们可以按照自己的实际需要进行封装。
package com.hw.myp2c.common.controller;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.Resource;
import java.io.*;
import java.net.URISyntaxException;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("")
public class MainController {
@Resource
Configuration cfg;
@GetMapping
public String main(Model model){
String w="Welcome FreeMarker!";
Map root=new HashMap();
root.put("w",w);
freeMarkerContent(root);
model.addAttribute("w","Welcome FreeMarker!");
return "test";
}
private void freeMarkerContent(Map<String,Object> root){
try {
Template temp=cfg.getTemplate("test.ftl");
//以classpath下面的static目录作为静态页面的存储目录，同时命名生成的静态html文件名称
String path=this.getClass().getResource("/").toURI().getPath()+"static/test.html";
Writer file=new FileWriter(new File(path.substring(path.indexOf("/"))));
temp.process(root, file);
file.flush();
file.close();
} catch (IOException e) {
e.printStackTrace();
} catch (TemplateException e) {
e.printStackTrace();
} catch (URISyntaxException e) {
e.printStackTrace();
}
}
}
利用freemarker生成静态页面我理解的流程是这样的
1.利用Configuration读取想生成静态页面的模板，这里是test.ftl
2.解析模板文件，并将模板中的${}!包含的参数替换成真实的数据
3.最终将读取了真实数据的模板生成相应的html文件，并写入指定目录
这样我们就完成了spring boot中使用freemarker模板，并且利用freemarker生成静态html文件
者有话要说：此文是作者自己的学习总结，供大家参考，不足之处还请见谅和指正~
在学习完了基本的HTML+CSS标签之后，就可以尝试写一些简单的静态网页啦~练习的过程是充满成就感的，值得反复体会和思考！
网页结构
简单提一下常用于表示网页机构的标签：
header 整个页面的标题（也可表示一个内容区块）
main 页面主体部分
footer 整个页面的脚注（也可表示一个内容区块）
article 一块与上下文无关的独立内容
section 表示一个内容区块，常嵌套于article中
aside 在article之外与其内容相关的辅助信息
nav 页面中的导航栏
figure 表示一段独立的流内容
基本网站结构
三栏布局
一个网页最少由header、main、footer三部分组成，那么从三栏布局开始练习吧。无论是上-中-下结构还是左-中-右结构，关键都在于设置中间部分的宽高或位置。我们知道网页的主体内容（版心）是处于居中位置、随网页缩放而缩放的。那么左右（或上下）两栏固定后，须使中间部分自适应。以下总结了几种三栏布局的方法，以左-中-右结构为例：
先写左中右三个盒子。
body部分
1.使用float
利用float使左右脱离文档流
需要注意的是，使用float方法需要在body部分改一下center盒子的位置，把center盒子放在right盒子之后（否则right盒子会跑到下一行右侧）。以上代码中，设置center盒子的左右外边距来实现宽度自适应，若父盒子layout无高度要求，可用min-height实现高度自适应。不加高度自适应也可，在未设置center盒子高度的情况下本身高度会随文本内容的扩充而自动增加。
2.使用position
利用绝对定位脱离文档流
三个盒子都分别使用绝对定位，left、right分别距离窗口左右端为0，center距离窗口左端的间距为left盒子的宽度，距离窗口右端的间距为right盒子的宽度。
3.使用flex
利用弹性盒固有属性
须给父盒子layout加上弹性盒属性，给center盒子设置大于0的flex值，利用弹性盒自动拉伸效果实现center盒子的宽度自适应。
4.使用table
设置为表格
给父盒子layout设置为table，宽度为整个窗口，给三个子盒子都设置为table-cell，此时三个盒子就有了表格的属性。固定left、right盒子的宽度，center盒子自动占满父盒子剩余宽度。需要注意的是，因为父盒子具有表格属性，当left、center、right三者中任意一个盒子高度改变时，其他两个盒子会跟着改变。
5.使用grid
设置为网格
将父盒子layout设置为grid，宽度为整个窗口，用template-rows设置行高，用template-columns分别设置三个盒子的宽度，其中auto实现center盒子的宽度自适应。需要注意的是，这里用template-rows设置了固定的行高，因此center的高度不会自适应。
仿写练习
适合初学者练习的网页有很多，可以打开网址之家去里面挑一挑，以静态页面为主的网站。作者自己是以豆瓣首页（局部）进行练习的。练习过程中，千万不要去看网站源码（此时你也有很多地方看不懂），先试着自己分析和思考，用所学的知识看看能做到哪一步。
笔者学习时的仿写
放上对比图，还是有很多不一样的地方，网页也没有功能，作为初学者这都是正常的。静态网页练习的主要目的是熟悉HTML+CSS布局，培养做网页的思维。具体细节随着学习的深入，可以让网页更还原、页面更精美，网页功能也能逐步完善起来，实现真正的网站开发。
站，如果不是卖产品的，而是用来吸引客户的，那就是信息性质的网站了。比如说，你有软件要卖给用户，就可以搞一个信息性质的网站，用来展示软件和说明。这种网站其实上线很简单，不必纠结太多的东西，老美说的好，"your website should be designed to convert"。
下面就是在美国上线一个最基本的信息型网站需要的步骤。
1. Domain，这篇文章里有介绍: 美国在哪里注册域名比较好?
2. Hosting，用个最便宜的VPS服务就好，比如这篇文章里提到的 说说我知道的美国最佳vps hosting(虚拟主机服务)。hosting用linode就可以，最低档的其实就够了，就是 /month, 1GB RAM, 24GB SSD固态硬盘。
3. 需要做几个静态网页，也就是html page，包括:
--Home page
--About Us page
--TOS page, 就是 Terms Of Service page
--Privacy Policy page
对于不会编程的人来说，搞这种信息性质的网站可以用wordpress来实现，wordpress很好装，而且也有众多的插件支持。如果是要搞论坛的话，可以考虑装discuz, 但要比wordpress复杂一些。
*请认真填写需求信息，我们会在24小时内与您取得联系。
