⑴ 寫給產品經理之前端是如何展示後端數據的
移動互聯網的迅猛發展讓移動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)，這樣服務端數據變更前端就知道數據變更了。
當然如果稍懂頁面刷新機制的話，可以要求前端在適當的時機進行頁面刷新，如在頁面可見的時候進行刷新，這樣用戶每次看到的都是最新的數據。也可以讓用戶主動刷新，如新增刷新功能。
產品懂技術這件事情，不僅會降低和開發同學溝通時的難度和被歧視風險，還會提升在面對開發同學意見時的判斷力，會降低被技術團隊忽悠的幾率。同時，在需要向上級解釋技術原因導致變更的情況下，也會有助於說服老闆。
「聞道有先後，術業有專攻」，要相信自己所接觸的開發團隊是專業的，靠譜的，相信開發團隊為實現需求所做出的技術方案是合理的，最優的。如果有質疑，可以加深溝通，以合適的方式提出自己的質疑。這里要補充一句的是，這個信任過程是需要建立的，也是會根據團隊的表現不斷變化的；同理，其實團隊對於產品經理的信任度也是一樣的情況。
吐槽是沒有意義的，關鍵還是要解決問題。如果覺得產品經理不靠譜，那麼有沒有進行過深入的溝通？如果覺得開發不好溝通，那麼有沒有進行過了解，不好溝通的原因在哪裡？如果當事人本身確實不可溝通，那麼有沒有考慮和對方的老闆溝通，或者通過自己的老闆如實反映情況？吐槽是最容易的，解決問題反而會很難。
⑵ 前端和後端怎麼鏈接呀
後端提供介面，前端使用jq的ajax、原生js的XMLHttpRequest、request或者axios模塊等調用各自API，請求後端伺服器地址，帶上請求參數即可實現交互
⑶ Cos圖片文件前端展示不出來
未自定義域名。Cos是騰訊雲對象存儲軟體。圖片文件前端展示需要更改自定義域名。
1、打開Cos軟體點擊設置找到自定義域名。
2、點擊訪問節點輸入前端網站鏈接點擊保存即可。
⑷ 如何將前端網頁與後台資料庫連接
1、您需要掌握的第一件事是資料庫查詢語句。這是最簡單的資料庫查詢語句：SELECT * FROM sys_role，這意味著從角色表中查詢所有信息。以下顯示了查詢結果。此結果需要顯示在首頁上。需要代碼來調用這個sql語句。
⑸ 如何加商品鏈接以及微頭條的簡介
1、插入鏈接：插入的鏈接只可以是放心購店鋪鏈接、放心購商品鏈接、放心購活動鏈接；鏈接錄入後點擊「確定」完成；前端展示：只有使用了放心購的鏈接才可以點擊鏈接後直接跳轉，其它鏈接只可展示，無法實現點擊跳轉。
2、微頭條是今日頭條全新打造的一款UGC產品，放心購商家可以通過微頭條發布推廣內容，完成對店鋪或商品的營銷，微頭條內容發布後可以在今日頭條APP「關注」頻道和「微頭條」頻道內進行展示，從而推廣自己放心購商品，實現粉絲互動，精準營銷，增加商品變現手段。
⑹ 怎麼在javascript里往前端添加鏈接
$("#sel").append(「<a href = '#'>"+aa+"</a>"); 將aa作為a標簽的標題。這樣就有鏈接效果了 純手打 望採納！
⑺ Web前端面試題第六道—鏈接標記target與Dom，Bom
(1)鏈接標記target屬性的_self、_top、_parent、_blank、main、left、top各有何用處?
target屬性的_self、_top、_parent都是針對框架的。比如你寫了這樣一個網頁page，網頁page分成frame1、frame2，frame1又分成frame1-1、frame1-2，frame1-1又分成frame1-1-1，frame1-1-2。
假如你在frame1-1-1中放了一個鏈接。
如果這個鏈接的target="_self"，那麼鏈接會在frame1-1-1中打開。
如果target="_parent"，那麼鏈接會在frame1-1中打開。
如果target="_top"，那麼鏈接會在page中打開。
如果target="_blank"，瀏覽器會另開一個新窗口顯示page文檔。
未經驗證，根據說法應該是這個意思。
(2)鏈接標記target屬性的main、left、top各有何用處?
main、left、top是由Adobe Dreamweaver生成的主、左、上框架集的框架默認名。
(3)什麼是Bom什麼是Dom?你如何理解Dom?
DOM和BOM是JS的三大組成部分之一，下面講解BOM與DOM以及兩者的關系
DOM講解
DOM即文檔對象模型，通過創建節點樹來表示文檔，是HTML和XML的應用程序介面（API），描述了處理網頁內容的方法和介面，從而使開發者對文檔的內容和結構具有空前的控制力，用DOM API可以輕松地刪除、添加和替換節點以及設置文檔中標簽的屬性。將一個html文檔用DOM樹表示如下圖所示 。
HTML的DOM樹節點包括:
1. 元素節點：上圖中<html>、<body>、<p>都是元素節點即標簽
2. 文本節點：向用戶展示的內容，如<li>...</li>中的javascript、Dom、CSS等文本。
3. 屬性節點：元素屬性，如<a>標簽的鏈接屬性
BOM講解
BOM是browser object model的縮寫，簡稱瀏覽器對象模型。簡單說即是javascript訪問，操作瀏覽器的一個中介。
BOM主要用於管理瀏覽器窗口之間的通訊，由一系列相關的對象構成，並且每個對象都提供了很多方法與屬性。通過BOM我們可以學到與瀏覽器窗口交互的一些對象，可以移動，調整瀏覽器大小的window對象，可以用於導航的location對象與history對象，可以獲取瀏覽器，操作系統與用戶屏幕信息的navigator與screen對象，可以使用document作為訪問HTML文檔的入口，管理框架的frames對象等。因此它的核心對象是window。
Window對象是BOM中所有對象的核心，是BOM中所有對象的父對象。所以，盡管frame ,history……都是window的子對象，我們只要知道BOM操作的是對象是瀏覽器窗口（window），那麼這些對象就可以直接使用，無需通過「window.」來訪問
BOM和DOM的關系
要想操作網頁，需要DOM來進行訪問，但是僅僅只是網頁內容。瀏覽器除了有顯示的內容，還有一個重要的部分就是一個載體，它承載我們看到的內容。好比是一個框架，而操作這個載體的對象我們把它叫做BOM。所以這樣的結構，使得BOM，DOM各司其職，BOM負責跟瀏覽器框架打交道，DOM負責瀏覽器內容Document打交道。從上圖中能更好的理解兩者的關系。
⑻ 前端在鏈接後面空幾格怎麼辦
前端在鏈接後面空幾格怎麼辦，
Z同學~
關注
前端對於後端返回連續空格的展示問題 原創
2022-07-21 09:39:45
1點贊
Z同學~
碼齡5年
關注
項目場景：
後端介面返回字元串中存在連續性空格
例如：後端返回數據格式為：空 (此處包含多個連續空格) 格，前端展示：空 格
問題描述
開發過程中遇到的問題：後端介面返回資料庫中的字元串中存在多個連續性空格，但是前端展示將多個空格自動轉換為一個空格進行展示，導致復制查詢時，資料庫中無法查詢到數據。
模糊搜索存在該數據
在這里插入圖片描述
在這里插入圖片描述
但是因為展示的問題，導致復制後搜索不到資料庫中數據