web实现一个按钮从前端到后端的简单流程

时间：2023-07-05 18:12:01 | 来源：网站运营

时间：2023-07-05 18:12:01 来源：网站运营

web实现一个按钮从前端到后端的简单流程：简单来说流程就是

首先设计好html呈现给客户，上面有很多按钮对应不同的功能，首先我们为按钮写一个js方法用来封装数据或者改变呈现等等，这里跳转方式一般可采用在html里加入οnclick=“XXX()”，使点击按钮后跳到对应的js方法xxx()里封装或操作数据或者做些其他的，

然后在js方法里可以使用锚(#)等功能跳转到其他的html或者通过$.ajax里的url传到对应的后端java方法里，

然后java方法里就可以对这些数据进行一些操作,并且可以和数据库交互.(这里数据库交互简单一点的可以用EntityManage类来管理,交互方式很多).

在方法里与数据库交互，并返回结果。

js又对返回的结果进行操作判断然后跟新页面等。

下面具体举个例子说明：




第一步：在数据库中建表，自动扫进去新增菜单

然后可以在页面左边看到新增的菜单

第二步 创建这个页面的html （忽略）

第三步 以“修改”按钮为例：

首先在$(document).ready(function()中添加加载项dataTable = $('#authDeviceList').DataTable({......}),

document会先于页面之前加载，具体解释请参考DOM文档文本对象。

这里因为需要在返回的数据后面添加一个修改键按钮,所以这里用id占了一列html页面显示的column,如图:

从query方法返回数据后在columnDefs里面对每个需要特殊处理的columns列做处理，这里对第5列做处理，




（判断用户权限后）将“修改”按钮返回:

这样在页面上每一条数据后面都会有一个修改按钮。

第4步：完成修改按钮功能

点击”修改”按钮则会弹出对应修改html,按钮如下(上图没截完):

可以看到点击这个按钮后会跳到对应的js函数里，并带有参数值（这个对象的所有值，这个对象是一个entity，在EntityManage管理下与数据库交互）

点击后跳到对应的js方法处:

于是根据这个锚跳到对应的html中并填充值显示；

（关于锚简单说一下：

比如<li><ahref="#importDevice" data-toggle="tab" th:each="res : ${resList}"th:if="${res.funUrl} == '/portal/device/device/addDevice'"οnclick="showAddPage()">添加设备</a></li>

<a>标签指向了一个超链接,当点击添加设备时会跳转到这个超链接,这里#importDevice是个提前设好的锚用来快速定位,像这种有onclick的，当点击了”添加设备”后会不仅会跳转到超链接还会执行js方法:showAddPage().

）

一个锚对应一个id，然后填充要显示的值，比如：

这里对应id和ip，id用hidden来修饰作为隐藏值，不由用户修改用户也看不到，设置后直接隐藏。就会弹出如图：

这里用disabled属性限制了ip、mac、名称都不可以被修改；




接下来就是用户来修改，这里只允许修改备注

修改完后点击”确定”，首先我们需要使点击确定后跳到js方法里封装数据，然后传到对应的后端java方法里，

在方法里与数据库交互，并返回结果。

跳到js方法

然后在这个函数里会用url指向一个方法，并把值封进obj里面一起给方法：

于是这样就把前端的数据封装后传给后端的java方法里了。

这个AuthDevice是根据自己的数据库而设计的对应的类，是一个entity bean，可以被entity管理与数据库交互。（交互方式请参考EntityManage介绍）

Ps: 这里数据库里的项用Entity Bean实例一一对应，操作实例相当于操作数据库。用@Table(name=”xxx”)来映射类和数据库; 用@Column(name=”xxx”)来关联成员属性和html中的columns

最后java方法返回个前端结果，然后更新页面等等。

这只是最简单的流程，梳理好流程框架后再慢慢填充细节吧~