一个简单的web项目,用Servlet实现一个简单的页面访问

     有自己思想,拒绝纯复制黏贴!!!

      有自己思想,拒绝纯复制黏贴!!!

       有自己思想,拒绝纯复制黏贴!!!

       这里说个题外话,现在网上有一种现象让我深恶痛绝,就是很多网友对别人所发的博文不加验证,便进行纯复制转发,我很想知道,转发了之后意义在哪?自己都没有去验证所转发的内容是否有效便进行纯复制转发,你们这是在污染网络环境,每次我遇到问题,网上一搜,搜索引擎前面几页一模一样的答案,而且还不是有效的博文,看着这些千篇一律的东西,真的是让我抓狂!!!小小吐槽一下




温馨提醒:如若对以下内容所使用的工具等不甚了解,本人已在部分内容旁边做了脚注,脚注所对应的内容说明罗列在页尾,可自行前往页尾查看,如若想了解地更详细,也可点击页尾内容说明后面的链接。

一、问题背景以及描述

       在一家公司里做着测试的工作,期间闲暇自己自学Java至今已有五个月了,最近,部门领导开始给我安排改接口的活,虽说自学了五个月,但没人带的状态下五个月并不是真正的五个月,所以改接口我是一脸懵逼,无从下手,所以我就想到了找一个简单的Web项目运行起来,然后研究整个项目的调用逻辑流程,我想这样可能就会比较清楚前后端的界限,于是就有了这么一篇文章,因为我觉得挺重要的,于是就记录下来了。

二、目的

       为了弄清楚前后端的界限,以及在哪里写接口给前端调用

三、测试环境

JDK:jdk1.8.0_151
开发软件:IntelliJ IDEA Ultimate 2020.2.3
Maven:apache-maven-3.6.3
Tomcat:apache-tomcat-9.0.41

四、项目结构

在这里插入图片描述

五、操作步骤

1、新建一个普通Maven1项目,
点击[文件] → \rightarrow [新建] → \rightarrow [项目…],进入以下弹窗,
在这里插入图片描述
选择[Maven] → \rightarrow [Next],进入以下弹窗,
在这里插入图片描述
填写相应内容后,点击[Finish],一个普通Maven项目便完成了,如下图,
在这里插入图片描述
温馨提醒:

  • 可将上图的src文件夹删掉,记住,删掉的是SpringMVC项目下的src文件夹,因为本项目不需要用到这个文件夹,删掉可以让项目结构更清晰,不删掉也没问题,看你自己,本项目演示的就是把这个文件夹删掉了。
  • 建议修改本地仓库位置(注:IDEA新建项目后的仓库位置都默认定位在C:\Users\(用户名)\.m2文件夹下),先自行在其他盘新建一个文件夹作为本地仓库,如本人在F盘新建了一个0LocalWarehouse文件夹,之后在IDEA进行如下操作便可以把该文件夹设置成本地仓库了:点击[文件] → \rightarrow [设置],弹出如下窗口,再点击[构建、执行、部署]下的[构建工具]下的[Maven],须先勾选[用户设置文件]栏后面的[覆盖]复选框,才可修改目录,然后将[用户设置文件]栏定位到Maven安装目录下的conf文件夹下的settings.xml文件,同理,[本地存储库]栏定位到刚才新建的0LocalWarehouse文件夹,再依次点击[应用]、[确认]就可以了。
    在这里插入图片描述

2、打开SpringMVC项目下的pom.xml文件,添加以下公共依赖,

<!-- 公共依赖 -->
<dependencies>
	<!-- 单元测试 -->
	<dependency>
		<groupId>junit</groupId>
		<artifactId>junit</artifactId>
		<version>4.12</version>
	</dependency>
	<!-- spring-webmvc包含SpringMVC框架相关的所有类,包括框架的Servlets,Web MVC框架,控制器和视图支持 -->
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-webmvc</artifactId>
		<version>5.1.9.RELEASE</version>
	</dependency>
	<!-- 支持servlet的jar包 -->
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>servlet-api</artifactId>
		<version>2.5</version>
	</dependency>
	<!-- 支持servlet的jar包 -->
	<dependency>
		<groupId>javax..servlet.jsp</groupId>
		<artifactId>jsp-api</artifactId>
		<version>2.2</version>
	</dependency>
	<!-- 支持jsp视图 -->
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>jstl</artifactId>
		<version>1.2</version>
	</dependency>
