IDEA中使用Tomcat服务器从零开始搭建一个简单的web项目

bug小王爷

已于 2022-09-10 17:40:38 修改

阅读量1.8k

点赞数 6

分类专栏： web 文章标签： intellij-idea tomcat 前端 java

于 2022-05-30 18:06:52 首次发布

本文链接：https://blog.youkuaiyun.com/wj_phm/article/details/125048410

版权

web 专栏收录该内容

3 篇文章

订阅专栏

第一步使用Tomcat9创建一个简单的web项目（无数据库连接）

第二步 web项目连接数据库

文章目录

第一步使用Tomcat9创建一个简单的web项目（无数据库连接）
前言
总结

前言

准备工作：

配置好Java环境（本文使用的是jdk1.8）
需要先下载Tomcat（本文中使用的是Tomcat9）
安装IDEA（本文使用的是版本是2021.1.3商业版）
了解什么是HTML、CSS、JS、Servlet（不需要很了解）

目标：

搭建一个可以从浏览器访问到IDEA中资源的项目（暂时没有与数据库连接）
写一个特别基础的前端发送http请求登陆的案例

1.创建一个空项目Empty Project

1.1点击File ——>New File——>Project，如下图所示：

在这里插入图片描述

1.2在弹出来的窗口中选择空项目后点击下一步：Empty Project——>Next。如下图所示：

1.3在弹出来的窗口中给项目命名、选择项目存放文件在磁盘中的存放位置，接下来点击下一步：Project name——>Next。如下图所示：

在这里插入图片描述

1.4点击New Window在新的工作窗口中打开此项目。如下图所示：

在这里插入图片描述

空项目的结构，如下图所示：

在这里插入图片描述

2.为该项目选择Java环境

2.1在打开Project Structure窗口，具体点击：File——>Project Structure。如下图所示：

在这里插入图片描述

2.2在Project Structure窗口中选择Java环境，本机为jdk1.8。如下图所示：

在这里插入图片描述

3.在项目中创建一个模块Module：

3.1在Project Structure（步骤2.1中打开）窗口选择Module——>New Module。如下图所示：

在这里插入图片描述

3.2在窗口选择中选择Java——>Next。如下图所示：

在这里插入图片描述

3.3为模块创建一个名字，点击Finish。如下图所示：

在这里插入图片描述

创建模块后，项目结构更新为下图所示：

在这里插入图片描述

4.在第3步创建的模块Module中添加web：

4.1选中模块Module后点击添加框架支持Add Framework Support。如下图所示：

在这里插入图片描述

4.2点选Web Application(4.0)后点击OK。如下图所示：

在这里插入图片描述

添加Web框架后的项目结构，如下图所示：

在这里插入图片描述

5.创建资源：

5.1在项目中创建一下文件夹以及文件。如下图所示：

在Model下创建Login.java(本文中包名为：com.xuemi.firstWeb)
在web下创建html、img分别用来存放HTML文件和图片（随便照一张即可）资源

5.2在html文件夹下创建html文件，内容写入。如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Web! Hello, Tomcat</title>
</head>
<body>

<!-- 使用POST请求提交表单到 /helloword 项目下匹配的 /login 请求处理类-->
<form action="/helloword/login" method="post">
    <div>用户名<input name="userName"></div>
    <div>密 码<input name="password"></div>
    <button type="submit">登 陆</button>
</form>

</body>
</html>

6.IDEA添加Tomcat：

6.1双击打开Login.java文件，点击Add Configutation。如下图所示：

在这里插入图片描述

6.2点击加好后选择Tomcat——>Local。如下图所示：

在这里插入图片描述

6.3点击Configuration。如下图所示：

在这里插入图片描述

6.3点击加号：

在这里插入图片描述

6.3选择下载的Tomcat：

在这里插入图片描述

6.4点击OK完成IDEA配置Tomcat路径的步骤：

在这里插入图片描述

6.5回到6.1的界面，给Tomcat设置名字、JRE的版本、端口号等信息：

在这里插入图片描述

6.6点击Dependencies添加Artifacts：

在这里插入图片描述

7.将Tomcat依赖引入到模块Module中：

7.1双击打开Login.java文件，点击Add Configutation。如下图所示：

在这里插入图片描述

8.在Login.java中写登录的请求处理方法：

8.1打开Login.java文件。具体代码如下：

要在该类类名上加上@WebServlet(“/login”)表示可以处理的请求地址。
继承HttpServlet(该HttpServlet类就是Tomcat依赖中提供的，所以需要完成第7步)。
重写doPost()方法，在此简单的打印前端传入的用户名和密码。

package com.xuemi.firstWeb;

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

//表示该类处理 /login 请求：http://localhost:8080/helloword/login,即响应login.html中的表单请求
@WebServlet("/login")
public class Login extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userName = req.getParameter("userName");
        String password = req.getParameter("password");
        System.out.println("接收到的用户名：" + userName + ", 密码为：" + password);
    }

}