當前位置:首頁 » 網頁前端 » 什麼樣的數據是前端處理
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

什麼樣的數據是前端處理

發布時間: 2023-02-03 02:50:43

1. 幾個有效的前端數據處理的方法

一、JSON對象過濾數據(處理復雜數據時可以直接在內部過濾掉)

封裝方法:

function  getTargetObject(targetObject, propsArray){if(typeof(targetObject) !=="object"|| !Array.isArray(propsArray)) {thrownewError("參數格式不正確"); }constresult = {};Object.keys(targetObject).filter(key=>propsArray.includes(key)).forEach(key=>{ result[key] = targetObject[key]; })returnresult;}

使用方法:

let arr = {a: '1', b:'2', c: '3'}

getTargetObject(arr, ['a', 'b'])

引用網站: https://segmentfault.com/q/1010000016133960/a-1020000016134570

二、數組切割(當後端傳來數據過多的時候,將數據切成幾個等分,用戶下拉的時候再展示)

 * 將一個數組分成幾個同等長度的數組   * array[分割的原數組]   * size[每個子數組的長度]

 */functionsliceArray(array, size) {

    varresult = [];

    for(varx = 0; x < Math.ceil(array.length / size); x++) {

        varstart = x * size;

        varend = start + size;

        result.push(array.slice(start, end));

    }  returnresult  }

引用網站: https://..com/question/941679549069381612.html?fr=iks&word=js%CA%FD%D7%E9%C7%D0%B7%D6&ie=gbk

三、數據過濾(使用JSON.stringify方法)

   數據:   persons: [

                      {apple: '蘋果'},

                      {watermelon: '西瓜'},

                      {lemon: '檸檬'},

                      {Blueberry: '藍莓'},                        

                      {orange: '橙子'}],

方法: handChange() {    

                  let oneFruits = JSON.stringify(this.persons, function (inx, ite) {

                    if (inx === 'watermelon' || inx === 'orange') {

                        return undefined

                    } else {

                        return ite } })

                  this.persons = JSON.parse(oneFruits) }

結果:

四、通過$set給數據注入值並更新視圖(解決在vue中新增數據不更新視圖的問題)

數據:     persons: [

                        {id: '1',name: '蘋果'},

                        {id: '2',name: '西瓜'},

                        {id: '3',name: '檸檬'},

                        {id: '4',name: '藍莓'} ]

方法:       handChange() {    

                    let oneFruits = JSON.parse(JSON.stringify(this.persons[0])) 

                    let twoFruits = JSON.parse(JSON.stringify(this.persons[1])) 

                    let newFruits = {id: '5', name: '葡萄'}

                    console.log(twoFruits)             

                    this.$set(this.persons, 1, oneFruits) // 將西瓜的位置放上蘋果 

                    this.$set(this.persons, 0, twoFruits) // 將蘋果的位置方式西瓜

                    this.$set(this.persons, 4, newFruits) // 添加葡萄並更新視圖

                    console.log(this.persons) }

結果:

2. 客戶端、前端、後端、服務端的區別分別是什麼

客戶端是指開發面向客戶的程序,分很多平台,比如Windows 安卓 蘋果,還有游戲客戶端也算一類。


前端指的是通過瀏覽器和用戶交互的那部分。
後端是在伺服器上跑的,一般是管理數據,為前端 客戶端提供數據傳輸的。
伺服器端就是後端。

3. 前端和後端的區別

前端和後端的區別如下:

1、定義不同

前端統稱為「客戶端開發」,在應用程序或網站的屏幕上看到的所有內容,都是由瀏覽器解析、處理、渲染相關HTML、CSS、JAVA文件後呈現出來,都屬於前端的工作范疇。

後端稱為「伺服器端開發」,屬於在系統「後面」所發生的事情。在後端伺服器和瀏覽器或應用程序之間存儲網站、應用數據和中間媒介的伺服器都在後端的工作范疇內。在應用程序或網站屏幕上看不到的東西基本上都是後端。

2、展示方式不同

前端的工作是製作網頁,後台是結合資料庫實現一些代碼的功能邏輯。也就是說前端開發人員在應用程序中創建一個界面,上面有一個按鈕,通過按下按鈕可以獲取客戶的數據。

後端開發人員負責寫出按鈕工作的代碼,通過指出從資料庫中提取哪些數據並將其傳回到前端。

前端、後端簡介

前端:網站的「前端」是與用戶直接交互的部分,包括你在瀏覽網頁時接觸的所有視覺內容。這些視覺內容,都是由瀏覽器解析、處理、渲染相關HTML、CSS、Java文件後呈現而來。前端開發,就是要創造上面提到的網站面向用戶的部分背後的代碼,並通過建立框架,構建沉浸性的用戶體驗。

後端:為了讓伺服器、應用、資料庫能夠彼此交互,後端工程師需要具有用於應用構建的伺服器端語言,數據相關工具,PHP框架,版本控制工具,還要熟練使用Linux作為開發和部署環境。後端開發者使用這些工具編寫干凈、可移植、具有良好文檔支持的代碼來創建或更新Web應用。

