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 {}}

 此时前端接受到的数据为

优质博客

JavaWeb是什么?总结一下JavaWeb的体系-CSDN博客

JavaWeb基础知识汇总⭐_javaweb知识点总结-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/23435.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 常见命令全解析

一、文件操作命令 1. ls ls是列出目录内容的命令。简单输入ls&#xff0c;会展示当前目录下的文件和目录列表。想要获取更详细的信息&#xff0c;比如文件权限、所有者、大小、修改时间等&#xff0c;使用ls -l。若要显示所有文件&#xff0c;包括以点&#xff08;.&#xff…

unordered_set和unordered_map的使用

Hello&#xff0c;今天我来为大家介绍一下前几年才刚刚新出的两个容器——unordered_map和unordered_set&#xff0c;这两个容器属于是map系列和set系列中的一种&#xff0c;和map/set不同的是它们的底层&#xff0c;map/set的底层是红黑树&#xff0c;而unordered_map/unorder…

【每日八股】计算机网络篇(一):概述

OSI 的 7 层网络模型&#xff1f; OSI&#xff08;Open Systems Interconnection&#xff0c;开放互联系统&#xff09;是由国际标准化组织&#xff08;ISO&#xff09;提出的一种网络通信模型。 自上而下&#xff0c;OSI 可以被分为七层&#xff0c;分别是&#xff1a;应用层…

DeepSeek 提示词:高效的提示词设计

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…

HarmonyOS简

文章为官方教程以及自己的部分理解&#xff0c;用于上下班的查看学习。官方视频教程地址&#xff1a;HarmonyOS应用开发者基础认证-华为开发者学堂 (huawei.com) 应用发开的机遇、挑战和趋势 带来的问题 问题&#xff1a;万物互联&#xff0c;智能设备从几十亿手机拓展到数百…

conda 基本命令

1、查询当前所有的环境 conda env list 2、创建虚拟环境 conda create -n 环境名 [pythonpython版本号] 其中[pythonpython版本号]可以不写 conda create -n test python3.12 我们输入conda env list看到我们的环境创建成功了&#xff0c;但是发现他是创建在我们默认的C盘的…

PythonWeb开发框架—Django之DRF框架的使用详解

1.安装依赖包 pip install djangorestframework 2.配置应用 在settings.py中的INSTALLED_APPS中添加rest_framework应用 3.创建序列化器 序列化器是用来操作models的 第一步&#xff1a;定义models ##models.pyfrom django.db import models# Create your models here.cl…

硬件加速与技术创新双轮驱动:DeepSeek和ChatGPT性能进阶的未来蓝图

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux网络编程 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 ​ Linux网络编程笔记&#xff1a; https://blog.cs…

让子弹飞的DeepSeek火锅诗和《软件方法》

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 我在知乎上面看到了这样的一个问题&#xff1a;DeepSeek写出过哪些惊艳的诗词&#xff1f; 有一位答主讲了他以《让子弹飞》作为素材让DeepSeek写诗的故事&#xff1a;要有风&#xf…

输入搜索、分组展示选项、下拉选取,el-select 实现:即输入关键字检索,返回分组选项,选取跳转到相应内容页 —— VUE 项目-全局模糊检索

后端数据代码写于下一篇&#xff1a;输入搜索、分组展示选项、下拉选取&#xff0c;全局跳转页&#xff0c;el-select 实现 —— 后端数据处理代码&#xff0c;抛砖引玉展思路 【效果图】&#xff1a;分组展示选项 >【提供界面操作体验】 【录制效果视频展示】&#xff1a…

【Linux】初识进程概念与 fork 函数的应用

Linux相关知识点可以通过点击以下链接进行学习一起加油&#xff01;初识指令指令进阶权限管理yum包管理与vim编辑器GCC/G编译器make与Makefile自动化构建GDB调试器与Git版本控制工具Linux下进度条冯诺依曼体系与计算机系统架构 进程是操作系统中资源分配和调度的核心单位&#…

【linux】自主shell编写

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;linux笔记仓 目录 01.输出命令行02.获取用户命令字符串03.命令行字符串分割04.执行命令05.细节修改检查是否为内建命令 完整代码&#xff1a; 01.输出命令行 完成对一个shell 的编写&#xff0c;首…

小程序高度问题背景scss

不同的机型&#xff0c;他的比例啥的都会不一样&#xff0c;同样的rpx也会有不同的效果。所以这里选择了取消高度。 <view class"box-border" :style"{padding-top: ${navHeight}px,}"><!-- 已登录 --><view v-if"userStore.userInfo&…

DeepSeek 15天指导手册——从入门到精通 PDF(附下载)

DeepSeek使用教程系列--DeepSeek 15天指导手册——从入门到精通pdf下载&#xff1a; https://pan.baidu.com/s/1PrIo0Xo0h5s6Plcc_smS8w?pwd1234 提取码: 1234 或 https://pan.quark.cn/s/2e8de75027d3 《DeepSeek 15天指导手册——从入门到精通》以系统化学习路径为核心&…

element-ui的组件使用

1. 安装 Element UI&#xff08;在文件夹最上面输入cmd进入dos窗口&#xff0c;然后输入安装指令 npm install element-ui --save&#xff09; 2.在main.js文件全局引入(main.js文件负责 全局注册 )&#xff0c;在该文件注册的所有组件在其他文件都能直接调用&#xff0c;一般…

List的模拟实现(2)

前言 上一节我们讲解了list的基本功能&#xff0c;那么本节我们就结合底层代码来分析list是怎么实现的&#xff0c;那么废话不多说&#xff0c;我们正式进入今天的学习&#xff1a;&#xff09; List的底层结构 我们先来看一下list的底层基本结构&#xff1a; 这里比较奇怪的…

RT-Thread+STM32L475VET6实现红外遥控实验

文章目录 前言一、板载资源介绍二、具体步骤1. 确定红外接收头引脚编号2. 下载infrared软件包3. 配置infrared软件包4. 打开STM32CubeMX进行相关配置4.1 使用外部高速时钟&#xff0c;并修改时钟树4.2 打开定时器16(定时器根据自己需求调整)4.3 打开串口4.4 生成工程 5. 打开HW…

速通HTML

HTML基础 1.快捷键 基于VS Code记录编写过程中常用的快捷键 功能快捷键生成HTML基本骨架!回车保存代码CtrlS在浏览器运行代码AltB注释Ctrl/缩进Tab取消缩进ShiftTab收起侧边栏CtrlB 先保存&#xff0c;再在浏览器运行才能刷新 2.标签 标签作用h1——h6双标签标题标签&#…

WebXR教学 01 基础介绍

什么是WebXR&#xff1f; 定义 XR VR AR Web上使用XR技术的API WebXR 是一组用于在 Web 浏览器中实现虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;应用的技术标准。它由 W3C 的 Immersive Web 工作组开发&#xff0c;旨在提供跨设备的沉浸式体验…

IRI 2016 模型在线版 MATLAB

IRI官网&#xff1a;International Reference Ionosphere IRI-2016在线计算&#xff1a;IRI 2016 | CCMC 官方提供的MATLAB代码需要联网读取IRI网页数据&#xff1a; 下载需要注册账号&#xff0c;没有注册账号的自行注册&#xff0c;下载好后解压是这样的&#xff1a; 下载I…