Axure高階教程：利用JavaScript制作實時天氣顯示APP

大家用Axure制作APP原型時，即使高保真效果也只是在視覺層面上實現了原型效果，但頁面中的數據內容還都只是預先設定好的，例如：使用中繼器、表格等，模擬真實作品。那么有沒有一種方法，讓我們制作的原型也能獲取到真實數據呢？

本例通過JavaScript實現實時獲取天氣功能，意在激發大家興趣，制作更多基于Axure獲取實時信息的案例。廢話不多說，上圖為敬：

這個原型到底有什么獨特之處嗎？在剛打開的時候，整個頁面呈現的數據都是之前設定好的，當點擊左上角的『刷新』的時候，頁面會通過一個天氣查詢api獲取到當前真實數據，然后加載出來。怎么樣，是不是被它吸引到了？

原理

這個實例中主要用到了Axure的以下幾個功能：

（1）中繼器

由于『昨天』、『今天』、『明天』的天氣概要布局相同，可以使用中繼器更加規范顯示。

（2）JavaScript

在獲取天氣api時，通過Ajax的GET方式從天氣api服務器中獲取實時數據。

（3）全局變量

接收并儲存獲取到的實時數據。

（4）字符串函數

通過indexOf、replace、slice等字符串函數對接收到的數據進行加工，之后存儲到中繼器中。

以下為整個實例流程圖：

功能實現

1. 獲取api數據

在本例中，我們通過『http://t.weather.sojson.com/api/weather/city/101010100』api獲取到北京天氣的實時數據，大家可以看到，數據是以json格式返回的，此接口可以獲得當天的天氣詳情和從昨天到未來15天的天氣數據。

那么Axure是如何實現調用api的呢？

我們先設定一個全局變量『tianqi』，當點擊刷新按鈕時，先設置全局變量值為空，再通過『打開鏈接』功能插入Javascript腳本，參數選擇「鏈接外部網址」，「打開當前窗口」調用api并賦值給全局變量。

javascript：
$.ajax({
method: ‘GET’,
url: ‘http://t.weather.sojson.com/api/weather/city/101010100’,
data: {}
}).done(function(msg){
$axure.setGlobalVariable(‘tianqi’, JSON.stringify(msg));
});

這段JavaScript代碼的意思就是調用JavaScript，通過「ajax」對象的「GET」方式，從「http://t.weather.sojson.com/api/weather/city/101010100」地址獲取數據，因為這個api不需要傳遞參數，所以「data」字段并沒有賦值。之后將獲取到的數據通過「JSON.stringify」轉為字符串后賦值給全局變量「tianqi」。

怎么樣？是不是很神奇。

如果你不明白，去百度下ajax的「GET」方法就能略知一二了。通過這一步，我們的全局變量「tianqi」就已經獲取到了實時的天氣數據。那么之后怎么加工呢？

2. 格式化數據

目前的全局變量值如下圖，是沒辦法直接使用的。那我們如何格式化這些數據呢，這時就需要字符串函數了。

如圖所示，整個數據中包含了2部分，第一部分是當天的天氣情況，第二部分是從昨天開始到之后的十五天天氣情況。由于時間關系，本次實例中只使用到了「第一部分」和「昨天到明天」的天氣情況。

我們首先創建4個文本框，這4個文本框分別保存「當天天氣情況」、「昨天天氣情況」、「今天天氣情況」、「明天天氣情況」。然后通過『設置文本』功能對文本框賦值，其中「當天天氣情況」的賦值函數為：

[[tianqi.substring(tianqi.indexOf(‘shidu’),tianqi.indexOf(‘yesterday’))]]

這句話什么意思呢？就是說截取「tianqi」字符串中從「shidu」字段到「yesterday」字段的字符。

3. 更新天氣數據

目前我們獲得了4段數據，分別為「當天天氣情況」、「昨天天氣情況」、「今天天氣情況」、「明天天氣情況」。這樣就簡單多了，當我們需要當天的溫度是，直接從「當天天氣情況」數據中查找對應的「wendu」就可以了。

目前「當天天氣情況」數據如下：

