2021-06-19

学院信息管理系统

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：SQL VS （js jq）

作者：

撰写时间：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一、功能与介绍

1、 项目名称：学院信息管理系统

初始页面如下图：

图一：初始页面

2、项目介绍：图中有一个模糊搜索框和一个新增按钮以及一个表单，表单中含有学院名称、学院编码、操作按钮的样式，表单下方还有一个分页的样式；

3、项目功能：图一搜索框内填入关键字通过reload()方法进行模糊搜索。

图二：模糊搜索

点击新增按钮它会弹出一个新增学院的模态窗体

图三：新增学院

当你的数据有一个为空时，则会弹出保存失败的提示框让你补充数据。利用Order By()方法点击保存会在末尾处添加一个新数据，并返回到第一个页面。

操作按钮分别为‘修改’、‘删除’两种，点击修改按钮弹出模态窗体，弹出修改学院窗体将绑定好的数据进行修改；

图四：修改学院

当数据名称或编码重复时，弹出提示框并停止运行；修改成功后页面刷新并保存新的数据。

 

点击删除按钮弹出提示框点击确定按钮完成删除。

图五：删除信息

二、重点代码

1、表格的重载 和模糊的查询

讲解：通过声明的变量TabAcademe表格渲染之后返回一个table实例；获取到查询框的id在TabAcademe.reload()方法中获取地址；利用where()接收查询的数据；page：{curr：1}回到第一页。

 

三、代码讲解

1.学院新增

方法1：通过$.post()/$.get()方法获取地址、以键值对的形式接收参数、调用function()回调函数执行内容；

方法2：XML Http Request跟后台交换数据

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建XML Http Request 对象。通过一行简单的 JavaScript 代码，就可以创建 XML Http Request 对象

2、修改信息

它由两部分组成数据回填、数据保存构成

数据回填：通过$.post()/$.get()方法 “"地址?academe ID " + academe ID”用一个拼接的方法接收数据，再调用function()回调data接收执行内容；通过jq的方法获取id将数据的值绑定到相应的文本框内。

重点代码：

数据查询和判断

数据保存：申明一个变量接收绑定好的数据进行一个判断，判断数据为空或者重复；当数据为空时弹出提示框（“学院的名称（编码）不能为空”）并return false。

重点代码：

判断数据是否重复和先查询出数据库对应的学院信息

3、删除数据

由于删除数据是不可逆的，因此请小心地编写问题或消息，所以先调用confirm()方法它适合用确认和取消来回答询问，当你的数据在使用时点击删除会弹出提示框（“该学院信息在使用中无法删除”）并return false。

重点代码：

用学院ID去各个相关的表中查询数据并移除数据