使用Layui前端框架完成簡單的增刪改查

1.本文學習 簡介

使用layui前端框架搭配MVC

使用EF Core ORM 快速建模

暫不作複雜分層

簡單增刪改查

開發環境:Visual Studio 201九、MicroSoft SQL Server 2008

2. 往期學習文章

如何在.NET Core中使用AutoMapper

如何養成良好的編程習慣

ASP.NET MVC 基礎----數據傳遞

優雅的LINQ之美

不看這些，你就會慢慢變得毫無競爭力

實踐是檢驗真理的惟一標準，廢話很少說，直接進入今天代碼的實踐講解環節。

3. 構建數據模型

新建ASP.NET Core MVC項目

 

 

從Nuget中安裝EF core相關包

Microsoft.EntityFrameworkCore

Microsoft.EntityFrameworkCore.Design

Microsoft.EntityFrameworkCore.SqlServer

Microsoft.EntityFrameworkCore.Tools

控制檯輸入命令，從數據庫中生成模型

Scaffold-DbContext -Force 「Data Source=.; Initial Catalog=Student; Persist Security Info=True; User ID=sa; Password=123456;」 Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models/DataModels

 

 

將生成的模型類輸出到Models下的DataModels

 

 

封裝數據庫鏈接字符串

註釋掉ef自動生成的數據庫上下文類StudentContext中重寫的OnConfiguring方法

 

 

轉而經過在配置文件appsettings.json中獲取鏈接字符串更爲安全的形式，appsettings.json的配置以下：

 

使用依賴注入上下文對象的實現:

service.AddDbContext<StudentContext>(options=>{options.UseSqlServer(connectionString);})

 

4. 引入layui前端框架

從layui的官網下載前端包，解壓以後直接複製粘貼至項目的wwwroot下

 

5.構建業務邏輯

新建Service層，並新建學生服務類：StudentService用於實現學生的業務邏輯服務

依賴構造注入StudentContext上下文對象

 

下面依次完善功能：登陸，查詢、增長、刪除、修改

6.完善登陸方法

新建Student控制器，新建Login動做action，index方法返回Login的視圖，在Login動做方法當中，寫出簡單的邏輯，調用服務_dal的登陸方法，如若登陸帳號和密碼匹配，則將登陸人的用戶名儲存到session當中，而且使用數據傳遞對象ViewData["info"]點擊此處連接進入MVC數據傳遞相關文章用於向視圖返回數據，用戶登陸成功以後，顯示用戶名。

 

 

服務類當中的登陸方法以下圖：

 

測試登陸方法：這裏咱們運行dotnet watch run，以便監視項目的運行，這樣子項目源碼更改以後，就沒必要頻繁的進行保存、生成、運行來調試啦~

 

能夠看到上圖中，項目已經成功地進行了監視，而且Started了。咱們來看一下登陸頁面的前端頁面

 

有點簡陋，咳咳，湊合着用吧。查詢數據庫用戶表

 

咱們選擇用戶wanghuahua，在頁面中輸入wanghuahua及密碼123456

 

點擊登陸，能夠看到登陸成功!頁面成功地顯示出了王華華的用戶名！

 

7.完善查詢方法

構建學生管理頁面之查詢模塊。根據layui官網的示例和api簡單構建動態數據表格，前端視圖代碼以下：

 

 

url即爲後端提供數據的接口，咱們在服務類中完善查詢方法。

 

 

下面進行測試，別忘了在以前登錄頁面放置一個導向管理頁面的超連接

 

 

點擊超連接進入，以下圖，可見數據初始化表格成功！

 

 

 

完善一下，使其能夠進行條件查詢

 

 

 

i

咱們在前端頁面嘗試條件查詢

 

 

選擇終極一班，點擊查詢

 

 

結果如上圖所示，條件查詢成功！

8.完善刪除方法

開啓複選框{type:'checkbox'}

 

新增刪除按鈕，完成前端js驗證邏輯

 

完善後臺刪除方法

 

測試一下，選中張三和如花，點擊刪除，顯示刪除成功！

 

9.完善編輯方法

爲了快速演示，這裏我選擇使用layui數據表格的行內編輯，且只容許年齡可編輯

 

完善前端js部分邏輯。使其可獲取到更改的部分並提交到後臺

 

完善後臺邏輯修改方法

 

測試一下，修改阿星的年齡，改成18，讓星爺永遠18，嘻嘻~

 

數據顯示，修改爲功！

 

 

好了，至此，還剩一個添加部分，就留給大家啦~哈哈

歡迎留言交流，下期再見！

本示例代碼下載地址：https://github.com/huguangcheng/_NET-Core_Study

歡迎關注公衆號：dotNET學習天地    一塊兒學習與成長！

歡迎留言交流，下期再見！