段時間博主也接觸了一些事情，感覺有必要專門把JSP的基礎(chǔ)拿出來說明一下，因為還是很多人和我說看不懂。

其實寫博文真的是挺有挑戰(zhàn)性的一件事情，如何把知識點用通俗易懂的語言來表述出來呢?這真的是不太容易的。

首先，寫教程需要大量的時間成本，我之前學(xué)習(xí)JavaWeb的時候，網(wǎng)上搜到的大部分博客，真心話我看不懂。因為那時候的水平太菜了，看視頻又嫌太慢。

當(dāng)時我還喜歡抱怨，說網(wǎng)上那些大牛明明水平很高，可為什么都不肯用大白話把技術(shù)點給講出來呢？當(dāng)時我記得，遇到問題上網(wǎng)隨便一搜，看到的大部分文章，都是代碼一貼就完了。最多就是在文章最后寫一行字說明一下。

這對當(dāng)時小白的我真的是心累，而且，我往往看了很多博客，發(fā)現(xiàn)里面的代碼都是一樣的。這個時候就挺郁悶了。

博客精簡一些自然有精簡的好處，可是那主要是對于有好幾年工作經(jīng)驗的程序員而言的，對新手來說，無疑增加了閱讀的難度。

那時候我總想著，要是有一個真正意義上的，完全面向初學(xué)者的博客系列就好了，而不是代碼一貼，你們自己去意會吧。

好在博主終于度過了那個難熬的階段，然后某一天發(fā)現(xiàn)了簡書這么好的互聯(lián)網(wǎng)產(chǎn)品，憑著一點激情和沖動，還有一絲絲天真，開始寫我的第一篇博客。

寫了之后才發(fā)現(xiàn)，寫教程不難，可是要寫出那種通俗易懂的教程是非常耗時間的，有的時候，我感覺知識點就應(yīng)該是這樣的，可是為了讓新人容易理解，我不得不花時間去組織語言和編寫案例。

好幾次我都想退出簡書不寫了，因為寫教程真的很累。可是看到自己寫的文章閱讀量越來越多，而且大部分看我文章的人都是處于迷茫期的朋友。

我仿佛看到了當(dāng)年，剛走出校門的我自己。

于是，我決定繼續(xù)寫下去，只是更新的話，不可能像之前有段時間那樣，仿佛打了雞血似地一天一更了。不過我還是盡量保證每周一到兩更，當(dāng)然，斷更也是有可能的。（額，我感覺自己有點輕微的潔癖，我竟然總是忍不住要區(qū)分 的，地，得 ）

當(dāng)然，不管怎樣，那個文章發(fā)布系統(tǒng)我肯定會堅持寫完的，畢竟做出了承諾。

好的，本系列對JSP，以及如何建立JavaWeb工程做一個講解，如果你在收看《文章發(fā)布系統(tǒng)》系列，而且基礎(chǔ)相對有些薄弱的話，也許這個系列可以幫到你。

這也算是《文章發(fā)布系統(tǒng)》系列的一個小分支，我會盡快寫完，為什么要寫呢？因為我發(fā)覺看我文章的大部分人還是初學(xué)者，有的甚至連web項目是啥都不知道，于是，我感覺有必要把基礎(chǔ)的東西做一個總結(jié)。

1. 實驗環(huán)境準(zhǔn)備

（假設(shè)你已經(jīng)裝好了jdk，如果不會安裝jdk，請參考這篇文章）

1.1 安裝一個eclipse或者M(jìn)yEclipse（本文以eclipse為例），其實所謂的安裝就是網(wǎng)上去下載一個eclipse，然后解壓一下就好了。

1.2安裝tomcat，網(wǎng)上下載一個，然后解壓一下。我這次使用的tomcat容器配的是8080端口。

1.3 將tomcat配置到eclipse中。具體步驟為：Window -- Preferences -- Server -- Runtime Environment -- Add 將tomcat解壓后的路徑配置上去就行了。

