一、学习目标

        1、理解并设置Maven环境。

        2、 掌握在IntelliJ IDEA创建和配置Web项目。

        3、掌握在IDEA中配置Tomcat服务器以运行Web项目。

        4、掌握添加Tomcat类库到IDEA项目中。

        5、掌握测试JSP页面。

二、教学过程

        下面我们在idea构建一个jsp页面完整过程,操作过程如下

        1、在E盘(F盘即不受保护的磁盘)中创建一个目录,如下图所示。

在IDEA中创建第一个JSP程序完整过程_ide

        2、在e:\qin目录中创建以下的目录,如下图所示。

在IDEA中创建第一个JSP程序完整过程_服务器_02

        其中:jspworkspace主要用于存放我们在idea中创建项目工作目录;maven目录下我们还创建一个repository子目录用于作为我们项目的本地仓库,这个仓库用于我们在创建项目时由maven下载的相应jar包。如下图所示。

在IDEA中创建第一个JSP程序完整过程_服务器_03

        3、接下来我们要把maven解压到我们e:\qin目录中,如下图所示。

在IDEA中创建第一个JSP程序完整过程_maven_04

        4、打开maven的配置文件即在E:\qin\apache-maven-3.6.3\conf目录中的settings.xml,然后在里添加“<localRepository>E:\qin\maven\repository</localRepository>”本地的仓库即可,如下图所示。

在IDEA中创建第一个JSP程序完整过程_服务器_05

        5、为maven添加镜像服务器,即在settings.xml中添加镜像服务器地址,如下所示。

在IDEA中创建第一个JSP程序完整过程_maven_06

        6、在windows中配置maven的环境变量,如下图所示 。

在IDEA中创建第一个JSP程序完整过程_maven_07

按“确定”返回即可。

        7、测试maven是否设置成功。即打开windows的命令窗口进行测试,如下图所示 。

在IDEA中创建第一个JSP程序完整过程_ide_08

        8、配置Tomcat服务器,主要是E:\qin\apache-tomcat-8.5.38\conf目录中的server.xml中的商品设置,这里我们把它的端口设置为8084。如下图所示 。

在IDEA中创建第一个JSP程序完整过程_服务器_09

        9、启动idea,新建一个项目,如下图示。

在IDEA中创建第一个JSP程序完整过程_服务器_10

        10、单击“Project…”会弹出如下的对话框,选择如下图所示。

在IDEA中创建第一个JSP程序完整过程_ide_11

        11、单击“Next”就进入到创建新项目的对话,设置如下图所示。

在IDEA中创建第一个JSP程序完整过程_服务器_12

        12、进入mave设置窗口,我们要按要求设置好相应的选项,如下图所示 。

在IDEA中创建第一个JSP程序完整过程_ide_13

        13、单击“Finish”完项目的创建,创建好后项目的目录结构如下图所示。

在IDEA中创建第一个JSP程序完整过程_ide_14

到此web项目就创建好。

、创建jsp页面,右击“web”在弹出的菜单中选择new,然后选择“jsp/jspx”选项,如下图所示。

在IDEA中创建第一个JSP程序完整过程_ide_15

        15、单击“jsp/jspx”后弹出创建文件的对话杠,设置如下图所示。

在IDEA中创建第一个JSP程序完整过程_服务器_16

        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……",如下图所示。

在IDEA中创建第一个JSP程序完整过程_ide_17

        (2)单击“Edit Configurations……”后出现如下对话框。

在IDEA中创建第一个JSP程序完整过程_服务器_18

        (3)在Templates列表中找到Tomcat选项,如下图所示。

在IDEA中创建第一个JSP程序完整过程_ide_19

        (4)设置Tomcat服务器,我们通过 右边server选项卡上的“Configure……”设置Tomcat服务所在的主目录,如下图所示。

在IDEA中创建第一个JSP程序完整过程_服务器_20

        (5)返回到上层窗口,我们来设置server选项卡中的内容,如下图所示

在IDEA中创建第一个JSP程序完整过程_maven_21

        (6)下面我们来设置“Deployment”选项卡,如下图所示。

在IDEA中创建第一个JSP程序完整过程_maven_22

        (7)单击“Artifact……”如下图所示。

在IDEA中创建第一个JSP程序完整过程_maven_23

        (8)返回到“server”选项卡,如下图设置。

在IDEA中创建第一个JSP程序完整过程_maven_24

        (9)单击“ok”即可。

        (10)继续(1)步,如下图所示。

在IDEA中创建第一个JSP程序完整过程_服务器_25

        (11)单击“Edit Configurations……”如下图所示。

在IDEA中创建第一个JSP程序完整过程_ide_26

        (12)在弹出的列表中把内容往下移至下图所示。

在IDEA中创建第一个JSP程序完整过程_ide_27

        (13)单击“local”选项后如下图所示。

在IDEA中创建第一个JSP程序完整过程_maven_28

        (14)单击“ok“完成,至此在idea中配置Tomcat服务就结束,这样我们就可以通过页面浏览jsp文件了。

在IDEA中创建第一个JSP程序完整过程_maven_29

        18、在IDEA项目中添加Tomcat类库。

        在idea中我们要把Tomcat的类库添加到我们的项目中来,这样我们才能运行页面。操作步骤如下:

        (1)、单击idea菜单中的file->Project Structure……,如下图所示 。

在IDEA中创建第一个JSP程序完整过程_ide_30

        (2)、单击“Project Structure…”命令后可进入project Structure对话框,如下图所示 。我们选择“Modules->项目名->Dependencies”

在IDEA中创建第一个JSP程序完整过程_服务器_31

        (3)、单击“+”按钮在弹出的菜单中选择“2 Library…”,如下图所示 。

在IDEA中创建第一个JSP程序完整过程_ide_32

        (4)、单击“2 Library…”命令后,我们选择Tomcat 8.5.38",如下图所示 。

在IDEA中创建第一个JSP程序完整过程_服务器_33

        (5)、单击“Add Selected”按钮,返回到主页面,如下图所示 。

在IDEA中创建第一个JSP程序完整过程_maven_34

        (6)、单击“ok”按钮,完成Tomcat类库添加。如下图所示 。

在IDEA中创建第一个JSP程序完整过程_服务器_35

到些我们的Tomcat类库创建就完成了

        19、最后我们来测试first.jsp页面。

        (1)启动Tomcat服务器。

在IDEA中创建第一个JSP程序完整过程_maven_36

        (2)单击工作区中的“浏览器图标”来浏览页面的内容。first.jsp浏览结果如下图所示。

在IDEA中创建第一个JSP程序完整过程_maven_37