靜態(tài)網(wǎng)頁爬蟲①

理數(shù)據(jù)

前面我們說過了通過 requests 庫獲取數(shù)據(jù),這里我們要說如何處理數(shù)據(jù)

處理數(shù)據(jù)我們需要用到一個強(qiáng)大的第三方庫——BeautifulSoup !

“美味的湯，綠色的濃湯，在熱氣騰騰的蓋碗里裝！誰不愿意嘗一嘗，這樣的好湯？晚餐用的湯，美味的湯！”

BeautifulSoup 庫的名字取自劉易斯·卡羅爾在《愛麗絲夢游仙境》里的同名詩歌。就像它在仙境中的說法一樣，BeautifulSoup 嘗試化平淡為神奇。它通過定位 HTML 標(biāo)簽來格式化和組織復(fù)雜的網(wǎng)頁源代碼，用簡單易用的 Python 對象為我們展現(xiàn)出 HTML 結(jié)構(gòu)信息。

處理數(shù)據(jù)分為兩步：

解析數(shù)據(jù):將網(wǎng)頁源代碼解析成 Python 能“讀懂”的格式

提取數(shù)據(jù)：將網(wǎng)頁源代碼中無關(guān)數(shù)據(jù)過濾掉，只提取出我們所需要的數(shù)據(jù)

解析數(shù)據(jù)

我們以豆瓣讀書 Top250 為例，它的網(wǎng)址是：https://book.douban.com/top250。

我們來看看如何將其網(wǎng)頁源代碼解析成 BeautifulSoup 對象：

import requests
from bs4 import BeautifulSoup

headers = {
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36'
}
res = requests.get('https://book.douban.com/top250', headers=headers)
soup = BeautifulSoup(res.text, 'html.parser')

Tips：相比之前我們添加 headers 參數(shù)，這是為了應(yīng)對豆瓣的反爬蟲機(jī)制。

我們通過 from bs4 import BeautifulSoup 語句導(dǎo)入 BeautifulSoup，然后使用 BeautifulSoup(res.text, 'html.parser') 語句將網(wǎng)頁源代碼的字符串形式解析成了 BeautifulSoup 對象。

創(chuàng)建 BeautifulSoup 對象時需要傳入兩個參數(shù)，第一個參數(shù)是要解析的 HTML 文本，即網(wǎng)站源代碼的字符串形式（res.text）。第二個參數(shù)是解析HTML 的解析器，html.parser 是 Python 中內(nèi)置的解析器，較為簡單方便.

我們將網(wǎng)頁源代碼解析成了 BeautifulSoup 對象，如果我們將他打印出來會發(fā)現(xiàn)竟然和原來的網(wǎng)頁源代碼（也就是 res.text）一模一樣！既然都一樣，我們何苦費(fèi)這么大力將網(wǎng)頁源代碼解析成 BeautifulSoup 對象呢？

相比字符串，BeautifulSoup 對象里有很多強(qiáng)大的方法和屬性。通過這些方法和屬性，我們就能方便快捷地提取出我們所需要的數(shù)據(jù)。

提取數(shù)據(jù)

BeautifulSoup 對象里的方法和屬性有很多，我們這里只提及其中最常用的一些，這些足以應(yīng)付大多數(shù)場景。

find() 方法和 find_all() 方法

BeautifulSoup 對象里的 find() 和 find_all() 是我們提取數(shù)據(jù)最常用的兩個方法。借助它們，我們可以過濾掉 HTML 頁面里的無用數(shù)據(jù)，輕松地找到我們需要的數(shù)據(jù)。

我們來看一下 find() 和 find_all() 的作用和區(qū)別：

我們可以通過例子來更好地理解他們：
假設(shè)我們獲取到的網(wǎng)頁源代碼如下：

<div class="content">
  <a href="https://douban.com">登錄/注冊</a>
  <h1>豆瓣讀書 Top 250</h1>
  <div class="artile">
    <a href="https://movie.douban.com">豆瓣電影</a>
    <div class="item">
      <a href="https://book.douban.com/subject/1770782/">追風(fēng)箏的人</a>
    </div>
    <div class="item">
      <a href="https://book.douban.com/subject/25862578/">解憂雜貨店</a>
    </div>
    <div class="item">
      <a href="https://book.douban.com/subject/1084336/">小王子</a>
    </div>
  </div>
</div>