本文假設(shè)讀者已經(jīng)對tomcat，eclipse有一定的了解。

2. 新建web項目

首先，一言不合就打開eclipse

我們新建一個項目，F(xiàn)ile -- new -- Dynamic Web Project。

項目名稱是web，點擊Next

build\classes是默認(rèn)的編譯目錄，還是點擊Next

好的，最后點擊Finish，一個web項目就建立好了。

目錄結(jié)構(gòu)

2.啥叫JavaWeb項目，它能干嘛？

JavaWeb項目就是一個應(yīng)用程序，你不要以為它有多么神秘。你每天打開的QQ就一個應(yīng)用程序，你在手機(jī)上打開的微信，百度地圖等等，這些都是應(yīng)用程序。

不同的是，QQ是一個本地客戶端程序，它需要你在自己的電腦上安裝一個客戶端，然后你打開QQ，可以登錄，聊天。

QQ肯定也分客戶端和服務(wù)端，我們電腦上裝的就是客戶端，你要知道的一點是，我們發(fā)送消息，發(fā)送到哪里去了呢？

沒錯，肯定是發(fā)送到QQ的服務(wù)器上了，那里保存著我們的所有數(shù)據(jù)。

想想也不可能在本地，因為我們在電腦上發(fā)送的消息，在手機(jī)QQ上不是也能看到嗎？這就說明，肯定是上傳到它的服務(wù)器然后保存下來了。

而Web項目是什么呢？

它也是一個應(yīng)用程序，只不過它的客戶端是運行在瀏覽器上的。

我們打開瀏覽器，訪問一個地址，比如 https://mp.toutiao.com

這個就是我們的訪問路徑，我們通過這個URL向簡書的服務(wù)器提交請求，然后服務(wù)器進(jìn)行處理，給你回應(yīng)。

接下來，我們就看到出來一個網(wǎng)頁。

我們在這個網(wǎng)頁上可以寫文章，點贊，收藏，等等。

我們的每一步操作，其實都和服務(wù)器做了一個交互。

比如一個登錄功能，當(dāng)我們鼠標(biāo)點擊那個登錄按鈕，瀏覽器就向服務(wù)器提交了一個請求，服務(wù)器進(jìn)行處理，然后操作數(shù)據(jù)庫。最終，它會得出一個結(jié)果，就是說，到底能不能讓你登錄，總會有個說法。

如果你密碼寫錯了，它可能就會得出一個用戶名或密碼錯誤的結(jié)論。然后，這個信息會從服務(wù)器返回到前臺，前臺就是瀏覽器。

所謂的前臺就是你的瀏覽器，沒什么神秘的。

前臺接受到后臺傳過來的信息后，進(jìn)行一些處理，然后給你個提示，比如，告訴你用戶名或密碼錯誤。

這就是一個完整的交互過程。

現(xiàn)在隨著網(wǎng)速越來越好，瀏覽器的性能越來越強(qiáng)大，我想web肯定是未來的大趨勢。畢竟，誰都不希望在電腦上安裝一大堆客戶端吧。

只用一個瀏覽器多好。

有了web，我只需要有一個瀏覽器，然后就能通過互聯(lián)網(wǎng)獲取我想要的資源了。這樣不是很美妙嗎？

近幾年H5非常流行，尤其是移動端，因為手機(jī)瀏覽器基本上都支持css3。一樣的道理，我們肯定也不希望在手機(jī)上安裝一大堆應(yīng)用，卡都卡死了，如果能直接訪問一個網(wǎng)頁，就能獲得我想要的服務(wù)就好了。

而且現(xiàn)在WIFI也普遍了，如果以后流量能沒有限制，那么APP的熱度很可能會逐漸被web取代。

當(dāng)然，現(xiàn)在是不太可能的，畢竟訪問網(wǎng)頁要流量啊，而我在手機(jī)上安裝了APP，就好像電腦的QQ一樣，大部分資源文件就在我本地，我不需要每次都去聯(lián)網(wǎng)下載。比如圖片，app就沒事，因為就在本地，可是如果用web，我每次訪問那個網(wǎng)頁，就需要把圖片重新下載一遍。這樣不是很浪費流量嗎？

