Spring Boot 集成 JSP 实现 Web 页面快速开发详解

第三篇：❤三种方式俯瞰后端数据接收❤(建议收藏)

第二篇：玩转web表单网页快速开发(❤建议收藏❤)

一、前言

在开始学习 Web 相关知识之前，我们先来了解这个看似复杂的技术领域。

本文使用的开发工具为中文版 IntelliJ IDEA，虽然语言不同，但操作逻辑基本一致。

第一步：首先创建一个新项目，具体操作请参考图示。

第二步：输入项目名称，名称可任意设定，随后按照图示步骤继续。

第三步：在创建项目过程中会弹出配置窗口，建议在新窗口中进行操作。

第四步：按照图示指示点击相应选项即可。

第五步：请注意图中圈出的部分，确保配置参数保持一致。

第六步：这两个名称字段可以任意填写。

第七步：按照图示进行操作即可。

第八步：直接点击“完成”按钮即可。

第九步：界面效果如图。

第十步：依次点击“hello”左侧的小三角展开目录，然后点击“src”下的小三角，依次展开所有可见的小三角，找到

你刚才创建的模块名，这里我创建的是 hello

第 11 步：右键点击“hello”，鼠标移动到“新建”选项，在弹出的菜单中点击左键单击“包”。

第 12 步：hello 前面的目录都是系统自动生成的，我们只需要手动添加一个 controller 包即可。

建好包之后就要进行环境配置，IDEA 本身默认不支持 JSP，但为了学习其中的原理性

的东西，从简单的 JSP 里面学到我们后续需要的一些原理性的东西，因此我们需要使用 JSP,

所以我们需要学一门 JSP 语言。IDEA 本身不支持这门语言，因此我们要想使用 JSP，就必须导入

依赖。

第 13 步：在 main 目录下右键，按照图示依次操作。

第 14 步：输入 webapp 后按回车键确认。

第 15 步：在 webapp 目录下按照如图所示操作即可。

第 16 步：在这目录下输入 WEB-INF 后按回车键确认。

第 17 步：继续在新建出来的 WEB-INF 目录上右键，然后按图示操作即可。

第 18 步：输入 views 后按回车键确认。

在 views 下没有我们想要的 JSP 文件，这说明我们还没有导入依赖，在导入依赖之前

我们要先确定根目录在哪里

第 19 步：要知道根目录在哪只需点击文件，如图，单击项目结构即可

第 20 步：如图，你们不必慌，只需要按照我标的序号来点击即可

把这个设置成根目录后，我们就可以把 JSP 文件全部放在里面，并且可以调用他了。

第 21 步：完成上面那步之后，就会有在 views 下就会 JSP 文件了，单击即可，如图

第 22 步：随便起个名，我起的叫 a1，回车即可

第 23 步：我画红圈圈起来的是随便写的，内容没有任何要求，这是后面再页面会显示出来的

第 24 步：做完上面那步之后，双击划红线的部分，就会出现右边的东西，是什么不重要

第 25 步：就要导入 JSP 的依赖了只需把这代码段全部的复制进去如图所示即可

 <!-- 添加servlet依赖模块 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </dependency>
        <!-- 添加jstl标签库依赖模块 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
        <!--添加tomcat依赖模块.-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </dependency>
        <!-- 使用jsp引擎，springboot内置tomcat没有此依赖 -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
</dependency>

将上面那段代码复制下面到图示的位置，这两个单词之间，一般是第 18-19 行

第 26 步：你在这两个单词之间按 ctrl+v 复制时，会出现右下角的两个，此时，我们只需选右边

画圈圈的，自动导入更方便快捷

第 27 步：复制完成之后，按图示点击编辑配置即可

第 28 步：按图示点击即可

在工作目录下选择第三个，说明这个文件夹是一个模块，从其中也可以看出有一个模块

的英文单词。

第 29 步：依次从 src 下一直点开左边的小三角形，知道找到 conterller 后，右击，如图，

创建一个 Demo 类

第 30 步：输入 @Con 回车就会自动补全包名之类的

补全之后如图：

这个 controller 就相当于一个控制器，控制器是所有程序开始都要经过这个控制器，控制器

是进行数据的处理和接受。

第 31 步：在图示位置输入 @Re 回车 (回车自动会补全）即可

补全之后如图所示：

第 32 步：按着图补全剩下的即可。

其中 @RequestMapping 表示从哪里来，而（"/"）表示从当前目录来，return "a1",这个要和

你之前起的 JSP 要一致。

第 33 步：按图所示，单击第二步即可出现右边的内容

第 34 步：在右边的内容把下面代码段的复制到里面即可

spring.mvc.view.prefix = /WEB-INF/views/
spring.mvc.view.suffix = .jsp

复制完成如图所示：

第 35 步：单击如图所示的，运行即可

运行之后会看到如图，说明运行成功了

有时候我们会出现图示这种情况：

不要慌，这种情况是接口被占用，说白了就是你前面用了但是没关掉就会照成这种情况，

解决起来也是十分的容易，只需要把 8080，该为其他数字即可（任意）

第 36 步：我们只需在百度上搜索 localhost:8081，如图

就会出现我们之前输入的语句了

好了，web 快速开发已经讲解完毕了

后续篇幅：

第三篇：❤三种方式俯瞰后端数据接收❤(建议收藏)

第二篇：玩转 web 表单网页快速开发(❤建议收藏❤)

到此这篇关于 JavaScript web 网页入门级开发详解的文章就介绍到这了，更多相关 JavaScript web 网页内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！