PHP+mysql+ajax搭建图书管理系统

经过这次开发还是有了很深的感悟,虽然这是一个很小的前后端结合的项目,但毕竟是自己亲手将它“生下”嘛,还是很珍惜它,而且也的确让我稍有成长。

历时:两个星期

技术:mysql+php+Ajax+Jquery+h5+css3

首先说一下为什么会做这个吧,主要还是因为觉得这个东西之前稍微接触过而且能够理解其原理,起码要是动起手来还是可以理得清思路,于是就动手干起来了。

1.首先是静态页面的布局

我的页面布局倒是很简单

关于图书展示的部分,我曾经想过要嵌入一个3d展示的网页,样式看起来倒是炫酷,可是无奈学艺不精,我发现无法获取到里面的图片id,也就是无法操作iframe的内容,上网查了几天,还是下不了手继续,只好放弃这个3d展示了,然后我又去网上找一下好看的图片展示案例,然后就了解到jquery的放大镜了,它是a标签镶嵌img,img绑定hover事件,a标签中,链接放的是大图图片,鼠标移到img上时就会在图片的右方一个小方块大小的区域显示大图,好吧 ,也是出现问题了,绑定的事件对ajax新增的图片不起作用,后来去了解了一下,发现是因为dom的更新没跟上,异步的原因,有解决的办法,但我已经放弃它了,选了最简单的展示,如图,没有任何hover,click事件。大概样式定下来后,我就要开始开始折腾数据库了,index.js中用ajax获取图书数据,geibook.php中直接link连接上数据库,接下来就是sql语句了,获取后再ench给index.js中的success:function,接着就是操作dom将数据添加进页面中。但又遇到一个问题,图书数据很多,一次性全部获取,将页面拉的很长,用户体验也好差,于是我就得开始倒腾分页了

为了分页,我暂停了原先的项目新建了一个新的项目,专门去理解分页原理(limit),花了一天,比较好的理解了分页原理后,回到自己的项目,每页展示20条数据,做了分页条,这里有一个坑,发现点击下一页的时候不起作用老是显示page值undefined,后来才知道其实是个很简单的原因,我的page值时用点击事件发生时的$(this).rel获得的,但是由于上一个a标签的高度没设置好,覆盖到了‘下一页’这个a标签上了,于是点击其实是点击了上一个a标签,获取的当然就不对了,调整了一下a的高度后就可以正常切换页面了,接下来就是完善一下其他功能,页面有图书类别的分类,我得实现点击某一类别书籍则只展示该类别的图书,该类别的图书同样要分页展示,那就是传到后台的要两个参数,一个booktype,一个page值,这个倒是好办,思路理清就好了。

接下来就是搜索框了,怎么做到输入某书籍的关键字就出现一系列含有该关键字的图书呢,讲到这我不得不说,遇到问题的时候去解决去学习才是最好的学习方式,以前那样为了学去学还真是不正确。于是我上网搜查资料,也问了自己的老师,才知道了LIKE查询,虽然在格式上倒腾了好一会,但总算是实现了关键字查询这个功能了。

大概就是这样哦,还真像那么回事:

接下来就该是后台管理页面了

这个页面呢是使用bootstrap快速搭建起来的,主要就是左边实现增加图书信息的form表单,右边一个已存图书信息展示栏,因为之前已做过分页条,于是也在这做了分页条,还有要将的就是修改和删除了,其原理都是通过点击事件获取id,然后ajax将这个bookid传入到相应的PHP页面中,php中sql语句做出修改和删除。

附上项目文件目录结构吧,

好像这么理下来,真的没什么事困难的,还是自己学艺不精<摊手>

路漫漫其修远兮,吾将上下而求索。

时间: 2024-11-07 12:18:13

PHP+mysql+ajax搭建图书管理系统的相关文章

c语言小项目-使用mysql数据库的图书管理系统

VS2013通过MySQL方式连接到MySQL MySQL官网上C++的API有两个.一个是很成熟的mysql++,另一个是MySQL Connector/C++,近两年才出的,模仿JDBC做的,封装得很方便使用.这里使用的是mysql方式. 1.新建bookAdminSys工程 2.将文件夹MySQL目录下的include添加到VC++目录中的包含目录中,另外将文件夹MySQL目录下的lib添加到VC++目录中的库目录中 3.添加附加依赖项,将MySQL目录下的libmysql.lib添加到L

delphi+mysql做的图书管理系统,怎么把mysql数据库也一起打包进去?我用的是delphi的Express组件。