3. 手工搭建web項目

現(xiàn)在，為了說明服務(wù)器和web項目的概念，我們先不用eclipse，來手工搭建一個web項目。

服務(wù)器，正常情況下就是一臺配置高一點的電腦，除非是那種大型的專用服務(wù)器。

一般來說，所謂的服務(wù)器，就是電腦。

比如我現(xiàn)在有一臺電腦，給他裝了一個linux系統(tǒng)或者windos系統(tǒng)，然后我說，好了，從今以后，這就是服務(wù)器了。現(xiàn)在服務(wù)器一般都是用linux系統(tǒng)的。

那么tomcat又是什么？

tomcat其實也是一個應(yīng)用程序，你網(wǎng)上下載的tomcat往往是一個壓縮包，然后我們解壓以后就相當(dāng)于安裝好了。

可以這么理解：

服務(wù)器就是一臺電腦，而tomcat是一個容器，專門存放web項目的容器。

以下我都將tomcat稱為tomcat容器。

我們看到在tomcat容器根目錄下，有一個webapps文件夾

里面是這樣的：

好的，現(xiàn)在我要發(fā)布一個項目了，我只需要把一個已經(jīng)做好的web項目往里面一丟就行了。

除了webapps，我們還發(fā)現(xiàn)一個bin目錄。一般來說，可執(zhí)行的文件都放在bin目錄下。

打開bin，找到一個startup.bat文件。這就是啟動tomcat的東西，雙擊它，tomcat就被啟動了。

然后，瀏覽器可以訪問tomcat里面的項目。

現(xiàn)在我們來手工搭建一個web項目，首先，在webapps目錄下新建一個文件夾，是的，就是文件夾，不管你項目是什么，肯定還是放在文件夾里面的。

項目名稱就叫做webapp。

打開webapp，根據(jù)web項目的規(guī)范，我們需要有一個WEB-INF文件夾。

然后，在WEB-INF文件夾里面，必須要有一個web.xml文件。

xml文件，就是一個描述性的文件，我現(xiàn)在的觀點如下：

XML = JavaBean = Json = HashMap

它無非就是描述一些東西，保存一些數(shù)據(jù)而已。

好的，我們在里面新建一個web.xml。這個文件非常重要，正因為它的存在，tomcat容器才會知道這個文件夾里面竟然是一個web項目。

否則，tomcat容器是不知道這個web項目的，它只會將myapp文件夾看做是一個文件夾而已。

我們用記事本打開web.xml，將以下代碼拷貝進(jìn)去。

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
 <display-name>web</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <welcome-file>index.jsp</welcome-file>
 <welcome-file>default.html</welcome-file>
 <welcome-file>default.htm</welcome-file>
 <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
</web-app>

<?xml version="1.0" encoding="UTF-8"?>表示這是一個1.0版本的XML文件，編碼為UTF-8。

<web-app></web-app>就是這個XML文件的一個根節(jié)點，就是告訴你，我這個xml文件里面，有一個東西叫做web-app。

XML的一個作用就是配置文件，web.xml本身就是一個配置文件。在web項目中，我們應(yīng)用xml最多的也就是配置一些參數(shù)。

配置參數(shù)，就是給屬性賦值嘛，沒什么神秘的。

包括我們學(xué)習(xí)JavaSE，歸根到底，一直在做的一件事就是new對象，然后調(diào)用方法，調(diào)用方法的目的一方面是做一些事情，另一方面不還是給屬性賦值嘛。

你可以把web.xml看做是一個java類，類名叫做 webApp。它里面有兩個屬性，分別是display-name和welcome-file-list。

display-name是發(fā)布名稱，也就是項目的名字。