soup = BeautifulSoup(res.text, 'html.parser')
print(soup.find('a'))
# 輸出：<a href="https://douban.com">登錄/注冊</a>
print(soup.find_all('a'))
# 輸出：[
# <a href="https://douban.com">登錄/注冊</a>,
# <a href="https://movie.douban.com">豆瓣電影</a>,
# <a href="https://book.douban.com/subject/1770782/">追風(fēng)箏的人</a>,
# <a href="https://book.douban.com/subject/25862578/">解憂雜貨店</a>,
# <a href="https://book.douban.com/subject/1084336/">小王子</a>
# ]

它倆的用法基本一樣，都是傳入 HTML 標(biāo)簽名稱，返回符合該 HTML 標(biāo)簽的數(shù)據(jù)。區(qū)別是 find() 方法只返回第一個符合條件的標(biāo)簽，而 find_all() 方法返回所有符合條件的標(biāo)簽列表。他們的返回值分別是 BeautifulSoup 中的 Tag 對象和由 Tag 對象組成的列表。(后面會提到)

除了傳入 HTML 標(biāo)簽名稱外，這兩個方法還支持傳入 HTML 屬性進(jìn)行篩選，返回符合條件的數(shù)據(jù)。舉個例子：

# 查找 id='doubanapp-tip' 的 div 標(biāo)簽
soup.find('div', id='doubanapp-tip')
# 查找所有 class='rating_nums' 的 span 標(biāo)簽
soup.find_all('span', class_='rating_nums')

class 和 id 這兩個 HTML 屬性具有很強(qiáng)的標(biāo)識性，因此是數(shù)據(jù)篩選中最常用的兩個屬性，我們要重點(diǎn)關(guān)注。

Tips：因?yàn)?class 是 Python 中定義類的關(guān)鍵字，因此用 class_ 表示 HTML 中的 class。

通過 id、class 等 HTML 屬性的篩選，我們就可以快速準(zhǔn)確的找到我們需要的數(shù)據(jù)。當(dāng)一個條件無法精確定位到我們想要的數(shù)據(jù)時，我們還可以傳入多個 HTML 屬性進(jìn)行篩選，返回同時符合這些條件的數(shù)據(jù)。

我們再來看個例子：

# 查找 id='doubanapp-tip' 且 class='rating_nums' 的 div 標(biāo)簽
soup.find('div', id='doubanapp-tip', class_='rating_nums')

Tag對象

BeautifulSoup 將 HTML 中的元素封裝成了 Tag 對象。和 BeautifulSoup 對象一樣，Tag 對象里也有 find() 和 find_all() 方法。因此，我們可以不斷地調(diào)用這兩個方法，一層一層地找到我們需要的數(shù)據(jù)。我們還是以前面的 HTML 代碼為例提取其中的書名：

<div class="content">
  <a href="https://douban.com">登錄/注冊</a>
  <h1>豆瓣讀書 Top 250</h1>
  <div class="books">
    <a href="https://movie.douban.com">豆瓣電影</a>
    <div class="item">
      <a href="https://book.douban.com/subject/1770782/">追風(fēng)箏的人</a>
    </div>
    <div class="item">
      <a href="https://book.douban.com/subject/25862578/">解憂雜貨店</a>
    </div>
    <div class="item">
      <a href="https://book.douban.com/subject/1084336/">小王子</a>
    </div>
  </div>
</div>

我們可以看到，書名在 a 標(biāo)簽中。但如果直接使用 soup.find_all(‘a(chǎn)’) 的話，第二行的“登錄/注冊”和第五行的“豆瓣電影”也會被獲取到，因此我們需要將這些無效數(shù)據(jù)過濾掉。

我們分析一下不難發(fā)現(xiàn)，書名在 class=“item” 的 div 標(biāo)簽里的 a 標(biāo)簽內(nèi)。我們只要先找到所有 class=“item” 的 div 標(biāo)簽，然后再找到其中的 a 標(biāo)簽即可，因此我們可以像下面這樣來獲取書名的數(shù)據(jù)：

# 找到所有 class_='item' 的 div 標(biāo)簽
items = soup.find_all('div', class_='item')
for i in items:
  # 找到 class_='item' 的 div 標(biāo)簽中的 a 標(biāo)簽
  print(i.find('a'))
# 輸出：
# <a href="https://book.douban.com/subject/1770782/">追風(fēng)箏的人</a>
# <a href="https://book.douban.com/subject/25862578/">解憂雜貨店</a>
# <a href="https://book.douban.com/subject/1084336/">小王子</a>

