简单粗暴，详细得不要不要的 JavaWeb快速入门

段时间博主也接触了一些事情，感觉有必要专门把JSP的基础拿出来说明一下，因为还是很多人和我说看不懂。

其实写博文真的是挺有挑战性的一件事情，如何把知识点用通俗易懂的语言来表述出来呢?这真的是不太容易的。

首先，写教程需要大量的时间成本，我之前学习JavaWeb的时候，网上搜到的大部分博客，真心话我看不懂。因为那时候的水平太菜了，看视频又嫌太慢。

当时我还喜欢抱怨，说网上那些大牛明明水平很高，可为什么都不肯用大白话把技术点给讲出来呢？当时我记得，遇到问题上网随便一搜，看到的大部分文章，都是代码一贴就完了。最多就是在文章最后写一行字说明一下。

这对当时小白的我真的是心累，而且，我往往看了很多博客，发现里面的代码都是一样的。这个时候就挺郁闷了。

博客精简一些自然有精简的好处，可是那主要是对于有好几年工作经验的程序员而言的，对新手来说，无疑增加了阅读的难度。

那时候我总想着，要是有一个真正意义上的，完全面向初学者的博客系列就好了，而不是代码一贴，你们自己去意会吧。

好在博主终于度过了那个难熬的阶段，然后某一天发现了简书这么好的互联网产品，凭着一点激情和冲动，还有一丝丝天真，开始写我的第一篇博客。

写了之后才发现，写教程不难，可是要写出那种通俗易懂的教程是非常耗时间的，有的时候，我感觉知识点就应该是这样的，可是为了让新人容易理解，我不得不花时间去组织语言和编写案例。

好几次我都想退出简书不写了，因为写教程真的很累。可是看到自己写的文章阅读量越来越多，而且大部分看我文章的人都是处于迷茫期的朋友。

我仿佛看到了当年，刚走出校门的我自己。

于是，我决定继续写下去，只是更新的话，不可能像之前有段时间那样，仿佛打了鸡血似地一天一更了。不过我还是尽量保证每周一到两更，当然，断更也是有可能的。（额，我感觉自己有点轻微的洁癖，我竟然总是忍不住要区分 的，地，得 ）

当然，不管怎样，那个文章发布系统我肯定会坚持写完的，毕竟做出了承诺。

好的，本系列对JSP，以及如何建立JavaWeb工程做一个讲解，如果你在收看《文章发布系统》系列，而且基础相对有些薄弱的话，也许这个系列可以帮到你。

这也算是《文章发布系统》系列的一个小分支，我会尽快写完，为什么要写呢？因为我发觉看我文章的大部分人还是初学者，有的甚至连web项目是啥都不知道，于是，我感觉有必要把基础的东西做一个总结。

1. 实验环境准备

（假设你已经装好了jdk，如果不会安装jdk，请参考这篇文章）

1.1 安装一个eclipse或者MyEclipse（本文以eclipse为例），其实所谓的安装就是网上去下载一个eclipse，然后解压一下就好了。

1.2安装tomcat，网上下载一个，然后解压一下。我这次使用的tomcat容器配的是8080端口。

1.3 将tomcat配置到eclipse中。具体步骤为：Window -- Preferences -- Server -- Runtime Environment -- Add 将tomcat解压后的路径配置上去就行了。

本文假设读者已经对tomcat，eclipse有一定的了解。

2. 新建web项目

首先，一言不合就打开eclipse

我们新建一个项目，File -- new -- Dynamic Web Project。

项目名称是web，点击Next

build\classes是默认的编译目录，还是点击Next

好的，最后点击Finish，一个web项目就建立好了。

目录结构

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

JavaWeb项目就是一个应用程序，你不要以为它有多么神秘。你每天打开的QQ就一个应用程序，你在手机上打开的微信，百度地图等等，这些都是应用程序。

不同的是，QQ是一个本地客户端程序，它需要你在自己的电脑上安装一个客户端，然后你打开QQ，可以登录，聊天。

QQ肯定也分客户端和服务端，我们电脑上装的就是客户端，你要知道的一点是，我们发送消息，发送到哪里去了呢？

没错，肯定是发送到QQ的服务器上了，那里保存着我们的所有数据。

想想也不可能在本地，因为我们在电脑上发送的消息，在手机QQ上不是也能看到吗？这就说明，肯定是上传到它的服务器然后保存下来了。

而Web项目是什么呢？

它也是一个应用程序，只不过它的客户端是运行在浏览器上的。

我们打开浏览器，访问一个地址，比如 https://mp.toutiao.com