welcome-file-list 是歡迎頁面，就是說，當(dāng)你在瀏覽器直接訪問這個myapp項目，默認(rèn)跳轉(zhuǎn)的頁面。

想象一下，應(yīng)該會變得非常好理解。

XML就是一個數(shù)據(jù)描述語言，我們通過web.xml描述這個項目的構(gòu)成和配置。

好的，接下來，我們是不是要給他一個歡迎頁啊。嗯，我們在webapp目錄下添加一個簡單的歡迎頁，里面就打印一個HelloWorld。

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h1>Hello World!</h1>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

這是一條JSP的page指令，如果你用面向?qū)ο蟮乃季S來看待這個玩意，就是new了一個page對象，并且給它里面的language，contentType，charset，pageEncoding屬性分別賦了值。

language表示JSP頁面所用的語言，默認(rèn)是java，其實你寫不寫都沒有關(guān)系，因為目前來說JSP它只支持Java。

我們來試一下，現(xiàn)在我們把language屬性去掉。就變成了這樣：

<%@ page contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>

contentType="text/html; charset=UTF-8"：設(shè)置頁面的內(nèi)容是文本或者h(yuǎn)tml頁面，字符設(shè)置為UTT-8。

pageEncoding="UTF-8"：頁面編碼設(shè)置為UTF-8。

好的，現(xiàn)在我們在bin目錄，雙擊運行startup.bat

啟動完畢。

打開瀏覽器，在地址欄輸入http://localhost:8080/myapp/

回車

哇，是不是出來了。

太棒了。

這就是手工搭建一個web項目的過程。

只要你符合web項目的規(guī)范，包括文件夾的名字，文件的名字，就會被tomcat容器識別為一個web項目。

接下來，我們來寫服務(wù)器代碼。

在WEB-INF下面新建一個文件夾，名字叫做classes，這個也是規(guī)范，就叫這個名字，否則tomcat容器識別不了。

里面在創(chuàng)建一個java文件，名字就叫Hello吧

用記事本打開，將下面的代碼拷貝進(jìn)去。

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Hello extends HttpServlet {
 
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 doPost(request,response);
 }
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 System.out.println("已經(jīng)進(jìn)入服務(wù)器...");
 }
}

這是一個比較簡單的HttpServlet 程序，說到servlet，他的意思就是服務(wù)器小程序。

原來，在英文中，但凡是let結(jié)尾的單詞，都有微小的意思。比如servlet，server是服務(wù)器，let結(jié)尾，那么就是服務(wù)器小程序。

servlet是Server Applet的縮寫，我們再來看Applet，app是應(yīng)用程序，又是let結(jié)尾，所以應(yīng)該就是小的應(yīng)用程序。

這個就是所謂的英文詞根，也是學(xué)英語的一個竅門。類似的例子還有很多，比如d開頭的單詞，大部分都有往下，分開，分散的意思。反正就是有一種往下，或者分發(fā)出去的韻味。

為了驗證這個事情，我們打開有道詞典隨便找?guī)讉€看看。

**distribution **

哦，對的，分配，配送，分發(fā)。這 不就是有分散，分出去的韻味嗎？

determine

確定，下決心。這不就是把什么什么東西定下來，定下來，不也是往下嗎？

所以，得出一個結(jié)論，d開頭的單詞，而且，第二個字母必須是元音字母，比如de，di等。那么，這一類單詞的情感色彩就有一種往下，或者分發(fā)出去的韻味。

再來說說servlet，let結(jié)尾都代表這個單詞是一個小型的東西，比如

piglet 小豬

starlet 小星星

再比如，psy開頭的單詞，情感色彩就是偏向于精神和心理學(xué)方面的，

Paste_Image.png

psychology 心理學(xué)

還有

這下子應(yīng)該比較好理解了吧，所以它為什么叫servlet，也是有原因的。

繼續(xù)，我們用命令行的方式將java文件編譯成class文件。

在編譯之前，我們先去tomcat容器的lib目錄找一個jar：

