MUI框架-09-MUI 與后台數據交互
- 本篇介紹使用 art-template 和原生 MUI 的數據交互 mui.ajax 來實現
- 我們大家都知道，想要數據交互就要有數據，每次當我們發送請求，我們要清楚，怎么發，發給誰，返回的數據是什么內容，格式
- 先放一張圖，給大家學習的動力：
- 然后今天呢，介紹的是調用 API，API 是什么呢，就是一個接口，比如知乎日報的API ，我們可以通過這個 API 獲取到知乎上最新的消息，並且是 json 格式，我們就不用再去找數據了，其他類型 API 還有 百度語音識別，就是百度給我們一個接口，我們可以想這個接口發送 語音，然后返回給我們識別的結果，我們就沒必要就了解具體是怎么識別的
- 【注意】：我這里收集了大量的 API ，贈送給大家:
- 鏈接地址：中國國內 - 可用API合集
API 分析
- 這里我們就使用知乎日報 API
- 知乎日報 API 分析：https://github.com/izzyleung/ZhihuDailyPurify/wiki/知乎日報-API-分析
- 怎么使用呢，比如說我們想要拿到日報的主題，大家可以看上面的那篇文章，找到主題，下面有一個鏈接，就是我們需要的 API
- 下面也給出了響應實例
- 我們就只需要考慮怎么使用這些數據就 OK 了
- 然后大家也可以試一下這個鏈接：https://news-at.zhihu.com/api/4/theme/11
- 為了方便查看，大家也可以通過這個鏈接格式化 json 數據：在線代碼格式化
Ajax
- MUI Ajax 官方文檔
- 參數呢，大家自己在官網看就可以，下面開始實戰
- 這里我們先一起看一下，官網給出的代碼示例：如下為通過post方式向某服務器發送鑒權登錄的代碼片段：
mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服務器返回json格式數據
type:'post',//HTTP請求類型
timeout:10000,//超時時間設置為10秒；
headers:{'Content-Type':'application/json'},
success:function(data){
//服務器返回響應，根據響應結果，分析是否登錄成功；
...
},
error:function(xhr,type,errorThrown){
//異常處理；
console.log(type);
}
});
- 上面這段代碼就是說，ajax請求，設置一個目標地址，逗號，大括號后面是傳入的參數信息
- 大家記住一句話 大括號開始 大括號結束就是 json 格式
- 然后我們就根據這個做一個實例，准備呢，大家請先根據這篇創建一個簡單的頁面：MUI框架-08-窗口管理-創建子頁面
- 然后打開我們的自己建的 html 目錄下的那個子頁面 html文件
- 我們用下面代碼替換 init() 的 script 標簽，具體步驟寫在注釋：
<script type="text/javascript">
mui.init()
//plusReady，用來定義加載dom后的操作
mui.plusReady(function() {
//發起 ajax請求，地址使用知乎日報 api
mui.ajax('https://news-at.zhihu.com/api/4/theme/11', {
/* data 是參數，我們這里不需要，我們只是從 api獲取數據
data: {
username: 'username',
password: 'password'
},
*/
dataType: 'json', //服務器返回json格式數據
type: 'get', //HTTP請求類型
timeout: 10000, //超時時間設置為10秒；
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
//服務器返回響應，根據響應結果，分析是否登錄成功；
//我們現在控制台打印一下請求結果
console.log(data)
//然后獲取json數據中的具體值
console.log(data.stories[0].title)
},
error: function(xhr, type, errorThrown) {
//異常處理；
console.log(type);
}
});
})
</script>
- 如果你沒有安卓手機，建議下載一個夜神安卓模擬器，配置方法：
MUI框架-07-HBuilder+夜神安卓模擬器 配置 - 然后我們點擊【運行】>【】真機運行
- 我們可以看到控制台
- 檢查一下：
把返回的 json 數據放在頁面 -
使用 art-template - JavaScript 模板引擎
- 返回的數據不能就展示在控制台吧，怎么把數據放在頁面是不是也很關鍵
- 這里要介紹另一位主角：art-template，它是高性能 JavaScript 模板引擎
- art-template 官網： http://aui.github.io/art-template/zh-cn/index.html
- 1.下載的話可以從官網下載
- 2.可以直接下載我的 template -web.js：https://download.csdn.net/download/qq_40147863/10689407
- 3.如果你會用 npm 包管理器，那么建議新建一個文件夾，因為我們只需要一個 template -web.js 文件，我們有很多都不需要
npm install art-template --save
- 然后找到 art-template/template -web.js 文件
- 然后我們拷貝到項目 js 目錄的下面：
- 打開需要使用的 html 文件，在 head 標簽里加入：
<script src="../js/template-web.js"></script>
- 然后我們看一下 art-template 官網
- 也就是說們要使用這個 art-template，語句使用就要放在 這種 script 標簽里，做對數據的渲染
- 第一步：把頁面上 ul 標簽里的內容都刪掉，給ul 標簽加一個id為zhihu截圖：
<ul class="mui-table-view" id="zhihu"></ul>
- 第2步把頁面里 init 函數的那個 script 標簽刪掉，步驟，寫在注釋里了，粘貼下面這段代碼：
<!-- 引入template-web.js -->
<script src="../js/template-web.js" type="text/javascript" charset="UTF-8"></script>
<!-- 使用<script id="list" type="text/html"> 拼接 html -->
<script id="list" type="text/html">
<!-- 循環語法 -->
{{each stories as list}}
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="{{list.images[0]}}">
<div class="mui-media-body">
<!-- 獲取 title -->
{{list.title}}
</div>
</a>
</li>
{{/each}}
</script>
<script type="text/javascript">
mui.init()
//plusReady，用來定義加載dom后的操作
mui.plusReady(function() {
//發起 ajax請求，地址使用知乎日報 api
mui.ajax('https://news-at.zhihu.com/api/4/theme/11', {
/* data 是參數，我們這里不需要，我們只是從 api獲取數據
data: {
username: 'username',
password: 'password'
},
*/
dataType: 'json', //服務器返回json格式數據
type: 'get', //HTTP請求類型
timeout: 10000, //超時時間設置為10秒；
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
//服務器返回響應，根據響應結果，分析是否登錄成功；
//我們現在控制台打印一下請求結果
console.log(data)
//然后獲取json數據中的具體值
//console.log(data.stories[0].title)
//list 對應上面的 id，就是得到 拼接的 html
var html = template('list', data);
//把得到的 html 放到id為 zhihu 的 ul 標簽里
document.getElementById("zhihu").innerHTML = html;
console.log(html);
},
error: function(xhr, type, errorThrown) {
//異常處理；
console.log(type);
}
});
})
</script>
真機運行
-
注意 web 瀏覽器是看不到效果的，必須真機運行
-
截圖：
-
art-template 官方文檔：http://aui.github.io/art-template/zh-cn/docs/syntax.html
更多文章鏈接：MUI 框架
- 本筆記不允許任何個人和組織轉載