shidu”:”16%”,”pm25″:11.0,”pm10″:23.0,”quality”:”優”,”wendu“:”16″,”ganmao”:”各類人群可自由活動”,”yesterday

我們很容易看到，「wendu」的數值是「16」。如何截取呢？我們通過以下函數將「16」賦值給頁面中的『溫度』字段。其中「LVAR1」為「當天天氣情況」元件的元件文字。

[[LVAR1.slice(LVAR1.indexOf(‘wendu’)+8,LVAR1.indexOf(‘wendu’)+10)]]

4. 更新中繼器數據

如前所述，頁面中的「昨天」、「今天」、「明天」天氣情況我們通過中繼器儲存。更新中繼器數據我們通過『更新行』動作實現。

對應的賦值函數同樣通過字符串函數實現，例如「天氣類型」函數如下，LVAR1為「昨天天氣情況」元件的元件文字：

[[LVAR1.slice(LVAR1.indexOf(‘type’)+7,LVAR1.indexOf(‘type’)+8)]]

至此，大功告成，我們的頁面已經加載了實時的天氣信息。

后記

這個有用嗎？

作為一名產品經理，如果連自己最常用的軟件都不喜歡琢磨，何談自己要開發的產品呢？

通過這種獲取api的方式，我們可以制作更多實時、真實的案例，在網上有無數的api，例如大小寫轉換、MD5加密、歸屬地查詢、車輛限行，如果我們做的案例中能得當的使用這些功能，不是更好嗎？更進一步，如果懂得開發，我們完全可以為了原型演示開發一個特定的api，實現相應功能。

一些問題

JavaScript接口http限制：目前測試后已知的限制是，如果接口不是https協議，原型在axshare上無法獲取數據，原因是axshare禁止調用http接口。
JavaScript接口跨域問題：在網上測試了一些接口，發現使用ajax方法調用時會產生跨域問題，導致無法接收到數據，具體解決方法沒有找到，如果有方法歡迎留言。
接口不穩定解決辦法：目前通過循環調用直到接口返回正常數據時結束。
獲取到的數據是object：記得使用『JSON.stringify』轉換接收到的數據，因為數據可能是json類型，要轉換為字符串才能使用。
案例優化：本天氣案例基于小米手機系統天氣app。由于時間關系只制作了首頁，其他滑動及點擊效果之后有時間可能會更新。

歡迎留言討論。

本文由 @escher 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議

TOC

數據實時增量同步之CDC工具—Canal、mysql_stream、go-mysql-transfer、Maxwell：https://blog.csdn.net/weixin_42526326/article/details/121148721

什么是CDC？

CDC(Change Data Capture)是變更數據獲取的簡稱。可以基于增量日志，以極低的侵入性來完成增量數據捕獲的工作。核心思想是，監測并捕獲數據庫的變動（包括數據或數據表的插入、更新以及刪除等），將這些變更按發生的順序完整記錄下來，寫入到消息中間件中以供其他服務進行訂閱及消費。

簡單來講：CDC是指從源數據庫捕獲到數據和數據結構(也稱為模式)的增量變更，近乎實時地將這些變更，傳播到其他數據庫或應用程序之處。通過這種方式，CDC能夠向數據倉庫提供高效、低延遲的數據傳輸，以便信息被及時轉換并交付給專供分析的應用程序。

與批量復制相比，變更數據的捕獲通常具有如下三項基本優勢：

CDC通過僅發送增量的變更，來降低通過網絡傳輸數據的成本。
CDC可以幫助用戶根據最新的數據做出更快、更準確的決策。例如，CDC會將事務直接傳輸到專供分析的應用上。
CDC最大限度地減少了對于生產環境網絡流量的干擾。

CDC工具對比

特色	Canal	mysql_stream	go-mysql-transfer	Maxwell
開發語言	Java	Python	Golang	Java
高可用	支持	支持	支持	支持
接收端	編碼定制	Kafka等(MQ)	Redis、MongoDB、Elasticsearch、RabbitMQ、Kafka、RocketMQ、HTTP API 等	Kafka，Kinesis、RabbitMQ、Redis、Google Cloud Pub/Sub、文件等
全量數據初始化	不支持	支持	支持	支持
數據格式	編碼定制	Json（固定格式）	Json（規則配置) 模板語法 Lua腳本	JSON
性能(4-8TPS)