這樣，我們就找到了所有書名的數(shù)據(jù)。此時返回的還是 Tag 對象。如果我們只想要書名和對應(yīng)的鏈接呢？這就用到了 Tag 對象的 text 屬性和 HTML 屬性名取值。

items = soup.find_all('div', class_='item')
for i in items:
  tag = i.find('a')
  # 獲取 text 屬性
  name = tag.text
  # 獲取 href 屬性值
  link = tag['href']
  print(name, link)
# 輸出：
# 追風(fēng)箏的人 https://book.douban.com/subject/1770782/
# 解憂雜貨店 https://book.douban.com/subject/25862578/
# 小王子 https://book.douban.com/subject/1084336/

我們通過 Tag 對象的 text 屬性拿到了 a 標(biāo)簽里的文字內(nèi)容，即追風(fēng)箏的人等。然后我們通過和字典取值一樣的方式，將 HTML 屬性名作為鍵，得到了對應(yīng)屬性的值。這里是以 href 屬性為例，其他的 HTML 屬性也同樣可以。

我們來總結(jié)一下 Tag 對象的常用屬性和方法：

CSS選擇器

有沒有什么方法可以直接就找到我們需要的數(shù)據(jù)，而不用多次查找嗎？

答案是肯定的，需要用到 CSS 選擇器。

在 CSS 選擇器中，# 代表 id，. 代表 class。比如：#login 表示 id=‘login’ 的所有元素，.item 表示 class=‘item’ 的所有元素。

我們也可以直接通過標(biāo)簽名選擇對應(yīng)的元素，比如：a 表示所有的 a 元素，p 表示所有的 p 元素。

它們也可以組合在一起，選擇同時符合條件的元素，比如：a#login 表示所有 id=‘login’ 的 a 元素，p.item 表示所有 class=‘item’ 的 p 元素，#login.item 表示所有 id=‘login’ 且 class=‘item’ 的元素，.item.book 表示所有 class 同時為 item 和 book 的元素。

需要注意的是，選擇同時符合條件的元素，選擇器之間不能有空格，如果寫成 .item .book 就是另一個意思了。這是新的知識點(diǎn)——子元素選擇。

當(dāng)兩個選擇器之間加了空格，表示子元素選擇。還是以 .item .book 為例，它表示選擇所有 class=‘item’ 的元素里面 class=‘book’ 的元素，即嵌套在 class=‘item’ 的元素里面 class=‘book’ 的元素。

這個嵌套可以是任意層級的，只要在里面就行，不要求直接嵌套在第一層。如果只需要直接嵌套在第一層符合條件的元素，可以用 > 分隔。比如：.item > .book。

來看個例子感受一下它們的區(qū)別：

from bs4 import BeautifulSoup

html = '''
<div class="item">
  <p class="book">小王子</p>
  <div class="hot">
    <p class="book">追風(fēng)箏的人</p>
  </div>
</div>'''

soup = BeautifulSoup(html, 'html.parser')

print(soup.select('.item.book'))
# 輸出：[]

print(soup.select('.item .book'))
# 輸出：[<p class="book">小王子</p>, <p class="book">追風(fēng)箏的人</p>]

print(soup.select('.item > .book'))
# 輸出：[<p class="book">小王子</p>]

了解了 CSS 選擇器的基本語法后，我們來看看如何在 BeautifulSoup 中使用。

BeautifulSoup 對象有一個 select() 方法，我們將 CSS 選擇器傳進(jìn)去即可直接找到我們需要的元素。上面查找在 class=“item” 的 div 標(biāo)簽里的 a 標(biāo)簽的代碼就可以這樣寫：

items = soup.select('div.item a')
for i in items:
  name = i.text
  link = i['href']
  print(name, link)
# 輸出：
# 追風(fēng)箏的人 https://book.douban.com/subject/1770782/
# 解憂雜貨店 https://book.douban.com/subject/25862578/
# 小王子 https://book.douban.com/subject/1084336/

靜態(tài)網(wǎng)頁爬蟲的過程

對于靜態(tài)網(wǎng)頁爬蟲的過程，可以總結(jié)成下圖：

我們現(xiàn)在對豆瓣top250中的前25個電影的名字以及名字進(jìn)行爬取：

import requests
from bs4 import BeautifulSoup

headers = {
    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.41 Safari/537.36 Edg/101.0.1210.32'
}

#首先對網(wǎng)頁發(fā)出請求并獲得響應(yīng)
req = requests.get('https://movie.douban.com/top250',headers = headers)
#將網(wǎng)頁的源代碼形式解析
soup = BeautifulSoup(req.text,'html.parser')

