Try   HackMD

Day4學前端 Frontend with React - show on UI

tags: frontend

Copyright 2021, 月下麒麟


Target

Day3的練習讓我們學到前端介接API的技巧,但這樣的效果僅能在console log的頁面出現資料,
所以,在介接完成後最主要還是要將內容呈現在瀏覽器(畫面)上

Concept

筆者在這小關卡了一下下,花費比較多的精神在釐清語法、關鍵字搜尋
於此,先做個重點提示整理

  • HTML with Javascript
  • Selector with jQuery
  • (object Object)

下面的實作過程中,我會依序去說明這三個重點


Implement

HTML with Javascript

截至目前為止,我們做了前後端分離的工作了,
但是,分離出來的前端我的檔案都還是同一份(app.js)

所以我的程式碼還是寫在同一份,雖然寫在同一份,但其實在HTML語法與Javascript語法仍是不同的
最基本的就是在HTML中嵌入Javascript的語法

<html> <div> <script>Hello World</script> </div> <div> <p> Hello Network </p> </div> </html>

可以看到<script>就是Javascript的語法,這邊僅是要帶入一點點語法觀念,
因網路上的文章大都是複合式問題,故在閱讀一些進階的範例程式時,必須要有這樣的概念


Selector with jQuery

不知道讀者們是否還記得Day3 frontend的文章中,於補充的章節提到jQuery的用法
如果忘記了,可以參考這篇Day3學前端 Frontend with React - 串接API with Ajax

import './App.css'; import React from 'react'; import $ from 'jquery'; <head> <script src="jquery-3.5.1.min.js"></script> </head> class App extends React.Component{ render(){ return( <div style = {{ textAlign: 'center'}}> <div>Hello, World</div> <div>This is page for learning react.</div> <div>The day today is {new Date().toLocaleDateString()}</div> <div> you are the best. <div> <ul className="demo"></ul> </div> </div> ); } } export default App; // -------------------分隔線------------------- $.ajax({ url:"http://localhost:8000/users/5", type: "GET", dataType: "json", success: function(res){ console.log(res); $(".demo").html("test:"+JSON.stringify(res)); //point!!! }, error: function(error){ console.log(error) } });

以上的函式主架構不難理解,也是拿default app.js去修改,故不多著墨解釋。

仔細的你可以發現在分隔線上下兩端,其實不是同一個函式,是分離的兩個

上面是HTML與Javascript,並且呈現在Browser頁面
下面是jQuery與ajax,並且分別能呈現在Browser、Console log上

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

再看到這張Browser的圖,比對一下上述的程式碼,應該就不難理解,
其實jQuery到的data並不會被帶入Browser上,
所以必須要了解jQuery與HTML的關係,才會有辦法將data呈現
關鍵就是標有註解(point)重點的那行

$(".demo").html("test:"+JSON.stringify(res));
  • 就是利用Selector(利用demo這個class)去將data指引到上面的HTML裡面呈現。
  • 那後面的html(),就是實作將data(res)帶入Selector的函式

Reference:IT邦幫忙 Day28:小事之 jQuery 選擇器


(object Object)

最後一個就是筆者卡關的地方 TT

首先

success: function(result){ $("#demo").html("test:"+result); }

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

這邊要表達的就是物件型態不正確,就會出現這個assert [object:Object]
詳細解釋可以參考下方的reference!
Referenct:What does [object Object] mean? (JavaScript)
Reference:W3school JSON.stringify()

接著

success: function(result){ $("#id").html("id:"+result.id); $("#name").html("name:"+result.name); $("#height").html("height:"+result.height); $("#weight").html("weight:"+result.weight); $("#habbit").html("habbit:"+result.habbit); }

利用呼叫出物件的資料屬性,就能依序呈現,
但你是不是覺得這樣寫很囉唆呢!!!

最後

success: function(result){ $(".demo").html("test:"+JSON.stringify(res)); }

是不是精簡很多了啊~ (茶


今天就先到這邊,接下來就要嘗試頁面的排版與渲染 敬請期待