前后台分离实现图书管理系统

加载首页

前端:
使用jquery添加页面初始化请求,调用ajax,向后台发送加载数据请求,不需要传递数据

后台:
通过前端传递的初始化url地址,向数据库发送请求,语句为select语句,请求完成时,将请求到的数据以json的形式返回给前端

前端:
将返回的数据对页面进行渲染,页面加载完成

增加书籍信息

前端:
给增加书籍的按钮添加点击事件,弹出添加书籍信息的文本框,给提交按钮添加点击事件,调用ajax方法,将获取的文本框数据传递给后台

后台:
接收前端传递的数据,对数据进行判断,由于数据库具有id自增的属性,在传递数据时,使用判断的方法,将数据的id数据去除,使用inser语句,将数据添加至数据库,添加成功时,向前端返回json数据

前端:
接收后台返回的数据,对数据进行判断,成功时重新加载首页,添加的数据将展示在页面中

修改书籍信息

前端
在初始化页面时,给每一个修改按钮添加点击事件,点击修改按钮时,获取按钮对应的行数的id值,通过ajax方法将id传递给后台

后台:
接收前端传递的id值,通过select条件语句,对数据库进行查找,成功时,将数据以json的形式进行返回

前端:
请求成功时,接收后台传递的数据,弹出修改数据的文本框,对文本框进行渲染,将数据展示在文本框上,对数据进行修改,修改完成后,点击提交按钮,给提交按钮添加点击事件,获取文本框数据,通过ajax方法将数据传递到后台

后台:
接收前端传递的数据,使用update语句向数据库发送请求,成功时返回json数据

前端:
接收后台返回的数据,对数据进行判断,成功后则刷新首页

扫描二维码关注公众号,回复: 11593384 查看本文章

删除书籍信息

前端:
在页面初始化时给删除按钮添加点击事件,点击删除按钮时,获取同一组数据的id值,使用ajax方法,将id值传递给后台

后台:
接收前端传递的id值,使用delete语句向数据库发送删除数据的请求,成功时则返回json数据

前端:
接收后台传递的数据,对数据进行判断,成功时则刷新首页

猜你喜欢

转载自blog.csdn.net/weixin_47150940/article/details/108015796
今日推荐