SPA專案開發CRUD 表單驗證

2021-09-26 04:47:07 字數 1915 閱讀 7819

spa實現crud可以使用elementui的元件來實現。

總**：

搜尋


新增編輯


刪除取消


儲存
所有的引數：

export default ,


editformvisible: false,


title: '',


editform: ,


rules: ,


],title: }};


}
在表單中新增乙個屬性然後定義即可：

rules: ,


],title: }};
效果圖：

搜尋
script：

因為查詢所有很多地方也是需要用到的，所以這裡單獨弄乙個方法。

search() ,


dosearch(params) ).catch((response) => );


}
當頁面載入的時候能夠展示資料的話，使用鉤子函式呼叫這個方法即可：

增加：

新增
修改：

編輯
彈出窗體：

取消


儲存
script：

add() ,


edit(index, row)
窗體是通過editformvisible這個屬性來控制的，通過 :visible.sync="editformvisible"來繫結。

當等於false時是關閉，true是彈出。

因為增加和修改是用的同乙個窗體所以提交方法要區分一下：

submitform()  else 


this.axios.post(url,this.editform).then((response) => ).catch((response) => );


} else 


});}
在edit的方法裡是給editform賦了值的。而add是沒有賦值的。

所以通過這個可以來區分。

最後都要清空和關閉窗體，然後再重新重新整理。

清空方法：

//清空方法


clearform() 


//清空和關閉窗體方法


closedialog()
html：

刪除
script：

del(index, row) ).then(() => );


let url = this.axios.urls.system_article_del;


this.axios.post(url, ).then((response) => ).catch((response) => );


}).catch(() => );


});}
直接把id傳到後台進行刪除即可，還有這裡我運用了彈窗，防止誤刪。

SPA專案開發之CRUD 表單驗證

動態樹 資料 分頁 中，我們實現了左側導航選單 動態樹 資料 以及 分頁。今天我們在上篇的基礎上繼續完善功能，這次我們要完成的功能是實現對文章的中增刪改查，其中我們要對資料進行驗證 表單驗證 接下來進入正題。form元件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，並將for...

SPA專案開發之CRUD 表單驗證

我們在進行crud時最好先把前台介面做好，並且做好表單驗證 元件 搜尋 新增編輯 刪除取消 儲存用vue進行開發我們要對元件進行定義 表單驗證 form元件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，並將form item的prop屬性設定為需校驗的欄位名即可 在上使用特殊...

SPA專案開發之登入

然後我們開啟dos命令建立以下 npm install axios s npm install qs s npm install vue axios s 注意一條一條的輸入不要著急 在專案中src目錄下找到main.js，並在指定位置新增三行 main.js是入口檔案，所以在這裡引入就行，頁面就不用...