web實(shí)現(xiàn)一個(gè)按鈕從前端到后端的簡(jiǎn)單流程

時(shí)間：2023-07-05 18:12:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-05 18:12:01 來源：網(wǎng)站運(yùn)營(yíng)

web實(shí)現(xiàn)一個(gè)按鈕從前端到后端的簡(jiǎn)單流程：簡(jiǎn)單來說流程就是

首先設(shè)計(jì)好html呈現(xiàn)給客戶，上面有很多按鈕對(duì)應(yīng)不同的功能，首先我們?yōu)榘粹o寫一個(gè)js方法用來封裝數(shù)據(jù)或者改變呈現(xiàn)等等，這里跳轉(zhuǎn)方式一般可采用在html里加入οnclick=“XXX()”，使點(diǎn)擊按鈕后跳到對(duì)應(yīng)的js方法xxx()里封裝或操作數(shù)據(jù)或者做些其他的，

然后在js方法里可以使用錨(#)等功能跳轉(zhuǎn)到其他的html或者通過$.ajax里的url傳到對(duì)應(yīng)的后端java方法里，

然后java方法里就可以對(duì)這些數(shù)據(jù)進(jìn)行一些操作,并且可以和數(shù)據(jù)庫交互.(這里數(shù)據(jù)庫交互簡(jiǎn)單一點(diǎn)的可以用EntityManage類來管理,交互方式很多).

在方法里與數(shù)據(jù)庫交互，并返回結(jié)果。

js又對(duì)返回的結(jié)果進(jìn)行操作判斷然后跟新頁面等。

下面具體舉個(gè)例子說明：




第一步：在數(shù)據(jù)庫中建表，自動(dòng)掃進(jìn)去新增菜單

然后可以在頁面左邊看到新增的菜單

第二步 創(chuàng)建這個(gè)頁面的html （忽略）

第三步 以“修改”按鈕為例：

首先在$(document).ready(function()中添加加載項(xiàng)dataTable = $('#authDeviceList').DataTable({......}),

document會(huì)先于頁面之前加載，具體解釋請(qǐng)參考DOM文檔文本對(duì)象。

這里因?yàn)樾枰诜祷氐臄?shù)據(jù)后面添加一個(gè)修改鍵按鈕,所以這里用id占了一列html頁面顯示的column,如圖:

從query方法返回?cái)?shù)據(jù)后在columnDefs里面對(duì)每個(gè)需要特殊處理的columns列做處理，這里對(duì)第5列做處理，




（判斷用戶權(quán)限后）將“修改”按鈕返回:

這樣在頁面上每一條數(shù)據(jù)后面都會(huì)有一個(gè)修改按鈕。

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

點(diǎn)擊”修改”按鈕則會(huì)彈出對(duì)應(yīng)修改html,按鈕如下(上圖沒截完):

可以看到點(diǎn)擊這個(gè)按鈕后會(huì)跳到對(duì)應(yīng)的js函數(shù)里，并帶有參數(shù)值（這個(gè)對(duì)象的所有值，這個(gè)對(duì)象是一個(gè)entity，在EntityManage管理下與數(shù)據(jù)庫交互）

點(diǎn)擊后跳到對(duì)應(yīng)的js方法處:

于是根據(jù)這個(gè)錨跳到對(duì)應(yīng)的html中并填充值顯示；

（關(guān)于錨簡(jiǎn)單說一下：

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

<a>標(biāo)簽指向了一個(gè)超鏈接,當(dāng)點(diǎn)擊添加設(shè)備時(shí)會(huì)跳轉(zhuǎn)到這個(gè)超鏈接,這里#importDevice是個(gè)提前設(shè)好的錨用來快速定位,像這種有onclick的，當(dāng)點(diǎn)擊了”添加設(shè)備”后會(huì)不僅會(huì)跳轉(zhuǎn)到超鏈接還會(huì)執(zhí)行js方法:showAddPage().

）

一個(gè)錨對(duì)應(yīng)一個(gè)id，然后填充要顯示的值，比如：

這里對(duì)應(yīng)id和ip，id用hidden來修飾作為隱藏值，不由用戶修改用戶也看不到，設(shè)置后直接隱藏。就會(huì)彈出如圖：

這里用disabled屬性限制了ip、mac、名稱都不可以被修改；




接下來就是用戶來修改，這里只允許修改備注

修改完后點(diǎn)擊”確定”，首先我們需要使點(diǎn)擊確定后跳到j(luò)s方法里封裝數(shù)據(jù)，然后傳到對(duì)應(yīng)的后端java方法里，

在方法里與數(shù)據(jù)庫交互，并返回結(jié)果。

跳到j(luò)s方法

然后在這個(gè)函數(shù)里會(huì)用url指向一個(gè)方法，并把值封進(jìn)obj里面一起給方法：

于是這樣就把前端的數(shù)據(jù)封裝后傳給后端的java方法里了。

這個(gè)AuthDevice是根據(jù)自己的數(shù)據(jù)庫而設(shè)計(jì)的對(duì)應(yīng)的類，是一個(gè)entity bean，可以被entity管理與數(shù)據(jù)庫交互。（交互方式請(qǐng)參考EntityManage介紹）

Ps: 這里數(shù)據(jù)庫里的項(xiàng)用Entity Bean實(shí)例一一對(duì)應(yīng)，操作實(shí)例相當(dāng)于操作數(shù)據(jù)庫。用@Table(name=”xxx”)來映射類和數(shù)據(jù)庫; 用@Column(name=”xxx”)來關(guān)聯(lián)成員屬性和html中的columns

最后java方法返回個(gè)前端結(jié)果，然后更新頁面等等。

這只是最簡(jiǎn)單的流程，梳理好流程框架后再慢慢填充細(xì)節(jié)吧~