黑马程序员技术交流社区

标题: 【郑州校区】学成在线 第4天 讲义-页面静态化 页面预览 一 [打印本页]

---

作者: 我是楠楠    时间: 2019-12-11 15:55
标题: 【郑州校区】学成在线 第4天 讲义-页面静态化 页面预览 一

【郑州校区】学成在线 第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

@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);

System.out.

println(forEntity);

}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2