iT邦幫忙

1

4. 看看網頁前端技術用在哪裡

  • 分享至 

  • xImage
  •  

網頁前後端是什麼?

網頁前端就是你現在在看的瀏覽器上面顯現的畫面,而後端處理資料庫存取,與把資料送到前端,而資料傳送是用json傳送的,json就很像js的物件或陣列,可以輕鬆被所有語言轉換,而前端接收到資料就要渲染頁面。

json範例: https://jsonplaceholder.typicode.com/users

xml變成json

以前,前後端的溝通是使用xml,但是他有一個明顯的缺點,就是太多tag(標籤)了,就長的和html很像
xml:

<user_table>
    <user>
        <id>1</id>
        <name>Alex</name>
        <car>BMW</car>
    </user>
    <user>
        <id>2</id>
        <name>paula</name>
        <car>no_car</car>
    </user>
</user_table>

json:

[
    {
        "id": "1",
        "name": "Alex",
        "car": "BMW"
    },
    {
        "id": "2",
        "name": "Paula",
        "car": "no_car"
    }
]

字數差很多吧!

講求效率的世代,不准許浪費一分一秒

標題其實不夠誇張,就算幾毫秒的時間,人類還是讀放過。如果有用webpack的人如果使用上線模式進行開發的時候,程式碼就會變得完全看不懂。

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).bootstrap=e()}(this,(function(){"use strict";const t="transitionend",e=t=>{let e=t.getAttribute("data-bs-target");if(!e||"#"===e){let i=t.getAttribute("href");if(!i||!i.includes("#")&&!i.startsWith("."))return null;i.includes("#")&&!i.startsWith("#")&&(i=`#${i.split("#")[1]}`),e=i&&"#"!==i?i.trim():null}return e},i=t=>{const i=e(t);return i&&document.querySelector(i)?i:null},n=t=>{const i=e(t);return i?document.querySelector(i):null},s=e=>{e.dispatchEvent(new Event(t))},o=t=>!(!t||"object"!=typeof t)&&(void 0!==t.jquery&&(t=t[0]),void 0!==t.nodeType),r=t=>o(t)?t.jquery?t[0]:t:"string"==typeof t&&t.length>0?document.querySelector(t):null,a=(t,e,i)=>{Object.keys(i).forEach((n=>{const s=i[n],r=e[n],a=r&&o(r)?"element":null==(l=r)?`${l}`:{}.toString.call(l).match(/\s([a-z]+)/i)[1].toLowerCase();var l;if(!new RegExp(s).test(a))throw new TypeError(`${t.toUpperCase()}: Option "${n}" provided type "${a}" but expected type "${s}".`)}))},l=t=>!

如果沒做過規模大的專案,你應該會想說幹嘛這樣做,其實這樣做是為了降低空間,把字多的變數變短,和把空白壓縮,等等。

想看全篇亂碼:https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js

我要把網頁給別人看

如果在windows電腦上運行,在終端機上(vscode按下ctrl + ` )輸入

ipconfig

在live server開著的情況下把無線區域網路介面卡 Wi-Fi:裡面的IPv4的網址後面加個:5500
假設我的ip是192.34.59.61那我要給別人的網址就是

http://192.34.59.61:5500

結尾

在分秒必爭的時代,快速,才是最佳的好網站。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言