一、学习目标

        1、理解并设置Maven环境。

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

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

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

        5、掌握测试JSP页面。

二、教学过程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

按“确定”返回即可。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

到此web项目就创建好。

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

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

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

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

        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程序完整过程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        (9)单击“ok”即可。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        (1)启动Tomcat服务器。

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

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

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

平台声明:以上文章转载于《CSDN》,文章全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,仅作参考。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/cnzzs/article/details/143826663