一、学习目标
1、理解并设置Maven环境。
2、 掌握在IntelliJ IDEA创建和配置Web项目。
3、掌握在IDEA中配置Tomcat服务器以运行Web项目。
4、掌握添加Tomcat类库到IDEA项目中。
5、掌握测试JSP页面。
二、教学过程
下面我们在idea构建一个jsp页面完整过程,操作过程如下
1、在E盘(F盘即不受保护的磁盘)中创建一个目录,如下图所示。
2、在e:\qin目录中创建以下的目录,如下图所示。
其中:jspworkspace主要用于存放我们在idea中创建项目工作目录;maven目录下我们还创建一个repository子目录用于作为我们项目的本地仓库,这个仓库用于我们在创建项目时由maven下载的相应jar包。如下图所示。
3、接下来我们要把maven解压到我们e:\qin目录中,如下图所示。
4、打开maven的配置文件即在E:\qin\apache-maven-3.6.3\conf目录中的settings.xml,然后在里添加“<localRepository>E:\qin\maven\repository</localRepository>”本地的仓库即可,如下图所示。
5、为maven添加镜像服务器,即在settings.xml中添加镜像服务器地址,如下所示。
6、在windows中配置maven的环境变量,如下图所示 。
按“确定”返回即可。
7、测试maven是否设置成功。即打开windows的命令窗口进行测试,如下图所示 。
8、配置Tomcat服务器,主要是E:\qin\apache-tomcat-8.5.38\conf目录中的server.xml中的商品设置,这里我们把它的端口设置为8084。如下图所示 。
9、启动idea,新建一个项目,如下图示。
10、单击“Project…”会弹出如下的对话框,选择如下图所示。
11、单击“Next”就进入到创建新项目的对话,设置如下图所示。
12、进入mave设置窗口,我们要按要求设置好相应的选项,如下图所示 。
13、单击“Finish”完项目的创建,创建好后项目的目录结构如下图所示。
到此web项目就创建好。
、创建jsp页面,右击“web”在弹出的菜单中选择new,然后选择“jsp/jspx”选项,如下图所示。
15、单击“jsp/jspx”后弹出创建文件的对话杠,设置如下图所示。
16、first.jsp页面代码如下 。
<%@ page cnotallow="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<%!
int x=100;
int y=200;
public int add(int x,int y){
return x+y;
}
%>
<%
out.print("x+y="+add(x,y));
%>
<br />x+y=
<%=add(x,y)%>
</body>
</html>
17、在idea中配置tomcat服务器,配置过程如下。
(1)单击菜单栏上“Run”->"edit configurations……",如下图所示。
(2)单击“Edit Configurations……”后出现如下对话框。
(3)在Templates列表中找到Tomcat选项,如下图所示。
(4)设置Tomcat服务器,我们通过 右边server选项卡上的“Configure……”设置Tomcat服务所在的主目录,如下图所示。
(5)返回到上层窗口,我们来设置server选项卡中的内容,如下图所示
(6)下面我们来设置“Deployment”选项卡,如下图所示。
(7)单击“Artifact……”如下图所示。
(8)返回到“server”选项卡,如下图设置。
(9)单击“ok”即可。
(10)继续(1)步,如下图所示。
(11)单击“Edit Configurations……”如下图所示。
(12)在弹出的列表中把内容往下移至下图所示。
(13)单击“local”选项后如下图所示。
(14)单击“ok“完成,至此在idea中配置Tomcat服务就结束,这样我们就可以通过页面浏览jsp文件了。
18、在IDEA项目中添加Tomcat类库。
在idea中我们要把Tomcat的类库添加到我们的项目中来,这样我们才能运行页面。操作步骤如下:
(1)、单击idea菜单中的file->Project Structure……,如下图所示 。
(2)、单击“Project Structure…”命令后可进入project Structure对话框,如下图所示 。我们选择“Modules->项目名->Dependencies”
(3)、单击“+”按钮在弹出的菜单中选择“2 Library…”,如下图所示 。
(4)、单击“2 Library…”命令后,我们选择Tomcat 8.5.38",如下图所示 。
(5)、单击“Add Selected”按钮,返回到主页面,如下图所示 。
(6)、单击“ok”按钮,完成Tomcat类库添加。如下图所示 。
到些我们的Tomcat类库创建就完成了
19、最后我们来测试first.jsp页面。
(1)启动Tomcat服务器。
(2)单击工作区中的“浏览器图标”来浏览页面的内容。first.jsp浏览结果如下图所示。