104學習

前端框架開發

前端框架開發
關注
邀請朋友
邀請朋友

Line

Facebook

複製連結

取消
指利用現有的前端框架如React、Vue或Angular來構建網頁介面，提升開發效率與維護性。這項技能能幫助工程師快速搭建互動性強、反應迅速的使用者介面，並確保跨瀏覽器相容性。掌握此技能代表能善用模組化、元件化的設計理念，減少重複工作，提升團隊協作與專案品質，對求職者在軟體開發領域非常加分。
關於教室
關注人數 0 人
104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
學習主持人
持續分享知識，
有機會成為官方教室主持人
教室標籤
  • 前端框架開發
    • 關於教室
    關注人數 0 人
    104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
    學習主持人
    持續分享知識，
    有機會成為官方教室主持人
    教室標籤
  • 前端框架開發
    • Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！
    我要分享
    我要提問

    前端框架開發 學習推薦

    Mike的Python學院
    關注
    Mike Ku

    Learn Code With Mike品牌創辦人

    2022/01/15

    掌握Scrapy框架重要的CSS定位元素方法(下)
    Q: Scrapy如何利用CSS方法取得子元素值?
    在實務上利用Scrapy框架開發Python網頁爬蟲時，並不是每次想要爬取的網頁元素(Element)都會有CSS樣式類別可以定位，這時候，就會需要透過上層的父元素往下定位子元素。
    假設INSIDE硬塞的網路趨勢觀察網站－AI新聞( https://www.inside.com.tw/tag/ai )的文章標題<a>標籤沒有「js-auto_break_title」CSS樣式類別，而想要爬取<a>標籤的文字內容，該如何達成呢?
    這時候，就會需要在Scrapy框架中利用CSS樣式類別先定位到<h3>標籤，接著，再取得其下的子元素<a>標籤，如下範例：
    import scrapy
    class InsideSpider(scrapy.Spider):
    name = 'inside'
    allowed_domains = ['www.inside.com.tw']
    def parse(self, response):
    titles = response.css("h3.post_title a::text").getall()
    for title in titles:
    print(title)
    在範例中，利用「post_title」CSS樣式類別定位到<h3>標籤後，接著一個空白，加上<a>標籤，意思就是取得<h3>標籤下的所有<a>標籤，由於要取得其中的文字，所以加上「::text」。
    Q: Scrapy如何利用CSS方法取得元素屬性值?
    此外，在開發Python網頁爬蟲時，也有機會爬取元素的屬性值(Attribute)，舉例來說，最常見的就是<a>標籤的href屬性值(Attribute)，也就是文章的連結網址，這時候只需要將「::text」關鍵字，修改為「::attr(屬性名稱)」即可，如下範例：
    import scrapy
    class InsideSpider(scrapy.Spider):
    name = 'inside'
    allowed_domains = ['www.inside.com.tw']
    def parse(self, response):
    urls = response.css("a.js-auto_break_title::attr(href)").getall()
    for url in urls:
    print(url)
    本文與掌握Scrapy框架重要的CSS定位元素方法(上)搭配實際的網站，示範Scrapy框架利用css()方法(Method)來定位網頁元素的基本用法，重點摘要如下：
    1.取得單一元素值呼叫get()方法(Method)
    2.取得多個元素值呼叫getall()方法(Method)
    3.取得文字內容，加上「::text」關鍵字
    4.取得屬性值則加上「::attr(屬性名稱)」關鍵字
    希望對於想要學習Scrapy框架的朋友有所幫助。
    如果想要學習更多的Python應用教學，歡迎前往Learn Code With Mike( https://www.learncodewithmike.com/2021/01/scrapy-css-selectors.html
    )網站觀看更多精彩內容。
    看更多
    掌握Scrapy框架重要的CSS定位元素方法(下)
    learncodewithmike.com
    [Scrapy教學4]掌握Scrapy框架重要的CSS定位元素方法
    2 0 492 0
    Mike的Python學院
    關注
    Mike Ku

    Learn Code With Mike品牌創辦人

    2022/01/15

    掌握Scrapy框架重要的CSS定位元素方法(上)
    想要開發Python網頁爬蟲的朋友，都會知道定位元素(Element)是一個非常重要的動作，Scrapy框架本身就有提供自己的定位元素(Element)方法(Method)，包含CSS與XPath兩種，本文就以INSIDE硬塞的網路趨勢觀察網站－AI新聞( https://www.inside.com.tw/tag/ai )為例，先來和大家分享在Scrapy框架中，如何利用CSS的定位元素(Element)方法(Method)，爬取想要的網頁內容。
    Q: Scrapy如何利用CSS方法取得單一元素值?
    CSS(Cascading Style Sheets)階層樣式表相信大家都不陌生，可以自訂樣式的類別來裝飾網頁，像是字體顏色、粗體等，所以在利用Scrapy框架開發網頁爬蟲時，也就能夠利用CSS樣式類別，來定位想要爬取的網頁元素(Element)。
    前往INSIDE硬塞的網路趨勢觀察網站－AI新聞，在文章標題的地方，點擊滑鼠右鍵，選擇檢查，可以看到它的CSS樣式類別。假設想要在Scrapy框架中，利用CSS樣式類別來取得網頁的單一元素值，也就是單一文章的標題，就可以在spiders/inside.py的parse()方法(Method)中，使用css()方法(Method)來定位單一元素(Element)，如下範例：
    import scrapy
    class InsideSpider(scrapy.Spider):
    name = 'inside'
    allowed_domains = ['www.inside.com.tw']
    def parse(self, response):
    title = response.css("a.js-auto_break_title::text").get()
    print(title)
    接著，利用以下的指令執行inside網頁爬蟲：
    $ scrapy crawl inside
    以上範例，response就是Scrapy框架請求後的回應結果，接著，呼叫css()方法，傳入所要定位的HTML標籤<a>，點的後面加上它的CSS樣式類別，由於要取得元素(Element)的文字，所以在加上「::text」關鍵字，最後，呼get()方法(Method)取得單一元素(Element)。
    Q: Scrapy如何利用CSS方法取得多個元素值?
    而在Scrapy框架中，想要爬取網頁多個元素值，則呼叫getall()方法(Method)即可，如下範例：
    import scrapy
    class InsideSpider(scrapy.Spider):
    name = 'inside'
    allowed_domains = ['www.inside.com.tw']
    def parse(self, response):
    titles = response.css("a.js-auto_break_title::text").getall()
    print(titles)
    可以看到getall()方法(Method)回傳的是一個串列(List)，包含了所有樣式類別為「js-auto_break_title」的<a>標籤文字，接下來，利用迴圈即可取得其中的文章標題，如下範例：
    import scrapy
    class InsideSpider(scrapy.Spider):
    name = 'inside'
    allowed_domains = ['www.inside.com.tw']
    def parse(self, response):
    titles = response.css("a.js-auto_break_title::text").getall()
    for title in titles:
    print(title)
    如果想要學習更多的Python應用教學，歡迎前往Learn Code With Mike( https://www.learncodewithmike.com/2021/01/scrapy-css-selectors.html
    )網站觀看更多精彩內容。
    看更多
    掌握Scrapy框架重要的CSS定位元素方法(上)
    learncodewithmike.com
    [Scrapy教學4]掌握Scrapy框架重要的CSS定位元素方法
    2 0 243 0

    104學習精選課程

    看更多課程
    想提升職場競爭力？專業技能課程看起來👇
    成為前端工程師｜JavaScript 入門：帶你逐步培養網頁開發技能
    從「網頁開發基礎知識」、「JavaScript 語法概念」開始入門，並透過王寧疆老師鉅細靡遺的完整教學，讓你深入了解 JavaScript 的物件、函式設計與應用，以及理解 JavaScript ES6 的版本差異，也經由實作練習累積經驗與穩紮你的基本功。
    緯育TibaMe
    全端工程師必修-Python迅速開發網站實戰
    在本門課程中，將以社群部落格平台為範例，利用 Flask 框架來開發網站平台，並使用 Flask 擴充套件來建置會員系統、具有安全機制的驗證表單、加密使用者密碼、處理使用者上傳的檔案等等功能，讓您可以快速的學習Python網站開發所需的技能並能夠建置出自己的網站平台。
    緯育TibaMe
    Let’s Vue! 前端開發入門到實戰
    如果Angular或React對你來說太複雜，操作起來不夠靈活，那你真應該來學習超易上手的Vue！2018年Vue.js於Github的星星數完美展現它的熱門度；想成為前端工程師的您，快跟著長期深更在資訊領域的Nat老師，投入Vue.js的保證值回票價！
    緯育TibaMe
    工程師救星-用Bootstrap速成響應式網頁開發
    微軟MVP講師兼暢銷作家蔡文龍老師，教你用Bootstrap速成響應式網頁。從基礎元件、響應式排版，再結合JavaScript、jQuery增加互動性；獨家傳授「整合ASP.NET MVC後端」技術，完成既質感且功能完整的RWD動態網站管理系統。穿插多種案例實作，不管是購物網、企業網站，你都能搞定。
    緯育TibaMe
    成為前端工程師｜jQuery 入門密技，愉快打造互動式網頁不求人
    在這門 jQuery 課程中，將從基本的滑動、淡入淡出效果開始，到進階的 CSS + jQuery 語法搭配，帶著你更好的掌握並應用各類語法，在動畫操作上也會讓你的網頁動態更精緻、多元。加上大量的實作案例，就是要讓大家能夠在學完這門課程後能輕鬆地使用 jQuery，做出屬於自己的網頁功能與效果！
    緯育TibaMe

    熱門精選

    AI 趨勢報－科技愛好者的產地🤖
    關注
    104學習

    產品

    23小時前

    2026 年 Prompting 怎麼學？AI大神吳恩達推出免費新課給一般人的 AI 使用指南
    AI 工具越來越強，提示詞也不再只是「請幫我寫一段文案」這麼簡單。AI 教育者吳恩達（Andrew Ng）近期推出新課程《AI Prompting for Everyone》，主打不需要技術背景，幫助一般使用者學會更有效地使用 ChatGPT、Claude、Gemini 等 AI 工具。DeepLearning.AI 課程頁顯示，這是一門初學者課程，共 3 小時 4 分鐘、21 堂影片課，由吳恩達授課。官方學習頁也標示可免費開始學習、觀看課程影片；若需要 graded assignments 與證書，則屬於 PRO 方案。
    吳恩達是誰？為什麼他的新課值得關注？
    吳恩達是全球知名的 AI 教育者與機器學習專家。他是 DeepLearning.AI 創辦人、Coursera 共同創辦人，也曾擔任百度首席科學家，並曾創辦與領導 Google Brain 專案，目前也是史丹佛大學兼任教授。
    對非工程背景的上班族來說，吳恩達最重要的影響，是他長期把 AI 知識轉化成大眾可以理解、可以上手的學習內容。從早期的機器學習課程，到《AI For Everyone》，再到這次的《AI Prompting for Everyone》，他的課程常被視為 AI 學習趨勢的風向球。
    這門課在教什麼？不是背 Prompt，而是學會和 AI 協作
    《AI Prompting for Everyone》的核心，不只是教你寫出更漂亮的提示詞，而是教你在不同工作情境中，如何讓 AI 產出更可靠、更有用的結果。官方課程頁將學習重點分成三大方向：找資訊、腦力激盪與寫作、創作與建構。
    第一個重點是 Finding Information，也就是用 AI 找資料。課程會說明 AI 模型本身已經知道什麼、什麼時候應該使用 AI 網路搜尋、什麼情境適合使用 deep research mode，以及如何取得更準確、有來源的回答。
    這對上班族非常實用。無論是做市場資料整理、競品分析、產業趨勢觀察，或準備會議前的背景研究，AI 不只是回答問題的工具，更可以協助快速建立資料架構。但前提是使用者要懂得要求來源、設定範圍，也要知道哪些資訊需要再查證。
    第二個重點是 AI as a Thought Partner，也就是把 AI 當成思考夥伴。課程會教使用者如何提供正確上下文，讓 AI 理解真正需求；也會談到如何讓 AI 提供誠實回饋，而不是只迎合使用者。官方課綱中也列出 brainstorming、context、reasoning、sycophancy、writing with AI、AI critique 等單元。
    這代表未來職場的 AI 能力，不只是「會叫 AI 寫東西」，而是能不能請 AI 幫忙檢查盲點、提出反方觀點、改善表達方式，甚至協助自己做更完整的決策思考。
    第三個重點是 Working with Multimedia and Code。課程會介紹如何在提示中使用圖片、讓 AI 理解圖片、生成視覺內容，並使用 AI 建立簡單遊戲、網站與 App；官方也特別說明，這部分不需要程式經驗。
    這也反映 AI 工具的使用場景正在擴大。過去上班族多半把 AI 用在寫信、摘要、翻譯、整理資料；但未來，AI 也可能協助做簡報素材、產出視覺概念、分析資料，甚至建立可展示的簡易 prototype。
    誰適合上這門課？
    官方課程頁指出，這門課適合任何在日常工作或生活中使用 ChatGPT、Claude、Gemini 等 AI 工具，並希望獲得更好結果的人，不需要技術背景，也沒有必修前置課程。
    換句話說，這門課很適合以下幾類上班族：經常需要查資料的企劃、行銷、編輯、研究人員；需要寫報告、簡報、Email 的一般辦公室工作者；想把 AI 帶進工作流程的主管；以及想開始學 AI、但不想一開始就碰程式的人。
    對職場工作者的啟示：提示力已經變成基本功
    這門課最值得注意的訊號是：AI 提示力正在從「技巧」變成「基本工作能力」。
    過去，很多人學 AI 會先找提示詞模板，例如「請扮演某某角色」、「請一步一步思考」、「請用表格整理」。這些技巧仍然有用，但已經不夠。真正會用 AI 的人，還要知道如何提供背景資料、設定輸出格式、要求資料來源、讓 AI 挑戰自己的想法，並判斷哪些內容可以採用、哪些內容必須查證。
    也就是說，未來職場上的 AI 能力，不是誰背了最多 prompt，而是誰更會設計任務、拆解問題、提供上下文，並把 AI 產出整合成真正能交付的工作成果。
    有興趣的讀者可至 DeepLearning.AI 官方課程頁開始學習：《AI Prompting for Everyone》。
    課程影片可免費開始觀看；若想取得作業評分與證書，需留意官方 PRO 方案說明。
    DeepLearning.AI《AI Prompting for Everyone》
    看更多
    1 0 961 1
    Mike的Python學院
    關注
    Mike Ku

    Learn Code With Mike品牌創辦人

    2021/12/21

    在Scrapy框架整合Selenium套件爬取動態網頁的實作
    本文以Accupass網站的精選活動為例，來分享Scrapy框架整合Selenium套件，開發Python網頁爬蟲的流程。
    Q: 如何建立Scrapy網頁爬蟲?
    首先，利用以下指令安裝Scrapy框架：
    $ pip install scrapy
    接著，新增一個資料夾，並且使用命令提示字元切換到該資料夾的目錄下，建立Scrapy專案，如下：
    $ scrapy startproject accupass_scraper .
    有了專案後，就能夠利用以下指令建立Scrapy網頁爬蟲：
    $ scrapy genspider accupass accupass.com
    Q:如何安裝scrapy-selenium套件?
    而Scrapy框架想要使用Selenium套件來發送請求與接收回應，就需要一個Middleware來使用Selenium套件。
    其中的Middleware，也就是在Scrapy發送請求前，以及將回應結果傳給Scrapy網頁爬蟲前，能夠在Middleware中來進行前處理。
    所以，Scrapy框架想要使用Selenium套件來發送請求與接收回應結果，就需要定義Middleware，當然，已經有大大寫好了scrapy-selenium Middleware可以使用，安裝方式如下指令：
    $ pip install scapy-selenium
    接下來，前往下載Selenium的瀏覽器驅動，並且放置於Scrapy專案資料夾中。開啟settings.py檔案，加入scrapy-selenium Middleware的相關設定，如下範例：
    DOWNLOADER_MIDDLEWARES = {
    'scrapy_selenium.SeleniumMiddleware': 800
    }
    SELENIUM_DRIVER_NAME = 'chrome'
    SELENIUM_DRIVER_EXECUTABLE_PATH = 'chromedriver.exe'
    SELENIUM_DRIVER_ARGUMENTS = ['-headless']
    Q:如何Scrapy整合Selenium爬取動態網頁?
    開啟Scrapy專案的accupass.py檔案，引用scrapy-selenium的SeleniumRequest模組，如下範例：
    import scrapy
    from scrapy_selenium import SeleniumRequest
    而想要讓Scrapy框架使用Selenium套件發送請求，就可以新增start_requests()方法，如下範例：
    class AccupassSpider(scrapy.Spider):
    name = 'accupass'
    allowed_domains = ['accupass.com']
    start_urls = ['http://accupass.com/']
    def start_requests(self):
    yield SeleniumRequest(url='https://www.accupass.com/?area=north', callback=self.parse)
    以上的callback參數就是收到網頁的回應結果之後，所要執行的方法，也就是爬取網頁上的資料，如下範例：
    class AccupassSpider(scrapy.Spider):
    name = 'accupass'
    allowed_domains = ['accupass.com']
    start_urls = ['http://accupass.com/']
    def start_requests(self):
    yield SeleniumRequest(url='https://www.accupass.com/?area=north', callback=self.parse)
    def parse(self, response):
    titles = response.css("p.style-f13be39c-event-name::text").getall()
    for title in titles:
    print(title)
    如果想要學習更多的Python應用教學，歡迎前往Learn Code With Mike( https://www.learncodewithmike.com/2021/11/scrapy-integrate-with-selenium.html
    )網站觀看更多精彩內容。
    看更多
    在Scrapy框架整合Selenium套件爬取動態網頁的實作
    learncodewithmike.com
    [Scrapy教學12]在Scrapy框架整合Selenium套件爬取動態網頁的實作指南
    3 0 939 2
    你可能感興趣的教室