實現原理：

1、go-mysql-transfer將自己偽裝成MySQL的Slave，

2、向Master發送dump協議獲取binlog，解析binlog并生成消息

3、將生成的消息實時、批量發送給接收端

Mysql binlog 講解：

MySQL的二進制日志可以說MySQL最重要的日志了，它記錄了所有的DDL和DML(除了數據查詢語句)語句，以事件形式記錄，還包含語句所執行的消耗的時間，MySQL的二進制日志是事務安全型的。

一般來說開啟二進制日志大概會有1%的性能損耗。

二進制日志兩個最重要的使用場景:

MySQL Replication在Master端開啟binlog，Master把它的二進制日志傳遞給slaves來達到master-slave數據一致的目的。
數據恢復，通過使用mysqlbinlog工具來使恢復數據。

二進制日志包括兩類文件：

二進制日志索引文件（文件名后綴為.index）用于記錄所有的二進制文件
二進制日志文件（文件名后綴為.00000*）記錄數據庫所有的DDL和DML(除了數據查詢語句)語句事件。

binlog文件的滾動：

達到了滾動的大小
mysql服務停止

mysql binlog的三種格式

在配置文件中可以選擇配置 binlog_format= statement|mixed|row

ROW 模式（一般就用它）日志會記錄每一行數據被修改的形式，不會記錄執行 SQL 語句的上下文相關信息，只記錄要修改的數據，哪條數據被修改了，修改成了什么樣子，只有 value，不會有 SQL 多表關聯的情況。優點：它僅僅只需要記錄哪條數據被修改了，修改成什么樣子了，所以它的日志內容會非常清楚地記錄下每一行數據修改的細節，非常容易理解。缺點：ROW 模式下，特別是數據添加的情況下，所有執行的語句都會記錄到日志中，都將以每行記錄的修改來記錄，這樣會產生大量的日志內容。
STATEMENT 模式每條會修改數據的 SQL 語句都會被記錄下來。缺點：由于它是記錄的執行語句，所以，為了讓這些語句在 slave 端也能正確執行，那他還必須記錄每條語句在執行過程中的一些相關信息，也就是上下文信息，以保證所有語句在 slave 端被執行的時候能夠得到和在 master 端執行時候相同的結果。但目前例如 step()函數在有些版本中就不能被正確復制，在存儲過程中使用了 last-insert-id()函數，可能會使 slave 和 master 上得到不一致的 id，就是會出現數據不一致的情況，ROW 模式下就沒有。
MIXED 模式以上兩種模式都使用。

常見的數據采集工具（相關知識）：

DataX、Flume、Canal、Sqoop、LogStash

DataX (處理離線數據)

DataX 是阿里巴巴開源的一個異構數據源離線同步工具，異構數據源離線同步指的是將源端數據同步到目的端，但是端與端的數據源類型種類繁多，在沒有 DataX 之前，端與端的鏈路將組成一個復雜的網狀結構，非常零散無法把同步核心邏輯抽象出來。

為了解決異構數據源同步問題，DataX 將復雜的網狀的同步鏈路變成了星型數據鏈路，DataX 作為中間傳輸載體負責連接各種數據源。

所以，當需要接入一個新的數據源的時候，只需要將此數據源對接到 DataX，就可以跟已有的數據源做到無縫數據同步。

DataX本身作為離線數據同步框架，采用Framework+plugin架構構建。將數據源讀取和寫入抽象成為Reader/Writer插件，納入到整個同步框架中。

Reader: 它為數據采集模塊，負責采集數據源的數據，將數據發送給Framework。
Writer: 它為數據寫入模塊，負責不斷向Framework取數據，并將數據寫入到目的端。
Framework：它用于連接Reader和Writer，作為兩者的數據傳輸通道，并處理緩沖、并發、數據轉換等問題。

核心模塊介紹：

