在使用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
下載地址運行代碼下載

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/296609.html

標籤：其他

上一篇：shardingjdbc 分庫分表

下一篇：七天學會NodeJS（三）行程管理（util.format、Process、Child Process、Cluster）、子行程父行程之間通訊、異步編程、例外處理、域（Domain）

(Framework7 移動webapp) Springboot 入門培訓 8 Component 模板MVVM與AJAX