4. 寫給產品經理之前端是如何展示後端數據的

移動互聯網的迅猛發展讓移動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),這樣服務端數據變更前端就知道數據變更了。
當然如果稍懂頁面刷新機制的話,可以要求前端在適當的時機進行頁面刷新,如在頁面可見的時候進行刷新,這樣用戶每次看到的都是最新的數據。也可以讓用戶主動刷新,如新增刷新功能。

產品懂技術這件事情,不僅會降低和開發同學溝通時的難度和被歧視風險,還會提升在面對開發同學意見時的判斷力,會降低被技術團隊忽悠的幾率。同時,在需要向上級解釋技術原因導致變更的情況下,也會有助於說服老闆。
「聞道有先後,術業有專攻」,要相信自己所接觸的開發團隊是專業的,靠譜的,相信開發團隊為實現需求所做出的技術方案是合理的,最優的。如果有質疑,可以加深溝通,以合適的方式提出自己的質疑。這里要補充一句的是,這個信任過程是需要建立的,也是會根據團隊的表現不斷變化的;同理,其實團隊對於產品經理的信任度也是一樣的情況。
吐槽是沒有意義的,關鍵還是要解決問題。如果覺得產品經理不靠譜,那麼有沒有進行過深入的溝通?如果覺得開發不好溝通,那麼有沒有進行過了解,不好溝通的原因在哪裡?如果當事人本身確實不可溝通,那麼有沒有考慮和對方的老闆溝通,或者通過自己的老闆如實反映情況?吐槽是最容易的,解決問題反而會很難。

5. 網頁前端 數據處理

如果僅僅是前端項目,可以用localStorage把數據存儲在本地。
因為只是前端項目,沒法寫文件,只能用html5新增的loacalStorage本地存儲保存數據,只需調用幾個簡單的介面就可以完成數據存儲。
另外可以用cookie,sessionStorage,但是這些是有時限的,所以一般推薦用localStorage。

6. 一個網站的前端和後端 分別是代表什麼意思

網站前端就是一整套網頁,用於和用戶交互、展示信息;
後端就是處理業務邏輯和數據處理。
前端+後台構成一個完整的動態網站。

7. 前端,後台,資料庫之間的關系是什麼

前端將數據傳輸到後台,後台則與資料庫直接關聯,這樣前端的數據即可通過後台傳輸到資料庫;前端請求數據時,將請求發送到後台,後台再從資料庫中調取數據傳輸到前端。

在實際情況中,瀏覽器將自動發送文件請求給後台,後台處理後將文件返回給前台,前端接收後,瀏覽器生成dom樹、css樹、js樹,全部創建好之後開始渲染。靜態界面載入完之後呈現給用戶,用戶進行注冊登陸的操作,將操作數據(用戶名、密碼)發送給後台。

是整體的思維,以整個頁面的布局(dom、css)、作用(js)為主要思路進行自己的處理。
後台:以單個的請求為單位進行出來。主要做的是,前端來一個請求後台處理該請求然後做出響應,再來再處理響應,流程是固定的,差異體現在處理過程上。

(7)什麼樣的數據是前端處理擴展閱讀:

後端與前端比較的焦點之一在於安全性。在互聯網發展初期,當瀏覽器不夠安全且客戶端計算機部署有限的資源時,盡可能在伺服器端保留計算和邏輯是確保應用程序使用的穩定性和用戶提供的信息安全性的唯一方法。

實際上,應用程序的前端和後端部分現在負責數據驗證,但強烈建議在伺服器端實現安全功能和最終數據驗證機制,以使重要的應用程序組件不會暴露。

出於顯而易見的原因,還在伺服器端實現了事件記錄和代碼調試。由於伺服器是一個持續監聽來自客戶端請求的進程,因此驗證合法請求並阻止非法訪問嘗試是後端Web開發的重要部分。

參考資料來源:網路-前端

參考資料來源:網路-後台

參考資料來源:網路-資料庫

8. 實際中前後端開發數據交互是怎麼樣的

1.前端請求數據URL由誰來寫?

在開發中,URL主要是由後台來寫的,寫好了給前端開發者.如果後台在查詢數據,需要藉助查詢條件才能查詢到前端需要的數據時,這時後台會要求前端提供相關的查詢參數,這里的查詢參數也就是URL請求的參數。
2.介面文檔主要由誰來寫?

介面文檔也是主要由後台開發者來寫的,因為直接跟數據打交道的就是後台,後台是最清楚,資料庫裡面有什麼數據,能返回什麼數據.前端開發只是數據的被動接受者.所以介面文檔也主要是由後台來完成的,前端只是介面文檔的使用者,使用過程中,發現返回的數據不對,則需要跟後台進行商量,由後台來修改.切記 前端不要隨意更改介面文檔,除非在取得後台開發人員的同意的情況下.總的來講,介面文檔主要由後台來設計,修改,前端開發者起到了輔助的作用。

