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

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

學(xué)習(xí)交流請(qǐng)加【Java幫幫】自學(xué)交流QQ群553841695

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

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

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

npm install -g typescript

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

當(dāng)我嘗試把《WebGL編程指南》中的代碼轉(zhuǎn)換到TypeScript進(jìn)行練習(xí)時(shí)，執(zhí)行tsc命令編譯報(bào)錯(cuò)，提示找不到getWebGLContext這個(gè)方法，這個(gè)方法是本書作者提供的js庫(kù)cuon-utils.js中的方法。

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

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

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

還有些細(xì)節(jié)的地方需要變動(dòng)，這里列出全部代碼并在變動(dòng)的地方添加了注釋。

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程序：清空繪圖區(qū)</title>
</head>
<!-- 原來(lái)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"來(lái)支持模塊的import export -->
    <script type="module" src="./built/src/HelloCanvas.js"></script>
</body>
</html>

HelloCanvas.ts：

文適合有 Java 基礎(chǔ)知識(shí)的人群

本文作者：HelloGitHub-秦人

HelloGitHub 推出的《講解開源項(xiàng)目》系列，今天給大家?guī)?lái)一款開源 Java 版一款網(wǎng)頁(yè)元素解析框架——jsoup，通過(guò)程序自動(dòng)獲取網(wǎng)頁(yè)數(shù)據(jù)。

項(xiàng)目源碼地址：https://github.com/jhy/jsoup

一、項(xiàng)目介紹

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

jsoup 主要功能：

從一個(gè) URL、文件或字符串中解析 HTML。
使用 DOM 或 CSS 選擇器來(lái)查找、取出數(shù)據(jù)。
可操作 HTML 元素、屬性、文本。

二、使用框架

2.1 準(zhǔn)備工作

掌握 HTML 語(yǔ)法
Chrome 瀏覽器調(diào)試技巧
掌握開發(fā)工具 idea 的基本操作

2.2 學(xué)習(xí)源碼

將項(xiàng)目導(dǎo)入 idea 開發(fā)工具，會(huì)自動(dòng)下載 maven 項(xiàng)目需要的依賴。源碼的項(xiàng)目結(jié)構(gòu)如下：

快速學(xué)習(xí)源碼是每個(gè)程序員必備的技能，我總結(jié)了以下幾點(diǎn)：

閱讀項(xiàng)目 ReadMe 文件，可以快速知道項(xiàng)目是做什么的。
概覽項(xiàng)目 pom.xml 文件，了解項(xiàng)目引用了哪些依賴。
查看項(xiàng)目結(jié)構(gòu)、源碼目錄、測(cè)試用例目錄，好的項(xiàng)目結(jié)構(gòu)清晰，層次明確。
運(yùn)行測(cè)試用例，快速體驗(yàn)項(xiàng)目。

2.3 下載項(xiàng)目

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

2.4 運(yùn)行項(xiàng)目測(cè)試代碼

通過(guò)上面的方法，我們很快可知 example 目錄是測(cè)試代碼，那我們直接來(lái)運(yùn)行。注：有些測(cè)試代碼需要稍微改造一下才可以運(yùn)行。

例如，jsoup 的 Wikipedia 測(cè)試代碼：

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));
    }
}

說(shuō)明：上面代碼是獲取頁(yè)面（http://en.wikipedia.org/）包含（#mp-itn b a）選擇器的所有元素，并打印這些元素的 title , herf 屬性。維基百科國(guó)內(nèi)無(wú)法訪問(wèn)，所以上面這段代碼運(yùn)行會(huì)報(bào)錯(cuò)。

改造后可運(yùn)行的代碼如下：

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 的工作原理，首先需要指定一個(gè) URL，框架發(fā)送 HTTP 請(qǐng)求，然后獲取響應(yīng)頁(yè)面內(nèi)容，然后通過(guò)各種選擇器獲取頁(yè)面數(shù)據(jù)。整個(gè)工作流程如下圖：

以上面為例：

3.1 發(fā)請(qǐng)求

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

這行代碼就是發(fā)送 HTTP 請(qǐng)求，并獲取頁(yè)面響應(yīng)數(shù)據(jù)。

3.2 數(shù)據(jù)篩選

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

定義選擇器，獲取匹配選擇器的數(shù)據(jù)。

3.3 數(shù)據(jù)處理

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

這里對(duì)數(shù)據(jù)只做了一個(gè)簡(jiǎn)單的數(shù)據(jù)打印，當(dāng)然這些數(shù)據(jù)可寫入文件或數(shù)據(jù)的。

四、實(shí)戰(zhàn)

獲取豆瓣讀書 -> 新書速遞中每本新書的基本信息。包括：書名、書圖片鏈接、作者、內(nèi)容簡(jiǎn)介（詳情頁(yè)面）、作者簡(jiǎn)介（詳情頁(yè)面）、當(dāng)當(dāng)網(wǎng)書的價(jià)格（詳情頁(yè)面），最后將獲取的數(shù)據(jù)保存到 Excel 文件。

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

4.1 項(xiàng)目 pom.xml 文件

項(xiàng)目引入 jsoup、lombok、easyexcel 三個(gè)庫(kù)。

<?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 解析頁(yè)面數(shù)據(jù)

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;
    }
}

這里的重點(diǎn)是要獲取網(wǎng)頁(yè)對(duì)應(yīng)元素的選擇器。

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

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

4.3 存儲(chǔ)數(shù)據(jù)到 Excel

為了數(shù)據(jù)更好查看，我將通過(guò) jsoup 抓取的數(shù)據(jù)存儲(chǔ)的 Excel 文件，這里我使用的 easyexcel 快速生成 Excel 文件。

Excel 表頭信息

@Data
@Builder
public class ColumnData {

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

    @ExcelProperty("評(píng)分")
    private String starsCount;

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

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

    @ExcelProperty("簡(jiǎn)介")
    private String description;

    @ExcelProperty("單價(jià)")
    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 最終展示效果

最終的效果如下圖：

以上就是從想法到實(shí)踐，我們就在實(shí)戰(zhàn)中使用了 jsoup 的基本操作。

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

五、最后

Java HTML Parser 庫(kù)：jsoup，把它當(dāng)成簡(jiǎn)單的爬蟲用起來(lái)還是很方便的吧？

為什么會(huì)講爬蟲？大數(shù)據(jù)，人工智能時(shí)代玩的就是數(shù)據(jù)，數(shù)據(jù)很重要。作為懂點(diǎn)技術(shù)的我們，也需要掌握一種獲取網(wǎng)絡(luò)數(shù)據(jù)的技能。當(dāng)然也有一些工具 Fiddler、webscraper 等也可以抓取你想要的數(shù)據(jù)。

教程至此，你應(yīng)該也能對(duì) jsoup 有一些感覺(jué)了吧。編程是不是也特別有意思呢？參考我上面的實(shí)戰(zhàn)案例，有好多網(wǎng)站可以實(shí)踐一下啦～歡迎在評(píng)論區(qū)曬你的實(shí)戰(zhàn)。

在線咨詢

上一篇：CSS樣式更改篇-背景Background
下一篇：將富文本html內(nèi)容轉(zhuǎn)換為純文本，并限制展示字?jǐn)?shù)長(zhǎng)度

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商