#進(jìn)行元素的第一次提取
result1 = soup.select('.item .pic')

num = 0
for i in result1:
    num += 1
    name = i.select('a img')[0]['alt']
    link = i.select('a')[0]['href']
    print(num,' ',name,link)

結(jié)果：

文章知識點(diǎn)與官方知識檔案匹配，可進(jìn)一步學(xué)習(xí)相關(guān)知識 , 免費(fèi)領(lǐng)取有關(guān)于java面試題材料和講解！

原文出處：https://blog.csdn.net/zyb18507175502/article/details/124636025?spm=1001.2100.3001.7377&utm_medium=distribute.pc_feed_blog_category.none-task-blog-classify_tag-5-124636025-null-null.nonecase&depth_1-utm_source=distribute.pc_feed_blog_category.none-task-blog-classify_tag-5-124636025-null-null.nonecase

提：

安裝配置有node環(huán)境

一、初始化node項(xiàng)目

在項(xiàng)目的工作目錄，執(zhí)行命令

npm init

初始化參數(shù)設(shè)置，可以根據(jù)情況設(shè)置，或者直接全部默認(rèn)也行：

初始化項(xiàng)目

二、安裝express模塊

Express是目前最流行的基于Node.js的Web開發(fā)框架，可以快速地搭建一個完整功能的網(wǎng)站。

直接通過命令行安裝

npm i express --save

G:\app-server>npm i -g express --save
+ express@4.17.1
added 2 packages from 2 contributors and updated 24 packages in 23.892s

三、編寫app.js

新建一個app.js文件

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8080, () => {
console.log(`App listening at port 8080`)
})

在express添加中間件，設(shè)置靜態(tài)資源路徑為public，所有的HTML、CSS、JS等文件都放在public下即可。默認(rèn)訪問public下面的index.html

新建index.html

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web測試平臺</title>
</head>
<body>
<h1>Web測試平臺</h1>
</body>
</html>

四、啟動服務(wù)

node app.js

即可運(yùn)行

G:\app-server>node app.js

App listening at port 8080

訪問ip:8080

就可以訪問到index.html那個頁面了哦。

好了，各位老鐵。相信你一定也學(xué)會搭建這個服務(wù)器環(huán)境了哦。

有問題歡迎留言哦。一起學(xué)習(xí)。

在，大家看到的網(wǎng)站，基本上都是動態(tài)網(wǎng)站。但是在20年前，網(wǎng)站基本上都是靜態(tài)的。靜態(tài)網(wǎng)頁的特點(diǎn)是，網(wǎng)站由一些固定的網(wǎng)頁文件和圖片文件組成，文件之間通過超級鏈接進(jìn)行跳轉(zhuǎn)。如果要更新網(wǎng)站的內(nèi)容，則需要編輯和更新網(wǎng)頁和圖片。

對SpringBoot來說，建立一個靜態(tài)網(wǎng)站是非常容易的事，下面我們也來實(shí)現(xiàn)一個簡單的靜態(tài)網(wǎng)站吧。

1、確定需求

我們這次的目標(biāo)是實(shí)現(xiàn)一個古詩詞網(wǎng)站，可以顯示下面幾首詩詞：

古詩《靜夜思》
古詩《賦得古原草送別》
古詩《登鸛雀樓》
古詩《憫農(nóng)》
古詞《念奴嬌·赤壁懷古》
古詞《青玉案·元夕》
古詞《滿江紅·怒發(fā)沖冠》
古詞《如夢令·昨夜雨疏風(fēng)驟》

下面詳細(xì)描述程序的開發(fā)過程。

2、打開IDEA，創(chuàng)建一個空的工程，工程名為poems：

3、創(chuàng)建一個SpringBoot模塊，Group輸入com.flying，Artifact和模塊名輸入my_poems，Java版本選擇8，Dependencies選擇Lombok和Spring Web：

