我也是第一次学习JavaWeb的内容,发现很多培训机构的视频教程都是在讲如何用MyEclipse这个商业插件来进行JavaWeb的学习。由于我个人平时工作中的开发都是采用Eclipse,所以我一直有一个习惯,不去随便安装非开源的软件。而且我在Eclipse上下载官方网站,也有针对JavaWeb开发的版本。所以,我个人打算继续使用Eclipse去学习JavaWeb。
1.下载Eclipse for web开发版本
浏览器打开Eclipse官方网站https://www.eclipse.org/downloads/packages/
如果你也是通过Eclipse来学习JavaWeb,那么你就得下载红圈这个Eclipse版本。
2.新建一个Web项目
打开Eclipse, 点击File-> New-> 创建一个动态Web项目
输入一个项目名称,点击New Runtime,我们来配置本地的Tomcat服务器。
这里,我选择Apache Tomcat 8.5, 因为我本地下载的Tomcat版本就是apache-tomcat-8.5.40。
剩下的就点击finish知道项目创建结束。创建好的空白动态web项目如下
3.Eclipse上JavaWeb应用的目录结构
这里我们详细来看看每一个文件夹的作用是什么。我介绍我们用的文件夹,不介绍的就是不是重点,例如Eclipse自动产生的配置文件等。
第一个src文件夹。
我们清楚,我们的java代码都写在这个文件夹下,这里我们来写一个Hello Web的java代码。在src下新建一个com.anthony.demo包,然后新建一个Hello.java
package com.anthony.demo;
public class Hello {
public static void main(String[] args) {
System.out.println("Hello JavaWeb!");
}
}
第二个build文件夹
其实我前面写Hello.java就是为了介绍build的文件夹,这个文件夹有什么作用呢。我们src下全部源码文件编译之后产生的class文件都放这里。例如一个web项目,我们上线,我们只需要把编译之后的class文件部署就行,并不需要源码文件。为什么我们在Project Expoler窗口在build下看不到有class文件呢?我们去另外一个视图就可以看到。
点击Other,输入过滤单词Navi, 打开Navigator窗口。
在Navigator展开build可以看到一个classes文件夹,里面也有和src包结构一样的路径下有对应的class文件。
第三个WebContent文件夹
回到Project Explorer视图,点击展开WebContent文件夹。这个文件夹非常重要,里面主要放一些我们前端写的html, css样式文件和,javascript文件。然后WEB-INF文件夹下的lib文件夹是用来存放我们写代码过程中用到的依赖jar包。例如JDBC, 你要连接mysql数据库,你就要放一个Mysql-connect-xx.jar文件在这里,Web项目自动帮你配置build path,你在src下java文件就可以直接引用相关接口或者对象。
文件夹WebContent下的META-INF文件夹以及里面文件,其实没啥用,我们完全可以不管它。
4.手动发布项目到tomcat
下面来演示创建一个html文件,创建一个css文件和创建一个js文件,然后发布到tomcat服务器,浏览器打开观察访问页面效果。
4.1 创建一个html文件
选择WebContent文件夹,鼠标右键,选择创建一个HTML文件。
这个123.html文件是和WEB-INF处于同一级的目录下。Html内容,我们就写了一个hello在P标签里。
4.2 创建一个css文件
这里我们在WebContent文件夹右键,新建一个文件夹,名称叫css,然后在css文件夹下新建一个test.css文件
我们回到123.html文件,添加引用test.css样式文件,让Hello红色显示。
4.3 创建一个js文件
在WebContent文件夹右键菜单新建一个叫js的文件夹,在js文件夹下新建一个test.js文件
回到123.html文件,添加引用js文件的代码
这里贴一个完整123.html内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/test.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<p>Hello</p>
</body>
</html>
5.手动发布项目到tomcat
5.1 拷贝Eclipse项目下WebContent文件夹下内容到Tomcat
切换到Tomcat下webapps文件夹,新建一个文件夹,随便一个名称,我新建名称是hello,然后把上一个步骤拷贝文件夹黏贴到hellow文件夹下。
5.2 启动Tomcat服务
在Tomcat安装目录下bin文件夹, cmd中输入startup.bat,等待几秒,tomcat服务器启动之后,打开浏览器,输入地址http://localhost:8080/hello/123.html
5.3 打开效果
先看到一个alert弹窗,点击确定之后,可以看到Hello这个红色字体显示。