【Springboot 入门培训】#7 (Framework7 移动webapp) 页面路由跳转
在Framework7 JS中所有页面转发与访问都是通过routes 来进行控制的，在项目中需要转发和访问其他页面一定要在路由中进行定义。routes 是用来控制所有Framework7 组件与页面间所有联系，如果有访问页面的功能需要在路由类routes中描述这个访问的url,访问方式，引用名称，参数等等基本属性。 路由分为两种一种是全局路由，一种是视图路由，视图路由API更丰富使用起来更灵活一
·
学习使用routes 路由来进行页面访问，如何定义路由类routes属性与方法引用。掌握routes 路由类的使用就掌握了Framework7 页面之间的访问控制，才能真正的发挥Framework7 组件的优势。
用电脑端在google浏览器下才能看出效果,如果用手机打开有一点慢但是效果非常的棒。
1 创建路由与 Framework7 主引用
我们使用spring boot 中templates模板的方式来完成第一个Framework7 APP页面跳转功能。将路由类与Framework7 中央组件绑定在一起就是一个全局路由。路由创建过程分为3步，1创建路由类，2设置路由内容，3将路由类装入全局函数中变成全局路由。
-
1 创建一个routes路由类var routes=[]。
-
2 创建路由内容，在路由类中设置访问属性var routes=[{name:引用名称,path:元素调用路径,url:http访问url路径}]。
| 属性 | 参数 | 备注 |
|---|---|---|
| name | 路由应用名称 | 全局调用时可以使用到 |
| path | 路由路径 | 在html元素中使用路径来访问 |
| url | 页面路径 | 服务器访问路径地址 |
- 3 创建全局引用 在var app=new Framework7（ routes: routes）全局类中加入路由。
- 4 创建HTML APP 页面元素 app - view - page 三个嵌套的组件。
将路由类与全局引用app进行绑定，绑定后这个路由类中定义的内容就可以全局调用，成为全局路由。
简单来说将路由装入new Framework7（ routes: routes）；就成为局路由。
路由页面
<script type="text/javascript">
var routes=[
{
name: 'page1',//路由应用名称
path: '/page1/',//fk7 页面元素访问时路径
url: './page/routes1',//spring boot中Controller路径
}
];
var app = new Framework7({
// 引入app承载元素
el: '#app',
//定义app引用名称
name: 'zhtapp',
// 定义id
id: 'zhtapp'
routes: routes //将路由信息装入fk7总环境中，全局调用环境
});
</script>
<div id="app">
<!-- app 主要视图 -->
<div class="view view-main view-init" >
<!-- app 底部分-->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<!-- app底部选项卡部分 -->
<a href="/page1/" class="link">转换页面</a>
</div>
</div>
<div class="page-content">
<!-- 内容 部分 -->
<p>这是我第一个app页面</p>
<a href="/page1/">我好兴奋啊快来点我转换页面</a>
</div>
</div>
</div>
2 创建路由转发Controller容器与转发页设置
在spring boot中定义一个Controller类，在类中可以创建页面转发方法，前台页面通过url来获得转发页面的html页面信息，将获得的html页面信息传回给页面中的路由。Framework7 js中央控制器在通过调用路由的方法将个html信息绑定到app框架中page元素组件，这就是Framework7 js中央控制器在通过路由刷新page组件过程。
1 创建 Controller java代码
@Controller
@RequestMapping("/page")
public class PageController {
@RequestMapping("/routes1")
public String routes1(ModelMap map) {
//路由url获得页面的方法
return "/app/routes1";
}
}
2 创建被访问 routes1.html页面
<div class="page">
这是我第一个页面
</div>
- 创建访问页面 ：被访问页html元素中一定要包含在 class=“page” < div class=“page”> 中< /div>
在项目templates文件夹下创建有一个routes1页面，在页面中创建一个代 class=“page” 的页面元素（< div class=“page”></ div>）。如果没有这个 class="page"这个页面元素Framework7 组件不加载这个html页面。Framework7 组件是通过class="page"这个元素来判断哪些html元素是Framework7组件元素。
跳转页面必须定义
page，所有信息必须在page组件中，这样Framework7 中央组件才会认为这个跳转页面中的信息是Framework7 组件，在视图组件中显示这个跳转页面内容。
3 页面元素引用路由路径
# 页面元素引用路由路径
<a href="/page1/" class="link">转换页面</a>
3 创建视图组件
视图组件是Framework7中最重要的一个组件，视图可以看成是一个使用的主页面，视图元素中包含三部分，头，底部，page中间。我们是操作视图的引用来进行编码开发的。
每个Framework7 App页面必须要初始化一个主视图组件实例，我们使用这个视图组件来操作页面元素。
初始化2种方法
app.views.create( viewEl, parameters ) - 初始化视图
app.views.get( viewEl ) - 通过 HTML 元素获取 View 实例
从2两种方法中选择一个方法初始化视图组件。
- viewEl CSS元素 .view-main 是 UI中必须定义的一个主视图名称
- parameters 视图参数 ，开发者自己可以定义一些视图参数
例子：创建视图
<div id="app">
<!-- app 主要视图 -->
<div class="view view-main view-init" >
<div class="page-content">
内容
</div>
</div>
</div>
<script type="text/javascript">
//创建工具组件
var $$ = Dom7;
//创建Framework7 全局组件 app
var app = new Framework7({el:'#app'});
//创建视图组件 view-main 主组图元素中class 元素
var view = app.views.create('.view-main', {
on:{
pageInit: function (){//视图初始化方法
}
}
});
//直接引用的方法
//var view = app.views.get('.view-main' );
</script>
获得路由操作对象
- 在视图对象中获得全局路由操作对象
var router=view.router;//获得这个视图下的路由信息内容
4 操作路由转发页面
使用 router.navigate 的方法访问新页面
创建页面访问方法
//定义页面访问方法
function onpage(){
// 路由跳转页面方法
router.navigate({
name: 'page1',
query: {name:'第一个转发页面'},
},{ignoreCache: true});
}
router.navigate方法
-
参数1 路由url基本信息 包含三个属性 name,query,params
name：使用的路由名称
query：转发时候使用的参数 ，后台 Controller容器中获得参数
-
参数2 转发页面的时候附加功能
router.navigate({},{});
路由调用新页面关系
<div class="toolbar tabbar-labels toolbar-bottom">
<a href="#" class="tab-link tab-link-active"
onclick="onpage()">
|
function onpage(){ <--------|
// 路由跳转页面方法
router.navigate({
name: 'page1',------------------|
query: {name:'第一个转发页面'}, |
},{ignoreCache: true}); |
} |
|
var routes=[ |
{ |
name: 'page1', <--------------------|
path: '/page1/',
url: './app/routes1',---------------|
} |
]; |
-------------spring boot -------------- |
@Controller |
@RequestMapping("/app") |
public class ZhtController { |
@RequestMapping("/routes1") <-------|
public String index(Model map) {
return "/app/page1"; ---------------|
} |
} |
------------- 新html页面 -------------- |
<div class="page"> <-----------|
<div class="page-content">
第一个页面
</div>
</div>
点击首页
页面效果
示例代码下载
(Framework7 移动webapp) Springboot 入门培训 7 页面路由跳转.zip
百度云
链接：https://pan.baidu.com/s/1rDpcZtdBA6i7vBmYTMwcUA
提取码：1234
5 Thymeleaf页面与Framework7组件混合使用
我们使用了Framework7 中的media-list列表UI来生成的页面。
Spring boot Controller 容器设置
- 转发方法设置
@RequestMapping("/routes1")
public String index(Model map,String name) {
map.addAttribute("name", name);
//map.addAttribute("list", user.getOne(null));
//这部分通过查询数据库获得 ，我为了演示方便直接设置
List list=new ArrayList();
Map map1=new HashMap();
map1.put("istype", "0");//文章的摆放模式（0-标题,1-1图，2-2图）
map1.put("tilte", "liunx 操作系统 万字总结 （收藏）");
map1.put("username", "傻子不多了");
map1.put("readsum", "6442");//阅读数
map1.put("messagesum", "12");//评论数
Map map2=new HashMap();
map2.put("istype", "1");//文章的摆放模式（0-标题,1-1图，2-2图）
map2.put("tilte", " (Framework7 移动webapp) Springboot 入门培训 7 页面路由跳转");
map2.put("img1", "../static/img/111.png");//图片地址
map2.put("username", "zhtbs");
map2.put("readsum", "16442");//阅读数
map2.put("messagesum", "643");//评论数
Map map3=new HashMap();
map3.put("istype", "2");//文章的摆放模式（0-标题,1-1图，2-2图）
map3.put("tilte", "Java面试者的经历，吐血分享字节跳动的Java面试经验技巧");
map3.put("img1", "../static/img/111.png");//图片地址
map3.put("img2", "../static/img/22222.jpg");//图片地址
map3.put("img3", "../static/img/444.jpg");//图片地址
map3.put("username", "csdjava");
map3.put("readsum", "12");//阅读数
map3.put("messagesum", "0");//评论数
list.add(map1);
list.add(map2);
list.add(map3);
map.addAttribute("list",list);
return "/app/page1";
}
Thymeleaf 页面设置
循环标签与判断标签使用
<div class="page" th:inline="text">
<div class="page-content">
<div class="block-title">[(${name})]</div>
<div class="list media-list">
<ul>
<th:block th:each="user:${list}">
<li>
<th:block th:if="${user.istype}==0">
<div class="item-content">
[(${user.tilte})]
.......
</div>
</li>
</th:block>
</ul>
</div>
</div>
</div>
- th:each 选好列表内容
- th:if 判断列表属性
完成页面代码
<div class="page" th:inline="text">
<div class="page-content">
<div class="block-title">[(${name})]</div>
<div class="list media-list">
<ul>
<th:block th:each="user:${list}">
<li>
<th:block th:if="${user.istype}==0">
<div class="item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-text"
style="font-size:18px;font-weight:600;
color:#000000;padding-bottom:10px;">
[(${user.tilte})]</div>
</div>
<div class="item-text">
<span style="padding-right:20px;">
作者：[(${user.username})]</span>
<span > 阅读量：[(${user.readsum})]
评论数:[(${user.messagesum})]</span>
</div>
</div>
</div>
</th:block>
<th:block th:if="${user.istype}==1">
<div class="item-content">
<div class="item-inner">
<div class="row">
<div class="item-text col-60"
style="font-size:18px;font-weight:600;
color:#000000;padding-bottom:10px;">
[(${user.tilte})]</div>
<div class="col-40">
<img th:src="${user.img1}" width="100%" height="70px" />
</div>
</div>
<div class="item-text">
<span style="padding-right:20px;">
作者：[(${user.username})]</span>
<span > 阅读量：[(${user.readsum})]
评论数:[(${user.messagesum})]</span></div>
</div>
</div>
</th:block>
<th:block th:if="${user.istype}==2">
<div class="item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-text"
style="font-size:18px;font-weight:600;
color:#000000;padding-bottom:10px;">
[(${user.tilte})]</div>
</div>
<div class="item-row">
<div class="item-cell">
<img th:src="${user.img1}" width="98%" height="70px" />
</div>
<div class="item-cell">
<img th:src="${user.img2}" width="98%" height="70px" />
</div>
<div class="item-cell">
<img th:src="${user.img3}" width="98%" height="70px" />
</div>
</div>
<div class="item-text">
<span style="padding-right:20px;">
作者：[(${user.username})]</span>
<span > 阅读量：[(${user.readsum})]
评论数:[(${user.messagesum})]</span>
</div>
</div>
</div>
</th:block>
</li>
</th:block>
</div>
</div>
routes navigate方法常用属性
router.navigate({
name: 'page1',
query: {name:'第一个转发页面'},
},{reloadCurrent: true,reloadPrevious：false});
| 属性 | 备注 |
|---|---|
| reloadCurrent ( boolean ) | 用路由中的新页面替换当前页面，在这种情况下没有动画 |
| reloadPrevious ( boolean ) | 用路由中的新页面替换历史记录中的上一页 |
| reloadAll ( boolean ) | 加载新页面并从历史记录和 DOM 中删除所有以前的页面 |
| clearPreviousHistory ( boolean ) | 重新加载/导航到指定路线后将清除以前的页面历史记录 |
| animate ( boolean ) | 页面是否应该动画（覆盖默认路由器设置） |
| history ( boolean ) | 页面是否应保存在路由器历史记录中 |
| browserHistory ( boolean ) | 页面是否应保存在浏览器状态。如果您正在使用browserHistory，则可以通过此处false以防止路由进入浏览器历史记录 |
| ignoreCache ( boolean ) | 如果设置为true那么它将忽略缓存中是否有这样的 URL 并再次使用 XHR 重新加载它 |
| props ( object ) | 将作为页面组件道具传递的道具 |
| transition ( string ) | 路由自定义页面过渡名称 |
| openIn ( string ) | 允许以模态或面板的形式打开页面路由。所以它可以是以下之一：popup, popover, loginScreen, sheet,panel |
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
8
0- 0
已为社区贡献3条内容
所有评论(0)