4、修改pom.xml文件，加入打包生成jar文件的內(nèi)容。修改后的pom.xml文件為：

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.flying</groupId>
<artifactId>my_poems</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>my_poems</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<finalName>my_poems</finalName>
<plugins>
<!--打包jar-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-jar-plugin</artifactId>
<configuration>
<!--不打包資源文件,exclude的目錄不是src下面的，是以編譯結(jié)果classes為根目錄計(jì)算-->
<excludes>
<exclude>*.properties</exclude>
<exclude>*.txt</exclude>
<exclude>*.xml</exclude>
</excludes>
<archive>
<manifest>
<addClasspath>true</addClasspath>
<!--MANIFEST.MF 中 Class-Path 加入前綴-->
<classpathPrefix>my_poems_lib/</classpathPrefix>
<!--jar包不包含唯一版本標(biāo)識-->
<useUniqueVersions>false</useUniqueVersions>
<!--指定入口類-->
<mainClass>com.flying.my_poems.MyPoemsApplication</mainClass>
</manifest>
<manifestEntries>
<!--MANIFEST.MF 中 Class-Path 加入資源文件目錄-->
<Class-Path>./resources/</Class-Path>
</manifestEntries>
</archive>
<outputDirectory>${project.build.directory}</outputDirectory>
</configuration>
</plugin>
<!--拷貝依賴 copy-dependencies-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<executions>
<execution>
<id>copy-dependencies</id>
<phase>package</phase>
<goals>
<goal>copy-dependencies</goal>
</goals>
<configuration>
<outputDirectory>
${project.build.directory}/my_poems_lib/
</outputDirectory>
</configuration>
</execution>
</executions>
</plugin>
<!--拷貝資源文件 copy-resources-->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>copy-resources</id>
<phase>package</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<resources>
<resource>
<directory>src/main/resources</directory>
</resource>
</resources>
<outputDirectory>${project.build.directory}/resources</outputDirectory>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>

5、在src\main\resources\static目錄中建立poems和lyrics子目錄；

6、在src\main\resources\static目錄中建立index.html文件，內(nèi)容如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中國詩詞網(wǎng)</title>
</head>
<body>
<table border="2">
<tr>
<th>古詩</th>
<th>古詞</th>
</tr>
<tr>
<td><a href="poems/poem1.html">靜夜思</a></td>
<td><a href="lyrics/lyric1.html">念奴嬌·赤壁懷古</a></td>
</tr>
<tr>
<td><a href="poems/poem2.html">賦得古原草送別</a></td>
<td><a href="lyrics/lyric2.html">青玉案·元夕</a></td>
</tr>
<tr>
<td><a href="poems/poem3.html">登鸛雀樓</a></td>
<td><a href="lyrics/lyric3.html">滿江紅·怒發(fā)沖冠</a></td>
</tr>
<tr>
<td><a href="poems/poem4.html">憫農(nóng)</a></td>
<td><a href="lyrics/lyric4.html">如夢令·昨夜雨疏風(fēng)驟</a></td>
</tr>
</table></body>
</html>

7、在src\main\resources\static\poems目錄中建立poem1.html、poem2.html、poem3.html、poem4.html，內(nèi)容分別是：

poem1.html的內(nèi)容是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中國詩詞網(wǎng)</title>
</head>
<body>
<a href="/index.html">返回首頁</a>
<br/>
<br/>
<h1>靜夜思</h1><br/>
李白
<h2>床前明月光，</h2>
<h2>疑是地上霜。</h2>
<h2>舉頭望明月，</h2>
<h2>低頭思故鄉(xiāng)。</h2>
</body>
</html>

poem2.html的內(nèi)容是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中國詩詞網(wǎng)</title>
</head>
<body>
<a href="/index.html">返回首頁</a>
<br/>
<br/>
<h1>賦得古原草送別</h1><br/>
白居易
<h2>離離原上草，一歲一枯榮。</h2>
<h2>野火燒不盡，春風(fēng)吹又生。</h2>
<h2>遠(yuǎn)芳侵古道，晴翠接荒城。</h2>
<h2>又送王孫去，萋萋滿別情。</h2>
</body>
</html>

poem3.html的內(nèi)容是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中國詩詞網(wǎng)</title>
</head>
<body>
<a href="/index.html">返回首頁</a>
<br/>
<br/>
<h1>登鸛雀樓</h1><br/>
王之渙
<h2>白日依山盡，</h2>
<h2>黃河入海流。</h2>
<h2>欲窮千里目，</h2>
<h2>更上一層樓。</h2>
</body>
</html>

poem4.html的內(nèi)容是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中國詩詞網(wǎng)</title>
</head>
<body>
<a href="/index.html">返回首頁</a>
<br/>
<br/>
<h1>憫農(nóng)</h1><br/>
李紳
<h2>鋤禾日當(dāng)午，</h2>
<h2>汗滴禾下土。</h2>
<h2>誰知盤中餐，</h2>
<h2>粒粒皆辛苦？</h2>
</body>

</html>