sqlconnection,sqlquery1这些组件,我连接数据库的时候是用对象编辑器里的属性进行连接的,在sqlconnection中指定了字符集utf8,有些人做的方法是利用代码连接的数据库,如果我用代码连接mysql数据库怎么做??使用sqlconnecion连接数据库.说清楚点的话就是怎么用代码实现连接mysql数据库,并且指定字符集utf8(不这么做的话就出现乱码). 2011-05-04 11:24提问者采纳1.下载此文件http://www.justsoftwaresolutio

放出一批jsp图书管理系统图书借阅系统源码代码运行

基于jsp+mysql的JSP图书销售管理系统 https://www.icodedock.com/article/105.html基于jsp+Spring+Spring MVC的Spring图书借阅管理系统 https://www.icodedock.com/article/71.html基于jsp+mysql的JSP图书管理系统 https://www.icodedock.com/article/39.html基于jsp+Spring+mybatis+Spring boot的SpringBo

基于Servlet+JDBC+Bootstrap+MySQL+AJAX权限管理系统项目实战教程

项目简介 权限系统一直以来是我们应用系统不可缺少的一个部分,若每个应用系统都重新对系统的权限进行设计,以满足不同系统用户的需求,将会浪费我们不少宝贵时间,所以花时间来设计一个相对通用的权限系统是很有意义的.     本系统的设计目标是对应用系统的所有资源进行权限控制,比如应用系统的功能菜单.各个界面等进行权限的操控.技术介绍 · Servlet3.0 Servlet 3.0 作为JavaEE6 规范体系中一员,随着JavaEE6规范一起发布.该版本在前一版本(Servlet2.5)的基础上提供了

[mysql+qt] 图书管理系统

一.图书管理数据库概念模式设计 图书管理系统包括了游客.用户登录.管理员登录三种模式. 在游客模式下,可以实现检索书籍的功能. 游客可以注册用户,但是借书权限需要管理员授予. 用户登录后,在检索书籍功能的基础上,还可以进行书籍的借阅,并且查看自己的借还情况. 管理员登录后,可以对图书进行管理,即入库新的书籍,也可以对用户进行管理,即授予用户借书证,注销用户. 二.数据库设计         管理员(manager) 属性 主码/外码 数据类型 说明 Username 主码 varchar(20)

PHP+MySql实现图书管理系统

这个图书管理系统是我学完PHP时写的一个练手项目,功能参考了自己学校的图书管理系统.为了锻炼自己的动手能力以及加深对代码的理解,前端和后端均由自己完成,前端使用了一些基本的框架(毕竟我主攻后端开发方向),后端大部分要用到的功能都是自己从底层实现并封装,基本没有用到第三方框架.总体来说还是比较简陋的,在某些地方可能存在缺陷或者漏洞. 项目地址 此项目已经提交到我的Github中 仓库地址:https://github.com/horvey/library-manager 基本功能 用户 查询图书状

Java swing项目-图书管理系统(swing+mysql+jdbc)

(一)项目功能分析 该项目是设计一个图书管理系统,主要包含的内容有 (1)管理员登陆界面 ->信息录入 ->登录 ->重置 (2)图书管理系统总界面 ->子界面菜单: 1)图书类别添加子界面 ->图书类别信息录入 ->图书类别添加 ->图书类别信息重置 2)图书类别管理子界面 ->显示所有的图书类别 ->查询图书类别 ->修改的图书类别信息显示 ->修改图书类别信息 ->删除图书类别 3)图书添加子界面 ->图书信息录入 -&g

基于SSM的图书管理系统(读者管理借阅管理)-java图书管理系统图书馆管理

基于SSM的图书管理系统(读者管理借阅管理)-java图书管理系统图书馆管理 1.包含源程序,数据库脚本.代码和数据库脚本都有详细注释.2.课题设计仅供参考学习使用,可以在此基础上进行扩展完善开发环境:Eclipse ,MYSQL,JDK1.7,Tomcat 7涉及技术点:MVC模式.SpringMvc.Mybatis.Spring.HTML.JavaScript.CSS.JQUERY.DWR.Ajax等系统采用Mybatis框架实现ORM对象关系映射,前台JSP实现,后台springMvc映射

手把手实现Java图书管理系统(附源码)

基于SSM的图书管理系统的设计与实现 一.系统简介 本课程演示的是一套基于Java的SSM框架实现的图书管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的java人群. 详细介绍了图书管理系统的实现,包括:1.环境搭建2.系统功能3.技术实现4.项目运行5.功能演示6.系统扩展 以通俗易懂的方式,手把手的带你从零开始运行本套图书管理系统,该项目附带全部源码可作为毕设使用. 二.技术实现 1.后台框架:Spring.SpringMVC.MyBatis2.UI界面:BootStr