JavaWeb01輕松掌握HTML（Java真正的全棧開發）

取更多資源加微信公眾號【Java幫幫】 (是公眾號，不是微信好友哦)

學習交流請加【Java幫幫】自學交流QQ群553841695

ypeScript是由微軟開發的自由和開源的編程語言，它是JavaScript語言的超集，主要增加了類型檢查的能力，目標是為了支持大型項目的開發，原生的JavaScript可以原封不動在TypeScript語言里使用。TypeScript的語言很像Java這樣的后端語言，轉換到TypeScript讓你開啟了全棧能力的征程。

但是直接從JavaScript切換到TypeScript并非沒有代價，可以參考從 JavaScript 遷移到 TypeScript - TypeScript 中文手冊掌握切換的一般步驟，不過按照指導操作我還是遇到別的問題，本文以《WebGL編程指南》一書的示例代碼為例介紹我遇到的問題以及解決辦法。

注意使用TypeScript編寫的代碼并不能直接運行，還是需要編譯成JavaScript才行，首先使用npm命令全局安裝TypeScript。

npm install -g typescript

安裝成功后，cmd執行tsc -v如果成功打印版本則表示安裝成功。

當我嘗試把《WebGL編程指南》中的代碼轉換到TypeScript進行練習時，執行tsc命令編譯報錯，提示找不到getWebGLContext這個方法，這個方法是本書作者提供的js庫cuon-utils.js中的方法。

示例代碼位置：
《WebGL編程指南》第2章WebGL入門中的一個示例“最短的WebGL程序：清空繪圖區”，16頁。
源碼倉庫鏈接：https://github.com/GrayMind/WebGL-Programming-Guide.git/

解決這個問題可以通過在tsconfig.json這個TypeScript工程管理配置中設置，在include中引入lib這個目錄即可，這樣TypeScript就能識別提示不存在的方法了，再次執行tsc命令編譯就不會報錯了，getWebGLContext方法就可以正常使用了（不過TypeScript做了檢查，需要把第二個參數傳入，默認為false）。

{
    "compilerOptions": {
        "outDir": "./built",
        "allowJs": true,
        "target": "es6"
    },
    "include": [
        "./src/*", 
        "./lib/*",      // 這里引入lib目錄，TypeScript就會包含引入其中的js文件了
    ]
}

還有些細節的地方需要變動，這里列出全部代碼并在變動的地方添加了注釋。

HelloCanvas.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最短的WebGL程序：清空繪圖區</title>
</head>
<!-- 原來body中的onload="main()"不再需要了 -->
<body>
    <canvas id="webgl" width="400" height="400">
        您的瀏覽器不支持WebGL
    </canvas>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <!-- script元素要增加type="module"來支持模塊的import export -->
    <script type="module" src="./built/src/HelloCanvas.js"></script>
</body>
</html>

HelloCanvas.ts：

文適合有 Java 基礎知識的人群

本文作者：HelloGitHub-秦人

HelloGitHub 推出的《講解開源項目》系列，今天給大家帶來一款開源 Java 版一款網頁元素解析框架——jsoup，通過程序自動獲取網頁數據。

項目源碼地址：https://github.com/jhy/jsoup

一、項目介紹

jsoup 是一款 Java 的 HTML 解析器。可直接解析某個 URL 地址的 HTML 文本內容。它提供了一套很省力的 API，可通過 DOM、CSS 以及類似于 jQuery 選擇器的操作方法來取出和操作數據。

jsoup 主要功能：

從一個 URL、文件或字符串中解析 HTML。
使用 DOM 或 CSS 選擇器來查找、取出數據。
可操作 HTML 元素、屬性、文本。

二、使用框架

2.1 準備工作

掌握 HTML 語法
Chrome 瀏覽器調試技巧
掌握開發工具 idea 的基本操作

2.2 學習源碼

將項目導入 idea 開發工具，會自動下載 maven 項目需要的依賴。源碼的項目結構如下：

快速學習源碼是每個程序員必備的技能，我總結了以下幾點：

