ASP.NET Core+Element+SQL Server開發校園圖書管理系統（四）

来源:https://www.cnblogs.com/hsiang/archive/2023/02/07/17097092.html
-Advertisement-
Play Games

隨著技術的進步，跨平臺開發已經成為了標配，在此大背景下，ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例，簡述基於MVC三層架構開發的常見知識點，前三篇篇文章簡單介紹瞭如何搭建開發框架，登錄功能，主頁面功能，以... ...


隨著技術的進步，跨平臺開發已經成為了標配，在此大背景下，ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例，簡述基於MVC三層架構開發的常見知識點，前三篇篇文章簡單介紹瞭如何搭建開發框架，登錄功能，主頁面功能，以及書室管理，書架管理功能的實現，本篇文章繼續講解書籍管理以及借還功能相關功能的開發，僅供學習分享使用，如有不足之處，還請指正。

涉及知識點

在本示例中，應用最多的就是如何Element中提供的組件，和控制器中業務邏輯處理，涉及知識點如下所示：

  • MVC 是一種使用 MVC（Model View Controller 模型-視圖-控制器）設計創建 Web 應用程式的模式，其中Controller（控制器）處理輸入（寫入資料庫記錄）。控制器Controller，是應用程式中處理用戶交互的部分，通常控制器負責從視圖讀取數據，控制用戶輸入，並向模型發送數據。
  • Element組件庫，一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫。可以大大提高開發效率，減少工作量。在主頁面中，主要用到如下幾種：
    • 表單控制項el-form，由輸入框、選擇器、單選框、多選框等控制項組成，用以收集、校驗、提交數據到後臺。
    • 列表控制項el-table，用於展示多條結構類似的數據，可對數據進行排序、篩選、對比或其他自定義操作。主要用戶顯示結構化列表的數據。
    • 分頁控制項el-pagination，當數據量過多時，使用分頁分解數據。
    • 彈出視窗el-dialog，在保留當前頁面狀態的情況下，告知用戶並承載相關操作。主要用於彈出新建或編輯視窗。
  • axios組件，是一個基於promise 的網路請求庫，axios本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範。在本示例中，所有的前後端交互，均是通過axios庫。

功能介紹

本文主要介紹書籍管理和借還管理兩個功能，如下所示：

  1. 圖書管理，主要包括書籍的檢索，新增，修改，刪除等基本功能，另外書籍的存放位置和書架ID相關，書架又與書室相關，所有相對比較複雜。
  2. 借還管理，主要根據用於輸入或掃描的ISBN號，進行借閱以及歸還，主要記錄借閱人，借閱時間，借閱經手人，歸還時間，歸還經手人等信息。

圖書管理

1. Book表結構

圖書管理，主要是對Book表的CRUD操作，表結構如下所示：

 

 其中BookRackId為書架ID，與BookRack表的外鍵。

2. Book表實體類

Book表實體類是數據表的數據映射，和數據表一一對應，如下所示：

 1 namespace CLMS.Entity
 2 {
 3     /// <summary>
 4     /// 圖書實體
 5     /// </summary>
 6     public class BookEntity
 7     {
 8         /// <summary>
 9         /// 唯一標識
10         /// </summary>
11         public int Id { get; set; }
12 
13         /// <summary>
14         /// 圖書編號
15         /// </summary>
16         public string ISBN { get; set; }
17 
18         /// <summary>
19         /// 圖書名稱
20         /// </summary>
21         public string Name { get; set; }
22 
23         /// <summary>
24         /// 圖書作者
25         /// </summary>
26         public string Author { get; set; }
27 
28         /// <summary>
29         /// 圖書出版社
30         /// </summary>
31         public string Publisher { get; set; }
32 
33         /// <summary>
34         /// 出版時間
35         /// </summary>
36         public DateTime PublishDate { get; set; }
37 
38         /// <summary>
39         /// 圖書類型
40         /// </summary>
41         public string BookType { get; set; }
42 
43         /// <summary>
44         /// 描述
45         /// </summary>
46         public string Description { get; set; }
47 
48         /// <summary>
49         /// 書架ID
50         /// </summary>
51         public long BookRackId { get; set; }
52 
53         /// <summary>
54         /// 創建時間
55         /// </summary>
56         public DateTime CreateTime { get; set; }
57 
58         /// <summary>
59         /// 當前登錄的賬號的ID
60         /// </summary>
61         public int CreateUser { get; set; }
62 
63         /// <summary>
64         /// 最後編輯時間
65         /// </summary>
66         public DateTime? LastEditTime { get; set; }
67 
68         /// <summary>
69         /// 最後修改人
70         /// </summary>
71         public int LastEditUser { get; set; }
72     }
73 }

