JavaWeb开发入门：从前端到后端的完整流程解析
一、JavaWeb简介
1、C/S 客户端/服务器结构
2、B/S（Browser/Server，浏览器/服务器）结构
二、开发环境搭建
1. 安装Tomcat--一个小型的web容器。
2. 在eclipse中配置tomcat+创建项目
三、JavaWeb开发流程
1. 前端页面设计
2. 后端逻辑处理
3、前后端交互
①请求url与注解一致：
②请求方式有get和post两种
③data是参数，不传参可以不写data，当携带时：
④在后端获取信息用request，刷新页面打开控制台
⑤给前端响应数据用response，在网络中的response响应可以查看
示例severlet代码
优质博客
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目录下写
<!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代码
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 {}}
此时前端接受到的数据为
ref博客
JavaWeb是什么？总结一下JavaWeb的体系-CSDN博客
JavaWeb基础知识汇总⭐_javaweb知识点总结-CSDN博客