找到servlet-api.jar,復(fù)制一份，拷貝到classes目錄下。

然后，我們在該classes目錄下，按住shift，鼠標(biāo)右鍵，選擇在此處打開命令行窗口。

輸入javac -classpath servlet-api.jar Hello.java

class文件就出來了

再次打開web.xml，我們還需要把這個servlet配上去，不然tomcat怎么知道這個servlet需要加入我們的web項目呢？

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
 <display-name>web</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <welcome-file>index.jsp</welcome-file>
 <welcome-file>default.html</welcome-file>
 <welcome-file>default.htm</welcome-file>
 <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
 <servlet>
 <servlet-name>Hello</servlet-name>
 <servlet-class>Hello</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>Hello</servlet-name>
 <url-pattern>/hello</url-pattern>
 </servlet-mapping>
</web-app>

雙擊startup.bat，啟動tomcat容器

然后，在瀏覽器的地址欄輸入http://localhost:8080/myapp/hello

發(fā)現(xiàn)網(wǎng)頁上一片空白，回顧我們的servlet程序，按理說控制臺會打印一句話的

Paste_Image.png

看看控制臺：

果然如此。

你應(yīng)該也已經(jīng)發(fā)現(xiàn)了，我們手工搭建web項目的話，是不是很麻煩呀？所以，這也是為什么我們現(xiàn)在都用eclipse，或者M(jìn)yEclipse來開發(fā)項目了。

這些IDE工具就是為了解決手工編譯的麻煩而出現(xiàn)的。

一篇我們介紹了如何解析CSV和JSON數(shù)據(jù)：如何解析互聯(lián)網(wǎng)數(shù)據(jù)：CSV和JSON篇，今天我們將介紹如何解析HTML和XML數(shù)據(jù)。

今天的介紹能夠幫助你輕而易舉地從網(wǎng)頁中（比如下面的中航電子的2017年一季度交易數(shù)據(jù)）提取自己想要的數(shù)據(jù)：

準(zhǔn)備

在Python中可以解析html和xml數(shù)據(jù)的軟件包很多，今天我們介紹的是lxml，先安裝：

$ pip install lxml

如果不熟悉pip的使用，可以參考另一篇文章：如何管理python軟件包。

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

首先，回顧一下HTML的一些基本概念：

• 標(biāo)簽／tag：比如<html>, <h1>, <head>...一般成對出現(xiàn)，例如開始標(biāo)簽<html>和結(jié)束標(biāo)簽</html>

• 元素／element：開始標(biāo)簽到結(jié)束標(biāo)簽整段代碼，標(biāo)簽對之間的即為內(nèi)容(content)

• 屬性／attribute：標(biāo)簽可擁有key=value形式的屬性，比如<div class="header">...</div>

簡單地理解，HTML網(wǎng)頁就是由一組元素構(gòu)成的一個集合。另外，大多數(shù)HTML標(biāo)簽是可以嵌套的，因此元素可以包含一系列子元素。有了這些概念做基礎(chǔ)，我們將能夠很容易理解軟件包lxml的使用。實際上，在lxml里面，每個HTML元素對應(yīng)一個lxml.html.HtmlElement對象，該對象提供一組標(biāo)準(zhǔn)的方法取訪問包含在該元素內(nèi)部的數(shù)據(jù)，比如屬性、內(nèi)容和子元素等。

例子

考察下面的鏈接，它提供中航電子在2017年第一季度的交易數(shù)據(jù)，我們打算從里面提取一些數(shù)據(jù)：

>>> url = "http://quotes.money.163.com/trade/lsjysj_600372.html?year=2017&season=1"

先把該網(wǎng)頁爬取下來：

>>> import urllib2

>>> rsp = urllib2.urlopen(url).read()

>>> print rsp[0:15]

<!DOCTYPE html>

將字符串rsp轉(zhuǎn)換成HtmlElement對象：

>>> from lxml import html

>>> doc = html.document_fromstring(rsp)

>>> type(doc)

