[1、C/S 客户端/服务器结构](#1、C/S 客户端/服务器结构)
2、B/S（Browser/Server，浏览器/服务器）结构
[1. 安装Tomcat--一个小型的web容器。](#1. 安装Tomcat--一个小型的web容器。)
[2. 在eclipse中配置tomcat+创建项目](#2. 在eclipse中配置tomcat+创建项目)
[1. 前端页面设计](#1. 前端页面设计)
[2. 后端逻辑处理](#2. 后端逻辑处理)
⑤给前端响应数据用response，在网络中的response响应可以查看
**JavaWeb作为Java技术栈在Web开发领域的核心应用，结合了后端逻辑处理、前端交互和数据库操作等技术，是构建动态网站的强大工具。从今天开始，将从零逐步了解JavaWeb开发的完整流程，包括环境搭建、前后端交互以及数据处理。**😋
一、JavaWeb简介
JavaWeb是指使用Java技术栈开发基于浏览器访问的Web应用程序。它通过Servlet和JSP技术实现后端逻辑处理，并结合HTML、CSS和JavaScript完成前端交互。JavaWeb的核心是Servlet ，它运行在服务器端，接收用户请求并返回响应。而Tomcat 作为JavaWeb应用的服务器，提供了运行Java网站的++环境++。
1、C/S 客户端/服务器结构
【超重要的图！！】
1. 顾客点餐（浏览器发送请求）
URL（找哪个服务员）→ 类似告诉服务员："我要去某某饭店的/order窗口点餐"。→ 对应：http://localhost:8080/order，决定由哪个 Servlet（后厨）处理请求。
Type（服务方式）→ GET：像直接口头点菜（参数在地址栏可见，如 /order?food=红烧肉）→ POST：像填写纸质订单（参数隐藏在请求体中，适合提交敏感数据）。
参数（想吃的东西）
2、服务员接单（Tomcat 接收请求）
- 服务员（Tomcat）
→ 根据 URL 找到对应的 Servlet（后厨），比如配置了 @WebServlet("/order") 的类。
→ 将请求封装成 HttpServletRequest 对象（包含参数、请求方式等信息）。
3、厨师烹饪（ Servlet 处理逻辑）
查库存（JDBC 访问数据库）
4、摆盘上菜（生成并返回响应）
5. 顾客享用（浏览器渲染结果）
2、B/S（Browser/Server，浏览器/服务器）结构
二、开发环境搭建
1. 安装Tomcat--一个小型的web容器。
Tomcat是一个开源的Java Servlet容器，用于运行JavaWeb应用程序。下载并安装Tomcat后，通常会将其配置为默认端口号8080 。所有JavaWeb项目都需要部署到Tomcat上才能运行。如果你用 Java 写了一个网站（比如用 Servlet 或 JSP 技术），Tomcat 可以让这个网站在服务器上跑起来。 这样当用户用浏览器访问你的网站时，Tomcat 会接收用户的请求，并把结果（比如网页内容）返回给用户。点击跳转下载
【我的：E:\TOMcat\apache-tomcat-8.5.57】
2. 在eclipse中配置tomcat+创建项目
①创建Web项目
②配置tomcat：
选择对应版本：这里我使用的是8.5
点击next,Browse找到tomcat文件bin所在目录，但是不用进到bin目录,选择JRE为jdk：
【没有jdk选项的点installJRESt添加，找到jdk所在目录
Finish,然后一直next即可
③创建好项目--设置编码属性为UTF-8
④运行前端：右击-->Run as-->1run on server
【在window Webbrowser中可以选择跳转到浏览器】
【当出现8080端口被占时：
win+r:输入cmd输入命令：netstat -ano
找到8080对应的PID，然后去任务管理器找对应的PID，结束调占用8080端口的进程即可】
三、JavaWeb开发流程
1. 前端页面设计
在WebContent目录下写
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<script src="js/jQUery.min.js"></script>
<script>
$.ajax({
url:"",//请求路径
type:"",//请求方式
data:{
},//参数域
success:function(value){
},//请求成功的回调函数
error:function(){
}//请求失败的回调函数
})
</script>
</head>
<body>
<div class="box">内容区</div>
</body>
</html>2. 后端逻辑处理
在src目录下写
①建立后端项目--为一个package
包的name一般为域名倒写：每一个.代表一层文件夹
②创建一个servlet服务生：
**后端逻辑是JavaWeb的核心部分，主要通过Servlet实现。**Servlet是一个Java类，用于处理客户端请求并返回响应。
创建完目录为：
这里，注解不能冲突，但是系统不会自动检测
注解冲突会出现报错：
把WebContent看做根目录，servlet下的文件就在根目录下
3、前后端交互
①请求url与注解一致：
②请求方式有get和post两种
severlet中
此刻运行前端代码console会弹出get请求
③data是参数，不传参可以不写data，当携带时：
**在网络查看参数信息：**前端在控制台查看各种报错信息和输出，各种请求在网络查看
查看请求携带的参数信息：
④在后端获取信息用request，刷新页面打开控制台
返回类型为string类型
⑤给前端响应数据用response，在网络中的response响应可以查看
打印的value为在前端控制台可以看到
这样拿到后端给前端的信息，可以进行前端的操作
后端给前端响应的数据x编码为utf-8【前提是eclipse已经设置编码为utf-8】
返回大量信息时可以使用json格式 JSON初探：解锁Web开发的通用语言-CSDN博客
例如：
这时需要在后端添加代码设置json格式**【确保传的是json格式数据】**
示例severlet代码
java
package com.lxy.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Firstdemo
*/
@WebServlet("/Firstdemo")
public class Firstdemo extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Firstdemo() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("get请求");
//获取信息
String acc =request.getParameter("account");
String pass =request.getParameter("password");
String res = "";
if(acc.equals("admin")&&pass.equals("123456"))
{res="{ \"name\":\"runoob\",\"alexa\":10000,\"site\":null}";}
else {
res="登陆失败";
}
//设置数据编码
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
//设置后端给前端返回的为json格式的数据
response.setContentType("text/json;charset=utf-8");
//给前端响应数据
response.getWriter().write(res);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}此时前端接受到的数据为
