文章总结： 这篇文章是一份JavaWeb学习笔记，重点介绍了Servlet的创建方法、生命周期（初始化、处理请求、销毁）以及前后端项目互通的实现。文章详细说明了如何搭建前端环境（Mmall项目），解决依赖版本不匹配问题，并通过创建CorsFilter解决跨域问题。笔记还包含XML与HTML的区别、HTTP协议基础等基础知识，以及常见错误及解决方案，如依赖包版本不匹配、Simditor富文本编辑器版本不兼容等。 综合评分： 85 文章分类： WEB安全,应用安全,安全开发,安全建设,安全工具
javaweb笔记1
原创
zoe
哦0吼
2025年12月21日 22:44 河北
学习笔记
第一部分： (概述 & XML)
1. XML 与 HTML 的区别
·用途：HTML 用于显示数据，XML 用于传输和存储数据。
·语法：
·HTML 标签不区分大小写，XML 严格区分大小写。
·HTML 可以有多个根元素，XML 只能有一个根元素。
·HTML 空格自动过滤，XML 空格不会自动过滤。
·HTML 标签预定义，XML 标签可自定义扩展。
2. HTTP 协议基础
·B/S模式 客户端/服务器模式
·无状态协议 对于事物处理没有记忆能力
·请求方式：
·GET：参数拼接在 URL 后（如 ?name=lee&psd=hnxy），不安全，适用于查询。
·POST：数据在请求体中，大小无限制，更安全，适用于提交表单。
·状态码：
·200: 成功。
·404: 资源未找到 (客户端错误)。
·500: 服务器内部错误。
3. 前端环境搭建 (Mmall 项目)
问题总结：
1.前端环境依赖问题：安装 webpack 或 webpack-dev-server 时版本不匹配，或 Node.js 版本过高 / 过低，导致项目启动失败。
2.为什么会出现404问题：路径拼接可能存在问题，打开开发者公工具，查看解决具体问题。
第二部分：Servlet
1. 定义、特点
Servlet是运行在Web服务器端的Java应用程序，它使用Java语言编写。与Java程序的区别是，Servlet 对象主要封装了对HTTP请求的处理，并且它的运行需要Servlet容器（eg：tomcat）的支持。
Servlet就是一个Java类。作用：用于处理客户端传来的HTTP请求，并返回一个响应，主要功能是生成动态web内容。
2. 如何创建
1、 新建项目，选择Maven Archetype项目
然后填写项目名，选择Archetype后缀为webapp的，最后点击创建
2、创建完成后，连接tomcat服务器
3、然后在main下面创建Directory命名为java,然后在java下面创建packages命名为servlet，最后在servlet下面创建java class命名为FirstServlet，写内容
4、在pop.xml中引入servlet依赖，输入如图所示的代码
5、接着修改Java Compiler
6、运行
3.生命周期
Servlet 的整个生命周期由 Servlet 容器（如 Tomcat）管理，核心可概括为 “1 次初始化 → N 次处理请求 → 1 次销毁” 三步，具体如下：
初始化（1 次）客户端首次访问该 Servlet 时，容器先检查内存：若已有 Servlet 对象，直接用；若没有，先创建 Servlet 实例，再调用init()方法完成初始化（比如加载配置）。整个生命周期里，init()只执行 1 次。
处理请求（N 次）每次客户端访问（如浏览器请求），容器都会：创建ServletRequest（存请求信息，如参数、URL）和ServletResponse（存响应内容，如返回文本）；调用 Servlet 的service()方法，该方法会根据请求类型（GET/POST）自动调用doGet()/doPost()处理请求、生成响应；每来一次请求，就执行 1 次service()，因此会被调用多次。
销毁（1 次）当服务器关闭或 Web 应用被移除时，容器会先调用 Servlet 的destroy()方法（释放资源，如数据库连接），再销毁 Servlet 对象。整个生命周期里，destroy()只执行 1 次。
把这个Mmall项目的操作和逻辑，想象成开一家“线上商店”的全过程——从“搭建店铺基础设施”（环境配置），到“打通前后门沟通”（前后端互通），再到“验证顾客身份”（登录功能）
4.前后端项目启动
Node.js（建议14版本）**：相当于“店铺的总电源”，所有前端代码运行都靠它。
验证方式：打开Cmd，输入node -v，查看是否显示14.x.x版本
- **webpack@^1.15.0**：“打包商品的机器”，把零散的前端代码（JS、CSS）压缩成浏览器能快速加载的文件。
安装命令：npm install -g webpack@^1.15.0
- **webpack-dev-server@^1.16.5**：“店铺的临时试营业服务器”，能让你在本地预览前端页面，改代码后还能实时刷新（就像改了商品价格，货架上能立刻显示新价格）。
安装命令：npm install -g webpack-dev-server@^1.16.5。
源码包解压安装依赖
进入mmall文件夹（前台根目录），执行npm install --registry=https://registry.npmmirror.com：
**启动项目**
-
开发模式（用于开发调试，代码修改后实时更新）：
npm run dev\_win -
生产模式（用于项目上线，代码会进行压缩优化）：
npm run dist\_win
*常见错误及解决（启动报错）**
-
错误信息：
ERROR in ./src/util/mm.js Module not found: Error: Cannot resolve module 'hogan' -
原因：引用的hogan模板引擎包名错误，正确包名为hogan.js
-
解决步骤：
-
卸载错误包：
npm uninstall hogan -
安装正确包：
npm install hogan.js --save-dev -
验证：查看package.json文件的devDependencies或dependencies部分，确认包含
"hogan.js": "^x.x.x" -
**预览项目**：开发模式启动成功后，在浏览器访问
http://localhost:8088/dist/view/index.html
**常见错误及解决（空白页面+控制台错误）**
-
错误信息：
Uncaught TypeError: Simditor.connect is not a function -
原因：Simditor（富文本编辑器）版本不兼容或依赖缺失
-
解决步骤：
-
卸载现有Simditor：
npm uninstall simditor -
安装兼容版本：
npm install [email protected] --save -
安装缺失依赖：
npm install simple-module@latest simple-hotkeys@latest simple-uploader@latest --save -
**预览项目**：错误解决后，访问
http://localhost:8086/dist/view/index.html
5.前后端项目互通
（一）前期准备：前端配置后端地址
找到前端项目中src/util/mm.js文件
conf对象中设置serverHost: 'http://localhost:8080/api'，该地址为后端接口基础路径，确保前端能正确找到后端服务
（二）后端核心实现，后台装“接待员”（创建LoginServlet）
后台需要一个“接待员”（Servlet），专门处理前台发来的登录请求，
-
代码逻辑：创建
LoginServletTest类，加@WebServlet("/api/user/login.do")注解——意思是“只要前台访问/api/user/login.do这个地址，就由我这个接待员处理”。 -
代码结构：
@WebServlet("/api/user/login.do") // 配置Servlet访问路径，与前端请求地址对应
public class LoginServletTest extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("前端登录请求发送到此"); // 接收请求后打印日志，验证请求是否到达
}
}
2. \*\*解决跨域问题（关键）\*\*
- 原因：前端和后端运行在不同端口（如前端8088，后端8080），浏览器出于安全策略会阻止跨域请求
- 实现方式：创建CorsFilter过滤器
- 代码：
java
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) response;
// 允许所有来源访问
httpResponse.setHeader(“Access-Control-Allow-Origin”, “*”);
// 允许的请求方法
httpResponse.setHeader(“Access-Control-Allow-Methods”, “GET, POST, PUT, DELETE, OPTIONS”);
// 允许的请求头
httpResponse.setHeader(“Access-Control-Allow-Headers”, “Content-Type, Authorization”);
// 预检请求有效期（1小时）
httpResponse.setHeader(“Access-Control-Max-Age”, “3600”);
chain.doFilter(request, response); // 继续执行后续请求处理
}
// init和destroy方法为空实现
@Override
public void init(FilterConfig filterConfig) throws ServletException {}
@Override
public void destroy() {}
}
- 配置：在
web.xml中注册过滤器，确保所有请求都经过该过滤器
“`xml
CorsFilter
servlet.CorsFilter
CorsFilter
/*
免责声明：
本文所载程序、技术方法仅面向合法合规的安全研究与教学场景，旨在提升网络安全防护能力，具有明确的技术研究属性。
任何单位或个人未经授权，将本文内容用于攻击、破坏等非法用途的，由此引发的全部法律责任、民事赔偿及连带责任，均由行为人独立承担，本站不承担任何连带责任。
本站内容均为技术交流与知识分享目的发布，若存在版权侵权或其他异议，请通过邮件联系处理，具体联系方式可点击页面上方的联系我。
本文转载自：哦0吼 zoe《
版权声明
本站仅做备份收录，仅供研究与教学参考之用。
读者将信息用于其他用途的，全部法律及连带责任由读者自行承担，本站不承担任何责任。
评论