(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这些框架都是啥关系

推荐H5应用快速开发UI库

移动webapp前端ui用哪个框架好

WebApp - IOS兼容问题

前端移动框架Framework7入门

移动端安卓和 IOS 开发框架 Framework7 布局