</dependencies>

3、接着,新建一个子项目springmvc-01-servlet,在SpringMVC项目上右键单击,在弹出的弹窗里选择[新建] → \rightarrow [新模块],接下来就跟前面新建一个普通Maven项目一样操作了,新建子项目完成后如下图,
在这里插入图片描述
4、此时,新建的子项目springmvc-01-servlet并不是一个web项目,我们只需要将其指定为web项目即可,具体操作如下:在子项目springmvc-01-servlet右键单击,在弹出的弹窗里选择[添加框架的支持…],紧接着在弹出的弹窗(如下图)里勾选[Web Application]复选框,再点击[确定]
在这里插入图片描述
此时,项目结构目录会多出一个web文件夹及相关文件,此时的子项目springmvc-01-servlet就是一个web项目了,
在这里插入图片描述
5、打开子项目springmvc-01-servlet下的pom.xml文件,添加以下依赖,

<dependencies>
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>servlet-api</artifactId>
		<version>2.5</version>
	</dependency>
	<dependency>
		<groupId>javax.servlet.jsp</groupId>
		<artifactId>jsp-api</artifactId>
		<version>2.2</version>
	</dependency>
</dependencies>

6、做好以上准备后,我们先来写一个页面(注:如果为了安全且用户不可见,所写的页面放在[SpringMVC] → \rightarrow [springmvc-01-servlet] → \rightarrow [web] → \rightarrow [WEB-INF]文件夹下,如果是一些公共的页面,可直接放在[SpringMVC] → \rightarrow [springmvc-01-servlet] → \rightarrow [web]文件夹下即可),先在[WEB-INF]文件夹下新建一个[jsp]文件夹,用来存放页面文件,然后在[jsp]文件夹下新建一个test.jsp文件,代码如下,
在这里插入图片描述
7、接下来,写一个Servlet类,写Servlet有两个步骤:1)自己编写一个类继承Servlet,2)在web.xml文件里配置Servlet,详细如下,
1)编写一个Servlet类,用来处理用户的请求,详细步骤如下:在[SpringMVC] → \rightarrow [springmvc-01-servlet] → \rightarrow [src] → \rightarrow [main] → \rightarrow [java] → \rightarrow [com] → \rightarrow [yuhoutian] → \rightarrow [servlet]文件夹下新建一个HelloServlet类,然后将这个类继承HttpServlet,这个类便是Servlet了,然后在类中覆写doGet()和doPost()方法,代码如下,

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class HelloServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1、获取前端参数
        String method = req.getParameter("method");
        if(method.equals("add")){
            req.getSession().setAttribute("msg","执行了add方法");
        }
        if(method.equals("delete")){
            req.getSession().setAttribute("msg","执行了delete方法");
        }
        //2、调用业务层
        //3、视图转发或者重定向
        req.getRequestDispatcher("/WEB-INF/jsp/test.jsp").forward(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

2)在web.xml文件里配置Servlet,代码如下,

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <servlet>
        <servlet-name>hello</servlet-name>
        <servlet-class>com.yuhoutian.servlet.HelloServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>hello</servlet-name>
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>
</web-app>

