数据新增到数据库的操作流程(上篇)

1:先做好事前准备:创建控制器,在控制器里创建视图,再创建连接数据库的表里面的模型,再新建一个文件夹,放入各种需要用到的插件;
解决资源管理器与视图截图:
在这里插入图片描述

2:做好准备后,再在视图里面完成HTML页面的搭建与布局:先在“head”里面引用刚刚放入的插件里面需要用到的css样式,再用这些css样式在“body”里面进行页面的布局;
页面布局代码截图:
在这里插入图片描述
3:布局完HTML以后,我们下一步需要去JS中对表格ID为“tabAcadem”进行表格渲染,让它以表格的形式显示出数据库里面的数据:同样需要先引用需要用到的JS样式,然后再JS中去定义一些变量,写一个表单加载事件,在事件里面写表格渲染的操作,表格渲染的话肯定要用“Layui”插件,所以刚刚引用Js样式时就引用了,然后加载“layui”里面的“layer”和“table”,这都是我们需要用到的,再把刚刚定义的变量来接收数据,因为之前已经详细的讲过表格渲染了,所以这里就跳过了(可以去我之前的里面看);这时候就需要去控制器里面写查询学校数据的方法了,不然是显示不出表格的数据的:

还没有数据的表格效果截图:
在这里插入图片描述
4:如何在控制器里面查询出学校的相关数据:先实例化数据库里面的学校数据库,然后写一个公共的接口,给它一个名称叫“SeleAcademe”,因为需要分页,所以要封装一个能接收表格分页的类,给这个封装的类一个名称叫“LayuiTablePage”,然后再传入接口参数并征集引用,引用完以后我们就能调用了;接下来就是查询了,这里我们用的是“linq查询”,先定义一个变量来接收我们查到的数据,然后一个from,后面接一个方便记的自定义名称,再in后面接你刚刚实例化的学校数据库里面的学校表,再Select 后面接你刚刚那个自定义名称,再全部都括号起来然后“ToList”;这句代码的意思就是去学校表里面查询学校表的所有数据并“ToList”,因为需要分页,所以要获取到刚刚查询出来的数据的总条数,并且定义变量去接收它,再把刚刚查询到的数据通过学院代号来进行一个降序的排序,这时候又需要封装一个类来接收总条数和数据之类的,给它一个名称叫“LaTableData”,其中“T”代表泛型,然后再通过这个封装的类实例化学校表,再对实例化的学校表进行数据的赋值,最后返回赋值以后的学校表;
控制器里面的查询和实例化代码截图:
在这里插入图片描述
5:控制器查询完以后,再去视图里面刚刚渲染表格那里写上控制器里面的接口名称,这样就能看到查询出来的数据了;
分页的表格数据截图:
在这里插入图片描述
6:渲染完表格以后就是去完成一个新增学校的操作了,当我们点击新增学校的时候就会弹出我们在HTML上写的模态窗体,于是就给这个button按钮一个点击事件,使它弹出模态窗体,这时候就得用到一个“model”方法了,而且每次弹出的时候都应该清空模态窗体里面的值,因为刚刚在模态窗体里面写了一个重置表单的input,所以这时候只需要去获取到这个input并给它一个点击操作就好了,这样每次打开的时候都是清空了的;

7:新增数据之前肯定要先判断模态窗体里面的两个input有没有值,先获取到这两个input,然后再判断,如果有就进行下一步,如果没有就给它一个提示“请将数据输入完整”;如果有的话接下来就是通过一个“get”进行数据的传输,这时候我们又得去控制器里面写一个新增的接口了:给这个接口一个名称,并且需要传递两个参数,因为新增完成以后要给它一段文字的提示,所以又得去封装这么一个类,再实例化它,虽然之前已经在视图那边判断了是否为空,但是为了保险我们可以再加一层判断,然后再实例化学校表,把传递过来的参数放入学校表里面相对应的数据里面,再增加到学校表里面,增加完以后给它一个状态,方便等下在视图里面去确定它的状态,然后给它一段文字的提示“新增成功”,最后返回实例化的那个类的数据;
控制器里面的新增操作代码截图:
在这里插入图片描述
8:最后就是再回到视图里面进行一系列的操作了,通过“get”这个方法,然后里面第一个参数就是刚刚在控制器里面写的接口路径,第二个参数就是需要传递的两个参数,通过“键对值”的形式传递,再在function里面放你传递过来的实例化数据,判断它的状态,当它的状态为true时就提示相对应的文字并关闭模态窗体和刷新表格,否则就只需要提示相对应状态的文字就行了;
9:写完以后我们可以在浏览器里面测试一下能不能新增成功,比如新增一个学院名称为“GXITXY”,学院代码为“016”的学校,然后点击新增按钮,它就会弹出一个新增成功了,并且在表格里面也是能显示的,而且在数据库里面也是能看到的;

猜你喜欢

转载自blog.csdn.net/weixin_44543131/article/details/89970926