初识JavaWeb(转载)
学习JavaWeb我们需要安装一下的开发环境并配置好:JDK,MyElipse,Tomcat。
怎么安装配置这里我就不具体说了,网上有很多教程。我们赶紧进入正题。
什么是Javaweb项目?
JavaWeb项目就是一个应用程序,你不要以为它有多么神秘。你每天打开的QQ就一个应用程序,你在手机上打开的微信,百度地图等等,这些都是应用程序。
不同的是,QQ是一个本地客户端程序,它需要你在自己的电脑上安装一个客户端,然后你打开QQ,可以登录,聊天。
QQ肯定也分客户端和服务端,我们电脑上装的就是客户端,你要知道的一点是,我们发送消息,发送到哪里去了呢?
没错,肯定是发送到QQ的服务器上了,那里保存着我们的所有数据。
想想也不可能在本地,因为我们在电脑上发送的消息,在手机QQ上不是也能看到吗?这就说明,肯定是上传到它的服务器然后保存下来了。
而Web项目是什么呢?
它也是一个应用程序,只不过它的客户端是运行在浏览器上的。
我们打开浏览器,访问一个地址,比如 http://www.jianshu.com/
这个就是我们的访问路径,我们通过这个URL向简书的服务器提交请求,然后服务器进行处理,给你回应。
接下来,我们就看到出来一个网页。
我们在这个网页上可以写文章,点赞,收藏,等等。
我们的每一步操作,其实都和服务器做了一个交互。
比如一个登录功能,当我们鼠标点击那个登录按钮,浏览器就向服务器提交了一个请求,服务器进行处理,然后操作数据库。最终,它会得出一个结果,就是说,到底能不能让你登录,总会有个说法。
如果你密码写错了,它可能就会得出一个用户名或密码错误的结论。然后,这个信息会从服务器返回到前台,前台就是浏览器。
所谓的前台就是你的浏览器,没什么神秘的。
前台接受到后台传过来的信息后,进行一些处理,然后给你个提示,比如,告诉你用户名或密码错误。
这就是一个完整的交互过程。
现在随着网速越来越好,浏览器的性能越来越强大,我想web肯定是未来的大趋势。毕竟,谁都不希望在电脑上安装一大堆客户端吧。
只用一个浏览器多好。
有了web,我只需要有一个浏览器,然后就能通过互联网获取我想要的资源了。这样不是很美妙吗?
近几年H5非常流行,尤其是移动端,因为手机浏览器基本上都支持css3。一样的道理,我们肯定也不希望在手机上安装一大堆应用,卡都卡死了,如果能直接访问一个网页,就能获得我想要的服务就好了。
而且现在WIFI也普遍了,如果以后流量能没有限制,那么APP的热度很可能会逐渐被web取代。
当然,现在是不太可能的,毕竟访问网页要流量啊,而我在手机上安装了APP,就好像电脑的QQ一样,大部分资源文件就在我本地,我不需要每次都去联网下载。比如图片,app就没事,因为就在本地,可是如果用web,我每次访问那个网页,就需要把图片重新下载一遍。这样不是很浪费流量吗?
下面我们就来搭建一个最简单的Web项目。
现在,为了说明服务器和web项目的概念,我们先不用eclipse,来手工搭建一个web项目。
服务器,正常情况下就是一台配置高一点的电脑,除非是那种大型的专用服务器。
一般来说,所谓的服务器,就是电脑。
比如我现在有一台电脑,给他装了一个linux系统或者windos系统,然后我说,好了,从今以后,这就是服务器了。现在服务器一般都是用linux系统的。
那么tomcat又是什么?
tomcat其实也是一个应用程序,你网上下载的tomcat往往是一个压缩包,然后我们解压以后就相当于安装好了。
可以这么理解:
服务器就是一台电脑,而tomcat是一个容器,专门存放web项目的容器。
以下我都将tomcat称为tomcat容器。
下面是Tomcat的文件目录:
图片.png可以注意到有个文件夹为webapps,我们的项目就是存放在这个文件夹下的。下面我们手动创建一个项目,名字为webapp。
图片.png创建完成之后我们点击进去里面,然后建立一个名字为WEB-INF的文件夹。
WEB-INF简介
WEB-INF是Java的WEB应用的安全目录。所谓安全就是客户端无法访问,只有服务端可以访问的目录。
如果想在页面中直接访问其中的文件,必须通过web.xml文件对要访问的文件进行相应映射才能访问。
接着我们进入WEB-INF文件夹里面,创建一个名字为web.xml的文件。
一般的web工程中都会用到web.xml,web.xml主要用来配置,可以方便的开发web工程。web.xml主要用来配置Filter、Listener、Servlet等。但是要说明的是web.xml并不是必须的,一个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>
</web-app>
然后我们返回到与WEB-INF同一级的目录下,创建一个index.html的文件,这个文件是我们的显示界面。
图片.png把以下的代码写入index.html中:
<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>
接着我们进入到bin文件夹中,找到startup.bat文件(该文件为启动文件;同理,shutdown.bat就为关闭文件),双击。
图片.png 图片.png我们在浏览器当中输入http://localhost:8080/webapp/
图片.png网页就可以呈现出来啦!
这就是手动搭建的web项目。
接下来,我们来写服务器代码。
在WEB-INF下面新建一个文件夹,名字叫做classes,这个也是规范,就叫这个名字,否则tomcat容器识别不了。
Paste_Image.png在里面建立一个文件:
Paste_Image.png把下面的代码粘贴进去:
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 程序。
接下来我们到lib中找一个叫做servlet-api.jar的文件:
Paste_Image.png Paste_Image.png然后粘贴到这里:
然后,我们在该classes目录下,按住shift,鼠标右键,选择在此处打开命令行窗口。
输入javac -classpath servlet-api.jar Hello.java
class文件就出来了
Paste_Image.png再次打开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>
然后我们启动服务器:
发现网页上一片空白,但是tomcat中会显示下面的这句话:
Paste_Image.png