8、所有代码到此就结束了,接下来是配置Tomcat2,具体操作如下,
点击[添加配置…],弹出[运行/调试配置]弹窗,
在这里插入图片描述
在这里插入图片描述
接着,点击左上角[+]号,选择[Tomcat Server] → \rightarrow [本地],
在这里插入图片描述
在这里插入图片描述
然后点击[配置…],弹出以下弹窗,
在这里插入图片描述
点击箭头所指的[文件夹]图标,定位到Tomcat安装目录下点[确定],进入以下界面,
在这里插入图片描述
再点击[修复]按钮,会跳转到[部署]界面,
在这里插入图片描述
       IDEA以前的版本,需要点击箭头所指的“+”号手动添加Artifact工件,但我使用的IDEA是比较新的版本(2020.2.3版本),这个版本好像会自动帮我们添加好Artifact工件,不需要手动去添加,但当时操作到此处我不知道会自动帮我们添加好Artifact工件,只以为IDEA出现了什么问题,才导致“+”号那里没有Artifact选项,一开始我不以为意,直接忽略“+”号那里没有Artifact选项的问题,直接运行项目,直接报了个“Artifact springmvc-01-servlet:war exploded: 部署工件时出错。请参阅服务器日志”的问题,部署不成功,所以我就以为是“+”号没有Artifact选项导致的,于是各通百度,尝遍了网友提供的各种处理方式,什么[Artifacts]里添加[Web Application:Exploded]的[From Modules…],什么Tomcat9版本有问题,要用Tomcat8,什么[Artifacts]里的[你的项目]里添加lib文件夹并导入所有库文件,… …统统不顶用,花费我好长时间还是没能解决,万般无奈才想起是不是代码有问题,于是认真检查了代码,果不其然,少了一个斜杠,额… …日了,就只是少了一个斜杠,才导致的这个问题。
       就扯这么多了,如果你们操作过程中也遇到这个问题,可以移步到这里https://blog.csdn.net/weixin_42307507/article/details/112856957,里边有这个问题的具体情况以及处理方法,只是建议。
       到了这里,所有的代码和配置就都完成了,我们再点一下[运行]按钮来启动项目,如下图,
在这里插入图片描述

六、测试及结果

项目运行起来之后,会在浏览器自动打开一个网页http://localhost:8080/,如下图,
在这里插入图片描述
我们在这个网址后面加上/hello后回车,此时的网址为:http://localhost:8080/hello,
在这里插入图片描述
这个时候,我们再加上对应的参数,它便会跳转到对应的页面,如加上“?method=add”,此时的网址为:http://localhost:8080/hello?method=add,
在这里插入图片描述
如加上“?method=delete”,此时的网址为:http://localhost:8080/hello?method=delete,
在这里插入图片描述

七、详细代码解析

       先省略,后面再补充

八、脚注说明


  1. Maven:简单来说,Maven是一个项目管理工具,其主要功能有:项目构建、项目依赖管理、软件项目持续集成、版本管理、项目的站点描述信息管理等,它有一套命令可帮助自己方便快捷地对项目进行某些操作,想了解具体详情请查看https://www.cnblogs.com/JeffreySun/archive/2013/03/14/2960573.html ↩︎

  2. Tomcat:Tomcat服务器是一个开源的轻量级Web应用服务器,在中小型系统和并发量小的场合下被普遍使用,是开发和调试Servlet、JSP 程序的首选,想了解具体详情请查看https://blog.csdn.net/u014231646/article/details/79482195 ↩︎

  • 5
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
跨域交互是指在浏览器中,通过JavaScript代码从一个域名下的网页向另一个域名下的网页发送请求。由于浏览器的安全机制,不同域名下的网页不能直接访问对方的资源,需要使用组合式API进行访问。 下面是一个使用组合式API访问后端接口完成跨域交互的示例代码: ``` // 创建一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求的方法和URL xhr.open('GET', 'http://example.com/api/data', true); // 设置响应的数据类型 xhr.responseType = 'json'; // 设置请求头信息 xhr.setRequestHeader('Content-Type', 'application/json'); // 发送请求 xhr.send(); // 监听请求的响应 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 获取响应的数据 var data = xhr.response; // 处理响应的数据 console.log(data); } }; ``` 在这个示例代码中,首先创建了一个XMLHttpRequest对象,并设置了请求的方法和URL,然后设置了响应的数据类型和请求头信息,最后发送请求。 在监听请求的响应时,判断请求的状态是否为4(即请求完成),状态码是否为200(即请求成功),如果都满足,则说明请求成功,可以获取响应的数据并进行处理。 需要注意的是,由于浏览器的安全机制,使用组合式API进行跨域交互时,需要使用CORS(跨域资源共享)或JSONP(JSON with Padding)等技术来实现。在使用CORS时,需要在后端接口中设置响应头信息,允许指定的域名访问该接口。而在使用JSONP时,需要在前端代码中使用一个回调函数来处理响应的数据。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨后天555

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值