数据新增到数据库的操作流程（上篇）

r囧r小猫 2022-02-03 04:45 316阅读 0赞

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]: /images/20220203/6149d5437cb54e90b4f79581d8e378a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]: /images/20220203/741640d8502f4090a8b8158e0c394432.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 2]: /images/20220203/827ca1efd8614074b5953c578b2b8510.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 3]: /images/20220203/62b71c7dd3dd4a798d94518cbd899ec7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 4]: /images/20220203/123adb9877ca42138e04a2054741786b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 5]: /images/20220203/8054fc6da2424336a55cc55c06ed3b0a.png