8、在src\main\resources\static\lyrics目錄中建立lyric1.html、lyric2.html、lyric3.html、lyric4.html，內(nèi)容分別是：

lyric1.html的內(nèi)容是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中國詩詞網(wǎng)</title>
</head>
<body>
<a href="/index.html">返回首頁</a>
<br/>
<br/>
<h1>念奴嬌·赤壁懷古</h1><br/>
蘇軾
<h2>大江東去，</h2>
<h2>浪淘盡，</h2>
<h2>千古風(fēng)流人物。</h2>
<h2>故壘西邊，</h2>
<h2>人道是，</h2>
<h2>三國周郎赤壁。</h2>
<h2>亂石穿空，</h2>
<h2>驚濤拍岸，</h2>
<h2>卷起千堆雪。</h2>
<h2>江山如畫，</h2>
<h2>一時多少豪杰。</h2>
<h2>遙想公瑾當(dāng)年，</h2>
<h2>小喬初嫁了，</h2>
<h2>雄姿英發(fā)。</h2>
<h2>羽扇綸巾，</h2>
<h2>談笑間，</h2>
<h2>檣櫓灰飛煙滅。</h2>
<h2>故國神游，</h2>
<h2>多情應(yīng)笑我，</h2>
<h2>早生華發(fā)。</h2>
</body>
</html>

lyric2.html的內(nèi)容是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中國詩詞網(wǎng)</title>
</head>
<body>
<a href="/index.html">返回首頁</a>
<br/>
<br/>
<h1>青玉案·元夕</h1><br/>
辛棄疾
<h2>東風(fēng)夜放花千樹。</h2>
<h2>更吹落、星如雨。</h2>
<h2>寶馬雕車香滿路。</h2>
<h2>鳳簫聲動，</h2>
<h2>玉壺光轉(zhuǎn)，</h2>
<h2>一夜魚龍舞。</h2>
<h2>蛾兒雪柳黃金縷。</h2>
<h2>笑語盈盈暗香去。</h2>
<h2>眾里尋他千百度。</h2>
<h2>驀然回首，</h2>
<h2>那人卻在，</h2>
<h2>燈火闌珊處。</h2>
</body>
</html>

lyric3.html的內(nèi)容是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中國詩詞網(wǎng)</title>
</head>
<body>
<a href="/index.html">返回首頁</a>
<br/>
<br/>
<h1>滿江紅</h1><br/>
岳飛
<h2>怒發(fā)沖冠，</h2>
<h2>憑欄處、瀟瀟雨歇。</h2>
<h2>抬望眼、仰天長嘯，</h2>
<h2>壯懷激烈。</h2>
<h2>三十功名塵與土，</h2>
<h2>八千里路云和月。</h2>
<h2>莫等閑、白了少年頭，</h2>
<h2>空悲切。</h2>
</body>
</html>

lyric4.html的內(nèi)容是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中國詩詞網(wǎng)</title>
</head>
<body>
<a href="/index.html">返回首頁</a>
<br/>
<br/>
<h1>如夢令</h1><br/>
李清照
<h2>昨夜雨疏風(fēng)驟，</h2>
<h2>濃睡不消殘酒。</h2>
<h2>試問卷簾人，</h2>
<h2>卻道海棠依舊。</h2>
<h2>知否，知否？</h2>
<h2>應(yīng)是綠肥紅瘦。</h2>
</body>
</html>

9、修改application.properties文件，增加服務(wù)器的監(jiān)聽端口配置，假如我們配置為9000：

server.port=9000

10、打開IDEA的Terminal窗口，輸入mvn clean package -DskipTests命令，執(zhí)行情況如下：

11、使用文件傳輸工具，將生成的target目錄中的resources、my_poems_lib、my_poems.jar傳輸?shù)絃inux服務(wù)器（在Windows環(huán)境下也可以運(yùn)行的哈，只是我比較喜歡Linux環(huán)境一些）：

12、在服務(wù)器上執(zhí)行java -jar my_poems.jar命令，啟動web服務(wù)器程序：

13、在瀏覽器的地址欄輸入 http://<服務(wù)器IP地址>:9000/index.html，即可看到：

14、點(diǎn)擊自己喜歡的某首詩詞——例如《登鸛雀樓》，即可看到該古詩：

文章到這里就寫完了，謝謝你的閱讀。

在線咨詢

上一篇：畫個圈就能知道你得了啥病？請完成這項(xiàng)畫圖測試
下一篇：HTML格式化標(biāo)記

您的項(xiàng)目需求

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

整合營銷服務(wù)商