|
【郑州校区】学成在线 第4天 讲义-页面静态化 页面预览 一
1 页面静态化需求
1、为什么要进行页面管理？
本项目cms系统的功能就是根据运营需要，对门户等子系统的部分页面进行管理，从而实现快速根据用户需求修改页面内容并上线的需求。
2、如何修改页面的内容？
在开发中修改页面内容是需要人工编写html及JS文件，CMS系统是通过程序自动化的对页面内容进行修改，通过页面静态化技术生成html页面。
3、如何对页面进行静态化？
一个页面等于模板加数据，在添加页面的时候我们选择了页面的模板。页面静态化就是将页面模板和数据通过技术手段将二者合二为一，生成一个html网页文件。
4、页面静态化及页面发布流程图如下：
业务流程如下：
1、获取模型数据
2、制作模板
3、对页面进行静态化
4、将静态化生成的html页面存放文件系统中
5、将存放在文件系统的html文件发布到服务器
2 FreeMarker 研究
参考“学成在线-freemarker.pdf”
3 页面静态化
3.1 页面静态化流程
通过上边对FreeMarker的研究我们得出：模板+数据模型=输出，页面静态化需要准备数据模型和模板，先知道数据模型的结构才可以编写模板，因为在模板中要引用数据模型中的数据，本节将系统讲解CMS页面数据模型获取、模板管理及静态化的过程。
下边讨论一个问题：如何获取页面的数据模型？
CMS管理了各种页面，CMS对页面进行静态化时需要数据模型，但是CMS并不知道每个页面的数据模型的具体内容，它只管执行静态化程序便可对页面进行静态化，所以CMS静态化程序需要通过一种通用的方法来获取数据模型。
在编辑页面信息时指定一个DataUrl，此DataUrl便是获取数据模型的Url，它基于Http方式，CMS对页面进行静态化时会从页面信息中读取DataUrl，通过Http远程调用的方法请求DataUrl获取数据模型。
管理员怎么知道DataUrl的内容呢？
举例说明：
此页面是轮播图页面，它的DataUrl由开发轮播图管理的程序员提供。
此页面是精品课程推荐页面，它的DataUrl由精品课程推荐的程序员提供。
此页面是课程详情页面，它的DataUrl由课程管理的程序员提供。
页面静态化流程如下图：
1、静态化程序首先读取页面获取DataUrl。
2、静态化程序远程请求DataUrl得到数据模型。
3、获取页面模板。
4、执行页面静态化。
3.2 数据模型
3.2.1 轮播图DataUrl接口
3.2.1.1 需求分析
CMS中有轮播图管理、精品课程推荐的功能，以轮播图管理为例说明：轮播图管理是通过可视化的操作界面由管理员指定轮播图图片地址，最后将轮播图图片地址保存在cms_confifig集合中，下边是轮播图数据模型：
针对首页的轮播图信息、精品推荐等信息的获取统一提供一个Url供静态化程序调用，这样我们就知道了轮播图页面、精品课程推荐页面的DataUrl，管理在页面配置中将此Url配置在页面信息中。
本小节开发一个查询轮播图、精品推荐信息的接口，此接口供静态化程序调用获取数据模型。
3.2.1.2 接口定义
轮播图信息、精品推荐等信息存储在MongoDB的cms_confifig集合中。
cms_confifig有固定的数据结构，如下：
[AppleScript] 纯文本查看 复制代码 @Data[/size][/font]
[font=微软雅黑][size=3]@ToString
@Document(collection =
"
cms_config
"
)
public class CmsConfig {
@Id
private String id;//主键
private String name;//数据模型的名称
private List<CmsConfigModel> model;//数据模型项目
}
数据模型项目内容如下：
[AppleScript] 纯文本查看 复制代码 @Data
@ToString
public class CmsConfigModel {
private String key;//主键
private String name;//项目名称
private String url;//项目url
private Map mapValue;//项目复杂值
private String value;//项目简单值
}
上边的模型结构可以对照cms_confifig中的数据进行分析。
其中，在mapValue 中可以存储一些复杂的数据模型内容。
根据配置信息Id查询配置信息，定义接口如下：
[AppleScript] 纯文本查看 复制代码 @Api(value
=
"
cms配置管理接口
"
,description =
"
cms配置管理接口，提供数据模型的管理、查询接口
"
)
public interface CmsConfigControllerApi {
@ApiOperation(
"
根据id查询CMS配置信息
"
)
public CmsConfig getmodel(String id);
}
3.2.1.3 Dao
定义CmsConfifig的dao接口：
[AppleScript] 纯文本查看 复制代码 public interface CmsConfigRepository extends MongoRepository<CmsConfig,String> {
}
3.2.1.4 Service
定义CmsConfifigService实现根据id查询CmsConfifig信息。
[AppleScript] 纯文本查看 复制代码 @Service
public class CmsConfigService {
@Autowired
CmsConfigRepository cmsConfigRepository;
//根据id查询配置管理信息
public CmsConfig getConfigById(String id){
Optional<CmsConfig> optional =
cmsConfigRepository
.findById(id);
if(optional.isPresent()){
CmsConfig cmsConfig
=
optional.
get();
return cmsConfig;
}
return null;
}
}
3.2.1.5 Controller
[AppleScript] 纯文本查看 复制代码 @RestController
@RequestMapping(
"
/cms/config
"
)
public class CmsConfigController implements CmsConfigControllerApi {
@Autowired
CmsConfigService cmsConfigService;
@Override
@GetMapping(
"
/getmodel/{id}
"
)
public CmsConfig getmodel(@PathVariable(
"
id
"
) String id) {
return cmsConfigService.
getConfigById(id);
}
}
3.2.1.6 测试
使用postman测试接口：
get请求：http://localhost:31001/cms/confifig/getmodel/5a791725dd573c3574ee333f （轮播图信息）
3.2.3 远程请求接口
SpringMVC提供 RestTemplate请求http接口，RestTemplate的底层可以使用第三方的http客户端工具实现http 的请求，常用的http客户端工具有Apache HttpClient、OkHttpClient等，本项目使用OkHttpClient完成http请求，
原因也是因为它的性能比较出众。
1、添加依赖
[AppleScript] 纯文本查看 复制代码 <dependency>
<groupId>com.squareup
.okhttp3</groupId>
<artifactId>okhttp</artifactId>
</dependency>
2、配置RestTemplate
在SpringBoot启动类中配置 RestTemplate
[AppleScript] 纯文本查看 复制代码 ...
public class ManageCmsApplication {
public static void main(String[] args) {
SpringApplication.run(ManageCmsApplication.class,args);
}
@Bean
public RestTemplate restTemplate() {
return new RestTemplate(new OkHttp3ClientHttpRequestFactory());
}
}
3、测试RestTemplate
根据url获取数据，并转为map格式。
[AppleScript] 纯文本查看 复制代码 @Test
public void testRestTemplate(){
ResponseEntity<Map> forEntity
=
restTemplate.
getForEntity(
"
http://localhost:31001/cms/config/get/5a791725dd573c3574ee333f
"
,
Map
.class);[/size][/font]
System.out.
println(forEntity);
}
| 
收藏
淘帖
踩