<class 'lxml.html.HtmlElement'>

>>> doc.tag

'html'

所以其實doc就是一個html元素，它包含一些元素，比如head, body, link, div...

比如，如果你想提取該網(wǎng)頁里面所有的鏈接(links)：

>>> links = [ link for link in doc.iterlinks() ]

>>> len(links)

106

>>> links[0]

(<Element link at 0x1029179f0>, 'href', 'http://img1.cache.netease.com/f2e/finance/gegu/s.1064000.css', 0)

>>> links[0][2]

'http://img1.cache.netease.com/f2e/finance/gegu/s.1064000.css'

如果你想查看元素直接包含哪些子元素，可以調(diào)用getchildren()方法：

>>> doc.getchildren()

[<Element head at 0x10299a0a8>, <Element body at 0x10299a470>]

對嵌套很深的元素，如果熟悉xpath表達(dá)式，最直接的辦法是調(diào)用xpath(...)方法：

>>> [ td.text for td in doc.xpath('/html/body/div[2]/div[4]/table/tr[1]/td')]

['2017-03-31', '19.02', '19.50', '19.02', '19.30', '0.36', '1.90', '102,212', '19,747', '2.53', '0.58']

此外，還可以通過find, findall, find_class, get_element_by_id等方法查找目標(biāo)元素，比如：

>>> [ td.text for td in doc.findall('./body/div[2]/div[4]/table/tr[1]/td')]

['2017-03-31', '19.02', '19.50', '19.02', '19.30', '0.36', '1.90', '102,212', '19,747', '2.53', '0.58']

如果元素有屬性，提取屬性值也很方便，比如：

>>> form = doc.forms[0]

>>> form.tag

'form'

>>> form.attrib

{'action': '/trade/lsjysj_600372.html', 'id': 'date'}

>>> form.keys()

['id', 'action']

>>> form.get('action')

'/trade/lsjysj_600372.html'

>>> form.items()

[('id', 'date'), ('action', '/trade/lsjysj_600372.html')]

'>>> form.form_values()

[('year', '2017'), ('season', '1')]

>>> form.method

'GET'

做為一個完整的例子，下面的腳本就是爬取中航電子在2017年第一季度的數(shù)據(jù)：

輸出效果：

(test) $ head -3 600372.csv

日期;開盤價;最高價;最低價;收盤價;漲跌額;漲跌幅(%);成交量(手);成交金額(萬元);振幅(%);換手率(%)

2017-03-31;19.02;19.50;19.02;19.30;0.36;1.90;102,212;19,747;2.53;0.58

2017-03-31;19.02;19.50;19.02;19.30;0.36;1.90;102,212;19,747;2.53;0.58

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

xml的格式和HTML類似，也是由標(biāo)簽構(gòu)成的，但是要比HTML文件簡單許多，看下面的xml文件片段處理：

>>> xmlstr="""\

... <target name="run" depends="jar">

... <java fork="true" classname="${main-class}">

... <classpath>

... <path refid="classpath"/>

... <path refid="application"/>

... </classpath>

... </java>

... </target>"""

>>> from lxml import etree

第一步是獲取根節(jié)點：

>>> root = etree.fromstring(xmlstr)

>>> root.tag

'target'

如果要提取節(jié)點屬性：

>>> root.items()

[('name', 'run'), ('depends', 'jar')]

>>> root.keys()

['name', 'depends'

>>> root.get("name")

'run'

>>> root.values()

['run', 'jar']

可以使用find, xpath等方法去獲取和查找子節(jié)點：

>>> java = root.find("./java")

>>> java.tag

'java'

>>> java.keys()

['fork', 'classname']

>>> [ path.get("refid") for path in root.xpath("http://path")]

['classpath', 'application']

lxml軟件的功能很強(qiáng)大，如果有興趣進(jìn)一步了解，可以查看官方文檔：

http://lxml.de/index.html

今天就寫這么，歡迎大家留言、評論和關(guān)注。