目录
3. JQuery 框架:简化前端 AJAX 请求(核心代码)
前言
相信每个大学生做的第一个系统都是图书管理系统!!!而在日常的学习和实践中,我完成了一个简易的图书管理系统的开发,这个系统涵盖了前端交互、后端逻辑处理等核心环节,既巩固了基础技术知识,也融入了主流技术框架的应用,积累了实际项目开发的经验。接下来就和大家分享这个项目的技术栈、核心框架选型以及核心代码实现思路,而项目完整源码已上传至码云:https://gitee.com/lu-shengyu-java/com.book.git。
一、项目技术栈与框架总览
这个图书管理系统的开发以 “基础技术 + 主流框架” 为核心,既保证了开发的便捷性,也贴合企业级开发的实际场景,核心技术及框架占比如下:HTML 42%、Java 26%、JavaScript 20%、CSS 5%、框架相关代码(MyBatis、Servlet、JQuery 等)7%。各技术 / 框架各司其职,形成完整的技术闭环:
1. 后端核心框架与技术
- Java SE:作为后端开发的基础语言,支撑整个业务逻辑的编写,是所有框架和功能的核心载体。
- Servlet/JSP:Java Web 的核心基础框架,负责处理前端 HTTP 请求、实现前后端数据交互,是后端与前端通信的核心桥梁,比如接收前端表单提交的图书信息、返回查询的图书列表数据等。
- MyBatis:持久层框架,替代了原生 JDBC 的繁琐操作,简化数据库交互,通过 XML 或注解方式配置 SQL 映射,大幅提升数据访问层的开发效率,也是项目中数据库操作的核心框架。
- Spring Context(可选):轻量级的 IoC 容器,用于管理后端业务层 Bean,实现组件的解耦,比如 BookService、BookDao 等类的实例化与依赖注入,让代码结构更清晰、易于维护。
- MySQL:关系型数据库,用于存储图书信息、用户信息等核心数据,是系统的数据存储核心。
2. 前端核心框架与技术
- HTML:页面骨架,搭建图书列表页、新增 / 编辑页、登录页等核心页面的结构。
- CSS + Bootstrap:前者负责基础样式美化,后者作为前端 UI 框架,快速实现响应式布局,统一页面风格(如按钮、表单、表格的样式),无需从零编写复杂 CSS,提升前端开发效率。
- JavaScript + JQuery:JQuery 作为轻量级前端框架,简化了原生 JavaScript 的 DOM 操作、事件处理、AJAX 请求等操作,是前端交互的核心框架,比如异步加载图书列表、表单校验、弹窗提示等功能均基于此实现。
3. 辅助工具与框架
- Maven:项目构建与依赖管理工具,统一管理 MyBatis、Spring、JQuery 等框架的依赖包,避免手动导入 jar 包的繁琐,保证项目依赖的一致性。
- Tomcat:Web 服务器 / 容器,用于部署和运行整个 Java Web 项目,处理前端请求并转发至对应的 Servlet 进行处理。
二、运行截图
1、登录界面
2、图书管理界面
3、图书修改界面
三、核心框架应用代码解析
1. MyBatis 框架:简化数据库操作(核心代码)
相较于原生 JDBC,MyBatis 大幅简化了数据库交互代码,以下是图书查询功能的 MyBatis 实现:
// 1. BookMapper接口(数据访问层)
public interface BookMapper {
// 查询所有图书
List<Book> findAllBooks();
// 根据ID查询图书
Book findBookById(Integer id);
// 新增图书
int addBook(Book book);
// 删除图书
int deleteBook(Integer id);
}
// 2. MyBatis映射文件(BookMapper.xml)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.book.mapper.BookMapper">
<!-- 结果集映射,匹配数据库字段与实体类属性 -->
<resultMap id="BookResultMap" type="com.book.entity.Book">
<id column="id" property="id"/>
<result column="book_name" property="bookName"/>
<result column="author" property="author"/>
<result column="publish_time" property="publishTime"/>
</resultMap>
<!-- 查询所有图书 -->
<select id="findAllBooks" resultMap="BookResultMap">
SELECT id, book_name, author, publish_time FROM book
</select>
</mapper>
// 3. MyBatis工具类(获取SqlSession)
public class MyBatisUtil {
private static SqlSessionFactory sqlSessionFactory;
static {
try {
// 加载MyBatis配置文件
InputStream is = Resources.getResourceAsStream("mybatis-config.xml");
sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
} catch (IOException e) {
e.printStackTrace();
}
}
// 获取SqlSession对象
public static SqlSession getSqlSession() {
// 设置自动提交事务
return sqlSessionFactory.openSession(true);
}
}
// 4. 业务层调用Mapper
public class BookService {
public List<Book> findAllBooks() {
try (SqlSession session = MyBatisUtil.getSqlSession()) {
BookMapper mapper = session.getMapper(BookMapper.class);
return mapper.findAllBooks();
}
}
}
MyBatis 的核心优势在于:将 SQL 与 Java 代码解耦,通过映射文件统一管理 SQL;自动完成结果集与实体类的映射,无需手动封装数据;简化了数据库连接、资源关闭等操作,提升开发效率。
2. Servlet 框架:处理前端请求(核心代码)
Servlet 作为后端接收前端请求的核心框架,负责处理图书新增的请求逻辑:
@WebServlet("/addBook")
public class AddBookServlet extends HttpServlet {
private BookService bookService = new BookService();
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置请求编码,解决中文乱码
request.setCharacterEncoding("UTF-8");
// 获取前端提交的参数
String bookName = request.getParameter("bookName");
String author = request.getParameter("author");
String publishTime = request.getParameter("publishTime");
// 封装为Book对象
Book book = new Book();
book.setBookName(bookName);
book.setAuthor(author);
book.setPublishTime(publishTime);
// 调用业务层新增图书
int result = bookService.addBook(book);
// 返回响应结果
response.setContentType("application/json;charset=UTF-8");
PrintWriter out = response.getWriter();
if (result > 0) {
out.write("{\"success\":true,\"msg\":\"新增图书成功\"}");
} else {
out.write("{\"success\":false,\"msg\":\"新增图书失败\"}");
}
out.close();
}
}
这段代码通过 Servlet 接收前端 POST 请求,解析参数后调用业务层完成图书新增,最后返回 JSON 格式的响应结果,是前后端交互的核心环节。
3. JQuery 框架:简化前端 AJAX 请求(核心代码)
前端通过 JQuery 简化 AJAX 异步请求,实现图书列表的无刷新加载:
// 加载图书列表
function loadBookList() {
$.ajax({
url: "/findAllBooks", // 对应Servlet的访问路径
type: "GET",
dataType: "json",
success: function (data) {
// 清空表格
$("#bookTableBody").empty();
// 遍历数据,渲染表格
$.each(data, function (index, book) {
let tr = "<tr>" +
"<td>" + book.id + "</td>" +
"<td>" + book.bookName + "</td>" +
"<td>" + book.author + "</td>" +
"<td>" + book.publishTime + "</td>" +
"<td><button class='btn btn-danger' onclick='deleteBook(" + book.id + ")'>删除</button></td>" +
"</tr>";
$("#bookTableBody").append(tr);
});
},
error: function () {
alert("加载图书列表失败!");
}
});
}
// 页面加载完成后自动调用
$(function () {
loadBookList();
});
JQuery 的 AJAX 方法简化了原生 XMLHttpRequest 的编写,通过链式调用和简洁的配置,快速实现异步请求与数据渲染,提升前端交互体验。
四、框架选型思路
本次项目选择上述框架的核心思路是 “轻量、实用、贴合学习场景”:
- 后端优先选择 MyBatis 而非 Hibernate:MyBatis 更贴近 SQL 底层,适合学习阶段理解数据库交互逻辑,也符合多数中小型项目的实际选型习惯;
- 前端选用 JQuery+Bootstrap:相较于 Vue、React 等大型框架,JQuery 学习成本低、上手快,能快速实现核心交互,适合入门级 Web 项目;
- 基础框架(Servlet)不省略:Servlet 是 Java Web 的基础,掌握其核心原理,能更好地理解 Spring MVC 等高级框架的底层逻辑。
五、项目总结
这个图书管理系统虽然功能简易,但完整覆盖了 “前端框架 + 后端框架 + 数据库” 的全栈开发链路,从 MyBatis 的数据库操作、Servlet 的请求处理,到 JQuery 的前端交互,均贴合企业级开发的基础场景。整个项目的源码已上传至码云:https://gitee.com/lu-shengyu-java/com.book.git,感兴趣的小伙伴可以下载下来看看,也欢迎大家提出改进建议。
如果这篇分享对你有帮助的话,别忘了给我点个赞哦!你的支持就是我继续学习和分享的最大动力~


被折叠的 条评论
为什么被折叠?



