2、B/S(Browser/Server,浏览器/服务器)结构
⑤给前端响应数据用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目录下写
<!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 {
}
}
此时前端接受到的数据为