序言
这是一个后端开发中网站开发的项目。实现简单的前后端开发和请求相应机制
项目准备
环境准备
注意:本项目使用的环境为idea专业版,只有专业版才能使用Jakarta
Tomcat下载
点击链接下载
下载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() {
}
}
详细内容解释都在代码注释,又需要的小伙伴可以自己去试试