这个就是我们的访问路径，我们通过这个URL向简书的服务器提交请求，然后服务器进行处理，给你回应。

接下来，我们就看到出来一个网页。

我们在这个网页上可以写文章，点赞，收藏，等等。

我们的每一步操作，其实都和服务器做了一个交互。

比如一个登录功能，当我们鼠标点击那个登录按钮，浏览器就向服务器提交了一个请求，服务器进行处理，然后操作数据库。最终，它会得出一个结果，就是说，到底能不能让你登录，总会有个说法。

如果你密码写错了，它可能就会得出一个用户名或密码错误的结论。然后，这个信息会从服务器返回到前台，前台就是浏览器。

所谓的前台就是你的浏览器，没什么神秘的。

前台接受到后台传过来的信息后，进行一些处理，然后给你个提示，比如，告诉你用户名或密码错误。

这就是一个完整的交互过程。

现在随着网速越来越好，浏览器的性能越来越强大，我想web肯定是未来的大趋势。毕竟，谁都不希望在电脑上安装一大堆客户端吧。

只用一个浏览器多好。

有了web，我只需要有一个浏览器，然后就能通过互联网获取我想要的资源了。这样不是很美妙吗？

近几年H5非常流行，尤其是移动端，因为手机浏览器基本上都支持css3。一样的道理，我们肯定也不希望在手机上安装一大堆应用，卡都卡死了，如果能直接访问一个网页，就能获得我想要的服务就好了。

而且现在WIFI也普遍了，如果以后流量能没有限制，那么APP的热度很可能会逐渐被web取代。

当然，现在是不太可能的，毕竟访问网页要流量啊，而我在手机上安装了APP，就好像电脑的QQ一样，大部分资源文件就在我本地，我不需要每次都去联网下载。比如图片，app就没事，因为就在本地，可是如果用web，我每次访问那个网页，就需要把图片重新下载一遍。这样不是很浪费流量吗？

3. 手工搭建web项目

现在，为了说明服务器和web项目的概念，我们先不用eclipse，来手工搭建一个web项目。

服务器，正常情况下就是一台配置高一点的电脑，除非是那种大型的专用服务器。

一般来说，所谓的服务器，就是电脑。

比如我现在有一台电脑，给他装了一个linux系统或者windos系统，然后我说，好了，从今以后，这就是服务器了。现在服务器一般都是用linux系统的。

那么tomcat又是什么？

tomcat其实也是一个应用程序，你网上下载的tomcat往往是一个压缩包，然后我们解压以后就相当于安装好了。

可以这么理解：

服务器就是一台电脑，而tomcat是一个容器，专门存放web项目的容器。

以下我都将tomcat称为tomcat容器。

我们看到在tomcat容器根目录下，有一个webapps文件夹

里面是这样的：

好的，现在我要发布一个项目了，我只需要把一个已经做好的web项目往里面一丢就行了。

除了webapps，我们还发现一个bin目录。一般来说，可执行的文件都放在bin目录下。

打开bin，找到一个startup.bat文件。这就是启动tomcat的东西，双击它，tomcat就被启动了。

然后，浏览器可以访问tomcat里面的项目。

现在我们来手工搭建一个web项目，首先，在webapps目录下新建一个文件夹，是的，就是文件夹，不管你项目是什么，肯定还是放在文件夹里面的。

项目名称就叫做webapp。

打开webapp，根据web项目的规范，我们需要有一个WEB-INF文件夹。

然后，在WEB-INF文件夹里面，必须要有一个web.xml文件。

xml文件，就是一个描述性的文件，我现在的观点如下：

XML = JavaBean = Json = HashMap

它无非就是描述一些东西，保存一些数据而已。

好的，我们在里面新建一个web.xml。这个文件非常重要，正因为它的存在，tomcat容器才会知道这个文件夹里面竟然是一个web项目。

否则，tomcat容器是不知道这个web项目的，它只会将myapp文件夹看做是一个文件夹而已。

我们用记事本打开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>
</web-app>

<?xml version="1.0" encoding="UTF-8"?>表示这是一个1.0版本的XML文件，编码为UTF-8。

<web-app></web-app>就是这个XML文件的一个根节点，就是告诉你，我这个xml文件里面，有一个东西叫做web-app。

XML的一个作用就是配置文件，web.xml本身就是一个配置文件。在web项目中，我们应用xml最多的也就是配置一些参数。

配置参数，就是给属性赋值嘛，没什么神秘的。

