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

樊运乾

2023-12-01

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

模板默认函数中调用 $f7 参数中的 ajax方法来访问spring boot 中的json方法容器。

ajax 请求url

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

ajax返回字符串转成json对象

eval("("+ res.data+")"); 使用eval方法将ajax返回的字符串转换成json对象

1 app.request.get 请求方法

使用 HTTP GET 请求从服务器加载数据

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 -字符串- 请求 url
data 请求参数。
success - function (data, status, xhr) - 请求成功时执行的回调函数。
error - function (xhr, status, message) - 请求失败时执行的回调函数。
dataType 服务器协议类型。可能是text或json。

2 app.request.post请求方法

使用 HTTP POST 请求从服务器加载数据

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

url -字符串- 请求 url
data 请求参数。
success - function (data, status, xhr) - 请求成功时执行的回调函数。
error - function (xhr, status, message) - 请求失败时执行的回调函数。
dataType 服务器协议类型。可能是text或json。

3 app.request.json 请求方法

使用 GET HTTP 请求从服务器加载 JSON 编码的数据

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

url -字符串- 请求 url
data 请求参数。
success - function (data, status, xhr) - 请求成功时执行的回调函数。
error - function (xhr, status, message) - 请求失败时执行的回调函数。

4 app.request.postJSON 请求方法

使用 HTTP POST 请求发送 JSON 数据

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

url -字符串- 请求 url
data 请求参数。
success - function (data, status, xhr) - 请求成功时执行的回调函数。
error - function (xhr, status, message) - 请求失败时执行的回调函数。

5 request(options)通用方法

有复杂的ajax请求，需要使用通用方法来给服务发送请求

request(options) 参数

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

常用参数

属性名称	说明
url	请求URL
async	同步还是异步请求，请将此选项设置为 `false`
method	请求方法（例如“POST”、“GET”、“PUT”）
cache	如果设置为 false，它将强制请求的页面不被浏览器缓存。将缓存设置为 false 仅适用于 HEAD 和 GET 请求
contentType	请求协议`multipart/form-data`或`text/plain`。对于跨域请求，将内容类型设置为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain
crossDomain	跨域上强制执行请求（例如 JSONP），值设置为 true。当`true`时的`X-Requested-With: XMLHttpRequest`请求头不会被添加到请求中时
data	参数
processData	适合默认的内容类型“application/x-www-form-urlencoded” ，请将此选项设置为`false`
dataType	返回数据类型 text`或`json
headers	请求头键/值对设置
success	function (data, status, xhr) 访问成功
error	function (xhr, status, message) 错误方法

将参数传入方法中进行调用

调用示例

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

6 then与catch方法

可以使用then为访问成功方法，catch访问失败回调方法。

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

5 Ajax与Component MVVM 综合应用

Controller容器方法

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

模板 HTML

<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>1?'a':'b'}${u1.name}</li>
     `)}
    </ul>
</div>
</div>
</div>
</template>
<style>
</style>
<script th:inline="javascript">
  // component 模块语法 mvvm模式  html页面元素与数据模型绑定
export default (props, {$, $f7, $on, $update}) => {
let user = [];
    $on('pageInit', () => {
       $f7.request.get('./FK7/list').then((res) => {
          user = eval("("+ res.data+")");
          $update();
       });
    })
    return $render;
}
</script>

$h 使用技巧

$h 循环

${user && user.map((u1) => $h`
  <li>${u1.name}</li>
`)}

user.map((u1) => 模板循环功能

$h 判断嵌套

${user && user.map((u1) => $h`
   ${u1.id>1 && $h`
	 <li>${u1.id>1?'a':'b'}${u1.name}</li>
   `}
`)}

模板循环中可以嵌套判断，只要引用模板引用 $h 对象就可以在template对象中写入html 元素。

获得事件@click 参数

在template 模板中定义事件 <li @click=${onFind}> 只能获得事件源这个参数，事件中不能获得其他事件参数，我们怎么解决这个问题呢？将参数变成元素属性保存在元素中，通过事件源转成dm7对象，取出这个元素中的属性就可以了。

<div class="list simple-list">
 <ul>
${user && user.map((u1) => $h`
 <li id="${u1.id}" 
     name="${u1.name}"  
     @click=${onFind}>
     ${u1.id}${u1.name}
     </li>
`)}
 </ul>
</div>
<script th:inline="javascript">
export default (props, 
                {$, $f7,$on,$update}) => {
 const onFind=(e)=>{
   //e.target 事件的元素html内容
   console.log(e.target);
   //获得元素的属性对象值
   alert($(e.target).attr("id"));
 }
 return $render;
}
</script>

li元素中定义 id, name两个属性参数
li元素中定义@click 事件
默认函数中定义事件

事件对象 e.target 获得事件元素的html内容。

在将 e.target 对象放入到 dom7对象中，获得他元素属性对象$(e.target).attr(“id”)。

百度网盘下载地址
链接：https://pan.baidu.com/s/1rDpcZtdBA6i7vBmYTMwcUA
提取码：1234
下载地址运行代码下载