閱讀項目 ReadMe 文件，可以快速知道項目是做什么的。
概覽項目 pom.xml 文件，了解項目引用了哪些依賴。
查看項目結構、源碼目錄、測試用例目錄，好的項目結構清晰，層次明確。
運行測試用例，快速體驗項目。

2.3 下載項目

git clone https://github.com/jhy/jsoup

2.4 運行項目測試代碼

通過上面的方法，我們很快可知 example 目錄是測試代碼，那我們直接來運行。注：有些測試代碼需要稍微改造一下才可以運行。

例如，jsoup 的 Wikipedia 測試代碼：

public class Wikipedia {
    public static void main(String[] args) throws IOException {
        Document doc = Jsoup.connect("http://en.wikipedia.org/").get();
        log(doc.title());

        Elements newsHeadlines = doc.select("#mp-itn b a");
        for (Element headline : newsHeadlines) {
            log("%s\n\t%s", headline.attr("title"), headline.absUrl("href"));
        }
    }

    private static void log(String msg, String... vals) {
        System.out.println(String.format(msg, vals));
    }
}

說明：上面代碼是獲取頁面（http://en.wikipedia.org/）包含（#mp-itn b a）選擇器的所有元素，并打印這些元素的 title , herf 屬性。維基百科國內無法訪問，所以上面這段代碼運行會報錯。

改造后可運行的代碼如下：

public static void main(String[] args) throws IOException {
    Document doc = Jsoup.connect("https://www.baidu.com/").get();
    Elements newsHeadlines = doc.select("a[href]");
    for (Element headline : newsHeadlines) {
        System.out.println("href: " +headline.absUrl("href") );
    }
}

三、工作原理

Jsoup 的工作原理，首先需要指定一個 URL，框架發送 HTTP 請求，然后獲取響應頁面內容，然后通過各種選擇器獲取頁面數據。整個工作流程如下圖：

以上面為例：

3.1 發請求

Document doc = Jsoup.connect("https://www.baidu.com/").get();

這行代碼就是發送 HTTP 請求，并獲取頁面響應數據。

3.2 數據篩選

Elements newsHeadlines = doc.select("a[href]");

定義選擇器，獲取匹配選擇器的數據。

3.3 數據處理

for (Element headline : newsHeadlines) {
        System.out.println("href: " +headline.absUrl("href") );
    }

這里對數據只做了一個簡單的數據打印，當然這些數據可寫入文件或數據的。

四、實戰

獲取豆瓣讀書 -> 新書速遞中每本新書的基本信息。包括：書名、書圖片鏈接、作者、內容簡介（詳情頁面）、作者簡介（詳情頁面）、當當網書的價格（詳情頁面），最后將獲取的數據保存到 Excel 文件。

目標鏈接：https://book.douban.com/latest?icn=index-latestbook-all

4.1 項目 pom.xml 文件

項目引入 jsoup、lombok、easyexcel 三個庫。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>JsoupTest</artifactId>
    <version>1.0-SNAPSHOT</version>
    <properties>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.source>1.8</maven.compiler.source>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.13.1</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>2.2.6</version>
        </dependency>
    </dependencies>
</project>

4.2 解析頁面數據

public class BookInfoUtils {

