阶段5 3.微服务项目【学成在线】_day04 页面静态化_16-页面静态化-模板管理-模板制作
这是轮播图的原始文件
运行门户需要把 nginx启动起来
单独运行轮播图。把里面的css的引用都加上网址的url
这就是单独访问到的轮播图的效果
轮播图模板的地址：
阶段5 3.微服务项目【学成在线】·\day04 页面静态化\代码\index_banner.ftl
test-freemarker的服务内。模板的html文件，复制过来。然后改了名字后缀叫做index_banner.ftl
FreemarkerController内
新加一个方法 返回为轮播图的模板地址
http://localhost:8088/freemarker/banner
页面没显示东西。但是里面的内容是有的。里面的图片地址都是相对的路径
如果模板这里改成绝对路径是可以显示出来的
先来确定录播图的数据格式
显示就是要遍历这个model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://www.xuecheng.com/plugins/normalize-css/normalize.css" />
<link rel="stylesheet" href="http://www.xuecheng.com/plugins/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="http://www.xuecheng.com/css/page-learing-index.css" />
<link rel="stylesheet" href="http://www.xuecheng.com/css/page-header.css" />
</head>
<body>
<div class="banner-roll">
<div class="banner-item">
<#if model??>
<#list model as item>
<div class="item" style="background-image: url(${item.value});"></div>
</#list>
</#if>
<#-- <div class="item" style="background-image: url(../img/widget-bannerA.jpg);"></div>
<div class="item" style="background-image: url(../img/widget-banner3.png);"></div>
<div class="item" style="background-image: url(../img/widget-bannerB.jpg);"></div>
<div class="item" style="background-image: url(../img/widget-bannerA.jpg);"></div>
<div class="item" style="background-image: url(../img/widget-banner3.png);"></div>-->
</div>
<div class="indicators"></div>
</div>
<script type="text/javascript" src="http://www.xuecheng.com/plugins/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="http://www.xuecheng.com/plugins/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript">
var tg = $('.banner-item .item');
var num = ;
for (i = ; i < tg.length; i++) {
$('.indicators').append('<span></span>');
$('.indicators').find('span').eq(num).addClass('active');
} function roll() {
tg.eq(num).animate({
'opacity': '',
'z-index': num
}, ).siblings().animate({
'opacity': '',
'z-index':
}, );
$('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active');
if (num >= tg.length - ) {
num = ;
} else {
num++;
}
}
$('.indicators').find('span').click(function() {
num = $(this).index();
roll();
});
var timer = setInterval(roll, );
$('.banner-item').mouseover(function() {
clearInterval(timer)
});
$('.banner-item').mouseout(function() {
timer = setInterval(roll, )
});
</script>
</body>
</html>
首先是配置RestTemplate
首先是确定pom.yml内添加了okhttp的引用
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
</dependency>
然后是在SpringBoot的启动类里面，配置RestTemplate的Bean
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
</dependency>
@Bean
public RestTemplate restTemplate(){
return new RestTemplate(new OkHttp3ClientHttpRequestFactory());
}
使用restTemplate请求数据
请求的接口的地址
请求最终转换成一个Map
body就是我们的模型数据
@Autowired
RestTemplate restTemplate;
@RequestMapping("/banner")
public String index_banner(Map<String,Object> map){
ResponseEntity<Map> forEntity = restTemplate.getForEntity("http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f", Map.class);
Map body = forEntity.getBody();
//设置模型数据
map.putAll(body);
return "index_banner";
}
测试
测试的时候记得先启动cms的微服务，test-freemarker的服务是调用cms的服务获取到的轮播图的数据，确保启动了两个微服务
body里面的数据有三条
需要修改mongoDB里面的数据
原来的数据
{
"_id" : ObjectId("5a791725dd573c3574ee333f"),
"_class" : "com.xuecheng.framework.domain.cms.CmsConfig",
"name" : "轮播图",
"model" : [
{
"key" : "banner1",
"name" : "轮播图1地址",
"value" : "http://192.168.101.64/group1/M00/00/01/wKhlQFp5wnCAG-kAAATMXxpSaMg864.png"
},
{
"key" : "banner2",
"name" : "轮播图2地址",
"value" : "http://192.168.101.64/group1/M00/00/01/wKhlQVp5wqyALcrGAAGUeHA3nvU867.jpg"
},
{
"key" : "banner3",
"name" : "轮播图3地址",
"value" : "http://192.168.101.64/group1/M00/00/01/wKhlQFp5wtWAWNY2AAIkOHlpWcs395.jpg"
}
]
}
新的数据
{
"_id" : ObjectId("5a791725dd573c3574ee333f"),
"_class" : "com.xuecheng.framework.domain.cms.CmsConfig",
"name" : "轮播图",
"model" : [
{
"key" : "banner1",
"name" : "轮播图1地址",
"value" : "http://www.xuecheng.com/img/widget-bannerA.jpg"
},
{
"key" : "banner2",
"name" : "轮播图2地址",
"value" : "http://www.xuecheng.com/img/widget-bannerB.jpg"
},
{
"key" : "banner3",
"name" : "轮播图3地址",
"value" : "http://www.xuecheng.com/img/widget-banner3.png"
}
]
}
然后确保nginx启动起来了。www.xuecheng.com的网址是可以打开的
以上都确认好后。再次访问：http://localhost:8088/freemarker/banner
我自己做测试 最终返回的数据3个图片的地址 都展示出来了。主要修改mongoDB里面的cms_config里面轮播图的数据
以上就实现了模板的制作
阶段5 3.微服务项目【学成在线】_day04 页面静态化_16-页面静态化-模板管理-模板制作的更多相关文章
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程
提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_03-用户认证技术方案-Oauth2协议
2.2 Oauth2认证 2.2.1 Oauth2认证流程 第三方认证技术方案最主要是解决认证协议的通用标准 问题,因为要实现 跨系统认证,各系统之间要遵循一定的 接口协议. OAUTH协议为用户资源 ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_01-用户认证需求分析
1.1 用户认证与授权 截至目前,项目已经完成了在线学习功能,用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程 呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间 ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_05-Feign远程调用-客户端负载均衡介绍
2 Feign远程调用 在前后端分离架构中,服务层被拆分成了很多的微服务,服务与服务之间难免发生交互,比如:课程发布需要调用 CMS服务生成课程静态化页面,本节研究微服务远程调用所使用的技术. 下图是 ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_02-Eureka注册中心-搭建Eureka单机环境
我们先搭建单机环境 govern是治理的意思, 这样就把工程创建好了 创建包 创建SpringBoot的启动类. 在父工程里面已经确定了Spring Cloud的版本了.相当于锁定了版本 接下里只需要 ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_04-Eureka注册中心-将服务注册到Eureka Server
cms相当于客户端 配置客户端的信息 后面加逗号分隔开 50102表示向两台eureka服务上报服务,如果有一台死掉了 那么还可以上另外的一台去注册服务 直接把ip注册到eureka 启动类加注解 重 ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_01-Eureka注册中心-Eureka介绍
1 Eureka注册中心 1.1 需求分析 在前后端分离架构中,服务层被拆分成了很多的微服务,微服务的信息如何管理?Spring Cloud中提供服务注册中 心来管理微服务信息. 为什么 要用注册中心 ...
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_03-方法授权-jwt令牌包含权限
修改认证服务的UserDetailServiceImpl类,下边的代码中 permissionList列表中存放了用户的权限, 并且将权限标识按照中间使用逗号分隔的语法组成一个字符串,最终提供给Spr ...
- 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_14-网关-介绍网关及搭建网关工程
4 Zuul网关 4.1 需求分析 网关的作用相当于一个过虑器.拦截器,它可以拦截多个系统的请求. 本章节要使用网关校验用户的身份是否合法. 4.2 Zuul介绍 什么是Zuul? Spring Cl ...
随机推荐
- java - day008 - 接口,内部类
接口 作用: 结构设计工具,用来解耦合,需要有子类,隔离具体实现 接口是一个极端的抽象类 用 interface 代替 class 用 implements 代替 extends // 接口中所有东西 ...
- FreeRTOS列表和列表项
FreeRTOS中的列表和列表项类似于数据结构中的链表和节点: 相关的文件是list.c和list.h两个文件: List_t列表结构体 具体定义如下: /* * Definition of the ...
- 虚拟机配置双网卡适配器后（桥接和NAT模式），重新打开后两个适配器的ip都没有了（重启网卡报Job for network.service failed because the control process exited with error code）
科普双网卡适配器的好处: 我是配了一个桥接模式的网卡和一个NAT模式的网卡,桥接模式,也就是将虚拟机的虚拟网络适配器与主机的物理网络适配器进行交接,虚拟机中的虚拟网络适配器可通过主机中的物理网络适配器 ...
- idou老师教你学Istio 08: 调用链埋点是否真的“零修改”？
本文将结合一个具体例子中的细节详细描述Istio调用链的原理和使用方式.并基于Istio中埋点的原理解释来说明:为了输出一个质量良好的调用链,业务程序需根据自身特点做适当的修改,即并非官方一直在说的完 ...
- C#单元测试小例子
步骤简略,特别处进行说明. 以VS2015为例. 1.创建一个解决方案方案,如添加一个ConsoleApplication1的解决方案. 2.在解决方案的默认项目中,添加一个Calc类 3.将Calc ...
- PHP程序员的技术成长规划（转载）
按照了解的很多PHP/LNMP程序员的发展轨迹,结合个人经验体会,抽象出很多程序员对未来的迷漫,特别对技术学习的盲目和慌乱,简单梳理了这个每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定 ...
- go语言defer关键字背后的实现，语法，用法
原文: https://tiancaiamao.gitbooks.io/go-internals/content/zh/03.4.html ------------------------------ ...
- SP15637 GNYR04H - Mr Youngs Picture Permutations[DP]
题目来源:POJ:http://poj.org/problem?id=2279 SPOJ:https://www.spoj.com/problems/GNYR04H/ 题意翻译 题目描述 杨先生希望为 ...
- phpstudy修改端口及网站根目录和访问 localhost 显示目录文件夹
一.其它选项菜单=>phpStudy设置=>端口常规设置(勾选允许目录列表): 二. Apache http端口:80 网站目录:D:\phpStudy\PHPTutorial\WWW 默 ...
- .net 后台页面统一验证是否登录
首先新写一个PageBase类 using System; using System.Collections.Generic; using System.Web; namespace Departme ...