『壹』 微信小程序怎麼實現前端和後端實時通信
主流的後端語言是php,因為維護比較好做,因為國內的後端php人才非常多;或者你用第三方的小程序製作平台搭建小程序,壓根不需要懂技術。
『貳』 怎麼使用 JavaScript 將網站後台的數據變化實時更新到前端
要實現這個功能,要用到ajax獲取後端數據,和前端js定時器的知識,
首先自定義一個ajax獲取要顯示在html頁面上的數據的方法,例如方法getdata,這個方法把獲取的返回值,通過js動態的顯示到html頁面要顯示的區域,然後再寫一個js定時器來實現實時調用數據,如:
<script>
//定時器 非同步運行
function hello(){
alert("hello");
}
var t2 = window.setTimeout("hello()",3000); //定時器
//window.clearTimeout(t2);//去掉定時器
</script>
把裡面的hello方法換成你ajax獲取數據的方法名,然後改下定時器裡面的方法名和時間,這里設置的是3秒鍾執行一次可以設置成你自己要的數據,就實現了你要的頁面實時調用數據了。
『叄』 寫給產品經理之前端是如何展示後端數據的
移動互聯網的迅猛發展讓移動APP呈現出爆發之勢,這兩年更是移動開發程序員的春天。
今天的互聯網上充斥著產品與技術的撕逼。也許你會問產品經理到底要不要懂技術?由此引申出,產品經理到底要不要懂設計?產品經理到底要不要懂運營?產品經理到底要不要懂市場?產品經理到底要不要懂業務?這所有問題的來源都是大家對於產品經理的工作認識不一致。
每個人心中都有一個產品經理的定義,產品經理在技術方面更多的是去統籌和規劃。不是畫畫圖寫寫文檔就可以了。這裡面更多的需要的是對邏輯的梳理和拆分。
例如很簡單的一個app內嵌發紅包的活動,產品經理需要確定整個活動的流程。從用戶進入頁面的那一瞬間就應該被產品經理掌控。他的每一個步驟,每一個操作會帶來什麼結果,有哪些變數會導致活動進程失敗,這些都要產品去考慮。等到活動邏輯和過程全部梳理完成,下面就要進行拆分了。還是以發紅包為例,紅包中金額是客戶端寫死還是服務端進行計算,紅包領取資格需要服務端返回幾種結果,每種結果對應客戶端的提示是什麼,用戶領取紅包以後服務端需要記錄那些信息(帳號,uid,領取時間,金額,是否使用等),客戶端哪些地方需要加入計數器進行數據統計。總結起來其實就是,產品經理需要根據開發的每一個環節,將所有內容分類整理,並分發給不同部分的開發進行研發。最後,還需要給測試准備好check list,當測試按照check list測試完成以後,才可以上線。
以上種種都需要產品對前端如何顯示後端數據有一個清晰的認識才能規劃好數據如何展示。是APP寫死呢還是後台返回,在用戶任務進行的時候有哪些可能case。只有搞清楚這些,產品才能在實際的開發中掌握好整個項目的流程與進展,才能不被開發給糊弄。
簡單的說,前端僅僅將後端返回的數據展示在頁面上,不做過多的邏輯處理。前端需要關心的是,數據如何更好的展示出來,頁面效果如何做出來,以及其性能問題。
而後端就是負責對這些數據進行處理,提供給前端展示。
前端一般有H5、android、ios等多端界面。數據不要輕易寫死在前端裡面,不然到時候三端都要修改,費時費力。而將這些變化多數據讓後端進行處理,前端將這個數據取出來顯示出來就行了。
舉個例子吧,下圖是一個美團app首頁團購的展示效果
上方美食等8個icon一般為固定展示欄目,非特殊情況不會修改。那麼前端一般是寫死在app中,等到需要更新的時候更新app即可。
而下方猜你喜歡是一個列表,該列表數據經常變化,數據寫在服務端維護,app取出數據進行展示即可。
首先,前段對頁面的展示是分兩步走的。
第一、在本地繪制好界面,當然此時未連api會填充一些假數據,或寫一些默認值。
第二、連api進行數據獲取,將數據填充進界面。
既然如此,咱們簡單看下前端拿到的數據到底長什麼樣的吧。
現在前端獲取到的數據基本是json數據。
不需要特別懂裡面每一個的含義,只需要知道,前端通過"title"這個鍵名(key)就可以拿到"合輯護甲"這個值(value)。 "title": "合輯護甲" 這一整個就是俗稱的一個欄位。通過該欄位前端就可以獲取到列表的標題了。當然這個列表只是簡單的展示用,還有諸如圖片地址、優惠信息、已售份額等信息沒有提供,這就是缺少欄位的情況。
前後端就是通過這樣的一個定義獲取/傳遞數據的。
考慮到後期拓展、需求變更等,一般來說,涉及到計算的、可能有變動的,一律不要讓前端來弄。
還是剛才那個例子,在剛才那個列表中有一個「立減5元」的橙黃色tag。
這個tag信息,如果考慮不充分,比如說,後端只提供一個數字5,然後前端在其頁面寫死「立減x元」,x為填入後端提供的數字,顏色固定為橙黃色。這個如果需求不修改還好,如果後期需要新增一個「滿20減5元」的紅色tag不傻眼了嗎?
到時候只能通過升級app來解決,而且不升級的老用戶將永遠看不到這個紅色的tag。
所以說,考慮到程序的可復用和拓展性,需要產品將後期可能新增或變更的需求考慮好,和前後端進行溝通,讓前後端設計好實現,盡量降低程序的耦合和硬編碼。這才能使一個產品更加健壯以及讓苦逼的程序猿少加班的關鍵。
那麼剛才那個tag的需求如何設計才合理呢?
首先是tag顯示文字,全權由後端提供,可以是多個欄位,由前端進行拼接。然後是tag的顏色,提供幾種樣式讓前端判斷是一種可行的辦法,但是直接提供tag的色值給前端的這種方式無疑給前端展示增加了無限的可能。
是不是也要增加一個tag形狀的欄位呢?
俗話說,過猶不及。tag形狀這種東西真的很少變更,欄位太多無疑會增加開發的時間成本,而且會讓人有一種捨本逐末之感。
前端獲取到後端數據後,如果前端不主動刷新重新請求數據的話,這個頁面的數據在該頁面銷毀前會一直保持不變。
如何理解?
首先,第一次進入一個頁面,該頁面數據為空或默認數據。此時前端會鏈接api請求數據。數據請求完成後,填充進頁面。那麼本次聯網請求就完成了,在前端不進行二次數據請求之前,該頁面會一直保持本次請求的數據。也就是說,就算服務端修改了數據,前端此時是不能事實的進行更新的,因為我前端不知道你數據更新了。
那麼在這個需要實時更新頁面數據的時候和前端講這種需求會被前端直接回絕:「做不了」。這個時候產品咋辦,怪怪妥協?最後背鍋的還是自己,而且自己也不知道是真做不了還是假做不了。
實時刷新也不是不能做,只是做的成本略高,需要和後端進行配合,像微信聊天一樣和後端進行長連接(socket),這樣服務端數據變更前端就知道數據變更了。
當然如果稍懂頁面刷新機制的話,可以要求前端在適當的時機進行頁面刷新,如在頁面可見的時候進行刷新,這樣用戶每次看到的都是最新的數據。也可以讓用戶主動刷新,如新增刷新功能。
產品懂技術這件事情,不僅會降低和開發同學溝通時的難度和被歧視風險,還會提升在面對開發同學意見時的判斷力,會降低被技術團隊忽悠的幾率。同時,在需要向上級解釋技術原因導致變更的情況下,也會有助於說服老闆。
「聞道有先後,術業有專攻」,要相信自己所接觸的開發團隊是專業的,靠譜的,相信開發團隊為實現需求所做出的技術方案是合理的,最優的。如果有質疑,可以加深溝通,以合適的方式提出自己的質疑。這里要補充一句的是,這個信任過程是需要建立的,也是會根據團隊的表現不斷變化的;同理,其實團隊對於產品經理的信任度也是一樣的情況。
吐槽是沒有意義的,關鍵還是要解決問題。如果覺得產品經理不靠譜,那麼有沒有進行過深入的溝通?如果覺得開發不好溝通,那麼有沒有進行過了解,不好溝通的原因在哪裡?如果當事人本身確實不可溝通,那麼有沒有考慮和對方的老闆溝通,或者通過自己的老闆如實反映情況?吐槽是最容易的,解決問題反而會很難。
『肆』 怎麼使用 JavaScript 將網站後台的數據變化實時更新到前端
html5以前:
實時是不行的,因為http是無狀態會話,伺服器壓根就沒辦法通知瀏覽器數據變化。
這種功能,只能設置計劃任務,ajax定期去伺服器上抓數據,互聯網上的數據實時性要求都不會很高,比如的指導,約15s刷新一次數據。
html5,可以考慮websocket與伺服器保持一個長鏈接,🈶️新數據,由伺服器主動推送給客戶端==>瀏覽器。這種實現復雜度就稍微大,伺服器後端得維護好連接,否則對後台應用就是個災難。
『伍』 微信小程序後台更改代碼後怎麼實現用戶實時更新
一般情況下,用戶端只要清空手機緩存,再進入小程序就更新了;如果想實現後台更改後,前端自動更新,可以嘗試清空後端緩存數據,後台都有這個按鈕。
『陸』 websocket的jsp怎麼獲取在線人數
如果有新的用戶訪問,服務端將消息主動推送給客戶端,這樣客戶端就可以實時統計當前在線人數
『柒』 前端技術 問怎麼做到不刷新,實時獲取這個消息
一般有三種方式:
輪詢,也就是頁面定時向伺服器拉取消息,有未讀消息則更新
長連接,頁面和伺服器建立一個持序的TCP連接,當沒有新消息時,伺服器阻塞此連接;當新消息到來時,伺服器將響應返回到頁面並關閉此連接。前端將返回的響應更新到頁面上,並馬上向伺服器再發起一個新的長連接
websocket,前端和伺服器建立一個websocket連接,由伺服器主動向前端推送消息,前端每次收到來自伺服器的消息時將內容更新到頁面上。
『捌』 怎麼使用 JavaScript 將網站後台的數據變化實時更新到前端
實時這個工作現在大體有兩種方法
一、前端不斷地向後台輪詢請求數據查詢的介面(不管你是用AJAX還是什麼)然後將返回的數據重繪在頁面上,這以前端頁面為主動的方式。
二、如果瀏覽器支持Websocket 那麼在後台建立一個websocket伺服器,與前端頁面建立websocket連接,進行從後台到前端的推送,前端接到推送數據後,將數據重繪在頁面上。
『玖』 react 點擊下載,後台接到請求,在列表裡添加數據,前端獲取後台數據實現實時更新
react 本來就可以通過數據來對頁面進行更新渲染。
我寫了一個例子,你可以看下。我使用setInterval來模擬了數據的更新。
網頁鏈接
importReact,{Component}from'react';
import{render}from'react-dom';
importHellofrom'./Hello';
import'./style.css';
classTestextendsComponent{
render(){
return(
<div>{this.props.data}</div>
)
}
}
classAppextendsComponent{
constructor(){
super();
this.data=1;
this.state={
name:'React'
};
}
componentDidMount(){
setInterval(()=>{
this.setState({data:this.data++})
},2000)
}
render(){
return(
<div>
<Helloname={this.state.name}/>
<p>
:)
</p>
<Testdata={this.state.data}/>
</div>
);
}
}
render(<App/>,document.getElementById('root'));