104學習

前端框架開發

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

Line

Facebook

複製連結

取消
「前端框架開發：負責設計、開發及維護高效的前端框架，以提升應用程式的性能與使用者體驗。需具備扎實的HTML、CSS及JavaScript知識，並熟悉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 420 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 189 0

    104學習精選課程

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