    public static List<BookEntity> getBookInfoList(String url) throws IOException {
        List<BookEntity>  bookEntities=new ArrayList<>();
        Document doc = Jsoup.connect(url).get();
        Elements liDiv = doc.select("#content > div > div.article > ul > li");
        for (Element li : liDiv) {
            Elements urls = li.select("a[href]");
            Elements imgUrl = li.select("a > img");
            Elements bookName = li.select(" div > h2 > a");
            Elements starsCount = li.select(" div > p.rating > span.font-small.color-lightgray");
            Elements author = li.select("div > p.color-gray");
            Elements description = li.select(" div > p.detail");

            String bookDetailUrl = urls.get(0).attr("href");
            BookDetailInfo detailInfo = getDetailInfo(bookDetailUrl);
            BookEntity bookEntity = BookEntity.builder()
                    .detailPageUrl(bookDetailUrl)
                    .bookImgUrl(imgUrl.attr("src"))
                    .bookName(bookName.html())
                    .starsCount(starsCount.html())
                    .author(author.text())
                    .bookDetailInfo(detailInfo)
                    .description(description.html())
                    .build();
//            System.out.println(bookEntity);
            bookEntities.add(bookEntity);
        }
        return bookEntities;
    }
    /**
     *
     * @param detailUrl
     * @return
     * @throws IOException
     */
    public static BookDetailInfo getDetailInfo(String detailUrl)throws IOException{

        Document doc = Jsoup.connect(detailUrl).get();
        Elements content = doc.select("body");

        Elements price = content.select("#buyinfo-printed > ul.bs.current-version-list > li:nth-child(2) > div.cell.price-btn-wrapper > div.cell.impression_track_mod_buyinfo > div.cell.price-wrapper > a > span");
        Elements author = content.select("#info > span:nth-child(1) > a");
        BookDetailInfo bookDetailInfo = BookDetailInfo.builder()
                .author(author.html())
                .authorUrl(author.attr("href"))
                .price(price.html())
                .build();
        return bookDetailInfo;
    }
}

這里的重點是要獲取網頁對應元素的選擇器。

例如：獲取 li.select("div > p.color-gray") 中 div > p.color-gray 是怎么知道的。

使用 chrome 的小伙伴應該都猜到了。打開 chrome 瀏覽器 Debug 模式，Ctrl + Shift +C 選擇一個元素,然后在 html 右鍵選擇 Copy ->Copy selector,這樣就可以獲取當前元素的選擇器。如下圖：

4.3 存儲數據到 Excel

為了數據更好查看，我將通過 jsoup 抓取的數據存儲的 Excel 文件，這里我使用的 easyexcel 快速生成 Excel 文件。

Excel 表頭信息

@Data
@Builder
public class ColumnData {

    @ExcelProperty("書名稱")
    private String bookName;

    @ExcelProperty("評分")
    private String starsCount;

    @ExcelProperty("作者")
    private String author;

    @ExcelProperty("封面圖片")
    private String bookImgUrl;

    @ExcelProperty("簡介")
    private String description;

    @ExcelProperty("單價")
    private String price;
}

生成 Excel 文件

public class EasyExcelUtils {

    public static void simpleWrite(List<BookEntity> bookEntityList) {
        String fileName = "D:\\devEnv\\JsoupTest\\bookList" + System.currentTimeMillis() + ".xlsx";
        EasyExcel.write(fileName, ColumnData.class).sheet("書本詳情").doWrite(data(bookEntityList));
        System.out.println("excel文件生成完畢...");
    }
    private static List<ColumnData> data(List<BookEntity> bookEntityList) {
        List<ColumnData> list = new ArrayList<>();
        bookEntityList.forEach(b -> {
            ColumnData data = ColumnData.builder()
                    .bookName(b.getBookName())
                    .starsCount(b.getStarsCount())
                    .author(b.getBookDetailInfo().getAuthor())
                    .bookImgUrl(b.getBookImgUrl())
                    .description(b.getDescription())
                    .price(b.getBookDetailInfo().getPrice())
                    .build();
            list.add(data);
        });
        return list;
    }
}

4.4 最終展示效果

最終的效果如下圖：

以上就是從想法到實踐，我們就在實戰中使用了 jsoup 的基本操作。

完整代碼地址：https://github.com/hellowHuaairen/JsoupTest

五、最后

Java HTML Parser 庫：jsoup，把它當成簡單的爬蟲用起來還是很方便的吧？

為什么會講爬蟲？大數據，人工智能時代玩的就是數據，數據很重要。作為懂點技術的我們，也需要掌握一種獲取網絡數據的技能。當然也有一些工具 Fiddler、webscraper 等也可以抓取你想要的數據。

教程至此，你應該也能對 jsoup 有一些感覺了吧。編程是不是也特別有意思呢？參考我上面的實戰案例，有好多網站可以實踐一下啦～歡迎在評論區曬你的實戰。

在線咨詢

上一篇：CSS樣式更改篇-背景Background
下一篇：將富文本html內容轉換為純文本，并限制展示字數長度

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商