包括我们学习JavaSE，归根到底，一直在做的一件事就是new对象，然后调用方法，调用方法的目的一方面是做一些事情，另一方面不还是给属性赋值嘛。

你可以把web.xml看做是一个java类，类名叫做 webApp。它里面有两个属性，分别是display-name和welcome-file-list。

display-name是发布名称，也就是项目的名字。

welcome-file-list 是欢迎页面，就是说，当你在浏览器直接访问这个myapp项目，默认跳转的页面。

想象一下，应该会变得非常好理解。

XML就是一个数据描述语言，我们通过web.xml描述这个项目的构成和配置。

好的，接下来，我们是不是要给他一个欢迎页啊。嗯，我们在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指令，如果你用面向对象的思维来看待这个玩意，就是new了一个page对象，并且给它里面的language，contentType，charset，pageEncoding属性分别赋了值。

language表示JSP页面所用的语言，默认是java，其实你写不写都没有关系，因为目前来说JSP它只支持Java。

我们来试一下，现在我们把language属性去掉。就变成了这样：

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

contentType="text/html; charset=UTF-8"：设置页面的内容是文本或者html页面，字符设置为UTT-8。

pageEncoding="UTF-8"：页面编码设置为UTF-8。

好的，现在我们在bin目录，双击运行startup.bat

启动完毕。

打开浏览器，在地址栏输入http://localhost:8080/myapp/

回车

哇，是不是出来了。

太棒了。

这就是手工搭建一个web项目的过程。

只要你符合web项目的规范，包括文件夹的名字，文件的名字，就会被tomcat容器识别为一个web项目。

接下来，我们来写服务器代码。

在WEB-INF下面新建一个文件夹，名字叫做classes，这个也是规范，就叫这个名字，否则tomcat容器识别不了。

里面在创建一个java文件，名字就叫Hello吧

用记事本打开，将下面的代码拷贝进去。

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("已经进入服务器...");
 }
}

这是一个比较简单的HttpServlet 程序，说到servlet，他的意思就是服务器小程序。

原来，在英文中，但凡是let结尾的单词，都有微小的意思。比如servlet，server是服务器，let结尾，那么就是服务器小程序。

servlet是Server Applet的缩写，我们再来看Applet，app是应用程序，又是let结尾，所以应该就是小的应用程序。

这个就是所谓的英文词根，也是学英语的一个窍门。类似的例子还有很多，比如d开头的单词，大部分都有往下，分开，分散的意思。反正就是有一种往下，或者分发出去的韵味。

为了验证这个事情，我们打开有道词典随便找几个看看。

**distribution **

哦，对的，分配，配送，分发。这不就是有分散，分出去的韵味吗？

determine

确定，下决心。这不就是把什么什么东西定下来，定下来，不也是往下吗？

所以，得出一个结论，d开头的单词，而且，第二个字母必须是元音字母，比如de，di等。那么，这一类单词的情感色彩就有一种往下，或者分发出去的韵味。

再来说说servlet，let结尾都代表这个单词是一个小型的东西，比如

piglet 小猪

starlet 小星星

再比如，psy开头的单词，情感色彩就是偏向于精神和心理学方面的，

Paste_Image.png

psychology 心理学

还有

这下子应该比较好理解了吧，所以它为什么叫servlet，也是有原因的。

继续，我们用命令行的方式将java文件编译成class文件。

在编译之前，我们先去tomcat容器的lib目录找一个jar：

找到servlet-api.jar,复制一份，拷贝到classes目录下。

然后，我们在该classes目录下，按住shift，鼠标右键，选择在此处打开命令行窗口。

输入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

发现网页上一片空白，回顾我们的servlet程序，按理说控制台会打印一句话的

Paste_Image.png

看看控制台：

果然如此。

你应该也已经发现了，我们手工搭建web项目的话，是不是很麻烦呀？所以，这也是为什么我们现在都用eclipse，或者MyEclipse来开发项目了。

这些IDE工具就是为了解决手工编译的麻烦而出现的。

一篇我们介绍了如何解析CSV和JSON数据：如何解析互联网数据：CSV和JSON篇，今天我们将介绍如何解析HTML和XML数据。

今天的介绍能够帮助你轻而易举地从网页中（比如下面的中航电子的2017年一季度交易数据）提取自己想要的数据：

准备

在Python中可以解析html和xml数据的软件包很多，今天我们介绍的是lxml，先安装：

$ pip install lxml

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

解析HTML数据

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