3. 圖書管理頁面佈局

圖書管理頁面主要包括對書籍的查詢，新增，編輯，刪除等操作，頁面佈局如下所示：

  1 <div id="app">
  2     <template>
  3         <el-breadcrumb separator-class="el-icon-arrow-right">
  4             <el-breadcrumb-item>圖書管理</el-breadcrumb-item>
  5             <el-breadcrumb-item>圖書管理</el-breadcrumb-item>
  6         </el-breadcrumb>
  7         <el-form :inline="true" :model="queryCondition" class="demo-form-inline" style="margin-top: 10px; border: solid;border-width: 1px;border-color: #ebeef5;padding: 10px;">
  8             <el-form-item label="書籍名稱">
  9                 <el-input v-model="queryCondition.Name" placeholder="書籍名稱"></el-input>
 10             </el-form-item>
 11             <el-form-item label="出版社">
 12                 <el-input v-model="queryCondition.Publisher" placeholder="出版社"></el-input>
 13             </el-form-item>
 14             <el-form-item>
 15                 <el-button type="primary" v-on:click="handleQuery">查詢</el-button>
 16             </el-form-item>
 17             <el-form-item>
 18                 <el-button type="primary" v-on:click="handleAdd">新增</el-button>
 19             </el-form-item>
 20         </el-form>
 21         
 22         <el-table :data="tableData" style="width: 100%" border :default-sort="{prop: 'date', order: 'descending'}">
 23             <el-table-column type="expand">
 24               <template slot-scope="props">
 25                 <el-form label-position="left" inline class="demo-table-expand">
 26                   <el-form-item label="圖書館">
 27                     <span>{{ props.row.LibraryName }}</span>
 28                   </el-form-item>
 29                   <el-form-item label="圖書室">
 30                     <span>{{ props.row.LibrarySubName }}</span>
 31                   </el-form-item>
 32                   <el-form-item label="排">
 33                     <span>{{ props.row.Row }}</span>
 34                   </el-form-item>
 35                   <el-form-item label="列">
 36                     <span>{{ props.row.Column }}</span>
 37                   </el-form-item>
 38                 </el-form>
 39               </template>
 40             </el-table-column>
 41             <el-table-column prop="ISBN" label="ISBN" sortable ></el-table-column>
 42             <el-table-column prop="Name" label="書籍名稱" sortable ></el-table-column>
 43             <el-table-column prop="Author" label="作者" sortable ></el-table-column>
 44             <el-table-column prop="Publisher" label="出版社" sortable ></el-table-column>
 45             <el-table-column prop="BookType" label="書籍類型" sortable ></el-table-column>
 46             <el-table-column prop="CreateTime" label="上架時間" sortable ></el-table-column>
 47             <el-table-column label="操作">
 48                 <template slot-scope="scope">
 49                     <el-button size="medium" type="primary" plain v-on:click="handleEdit(scope.$index,scope.row)">編輯</el-button>
 50                     <el-button size="medium" type="danger" v-on:click="handleDelete(scope.$index,scope.row)">刪除</el-button>
 51                 </template>
 52             </el-table-column>
 53         </el-table>
 54         <el-pagination background layout="prev, pager, next" :page-size="pageSize" :current-page="currentPage" :total="total" style="margin-top:10px;" v-on:current-change="handlePageChanged" v-on:prev-click="handlePrevClick" v-on:next-click="handleNextClick"></el-pagination>
 55         <el-dialog title="書籍信息" :visible.sync="dialogFormVisible">
 56           <el-form :model="addOrEditForm">
 57             <el-form-item label="ISBN" :label-width="formLabelWidth">
 58               <el-input v-model="addOrEditForm.ISBN" autocomplete="off"></el-input>
 59             </el-form-item>
 60             <el-form-item label="書籍名稱" :label-width="formLabelWidth">
 61               <el-input v-model="addOrEditForm.Name" autocomplete="off"></el-input>
 62             </el-form-item>
 63             <el-form-item label="書籍作者" :label-width="formLabelWidth">
 64               <el-input v-model="addOrEditForm.Author" autocomplete="off"></el-input>
 65             </el-form-item>
 66             <el-form-item label="出版社" :label-width="formLabelWidth">
 67               <el-input v-model="addOrEditForm.Publisher" autocomplete="off"></el-input>
 68             </el-form-item>
 69             <el-form-item label="出版時間" :label-width="formLabelWidth">
 70               <el-date-picker v-model="addOrEditForm.PublishDate" type="date" placeholder="選擇日期"></el-date-picker>
 71             </el-form-item>
 72             <el-form-item label="書籍類型" :label-width="formLabelWidth">
 73               <el-select v-model="addOrEditForm.BookType" placeholder="請選擇書籍類型">
 74                 <el-option label="技術類" value="技術類"></el-option>
 75                 <el-option label="科普類" value="科普類"></el-option>
 76                 <el-option label="文學類" value="文學類"></el-option>
 77                 <el-option label="社科類" value="社科類"></el-option>
 78                 <el-option label="語言類" value="語言類"></el-option>
 79               </el-select>
 80             </el-form-item>
 81             <el-form-item label="書籍描述" :label-width="formLabelWidth">
 82               <el-input v-model="addOrEditForm.Description" autocomplete="off"></el-input>
 83             </el-form-item>
 84             <el-form-item label="存放位置" :label-width="formLabelWidth">
 85               <el-tag v-model="addOrEditForm.Location" style="vertical-align:middle;">{{addOrEditForm.Location}}</el-tag>
 86               <el-button icon="el-icon-place" circle v-on:click="handleLocation"></el-button>
 87             </el-form-item>
 88           </el-form>
 89           <div slot="footer" class="dialog-footer">
 90             <el-button v-on:click="dialogFormVisible = false">取 消</el-button>
 91             <el-button type="primary" v-on:click="handleSave">確 定</el-button>
 92           </div>
 93           <el-dialog title="位置信息" :visible.sync="dialogLocationVisible">
 94                <el-table :data="locationData" style="width: 100%" highlight-current-row border :default-sort="{prop: 'date', order: 'descending'}" v-on:current-change="handleLocationCurrentChange">
 95                     <el-table-column prop="Name" label="圖書館" sortable ></el-table-column>
 96                     <el-table-column prop="SubName" label="圖書室" sortable ></el-table-column>
 97                     <el-table-column prop="Row" label="排" sortable ></el-table-column>
 98                     <el-table-column prop="Column" label="列" sortable ></el-table-column>
 99                     <el-table-column prop="Description" label="描述" sortable ></el-table-column>