DataX完成單個數據同步的作業，我們把它稱之為Job，DataX接收到一個Job之后，將啟動一個進程來完成整個作業同步過程。
DataX Job啟動后，會根據不同的源端切分策略，將Job切分成多個小的Task(子任務)，以便于并發執行。
切分多個Task之后，DataX Job會調用Scheduler模塊，根據配置的并發數據量，將拆分成的Task重新組合，組裝成TaskGroup(任務組)。每一個TaskGroup負責以一定的并發運行完畢分配好的所有Task，默認單個任務組的并發數量為5。
每一個Task都由TaskGroup負責啟動，Task啟動后，會固定啟動Reader->Channel->Writer的線程來完成任務同步工作。
DataX作業運行完成之后，Job監控并等待多個TaskGroup模塊任務完成，等待所有TaskGroup任務完成后Job成功退出。否則，異常退出。

Flume（處理實時數據）

Flume主要應用的場景是同步日志數據，主要包含三個組件：Source、Channel、Sink。

Flume最大的優點就是官網提供了豐富的Source、Channel、Sink，根據不同的業務需求，我們可以在官網查找相關配置。另外，Flume還提供了自定義這些組件的接口。

Logstash（處理離線數據）

Logstash就是一根具備實時數據傳輸能力的管道，負責將數據信息從管道的輸入端傳輸到管道的輸出端；與此同時這根管道還可以讓你根據自己的需求在中間加上過濾網，Logstash提供了很多功能強大的過濾網來滿足各種應用場景。

Logstash是由JRuby編寫，使用基于消息的簡單架構，在JVM上運行。在管道內的數據流稱之為event，它分為inputs階段、filters階段、outputs階段。

Sqoop（處理離線數據）

Sqoop是Hadoop和關系型數據庫之間傳送數據的一種工具，它是用來從關系型數據庫如MySQL到Hadoop的HDFS從Hadoop文件系統導出數據到關系型數據庫。Sqoop底層用的還是MapReducer，用的時候一定要注意數據傾斜。

注:sqoop不是CDC工具 sqoop是基于查詢的全量數據捕獲.

參考：

https://www.cnblogs.com/zzz01/p/15263071.html

go-mysql-transfer產品手冊

著昨天分享的大數據網站模板，今天再分享五個智慧交通智慧金融智慧氣象H5大數據大屏幕展示html模板，也是非常的大氣，全部都是寫好的靜態模板頁面。

一.大數據視頻監控模板

智慧交通大數據視頻監控大數據展板源文件，html+CSS+JS源文件，可通過瀏覽器運行預覽，可直接使用。

二.高速交通大數據分析平臺模板

一款藍色風格很具科技感的html5全屏高速交通大數據分析平臺頁面模板，交通綜合管理大數據可視化圖表統計展示頁面模板。

三.旅游大數據大屏模板

景區綜合管理服務平臺，統計景區內外客流數據，實時客流數據，客流總數，區域客流排名，新老客戶占比，游客停留時長，各時段客流人數，歷史客流等數據，并以圖表的形式直觀展示。監測人員可以實時查看對應監測點的實時客流數量，通過對全景區重點客流監測區域的實時監測和預警處理，提高預警處置能力。

四.銀行企業信用風險實時監測模板

銀行企業信用風險系統后臺ECHART圖表實時動態檢測頁面模板html下載

五.氣象預報大數據平臺模板

html5基于echart制作天氣預報，氣象預警大數據可視化管理界面模板。地理維度、空氣溫度、氣象監測等大數據顯示功能。包含：登錄頁面和投票主頁面。

以上五個為云碼素材收藏的智慧交通智慧金融智慧氣象H5大數據，大屏展示模板，如果你喜歡，覺得有幫助，請收藏，轉發。

獲取下載方法，請關注云碼素材，私信我。

歡迎關注云碼素材，交流分享! 云碼素材原創作品，更多精品資源下載，技術分享請關注，私信云碼素材！

在線咨詢

上一篇：個人網上銀行（網銀）登錄查詢網站
下一篇：簡單小程序：登錄頁面（html）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商