标签／tag：比如<html>, <h1>, <head>...一般成对出现，例如开始标签<html>和结束标签</html>
元素／element：开始标签到结束标签整段代码，标签对之间的即为内容(content)
属性／attribute：标签可拥有key=value形式的属性，比如<div class="header">...</div>

简单地理解，HTML网页就是由一组元素构成的一个集合。另外，大多数HTML标签是可以嵌套的，因此元素可以包含一系列子元素。有了这些概念做基础，我们将能够很容易理解软件包lxml的使用。实际上，在lxml里面，每个HTML元素对应一个lxml.html.HtmlElement对象，该对象提供一组标准的方法取访问包含在该元素内部的数据，比如属性、内容和子元素等。

例子

考察下面的链接，它提供中航电子在2017年第一季度的交易数据，我们打算从里面提取一些数据：

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

先把该网页爬取下来：

>>> import urllib2

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

>>> print rsp[0:15]

<!DOCTYPE html>

将字符串rsp转换成HtmlElement对象：

>>> from lxml import html

>>> doc = html.document_fromstring(rsp)

>>> type(doc)

>>> doc.tag

'html'

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

比如，如果你想提取该网页里面所有的链接(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'

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

>>> doc.getchildren()

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

对嵌套很深的元素，如果熟悉xpath表达式，最直接的办法是调用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等方法查找目标元素，比如：

>>> [ 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年第一季度的数据：

输出效果：

(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

解析xml数据

xml的格式和HTML类似，也是由标签构成的，但是要比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

第一步是获取根节点：

>>> root = etree.fromstring(xmlstr)

>>> root.tag

'target'

如果要提取节点属性：

>>> root.items()

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

>>> root.keys()

['name', 'depends'

>>> root.get("name")

'run'

>>> root.values()

['run', 'jar']

可以使用find, xpath等方法去获取和查找子节点：

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

>>> java.tag

'java'

>>> java.keys()

['fork', 'classname']

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

['classpath', 'application']

lxml软件的功能很强大，如果有兴趣进一步了解，可以查看官方文档：

http://lxml.de/index.html

今天就写这么，欢迎大家留言、评论和关注。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 </head>
<body>
 <input type="text" id="a"/> 
 <input type="button" value="保存cookie" onclick="test()"/> 
 <input type="button" value="获取cookie" onclick="alert(getCookie('userName'))"/> 
 </body>
<script language=javascript> 

window.onload=function(){
 document.getElementById("a").value=getCookie('userName');
}
function test()
{
	var a = document.getElementById('a').value;
 SetCookie('userName',a)
}
 //获得coolie 的值
function cookie(name){ 
 var cookieArray=document.cookie.split("; "); //得到分割的cookie名值对 
 var cookie=new Object(); 
 for (var i=0;i<cookieArray.length;i++){ 
 var arr=cookieArray[i].split("="); //将名和值分开 
 if(arr[0]==name)return unescape(arr[1]); //如果是指定的cookie，则返回它的值 
 } 
 return ""; 
} 

function delCookie(name)//删除cookie
{
 document.cookie = name+"=;expires="+(new Date(0)).toGMTString();
}

function getCookie(objName){//获取指定名称的cookie的值
 var arrStr = document.cookie.split("; ");
 for(var i = 0;i < arrStr.length;i ++){
 var temp = arrStr[i].split("=");
 if(temp[0] == objName) return unescape(temp[1]);
 } 
}

function addCookie(objName,objValue,objHours){ //添加cookie
 var str = objName + "=" + escape(objValue);
 if(objHours > 0){ //为时不设定过期时间，浏览器关闭时cookie自动消失
 var date = new Date();
 var ms = objHours*3600*1000;
 date.setTime(date.getTime() + ms);
 str += "; expires=" + date.toGMTString();
 }
 document.cookie = str;
}

function SetCookie(name,value)//两个参数，一个是cookie的名子，一个是值
{
 var Days = 30; //此 cookie 将被保存 30 天
 var exp = new Date(); //new Date("December 31, 9998");
 exp.setTime(exp.getTime() + Days*24*60*60*1000);
 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function getCookie(name)//取cookies函数 
{
 var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
 if(arr != null) return unescape(arr[2]); return null;
}

function delCookie(name)//删除cookie
{
 var exp = new Date();
 exp.setTime(exp.getTime() - 1);
 var cval=getCookie(name);
 if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
</script>
</html>

在线咨询

上一篇：代码有多难？啥是HTML?
下一篇：1分钟，彻底弄懂浏览器缓存策略

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

简单粗暴，详细得不要不要的 JavaWeb快速入门

1. 实验环境准备

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

3. 手工搭建web项目

您的项目需求