100                </el-table>
101                <el-pagination background layout="prev, pager, next" :page-size="locationPageSize" :current-page="locationCurrentPage" :total="locationTotal" style="margin-top:10px;" v-on:current-change="handleLocationPageChanged" v-on:prev-click="handleLocationPrevClick" v-on:next-click="handleLocationNextClick"></el-pagination>
102                <div slot="footer" class="dialog-footer">
103                 <el-button v-on:click="dialogLocationVisible = false">取 消</el-button>
104                 <el-button type="primary" v-on:click="handleLocationSave">確 定</el-button>
105               </div>
106            </el-dialog>
107         </el-dialog>
108         
109     </template>
110 </div>

4. 圖書管理數據交互

數據交互通過JS腳本進行，書寫格式和VUE2.0保持一致，在頁面啟動時，載入所有的書室信息，並綁定到el-table對象，所以需要在mounted函數中增加調用向伺服器端發出請求，當用戶新增或編輯保存時，通過axios發送請求到服務端介面。

  1 <script>
  2     var app= new Vue({
  3          el: '#app',
  4          data:function() {
  5            return {
  6              queryCondition:{
  7                 Name:'',
  8                 Publisher:''
  9              },
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在 SpringBoot 項目中簡單實現 JWT 驗證
    使用 SpringBoot 提供 api 的時候，我更喜歡使用 jwt 的方式來做驗證。網上有會多 Spring Security 整合 jwt 的，也有 Shiro 整合 jwt 的，感覺有點複雜。這裡分享一下自己在項目中的簡單實現。 依賴包 除了 SpringBoot 基本的依賴，需要一個生成 ...
  • 京東一面：MySQL 中的 distinct 和 group by 哪個效率更高？問倒一大遍。。
    先說大致的結論（完整結論在文末）： 在語義相同，有索引的情況下：group by和distinct都能使用索引，效率相同。 在語義相同，無索引的情況下：distinct效率高於group by。原因是distinct 和 group by都會進行分組操作，但group by可能會進行排序，觸發fil ...
  • HashMap源碼分析 (基於JDK1.8)
    基於哈希表的 Map 介面的實現。此實現提供所有可選的映射操作，並允許使用 null 值和 null 鍵。（除了非同步和允許使用 null 之外，HashMap 類與 Hashtable 大致相同。）此類不保證映射的順序，特別是它不保證該順序恆久不變。 此實現假定哈希函數將元素適當地分佈在各桶之間，... ...
  • Amazon RDS 教程_編程入門自學教程_菜鳥教程-免費教程分享
    教程簡介 Amazon RDS初學者教程 - 從基本到高級概念的簡單簡單步驟學習Amazon RDS，其中包括概述，環境，介面，資料庫實例，資料庫存儲，MS SQL功能，MS SQL創建資料庫，MS SQL連接到資料庫， MS SQL DB導出導入，帶有SSL的MS SQL DB，MS SQL DB ...
  • 3.SpringSecurity+登錄功能+jwt校驗過濾器+redis配置
    SpringSecurity+登錄功能+jwt校驗過濾器+redis配置 一、思路分析 1.登錄 ①自定義登錄介面 調用ProviderManager的方法進行認證 如果認證通過生成jwt 把用戶信息存入redis中 ②自定義UserDetailsService 在這個實現類中去查詢資料庫 註意配置 ...
  • CICS教程_編程入門自學教程_菜鳥教程-免費教程分享
    教程簡介 CICS快速指南 - 從CICS概述，環境，基本術語，Nucleus，事務，COBOL基礎知識，BMS，MAP，介面塊，偽編程，輔助密鑰，文件處理，錯誤處理，控制操作，簡單而簡單的步驟學習CICS臨時存儲，互通，狀態代碼。 CICS代表客戶信息控制系統。 CICS由IBM於1968年開發。 ...
  • 基於arthas熱更新class腳本
    1. 概述 本地更新腳本是基於arthas工具的retransform命令熱替換class，此方法用於在不重啟項目的前提下，替換更新的class，如關鍵類添加列印日誌，排查線上問題 但是arthas工具的命令稍顯複雜，有那個時間還不如重新部署，因此需要一個可以快速替換的工具來進行替換 2. 方法一： ...
  • 針對單一key加讀寫鎖
    教程簡介 亞馬遜商城快速指南 - 從簡單和簡單的步驟開始學習亞馬遜商城，從基本到高級概念，包括為什麼選擇亞馬遜？，亞馬遜優勢，帳戶類型，銷售什麼？，產品列表，費用，帳戶設置，購買盒，運輸方式，列出新產品，定價工具，獲取最高利潤，價格計算器，稅務處理，運輸流程，亞馬遜賣家中心，管理庫存，創建報告，管理 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類