(Framework7 移动webapp) Springboot 入门培训 8 Component 模板MVVM与AJAX
Posted Zht_bs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了(Framework7 移动webapp) Springboot 入门培训 8 Component 模板MVVM与AJAX相关的知识，希望对你有一定的参考价值。
在使用Framework7 开发 webapp中，最常用的是方式是使用Component模板的MVVM的开发方式，这种模式是使用模板技术与ajax与dmo7（类似jquery）综合使用来生成页面html，它对开发者使用js脚本能力要求非常的高。
Component 模板需要在路由中的componentUrl属性来定义模板模板访问地址。
routes = [
{
path: '/路由路径/',
componentUrl: '模板html页面地址url',
];
1 Component 模板构成
Component 模板分为三大部分
- template html元素层
- style css样式层
- script 脚本层
Component.html构成
<template>
<div class="page" >
HTML内容
</div>
</template>
<style>
.red-link {
color: red;
}
CSS样式
</style>
<script>
// component 模块语法 mvvm模式 html页面元素与数据模型绑定
// 1 props 传入的参数
// 2 操作的fk7内设对象
export default (props, {}) => {
return $render;
}
</script>
1 template
template 中是所有Framework7 UI组件元素，也可以是其他的html元素。所有页面元素都要在class="page"元素中。
<template>
<div class="page">
html页面
</div>
</template>
template 中的所有元素都要有 </>表示结束。不能是< br/> < input type="" />< img src />这样的结束。
元素结束示例
<template>
<!-- 这种关闭是正确的 -->
< input type="" ></input>
<br></br>
<div>元素</div>
<!-- 这种关闭是错误的 -->
<br/>
< input type="" />
</template>
2 style
定义页面css样式内嵌样式。
<style>
.red-link {
color: red;
}
</style>
3 script
脚本部分最主要的就是模板默认的函数，我们需要在使用这个默认函数控制整个模板页面的所有html元素，和自定义事件，连接后台数据，参数转换等功能。
export default (props, {}) => {
return $render;
}
1 定义默认函数体 export default (props, {上下文参数}) => { return $render; }
- props 参数，路由器访问过来的参数，一般情况是用不上的
- 上下文参数 沟通上下文的内设参数
- $render 返回带有组件 HTML 内容的标记模板文字
4 默认函数中参数与事件
可以在默认函数中定义参数【属性，数组，object】，可以在 template 层中使用${名称}方法将定义的参数绑定到html元素中来。
- 参数类型let 默认函数里的属性都是 let
<template>
<div class="page" th:inline="text">
<div class="page-content">
<p>${value}</p> <------------------|
</div> |
</div> |
</template> |
<style> |
.red-link { |
color: red; |
} |
</style> |
<script th:inline="javascript"> |
export default (props,{}) => { |
let value = '第一个程序';------------|
})
return $render;
}
</script>
-
数组定义
定义 let names=[] 数组对象，在template模板中使用模板标记语言进行循环遍历数组内容。
<template>
<div class="page" th:inline="text">
<div class="page-content">
<div class="list simple-list">
<ul>//模板语言循环显示数据内容
${names.map((name) => $h` <----------|
<li >${name.id}${name.name}</li> |
`)} |
</ul> |
</div> |
</div> |
</div> |
</template> |
<script th:inline="javascript"> |
//mvvm模式 html页面元素与数据模型绑定 |
export default (props, |
{$update}) => { |
let names=[ <---------------------|
{name:'1条记录',id:1},
{name:'2条记录',id:2},
{name:'3条记录',id:3}]
return $render;
}
</script>
-
事件定义与绑定
在默认函数中定义事件方法，然后通过template模板中的 @click 标签来绑定这个事件到对应html元素中。
<template>
<div class="page" th:inline="text">
<div class="page-content">
<div class="list simple-list">
<ul>//模板语言循环显示数据内容
${names.map((name) => $h`
<li @click=${onfind}> <----------|
${name.id}${name.name}</li> |
`)} |
</ul> |
</div> |
</div> |
</div> |
</template> |
<script th:inline="javascript"> |
//mvvm模式 html页面元素与数据模型绑定 |
export default (props, |
{$update}) => { |
//自定义事件 |
const onfind=(e)=>{ <----------------|
console.log(e.target);
alert(e.target);
};
let names=[
{name:'1条记录',id:1},
{name:'2条记录',id:2},
{name:'3条记录',id:3}]
return $render;
}
</script>
@ 等价于事件中on
| 事件 | 引用 |
|---|---|
| onclick() | @click |
| onchange() | @change |
| onsubmit() | @submit |
| onblur() | @blur |
| onfocus() | @focus |
2 内设函数参数
模板中的默认函数自带很多功能强大的参数，开发者通过这些参数的使用来操作模板页面的html 元素与脚本事件。这些参数可以根据业务需求自由组合使用的参数。
export default (props, {参数1，参数2}) => {
return $render;
}
$on 页面事件
$on 参数为组件事件，通常是处理模板初始化事件功能。
export default (props,{$on}) => {
$on('pageMounted', (e, page) => {
//页面生成时候触发事件
});
$on('pageInit', (e, page) => {
//模板页面初始化事件
});
$on('pageBeforeIn', (e, page) => {
//页面dom生成前
});
$on('pageAfterIn', (e, page) => {
//页面创建视图
});
$on('pageBeforeOut', (e, page) => {
//页面dom生成后
});
$on('pageAfterOut', (e, page) => {
//页面创建视图后
});
$on('pageBeforeUnmount', (e, page) => {
//卸载页面前
});
$on('pageBeforeRemove', (e, page) => {
//卸载页面后
});
return $render;
}
$ Dom7库
$为Framework7 自带的 Dom7库js引用对象。在默认函数中可以使用Dom7的功能。
export default (props,{$}) => {
//参看Dom7 api 相同jquery
$('p').text('欢迎来到app页面')
return $render;
}
$h 模板对象
模板语言对象，这个对象可以生成html页面。在模板中引用了 $h 对象就可以在template对象中写入html 元素。
export default (props,{$}) => {
return () => $h`
<div class="page">
<ul>
${list.map((item) => $h`
<li>${item}</li>
`)}
</ul>
</div>`
}
也可以在template元素中生成模板
<template>
<div class="page" th:inline="text">
<div class="page-content">
${user && $h`
<div class="list simple-list">
<ul>
<li>名称: ${user.name}</li>
<li>性格: ${user.sex}</li>
<li>年龄: ${user.age}</li>
</ul>
</div>
`}
</div>
</div>
</template>
$f7 Framework7 对象
$f7 为Framework7 对象引用，可以通过这个引用创建与控制Framework7 UI 组件。
export default (props,{$，$f7}) => {
//Framework7 对象引用
$f7.dialog.alert('弹出框')
return $render;
}
$f7router 路由对象
$f7router 为整改组件中的路由引用对象。路由使用参考第二章路由使用。
export default (props,{$，$f7,$f7router}) => {
//使用路由方法
$f7router.back();
return $render;
}
$el html元素对象
参数对象通过 .value属性中包含模板组件中HTML 元素的 Dom7 实例的对象。$el.value 需要在组件生成后可以使用。
export default (props,{$el}) => {
//获得html元素对象
$el.value.find('p').addClass('red')
return $render;
}
$store 脚本缓存
$store 为脚本的缓存功能，可以将使用的数据保存在这个缓存中。
const store = createStore({
user: {
userid: 10,
}
});
---------- 模板页面 --------
export default (props,{$store}) => {
//获得html元素对象
const users = $store.user.userid;
alert( const users = $store.getters('users'););
return $render;
}
$update 模板更新
当模板html 元素发生变化的时候，需要调用这个方法刷新整个模板页面。非常重要的方法，如果他不刷新，页面中的html元素不会重新生成。理解为 mvvm 模式中每次数据变化，需要用 $update();重新绑定一次。
<template>
<div class="page" th:inline="text">
<div class="page-content">
<p>${telte}</p> <------------------| 显示第二次
</div> |
</div> |
</template> |
<script th:inline="javascript"> |
export default (props, |
{$on,$update}) => { |
let telte='第一次'; <-------------- |
$on('pageInit', (e, page) => { |
telte='第二次'; <-------------- |
//页面数据变化
$update();
});
}
</script>
3 与Thymeleaf混合使用
在访问Thymeleaf页面的Controller容器类中，可以定义参数到Model map中。我们在通过将html页面元素与Thymeleaf模板标签绑定的方式，将Controller容器中定义的参数传递给这个模板页面。
例如：在方法中设置一个参数“title”保存到requert中，spring boot 就是map.addAttribute方法。我们在Component页面中通过Thymeleaf标签来获得这个参数。
Controller容器方法
@RequestMapping("/routes3")
public String routes3(Model map) {
map.addAttribute("title", "这是个韬哥第一个程序");
return "app/Component";
}
Component.html
<template>
<!-- Thymeleaf模板定义绑定 th:inline="text" 元素 -->
<div class="page" th:inline="text">
<div class="page-content">
<!-- 后台的 title元素直接绑定 -->
<p>[(${title})]</p>
<p>${value}</p>
</div>
</div>
</template>
<!-- component styles -->
<style>
.red-link {
color: red;
}
</style>
<!-- Thymeleaf模板定义绑定 th:inline="javascript" -->
<script th:inline="javascript">
export default (props,{}) => {
//绑定后台参数title给函数中的value,value通过模板绑定到html模板页面中
let value = '[(${title})]';
})
return $render;
}
</script>
- template page 元素中 加入 th:inline=“text” 绑定Thymeleaf标签
- script 元素中 加入 th:inline=“javascript” 绑定Thymeleaf标签
如何区分Thymeleaf标签与Component 模板标签
[(${元素})] Thymeleaf标签
${元素} Component 模板标签
4 Ajax 请求使用
前面介绍了模板中与Thymeleaf混合的方式来获得后台数据信息，但是这种方式在mvvm模式中使用起来很不方便。可以使用Ajax 获得后台json的方式来进行数据交互，这样在mvvm模式中使用起来很方便。$f7 引用了Framework7 自带的ajax请求库，可以直接访问 XHR 请求 (Ajax)。
定义Spring boot json方法
@RestController()
@RequestMapping("/FK7")
public class Fk7Conteroller {
@RequestMapping("/list")
public List getList1(){
List list=new ArrayList();
Map map=new HashMap();
map.put("id", "1");
map.put("name", "标题一***********");
Map map1=new HashMap();
map1.put("id", "2");
map1.put("name", "标题二***********");
list.add(mapphonegap，framework7，suimobile这些框架都是啥关系