(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>

复造代码

$on 页里变乱

$on 参数为组件变乱，凡是是处置模板初初化变乱功用。

<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>

复造代码

$ Dom7库

$为Framework7 自带的 Dom7库js援用工具。正在默许函数中可使用Dom7的功用。

export default (props, {参数1，参数2}) => {
return $render;
}

复造代码

$h 模板工具

模板言语工具，那个工具能够天生html页里。正在模板中援用了 $h 工具就能够正在template工具中写进html 元素。

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;
}

复造代码

也能够正在template元素中天生模板

export default (props,{$}) => {
//参看Dom7 api 不异jquery
$('p').text('欢送去到app页里')
return $render;
}

复造代码

$f7 Framework7 工具

$f7 为Framework7 工具援用，能够经由过程那个援用创立取掌握Framework7 UI 组件。

export default (props,{$}) => {
return () => $h`
<div class="page">
<ul>
${list.map((item) => $h`
<li>${item}</li>
`)}
</ul>
</div>`
}

复造代码

$f7router 路由工具

$f7router 为整改组件中的路由援用工具。路由利用参考第两章路由利用。

<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>

复造代码

$el html元素工具

参数工具经由过程 .value属性中包含模板组件中HTML 元素的 Dom7 真例的工具。$el.value 需求正在组件天生后可使用。

export default (props,{$，$f7}) => {
//Framework7 工具援用
$f7.dialog.alert('弹出框')
return $render;
}

复造代码

$store 剧本缓存

$store 为剧本的缓存功用，能够将利用的数据保存正在那个缓存中。

export default (props,{$，$f7,$f7router}) => {
//利用路由办法
$f7router.back();
return $render;
}

复造代码

$update 模板更新

当模板html 元素发作变革的时分，需求挪用那个办法革新全部模板页里。十分主要的办法，假如他没有革新，页里中的html元素没有会从头天生。了解为 mvvm 形式中每次数据变革，需求用 $update();从头绑定一次。

export default (props,{$el}) => {
//得到html元素工具
$el.value.find('p').addClass('red')
return $render;
}

复造代码

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办法

const store = createStore({
user: {
userid: 10,
}
});
---------- 模板页里 --------
export default (props,{$store}) => {
//得到html元素工具
const users = $store.user.userid;
alert( const users = $store.getters('users'););
return $render;
}

复造代码

模板默许函数中挪用 $f7 参数中的 ajax办法去会见spring boot 中的json办法容器。

ajax 恳求url

<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>

复造代码

ajax返回字符串转成json工具

eval("("+ res.data+")"); 利用eval办法将ajax返回的字符串转换成json工具

1 app.request.get 恳求办法

利用 HTTP GET 恳求从效劳器减载数据

@RequestMapping("/routes3")
public String routes3(Model map) {
map.addAttribute("title", "那是个韬哥第一个法式");
return "app/Component";
}

复造代码

url -字符串- 恳求 url
data 恳求参数。
success - function (data, status, xhr) - 恳求胜利时施行的回调函数。
error - function (xhr, status, message) - 恳求失利时施行的回调函数。
dataType 效劳器和谈范例。多是text或json。

2 app.request.post恳求办法

利用 HTTP POST 恳求从效劳器减载数据

<template>
<div class="page" th:inline="text">
<div class="page-content">
<p>[(${title})]</p>
<p>${value}</p>
</div>
</div>
</template>
<style>
.red-link {
color: red;
}
</style>
<script th:inline="javascript">
export default (props,{}) => {
//绑定背景参数title给函数中的value,value经由过程模板绑定到html模板页里中
let value = '[(${title})]';
})
return $render;
}
</script>

复造代码

url -字符串- 恳求 url
data 恳求参数。
success - function (data, status, xhr) - 恳求胜利时施行的回调函数。
error - function (xhr, status, message) - 恳求失利时施行的回调函数。
dataType 效劳器和谈范例。多是text或json。

3 app.request.json 恳求办法

利用 GET HTTP 恳求从效劳器减载 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(map);
list.add(map1);
return list;
}
}

复造代码

url -字符串- 恳求 url
data 恳求参数。
success - function (data, status, xhr) - 恳求胜利时施行的回调函数。
error - function (xhr, status, message) - 恳求失利时施行的回调函数。

4 app.request.postJSON 恳求办法

利用 HTTP POST 恳求收收 JSON 数据

<template>
<div class="page" th:inline="text">
<div class="page-content">
<div class="list simple-list">
<ul>
${user && user.map((u1) => $h`
<li>${u1.id}${u1.name}</li>
`)}
</ul>
</div>
</div>
</div>
</template>
<script th:inline="javascript">
export default (props,
{$f7, $on, $update}) => {
let title = '';
let user = [];
$on('pageInit', () => {
//ajax得到spring boot json串
$f7.request.get('./FK7/list').
then((res) => {
//字符串转成json工具
user = eval("("+ res.data+")");
$update();
});
})
return $render;
}
</script>

复造代码