3.前端開發與後台交互的數據格式主要是什麼?

主要是JSON
XML現在用的不多

4.前端開發的後台交互原理?

在項目的時候,我們前後端會大概說一下介面地址,前端請求的參數,後端返回的參數,然後大家就開始寫,寫的差不多的時候,大家調一下介面看一下返回的數據,沒問題就可以了。

5.前端請求參數的形式

GET和POST兩種方式
對安全性不高 採用get方便
post要比get安全
GET - 從指定的伺服器中獲取數據
POST - 提交數據給指定的伺服器處理

6.前端應該告知後台哪些有效信息,後台才能返回前端想的數據的呢?

先將要展示的頁面內容進行模塊劃分,將模塊的內容提取出來,以及方便前端的一些標志值等,將所有想要的內容和邏輯告知後端,
後端就會去資料庫裡面去查找相應的數據表中去獲得相應的內容,或者圖片地址信息。
URL中的參數主要是根據後台需要,
如果後台需要一個參數作為查詢的輔助條件 前端在URL數據請求時就傳遞參數。
參數前面?
幾個參數中間&

7.我們應該怎麼把頁面這些信息有效傳達給後台,以及後台是如何獲取到這些數據?

總的來講:所有前端請求的URL後面的參數,都是輔助後台數據查詢的.如果不需要參數,那麼後台就會直接給個URL給前端。

8.前端應該如何回拒一些本不屬於自己做的一些功能需求或任務?

在與後台打交道中,我們經常遇到這種情況,有時候明明後台來處理某個事件很簡單,後台非要你來做,這時候我們應該懂得去回絕他。
原則:前端就是負責把數據展示在頁面上
發揮:這就需要我們對一個需求,一個任務的要有清晰認識了,如果對任務含糊不清,自己都沒搞明白,你只能受後台擺布了.最後也會因為任務沒有完成而備受責難了。

9.當前端在調用數據介面時,發現有些數據不是我們想要的,那麼前端應該怎麼辦呢或者怎麼跟後台講呢?

首先要把請求的URL和返回的數據以及在頁面的展示的情況給跟後台看,這樣有理有據,後台開發人員是不會說什麼的,否則,後台會很不耐煩的,甚至罵你的可能都有,本身做後台比較難,尤其在查詢數據,取數據,封裝數據方面都比較難處理。

10.為什麼需要在請求的時候傳入參數?

因為後台在查詢資料庫的時候需要條件查詢。

9. 前端與後端的區別

從三方面具體來說說Web前端和後端的區別。
1、展示方式
前端是用戶可見的界面,網站前端頁面也就是網頁的頁面開發,比如網頁上的特效、布局、圖片、視頻,音頻等內容。前端的工作內容就是將美工設計的效果圖的設計成瀏覽器可以運行的網頁,並配合後端做網頁的數據顯示和交互等可視方面的工作內容。
後端用戶看不見的東西,通常是與前端工程師進行數據交互及網站數據的保存和讀取,相對來說後端涉及到的邏輯代碼比前端要多的多,後端考慮的是底層業務邏輯的實現,平台的穩定性與性能等。
2、技術實現
前端開發用到的技術包括但不限於html5、css3、javascript、jquery、Bootstrap、Node.js 、Webpack,AngularJs,ReactJs,VueJs等技術;後端開發以java為例主要用到的是包括但不限於Struts spring springmvc Hibernate Http協議 Servlet Tomcat伺服器等技術。
3、工作內容
前端工程師負責Web前端開發、移動端開發、大數據呈現端開發。Web前端開發針對PC端開發任務;移動端開發包括Android開發、iOS開發和各種小程序開發,在移動互聯網迅速發展的帶動下,移動端的開發任務量是比較大的;大數據呈現則主要是基於已有的平台完成最終分析結果的呈現,呈現方式通常也有多種選擇。
後端工程師負責平台設計、介面設計和功能實現。平台設計主要是搭建後端的支撐服務容器;介面設計主要針對於不同行業進行相應的功能介面設計,通常一個平台有多套介面,就像衛星導航平台設有民用和軍用兩套介面一樣;功能實現則是完成具體的業務邏輯實現。
前後端開發的相似點:函數式編程、模塊化思想、分層思想、單元測試、lint、assert 方法、日誌、聲明式和命令式的實踐經驗、數據處理的本質實踐與思考、部分庫的使
前後端開發的區別:前端、重用戶體驗、對UI庫的依賴較強、界面的個性化較強、處理各個瀏覽器平台對界面的渲染差異、後端、並發處理、事務、部署復雜,特別是微服務出來後、具體的功能特性,如大數據分析,AI方面的工作。
通過以上總結的Web前端和後端的區別,可以看出前端開發的內容是我們在網頁看到的內容,而後端開發主要業務邏輯規則。
有的人認為,前端很好學,後端不好學。也有的人認為,前端不好學,後端好學,歸根到底還得看個人興趣。