网站定位广告,清华大学自动化系,wordpress编辑器添加短代码按钮,wordpress分享可见内容目前就实现了分页查询#xff0c;修改#xff0c;删除功能
这个小案例练习到了很多技能#xff0c;比如前后端交互、异步请求、三层架构思想、后端连接数据库、配置文件、基础业务crud等等
感兴趣的小伙伴可以去做一个试试
准备工作
1、使用maven构建一个web工程
打开i…目前就实现了分页查询修改删除功能
这个小案例练习到了很多技能比如前后端交互、异步请求、三层架构思想、后端连接数据库、配置文件、基础业务crud等等
感兴趣的小伙伴可以去做一个试试
准备工作
1、使用maven构建一个web工程
打开idea软件点击new project
选中构建为web项目
设置工程名字为book-code设置工程路径位置
设置自己maven的地址跟maven仓库的地址可能会跟我不一样
然后点击Finish创建工程 如果一切顺利的话会生成下面这些目录 没有生成也不要紧咱可以自己手动生成成功可以跳过1~16步从17步开始看 首先你应该会有应该下面的这些基本文件 右击你的工程名称也就是book-code 然后鼠标移动到第一个new右边会继续显示选择项然后点击directory创建目录 然后会显示一个弹框让你建目录 然后把弹框里面下面的四个目录都选中可以按住ctrl键然后鼠标一个个点 然后按回车左边目录就会帮你生成缺的目录 鼠标移到main目录下右击选择new然后再选择directory创建目录 在弹出的框里写webapp回车创建目录 然后在webapp目录里面再创建两个目录分别是js跟WEB-INF 然后在js目录里放jquery.js文件这个文件可以直接从网上找 然后右击WEB-INF目录选择文件file 然后创建一个web.xml文件 把下面的内容复制到web.xml文件里 ?xml version1.0 encodingUTF-8?
web-appversion4.0xmlnshttp://xmlns.jcp.org/xml/ns/javaeexmlns:javaeehttp://xmlns.jcp.org/xml/ns/javaeexmlns:xmlhttp://www.w3.org/XML/1998/namespacexmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsddisplay-namebook-code/display-name
/web-app 像这个样子 然后右击webapp目录新建一个jsp文件 创建一个index的jsp主页面 创建完成后是这个样子的 然后在body标签中间写以下内容 h1hello/h1
2、测试web工程是否能正常运行
创建一个tomcat 点击add configuration 会弹出如下的框 然后点击左上角的 然后在弹出的菜单滚动到tomc server这然后选中local创建tomcat 然后会弹出如下界面接着把name改为book-name 然后选中deployment点击左上角的再点artifact 然后默认选择第一个就好然后点ok 然后滚轮滚到最下面把application context里的内容改为一个\ 然后点apply再点ok就好了 点完后的界面应该如下 然后点上面的绿色的小三角来测试web工程是否正常运行 如果成功进入浏览器界面输出了hello那就是成功啦
3、补全web工程的各个目录
现在补全的是最基本的目录 4、添加依赖 首先再modelVersion标签下面添加一行packaging标签 packagingwar/packaging 然后再下图位置的地方把下面文本里的内容复制进去 dependencies!-- servlet --!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api --dependencygroupIdjavax.servlet/groupIdartifactIdjavax.servlet-api/artifactIdversion3.1.0/versionscopeprovided/scope/dependency!-- jsp --!-- https://mvnrepository.com/artifact/javax.servlet.jsp/jsp-api --dependencygroupIdjavax.servlet.jsp/groupIdartifactIdjsp-api/artifactIdversion2.1/versionscopeprovided/scope/dependency!-- jstl --dependencygroupIdjavax.servlet/groupIdartifactIdjstl/artifactIdversion1.2/version/dependency!-- mysql驱动 --dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion8.0.19/version/dependency!-- mybatis --dependencygroupIdorg.mybatis/groupIdartifactIdmybatis/artifactIdversion3.5.1/version/dependency!-- lombok --dependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdversion1.18.30/versionscopeprovided/scope/dependency!-- 分页插件 --dependencygroupIdcom.github.pagehelper/groupIdartifactIdpagehelper/artifactIdversion5.2.0/version/dependency!-- fastjaon --!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.73/version/dependency!-- junit测试 --dependencygroupIdjunit/groupIdartifactIdjunit/artifactIdversion4.12/versionscopetest/scope/dependency/dependencies
buildresourcesresourcedirectorysrc/main/java/directoryincludesinclude**/*.properties/includeinclude**/*.xml/include/includesfilteringfalse/filtering/resource
resourcedirectorysrc/main/resources/directoryincludesinclude**/*.properties/includeinclude**/*.xml/include/includesfilteringtrue/filtering/resource/resources/build 然后点右边蓝色的mpom.xml里的依赖就配置好了
5、添加配置文件 右击resources目录新建一个resources bundle 然后名字叫db点ok 然后会打开dp.properties 把下面文本内容复制到dp.properties jdbc.drivercom.mysql.cj.jdbc.Driver
jdbc.urljdbc:mysql://127.0.0.1:3306/bank?useUnicodetrueserverTimezoneUTC
jdbc.usernameroot
jdbc.password123456 然后再右击resources目录新建文件 建一个mybatis-config.xml文件 然后把下面的文本复制到mybatis-config.xml文件 ?xml version1.0 encodingUTF-8 ?
!DOCTYPE configurationPUBLIC -//mybatis.org//DTD Config 3.0//ENhttp://mybatis.org/dtd/mybatis-3-config.dtd
configuration!-- 导入properties文件 --properties resourcedb.properties/settings!-- 开启Mybatis的日志功能--setting namelogImpl valueSTDOUT_LOGGING/!-- 开启驼峰命名规则 --setting namemapUnderscoreToCamelCase valuetrue/!-- 一级缓存 --setting namelocalCacheScope valueSESSION//settingstypeAliases!-- 扫描包下所有类自动映射 --package namecom.bk.pojo//typeAliases!-- 分页插件 --pluginsplugin interceptorcom.github.pagehelper.PageInterceptor/plugin/plugins!-- 数据库的环境 --environments defaultdevenvironment iddevtransactionManager typeJDBC/transactionManagerdataSource typePOOLEDproperty namedriver value${jdbc.driver}/property nameurl value${jdbc.url}/property nameusername value${jdbc.username}/property namepassword value${jdbc.password}//dataSource/environment/environmentsmappers
!-- mapper resourcecom/cwb/mapper/StudentMapper.xml/--package namecom.bk.mapper//mappers
/configuration
准备工作就结束啦可以愉快的敲代码了
敲代码阶段
基础代码 右击pojo目录建一个class类 建一个book实体类 然后把参考下面的代码写到你自己的代码里你也可以全选我的代码替换你的所有代码 package com.bk.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import java.io.Serializable;
/*** Author 27435* Date 2024/11/1116:57* Version 1.0*/
Data
AllArgsConstructor
public class Book implements Serializable {private Integer id; // 编号private String name; // 名字private String author; // 作者private Float price; // 价格private Integer typeId; // 类型编号
public Book(String name, String author, Float price, Integer typeId) {this.name name;this.author author;this.price price;this.typeId typeId;}
public Book() {}
}
接着右击utils目录建一个类类名为MybatisUtils然后把参考下面的代码写到你自己的代码里你也可以全选我的代码替换你的所有代码 package com.bk.utils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import java.io.InputStream;
/*** Author 27435* Date 2024/11/2017:20* Version 1.0*/
/*** Mybatis工具类用于提供SqlSessionFactory和SqlSession对象*/
public class MybatisUtils {
// SqlSessionFactory对象用于生成SqlSessionprivate static SqlSessionFactory factory null;
// 静态代码块用于初始化SqlSessionFactorystatic {
// 读取MyBatis配置文件InputStream is MybatisUtils.class.getClassLoader().getResourceAsStream(mybatis-config.xml);// 使用SqlSessionFactoryBuilder构建SqlSessionFactoryfactory new SqlSessionFactoryBuilder().build(is);
}
/*** 获取SqlSession对象** return SqlSession对象用于执行SQL语句*/public static SqlSession getSqlSession(){SqlSession sqlSession null;if (factory ! null){// 自动提交事务为true打开SqlSessionsqlSession factory.openSession(true);}return sqlSession;}
}
mapper层
编写数据访问层
package com.bk.mapper;
import com.bk.pojo.Book;
import org.apache.ibatis.annotations.Param;
import java.util.List;
/*** Author 27435* Date 2024/11/2015:31* Version 1.0*/
public interface BookMapper {
/*** 查询所有的图书* return*/ListBook selectBooks();
/*** 根据id删除图书* param id* return*/int deleteBookById(Param(id) int id);
/*** 根据id查询图书* param id* return*/Book selectBookById(Param(id) int id);
/*** 更新图书* param book* return*/int updateBookById(Book book);
}
编写mapper映射文件
?xml version1.0 encodingUTF-8 ?
!DOCTYPE mapperPUBLIC -//mybatis.org//DTD Mapper 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.bk.mapper.BookMapper!-- 启用二级缓存 --cache/resultMap idbook typecom.bk.pojo.Bookid propertyid columnbook_id /result propertyname columnbook_name /result propertyauthor columnbook_author /result propertyprice columnbook_price /result propertytypeId columnbook_type //resultMap
update idupdateBookByIdupdate booksetif testname ! nullbook_name #{name},/ifif testauthor ! nullbook_author #{author},/ifif testprice ! nullbook_price #{price},/ifif testtypeId ! nullbook_type #{typeId},/if/setwhere book_id #{id}/update
delete iddeleteBookByIddelete from book where book_id #{id}/delete
select idselectBooks resultMapbookselect * from book/select
select idselectBookById resultMapbookselect * from book where book_id #{id}/select
/mapper
service层
编写业务访问层的接口
package com.bk.service;
import com.bk.pojo.Book;
import java.util.List;
/*** Author 27435* Date 2024/11/2015:28* Version 1.0*/
public interface BookService {
/*** 查询所有的图书* return*/ListBook getBooks();
/*** 根据id删除图书* param id* return*/int deleteBookById(int id);
/*** 根据id查询图书* param id* return*/Book selectBookById(int id);
/*** 更新图书* param book* return*/int updateBookById(Book book);
}
编写实现类
package com.bk.service.impl;
import com.bk.mapper.BookMapper;
import com.bk.pojo.Book;
import com.bk.service.BookService;
import com.bk.utils.MybatisUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import java.util.List;
/*** Author 27435* Date 2024/11/2015:29* Version 1.0*/
public class BookServiceImpl implements BookService {
// 使用Mybatis工具类获取SqlSession并从中获取BookMapper接口的实现private BookMapper mapper MybatisUtils.getSqlSession().getMapper(BookMapper.class);
/*** 查询所有的图书* return*/Overridepublic ListBook getBooks() {// 调用数据访问层查询所有图书的方法return mapper.selectBooks();}
/*** 根据id删除图书* param id* return*/Overridepublic int deleteBookById(int id) {// 调用数据访问层删除图书的方法return mapper.deleteBookById(id);}
/*** 根据id查询图书* param id* return*/Overridepublic Book selectBookById(int id) {// 调用数据访问层根据id查询图书的方法return mapper.selectBookById(id);}
/*** 更新图书* param book* return*/Overridepublic int updateBookById(Book book) {// 调用数据访问层更新图书的方法return mapper.updateBookById(book);}
}
servlet层
编写查询所有图书的servlet类
package com.bk.servlet;
import com.alibaba.fastjson.JSON;
import com.bk.pojo.Book;
import com.bk.service.BookService;
import com.bk.service.impl.BookServiceImpl;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
/*** Author 27435* Date 2024/11/2015:16* Version 1.0*/
WebServlet(urlPatterns {/books})
public class BookServlet extends HttpServlet {
Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 设置请求编码req.setCharacterEncoding(UTF-8);// 设置响应编码resp.setCharacterEncoding(UTF-8);// 设置响应类型resp.setContentType(application/json;charsetUTF-8);// 获取当前页码String pageNum req.getParameter(pageNum);// 响应流PrintWriter out resp.getWriter();// 设置分页参数PageHelper.startPage(Integer.valueOf(pageNum),3);// 调用业务层查询所有图书的方法BookService bookService new BookServiceImpl();// 获取图书列表ListBook books bookService.getBooks();// 获取分页信息PageInfoBook pageInfo new PageInfo(books);// 将数据转换为JSON格式String jsonString JSON.toJSONString(pageInfo);// 输出JSON字符串到客户端out.print(jsonString);}
Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}
编写删除图书的servlet类
package com.bk.servlet;
import com.bk.service.BookService;
import com.bk.service.impl.BookServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.swing.text.html.HTML;
import java.io.IOException;
import java.io.PrintWriter;
/*** Author 27435* Date 2024/11/2519:19* Version 1.0*/
WebServlet(urlPatterns {/deleteBook})
public class DeleteBookServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 设置请求编码req.setCharacterEncoding(UTF-8);// 设置响应编码resp.setCharacterEncoding(UTF-8);// 设置响应类型resp.setContentType(text/html;charsetUTF-8);// 获取要删除数据的idString id req.getParameter(id);// 响应流PrintWriter out resp.getWriter();// 调用业务层查询所有图书的方法BookService bookService new BookServiceImpl();// 根据id删除图书int i bookService.deleteBookById(Integer.valueOf(id));// 判断是否删除成功if (i 0) {out.print(删除成功);}else {out.print(删除失败);}}
Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}
编写根据id查询图书的servlet类
package com.bk.servlet;
import com.alibaba.fastjson.JSON;
import com.bk.pojo.Book;
import com.bk.service.BookService;
import com.bk.service.impl.BookServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/*** Author 27435* Date 2024/11/2611:06* Version 1.0*/
WebServlet(urlPatterns {/selectBookById})
public class SelectBookByIdServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 设置请求编码req.setCharacterEncoding(UTF-8);// 设置响应编码resp.setCharacterEncoding(UTF-8);// 设置响应类型resp.setContentType(text/html;charsetUTF-8);// 获取要删除数据的idString id req.getParameter(id);// 响应流PrintWriter out resp.getWriter();// 调用业务层查询所有图书的方法BookService bookService new BookServiceImpl();// 根据id查询图书Book book bookService.selectBookById(Integer.valueOf(id));// 将数据转换为JSON格式String jsonString JSON.toJSONString(book);// 输出JSON字符串到客户端out.print(jsonString);}
Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}
编写修改图书的servlet类
package com.bk.servlet;
import com.bk.pojo.Book;
import com.bk.service.BookService;
import com.bk.service.impl.BookServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/*** Author 27435* Date 2024/11/2613:26* Version 1.0*/
WebServlet(urlPatterns {/updateBook})
public class UpdateServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 设置请求编码req.setCharacterEncoding(UTF-8);// 设置响应编码resp.setCharacterEncoding(UTF-8);// 设置响应类型resp.setContentType(text/html;charsetUTF-8);// 响应流PrintWriter out resp.getWriter();// 获取idString id req.getParameter(id);// 获取nameString name req.getParameter(name);// 获取authorString author req.getParameter(author);// 获取priceString price req.getParameter(price);// 获取typeIdString typeId req.getParameter(typeId);// 实例化Book对象Book book new Book(Integer.valueOf(id), name, author, Float.valueOf(price), Integer.valueOf(typeId));// 调用业务层查询所有图书的方法BookService bookService new BookServiceImpl();// 根据id修改图书int i bookService.updateBookById(book);// 判断是否修改成功if (i 0) {out.print(修改成功);}else {out.print(修改失败);}}
Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}
index页面编码
编写主页面代码
%--Created by IntelliJ IDEA.User: 27435Date: 2024/11/20Time: 15:12To change this template use File | Settings | File Templates.
--%
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitle首页/title!-- 引入 Bootstrap CSS --link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/css/bootstrap.min.css relstylesheetstyletable, th, tr, td {padding: 0; /*内边距*/margin: 0; /*外边距*/border: solid 1px #ccc; /*边框*/}table {width: 800px; /*宽*/margin: 50px auto; /*外边距*//*border-collapse: collapse;*/ /*合并边框*/}td, th {text-align: center; /*文字居中*/}.pages {width: 800px; /*宽*/height: 40px; /*高*/line-height: 40px; /*行高*/margin: 0 auto; /*外边距*/text-align: center; /*文字居中*/}.pages a {margin-right: 15px; /*右外边距*/}.pages .active {color: red; /*字体颜色*/}/style
/head
bodytabletrth编号/thth名称/thth作者/thth价格/thth类型/thth操作/th/trtbody idbookList
/tbody/tablediv classpages
/div
!-- 模态框 --div classmodal fade idexampleModal tabindex-1 aria-labelledbyexampleModalLabel aria-hiddentruediv classmodal-dialogdiv classmodal-contentdiv classmodal-headerh5 classmodal-title idexampleModalLabel修改/h5button typebutton classbtn-close data-bs-dismissmodal aria-labelClose/button/divdiv classmodal-bodyformdiv classmb-3label forid classform-label编号/labelinput typetext classform-control idid nameid/divdiv classmb-3label forname classform-label名称/labelinput typetext classform-control idname namename/divdiv classmb-3label forauthor classform-label作者/labelinput typetext classform-control idauthor nameauthor/divdiv classmb-3label forprice classform-label价格/labelinput typetext classform-control idprice nameprice/divdiv classmb-3label fortypeId classform-label类型/labelinput typetext classform-control idtypeId nametypeId/div/form/divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-bs-dismissmodal关闭/buttonbutton typebutton classbtn btn-primary保存修改/button/div/div/div/div
!-- 引入 Bootstrap JS 和 Popper.js --script srchttps://cdn.jsdelivr.net/npm/popperjs/core2.11.6/dist/umd/popper.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/js/bootstrap.min.js/scriptscript srcjs/jquery.js/scriptscriptvar pageNum 1; // 当前页码
// 渲染列表function createBookList(books){$(#bookList).empty(); // 清空tbody$.each(books,function (index,book){ // 遍历booksvar tr $(tr/tr); // 创建一行
var idTd $(td/td); // 创建一列idTd.text(book.id); // 将book对象的编号写入td中tr.append(idTd); // 将idTd追加到tr中
var nameTd $(td/td); // 创建一列nameTd.text(book.name); // 将book对象的名称写入td中tr.append(nameTd); // 将nameTd追加到tr中
var authorTd $(td/td); // 创建一列authorTd.text(book.author); // 将book对象的作者写入td中tr.append(authorTd); // 将authorTd追加到tr中
var priceTd $(td/td); // 创建一列priceTd.text(book.price); // 将book对象的价格写入td中tr.append(priceTd); // 将priceTd追加到tr中
var typeTd $(td/td); // 创建一列typeTd.text(book.typeId); // 将book对象的类别写入td中tr.append(typeTd); // 将typeTd追加到tr中
var actionTd $(td/td); // 创建一列var updateBtn $(input/) // 创建修改按钮var delBtn $(input/) // 创建删除按钮updateBtn.attr(type,button).attr(value,修改).attr(class,up_btn).attr(data-bs-toggle,modal).attr(data-bs-target,#exampleModal); // 设置修改按钮的属性delBtn.attr(type,button).attr(value,删除).attr(class,del_btn); // 设置删除按钮的属性actionTd.append(updateBtn) // 将修改按钮追加到actionTd中actionTd.append(delBtn) // 将删除按钮追加到actionTd中tr.append(actionTd); // 将actionTd追加到tr中
// 将这一行追加到tbody中$(#bookList).append(tr);})}
// 渲染分页function createPages(data){// data 就是分页信息对象$(.pages).empty(); // 清空分页
// 检查是否有上一页if (data.hasPreviousPage) { // 如果有上一页// 创建上一页链接元素var pre_a $(a上一页/a)// 设置链接的默认行为是跳转到当前页面pre_a.attr(href, #)// 为上一页链接添加类名用于CSS样式定制pre_a.attr(class, pre)// 将上一页链接添加到页面的.pages容器中$(.pages).append(pre_a)}
// 遍历页面编号数组生成分页链接$.each(data.navigatepageNums, function (index,num){// 创建一个新的a元素var a $(a/a)// 设置链接默认属性a.attr(href, #)// 根据当前页面编号设置链接的样式if (num data.pageNum) {// 如果是当前页面则添加 active 类以红色显示a.attr(class, active a1)}else {// 否则仅添加 a1 类a.attr(class, a1)}// 设置链接文本为页面编号a.text(num)// 将生成的链接添加到 .pages 容器中$(.pages).append(a)})
// 检查是否存在下一页if (data.hasNextPage) { // 如果有下一页// 创建下一页的链接元素var next_a $(a下一页/a)// 设置链接的默认行为是跳转到当前页面next_a.attr(href, #)// 为下一页添加类名用于CSS样式定制next_a.attr(class, next)// 将下一页链接添加到页面的.pages容器中$(.pages).append(next_a)}}
// 为类名为pages的元素内部的.a1类元素添加点击事件监听器$(.pages).on(click, .a1, function (even){// 阻止默认事件行为防止页面刷新或跳转even.preventDefault();// 将点击的元素的文本内容转换为整数并赋值给pageNum变量pageNum parseInt($(this).text());// console.log(当前页 pageNum)// 调用getBooks方法传入当前页码刷新数据getBooks(pageNum)})
// 上一页// 为类名为pages的元素绑定点击事件事件针对的是类名为pre的子元素$(.pages).on(click, .pre, function (even){// 阻止默认事件行为防止页面刷新或跳转even.preventDefault();// 减少当前页码值实现翻页到上一页并把值赋给pageNum变量pageNum pageNum - 1;// console.log(pageNum)// 调用getBooks方法传入当前页码刷新数据getBooks(pageNum)// getBooks($(this).attr(pre))})
// 下一页// 为类名为pages的元素绑定点击事件事件针对的是类名为next的子元素$(.pages).on(click, .next, function (even){// 阻止默认事件行为防止页面刷新或跳转even.preventDefault();// 增加当前页码值实现翻页到下一页并把值赋给pageNum变量pageNum pageNum 1;// console.log(下一页 pageNum)// 调用getBooks方法传入当前页码刷新数据getBooks(pageNum)// getBooks($(this).attr(next))})
// 删除数据$(#bookList).on(click, .del_btn, function (even){// 阻止默认事件行为even.preventDefault();// 弹出确认框var r confirm(确定删除吗)// 如果用户取消删除则不执行后续操作if (!r) {return;}// 获取当前点击的删除按钮所在行的第一个子元素即书籍IDvar id $(this).parent().parent().children(:first).text();console.log(id)// 调用deleteBookById函数删除指定ID的书籍deleteBookById(id);})
// 点击修改按钮弹出修改框$(#bookList).on(click, .up_btn, function (even){// 阻止默认事件行为even.preventDefault();var id $(this).parent().parent().children(:first).text();// 根据id查询对应的数据并把数据用bootstrap模态框的形式弹出来供用户修改用ajax向servlet请求数据$.ajax({url: selectBookById, // 请求的urltype: get, // 请求的方式dataType: json, // 预计从服务器返回的数据data: id id, // 发给服务器的数据id信息success: function (data){// 弹出模态框// 把数据回显到模态框$(#id).val(data.id);$(#name).val(data.name);$(#author).val(data.author);$(#price).val(data.price);$(#typeId).val(data.typeId);}})})
// 点击按钮进行数据修改提交数据到servlet用ajax提交$(.btn-primary).click(function (){var id $(#id).val(); // 编号var name $(#name).val(); // 名字var author $(#author).val(); // 作者var price $(#price).val(); // 价格var typeId $(#typeId).val(); // 类型// 关闭模态款$(#exampleModal).modal(hide)$.ajax({url: updateBook, // 请求的urltype: post, // 请求的方式dataType: text, // 预计从服务器返回的数据data: id id name name author author price price typeId typeId, // 发给服务器的数据success: function (row){// 提示用户alert(row)// 刷新数据getBooks(pageNum)}})})
/*** 根据id删除图书* param id*/function deleteBookById(id){$.ajax({url: deleteBook, // 请求的urltype: get, // 请求的方式dataType: text, // 预计从服务器返回的数据data: id id, // 发给服务器的数据id信息success: function (row){alert(row) // 提示用户getBooks(pageNum) // 刷新数据
// 检查当前页是否为空var books $(#bookList tr); // 获取当前页的所有行元素if (books.length 1 pageNum 1) {getBooks(pageNum - 1); // 如果当前页为空且不是第一页则跳转到前一页}}})}
/*** 根据页码获取图书列表* param pageNum*/function getBooks(pageNum){$.ajax({url: books, // 请求的urltype: get, // 请求的方式dataType: JSON, // 预计从服务器返回的数据data: pageNum pageNum, // 发给服务器的数据页码信息success: function (data){ // 请求成功执行的回调函数// console.log(data)pageNum data.pageNum; // 更新当前页码createBookList(data.list) // 创建图书列表createPages(data) // 创建分页信息}})}
// 当文档加载完成后执行以下函数$(function (){// 调用getBooks方法传入当前页码初始化页面数据getBooks(pageNum)})/script
/body
/html
到此就可以运行代码继续测试 这是运行的效果所有源码再gitee仓库book-CRUD-demo: 这是一个类似于图书系统的小项目对图书进行增删改查大家可以去下载看看