url -字符串- 恳求 url
data 恳求参数。
success - function (data, status, xhr) - 恳求胜利时施行的回调函数。
error - function (xhr, status, message) - 恳求失利时施行的回调函数。

5 request(options)通用办法

有庞大的ajax恳求，需求利用通用办法去给效劳收收恳求

request(options) 参数

app.request.get( url , data , success , error , dataType )
//例子
app.request.get('./FK7/list',{ name: 'user', id:5 },
function(data, status, xhr){
//会见胜利返回办法
alert(data);
},function(xhr, status, message){
//会见毛病返回办法
},'json');
// 利用then办法去处置返回办法
app.request.get('./FK7/list',{ name: 'user', id:5 })
.then(function (res) {
console.log(res.data);
});

复造代码

经常使用参数
属性称号阐明url恳求URLasync同步仍是同步恳求，请将此选项设置为 falsemethod恳求办法（比方“POST”、“GET”、“PUT”）cache假如设置为 false，它将强迫恳求的页里没有被浏览器缓存。将缓存设置为 false 仅合用于 HEAD 战 GET 恳求contentType恳求和谈multipart/form-data或text/plain。关于跨域恳求，将内乱容范例设置为 application/x-www-form-urlencoded、multipart/form-data 或 text/plaincrossDomain跨域上强迫施行恳求（比方 JSONP），值设置为 true。当true时的X-Requested-With: XMLHttpRequest恳求头没有会被增加到恳求中时data参数processData合适默许的内乱容范例“application/x-www-form-urlencoded” ，请将此选项设置为falsedataType返回数据范例 text或jsonheaders恳求头键/值对设置successfunction (data, status, xhr) 会见胜利errorfunction (xhr, status, message) 毛病办法

将参数传进办法中停止挪用

挪用示例

app.request.post( url , data , success , error , dataType )
app.request.post('./FK7/list',{ name: 'user', id:5 },
function(data, status, xhr){
//会见胜利返回办法
alert(data);
},function(xhr, status, message){
//会见毛病返回办法
},'json');
// 利用then办法去处置返回办法
app.request.post('./FK7/list',{ name: 'user', id:5 })
.then(function (res) {
console.log(res.data);
});

复造代码

6 then取catch办法

可使用then为会见胜利办法，catch会见失利回调办法。

app.request.json ( url , data , success , error)
app.request.json ('./FK7/list',{ name: 'user', id:5 },
function(data, status, xhr){
//会见胜利返回办法
alert(data);
},function(xhr, status, message){
//会见毛病返回办法
});
// 利用then办法去处置返回办法
app.request.json('./FK7/list',{ name: 'user', id:5 })
.then(function (res) {
console.log(res.data);
});

复造代码

5 Ajax取Component MVVM 综开使用

Controller容器办法

app.request.postJSON ( url , data , success , error)
app.request.postJSON ('./FK7/list',{ name: 'user', id:5 },
function(data, status, xhr){
//会见胜利返回办法
alert(data);
},function(xhr, status, message){
//会见毛病返回办法
});
// 利用then办法去处置返回办法
app.request.postJSON('./FK7/list',{ name: 'user', id:5 })
.then(function (res) {
console.log(res.data);
});

复造代码

模板 HTML

//主函数援用
var app = new Framework7({ });
app.request({
url:'./FK7/list'
}).then(function (res) {
alert(res.data);
});

复造代码

$h 利用本领

$h 轮回

app.request({
url:'./FK7/list',
async:true,
contentType:'text/plain',
success:function(data, status, xhr){
alert(data);
}
})

复造代码

user.map((u1) => 模板轮回功用

$h 判定嵌套

app.request.postJSON('./FK7/list',{name: 'user',id:5 })
.then(function (res){
list=res.data;
$update();
}).catch(function (err) {
list=[];
$update();
console.log(err.xhr)
console.log(err.status)
console.log(err.message)
});

复造代码

模板轮回中能够嵌套判定，只需援用模板援用 $h 工具就能够正在template工具中写进html 元素。

获得变乱@click 参数

正在template 模板中界说变乱 <li @click=${onFind}> 只能获得变乱源那个参数，变乱中不克不及获得其他变乱参数，我们怎样打点那个成绩呢？将参数变成元素属性保存正在元素中，经由过程变乱源转成dm7工具，掏出那个元素中的属性就能够了。

@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(map);
list.add(map1);
return list;
}
}

复造代码

li元素中界说 id, name两个属性参数
li元素中界说@click 变乱
默许函数中界说变乱

变乱工具 e.target 获得变乱元素的html内乱容。
正在将 e.target 工具放进到 dom7工具中，获得他元素属性工具$(e.target).attr(“id”)。
百度网盘下载所在
链接：https://pan.百度.com/s/1rDpcZtdBA6i7vBmYTMwcUA
提与码：1234
下载所在运转代码下载

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！

(Framework7 移动webapp) Springboot 入门培训 8 Component 模板MVVM与AJAX

浏览过的版块