Web仿Tomcat服务器

序言

这是一个后端开发中网站开发的项目。实现简单的前后端开发和请求相应机制

项目准备

环境准备

注意:本项目使用的环境为idea专业版,只有专业版才能使用Jakarta

Tomcat下载

点击链接下载

Apache Tomcat® - Welcome!

下载tomcat10

比较慢,耐心等待一下

项目创建

IDEA(专业版):

              JakartaEE 支持Tomcat10以上

              Maven:构建以及运行项目

              配置pom.xml下载第三方依赖包

选好你下载好的tomcat的路径

我们目前只需要勾选servlet即可

项目创建完后耐心等待其下载完资源。

项目制作

前面配置完之后它会先给你一个写好的页面

        点击此处运行服务器

如果出现了显示localhost8080已被占用的情况,是因为你没有通过tomcat启动,在任务管理器找到ApplicationWebServer.exe关闭,用tomcat启动即可

然后我们删除掉原有的jsp

建立一个新的HTML

设计一个简单的页面

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function hello(){
            //弹出一个提示框,显示 “hello”
            alert("hello");
            //1.创建ajax对象 原生网络请求对象
            var xhr = new XMLHttpRequest();
            //使用 GET 方法打开一个请求,目标地址为指定的 URL,第三个参数为 “true” 表示异步请求。
            xhr.open("GET", "http://localhost:8080/WebHome1018_war_exploded/hello-servlet", true);
            //发送请求
            xhr.send();
            //2.绑定了一个监听事件,当请求的状态发生变化时会触发这个函数。在这个函数中,当请求状态为 4(请求完成)且状态码
            // 为 200(成功)时,获取服务器返回的文本内容并弹出提示框显示。
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var result = xhr.responseText;
                    alert(result);
                }
            }
        }

        function sendName(){
            //弹出一个提示框,显示 “send name”
            alert("send name");
            //使用ajax
            $.ajax({
                //指定了请求的目标地址
                url:"http://localhost:8080/WebHome1018_war_exploded/hello-servlet",
                //为 “POST”,表示使用 POST 方法发送请求
                type:"post",
                //中包含了一个名为 “name” 的值,其值为文本输入框中输入的内容,通过 $("#name").val() 获取。
                data:{
                    name:$("#name").val(),
                },
                success:function(result){
                    alert(result);
                    console.log(result);
                    //显示到页面上
                    $("#result").html(result);
                    //JSON 格式,前后端通用

                },error:function(result){
                    alert(result);
                }
            })
        }
    </script>


</head>
<body>
<!--hello servlet-->
<button onclick="hello()">HelloServlet</button>
<!--send name-->
<input type="text" id="name"/>
<button onclick="sendName()">sendName</button>
<p id="result"></p>


</body>
</html>

后端请求发送和接收

定义user类

package com.example.webhome1018;

public class User {
    private String id;
    private String username;
    private String password;
    public User(String id, String username, String password) {
        this.username = username;
        this.password = password;
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getId() {
        return id;
    }

    @Override
    public String toString() {
        return "User{" +
                "id='" + id + '\'' +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}
package com.example.webhome1018;

import java.io.*;
import java.util.ArrayList;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;
//这是一个注解,用于将这个类标识为一个 Servlet。name属性指定了 Servlet 的名称为 “helloServlet”,value属性指定了
// 这个 Servlet 处理的 URL 路径为 “/hello-servlet”。这意味着当客户端向服务器发送请求到 “/hello-servlet” 路径
// 时,这个 Servlet 将会被调用。
@WebServlet(name = "helloServlet", value = "/hello-servlet")
//定义了一个名为HelloServlet的公共类,它继承自HttpServlet类。通过继承HttpServlet,这个类可以处理 HTTP 请求。
public class HelloServlet extends HttpServlet {
    private String message;
    //重写了父类的init方法。在这个方法中,将message初始化为 “Hello World!”。这个方法在 Servlet 初始化时被调
    // 用,可以用于进行一些初始化操作。
    public void init() {
        message = "Hello World!";
    }
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //设置响应的内容类型为 HTML,告诉客户端响应的内容是 HTML 格式。
        response.setContentType("text/html");
        //获取用于向客户端发送响应内容的输出流对象。
        PrintWriter out = response.getWriter();
        //request 请求头
        //Tomcat打包的请求对象,其中包含请求的相关信息,读取请求方的信息Input
        //获取请求方的参数信息
        String name = request.getParameter("name");
        out.println("<h1>" + name + "</h1>");



        //response 响应头
        //Tomcat打包的请求对象,请求放的输出流 可以通过响应头给请求方回消息Output
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置响应的内容类型为 HTML,告诉客户端响应的内容是 HTML 格式。
        response.setContentType("text/html");
        //获取用于向客户端发送响应内容的输出流对象。
        PrintWriter out = response.getWriter();
        String name = request.getParameter("name");
        out.println("<h1>" + name + "</h1>");
        out.println(users);
    }
    ArrayList<User> users = new ArrayList<>();
    {
        users.add(new User("1", "james", "123456"));
        users.add(new User("2", "curry", "123456"));
        users.add(new User("3", "karry", "123456"));
        users.add(new User("4", "harden", "123456"));
        users.add(new User("5", "broker", "123456"));
    }
    public void destroy() {
    }
}

详细内容解释都在代码注释,又需要的小伙伴可以自己去试试

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值