ASP.NET Core+Element+SQL Server開發校園圖書管理系統(二)

来源:https://www.cnblogs.com/hsiang/archive/2023/01/26/17058450.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-container組件,用於佈局的容器組件,主要包含:<el-header>:頂欄容器。<el-aside>:側邊欄容器。<el-main>:主要區域容器。<el-footer>:底欄容器。可以進行不同組合,佈局出管理系統通用頁面(如,上中下結構,上(左右)下結構等)。
    • 導航菜單el-menu組件,為網站提供導航功能的菜單。有頂欄,側欄,摺疊等不同用法。
  • axios組件,是一個基於promise 的網路請求庫,axios本質上也是對原生XHR的封裝,只不過它是Promise的實現版本,符合最新的ES規範。在本示例中,所有的前後端交互,均是通過axios庫。

核心源碼

1. 組件引入

因為使用了Element提供的組件,大大節約了工作量,可以專註於業務邏輯的處理。引入組件庫也非常簡單,在客戶端庫安裝以後【具體安裝可參考前一篇文章】,直接在視圖中進行引用即可,如下所示:

 1 <head>
 2     <title>校園圖書管理系統</title>
 3     <!-- For-Mobile-Apps-and-Meta-Tags -->
 4     <meta name="viewport" content="width=device-width, initial-scale=1" />
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     
 7     <!-- 引入樣式 -->
 8     <link rel="stylesheet" href="/lib/element-ui/theme-chalk/index.min.css">
 9     <!-- 引入組件庫 -->
10     <script src="/lib/vue/dist/vue.min.js"></script>
11     <script src="/lib/element-ui/index.min.js"></script>
12     <script src="/lib/axios/axios.min.js"></script>
13 </head>

2. 頁面佈局

頁面佈局採用el-container,代碼結構清晰明瞭,易於理解,如下所示:

 1 <div id="app">
 2     <el-container style="height:100vh; margin:0px;">
 3       <el-header style="background:url('/imgs/banner.jpg');height:120px;">
 4           <h1>
 5               校園圖書管理系統  Campus Library Management System
 6           </h1>
 7           <div style="text-align:right;position:relative;bottom:30px;">
 8               <el-link type="info" style="color:white;" href="/Home/Welcome" target="content">首頁</el-link>|
 9               <el-link type="info" style="color:white;" href="/Personal"  target="content">{{nickName}}</el-link>|
10               <el-link type="info" style="color:white;">退出</el-link>
11           </div>
12       </el-header>
13       <el-container>
14         <el-aside width="200px">
15             <el-menu
16               default-active="activeIndex"
17               class="el-menu-vertical-demo"
18               v-on:open="handleOpen"
19               v-on:close="handleClose"
20               v-on:select="handleSelect"
21               background-color="#545c64"
22               text-color="#fff"
23               active-text-color="#ffd04b">
24               <el-submenu :index="index" v-for="(right,index) in rights">
25                 <template slot="title">
26                   <span>{{right.menuName}}</span>
27                 </template>
28                 <el-menu-item index="1-1" v-for="(menu,index) in right.Menus">
29                     <el-link type="primary" underline="false" :href="menu.url" target="content">{{menu.menuName}}</el-link>
30                 </el-menu-item>
31               </el-submenu>
32             </el-menu>
33         </el-aside>
34         <el-container>
35           <el-main name="main" style="padding:0px;">
36               <iframe name="content" id="content" style="border:0px;width:100%;height:100%;margin:0px;background:white; padding:0px;" src="/Home/Welcome">
37                   
38               </iframe>
39           </el-main>
40           <el-footer style="background:#409EFF;">
41               <p style="color:white;"> &copy; 2022-2023 校園圖書管理系統. All Rights Reserved | Design by 小六公子</p>
42           </el-footer>
43         </el-container>
44       </el-container>
45     </el-container>
46 </div>

3. 數據交互

數據交互通過JS腳本進行,書寫格式和VUE2.0保持一致,在頁面啟動時,載入用戶所擁有的導航菜單,並綁定到el-menu對象,所以需要在mounted函數中增加調用向伺服器端發出請求,如下所示:

 1 <script>
 2    var app= new Vue({
 3         el: '#app',
 4         data:function() {
 5           return {
 6             activeIndex:'/',
 7             rights:[],
 8             nickName:'',
 9           }
10         },
11         mounted:function(){
12             this.handleLoadInfo();
13             this.handleLoadRights();
14         },
15         methods: {
16           handleOpen(key, keyPath) {
17             console.log(key, keyPath);
18           },
19           handleClose(key, keyPath) {
20             console.log(key, keyPath);
21           },
22           handleSelect(index,indexPath){
23             this.activeIndex=index;
24             console.log("index="+index+",indexPath="+indexPath);
25           },
26           handleLoadRights(){
27             var that = this;
28             that.rights=[];
29             console.log("query");
30             axios.get('/Home/GetUserRights', {params:{}}).then(function (response) {
31                 if(response.status==200){
32                     var data = response.data;
33                     let parentMenus=data.filter(function(e){
34                         return e.parentId==null;
35                     });
36                     for(let index=0;index< parentMenus.length;index++){
37                         let parentMenu=parentMenus[index];
38                         let pId=parentMenu.id;
39                         console.log(pId);
40                         let menus = data.filter(function(e){
41                             return e.parentId==pId;
42                         });
43                         console.log(menus);
44                         parentMenu.Menus=menus;
45                         that.rights.push(parentMenu);
46                     }
47                     console.log(that.rights);
48                 }
49                 console.log(response);
50             }).catch(function (error) {
51                 console.log(error);
52             });
53           },
54           handleLoadInfo(){
55             var that =this;
56             axios.get('/User/GetPersonalInfo', {params:{}}).then(function (response) {
57                 if(response.status==200){
58                     var data = response.data;
59                     that.nickName=data.nickName;
60                 }
61                 console.log(response);
62             }).catch(function (error) {
63                 console.log(error);
64             });
65           }
66         }
67       });
68 </script>

4. 控制器邏輯

主頁面控制器【HomeCotroller】邏輯主要通過登錄的ID,獲取對應的許可權菜單,然後返回給客戶端,如下所示:

 1 namespace CLMS.Controllers
 2 {
 3     public class HomeController : Controller
 4     {
 5         private readonly ILogger<HomeController> _logger;
 6 
 7         private DataContext dataContext;
 8 
 9         public HomeController(ILogger<HomeController> logger, DataContext context)
10         {
11             _logger = logger;
12             dataContext = context;
13         }
14 
15         public IActionResult Index()
16         {
17             int? userId = HttpContext.Session.GetInt32("UserId");
18             //判斷是否登錄
19             if (userId != null)
20             {
21 
22                 var user = dataContext.Users.FirstOrDefault(u => u.Id == userId);
23                 if (user != null)
24                 {
25                     ViewBag.NickName = user.NickName;
26                     ViewBag.UserRights = GetUserRights();
27                 }
28                 return View();
29             }
30             else
31             {
32                 return Redirect("/Login");
33             }
34 
35         }
36 
37         public IActionResult Welcome()
38         {
39             return View();
40         }
41 
42         [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
43         public IActionResult Error()
44         {
45             return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
46         }
47 
48         [HttpGet]
49         public List<UserRight> GetUserRights()
50         {
51             int? userId = HttpContext.Session.GetInt32("UserId");
52             if (userId != null)
53             {
54                 var query = from u in dataContext.UserRoles
55                             join r in dataContext.Roles on u.RoleId equals r.Id
56                             join x in dataContext.RoleMenus on r.Id equals x.RoleId
57                             join m in dataContext.Menus on x.MenuId equals m.Id
58                             where u.UserId == userId
59                             select new UserRight { Id = m.Id, RoleName = r.Name, MenuName = m.Name, Url = m.Url, ParentId = m.ParentId, SortId = m.SortId };
60 
61                 return query.ToList();
62             }
63             return null;
64         }
65 
66         /// <summary>
67         /// 退出
68         /// </summary>
69         public IActionResult Logout()
70         {
71             HttpContext.Session.Clear();
72             return Redirect("/Login");
73         }
74     }
75 }

運行測試

導航菜單主要分為圖書管理,書室管理,系統管理三大塊,可以摺疊展開。主頁面開發完成後,運行測試。如下所示:

 

以上就是校園圖書管理系統的主頁面功能實現,功能正在開發完善中,後續功能再繼續介紹。旨在拋磚引玉,一起學習,共同進步。


作者:小六公子
出處:http://www.cnblogs.com/hsiang/
本文版權歸作者和博客園共有,寫文不易,支持原創,歡迎轉載【點贊】,轉載請保留此段聲明,且在文章頁面明顯位置給出原文連接,謝謝。
關註個人公眾號,定時同步更新技術及職場文章


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 測試一、虛繼承與繼承的區別 1.1 單個繼承,不帶虛函數 1>class B size(8): 1> + 1> 0 | + (base class A) 1> 0 | | _ia //4B 1> | + 1> 4 | _ib //4B 有兩個int類型數據成員,占8B,基類邏輯存在前面 1.2、單個 ...
  • AOP-03 7.AOP-切入表達式 7.1切入表達式的具體使用 1.切入表達式的作用: 通過表達式的方式定義一個或多個具體的連接點。 2.語法細節: (1)切入表達式的語法格式: execution([許可權修飾符] [返回值類型] [簡單類名/全類名] [方法名]([參數列表]) 若目標類、介面與 ...
  • 這次設計一個通用的多位元組SPI介面模塊,特點如下: 可以設置為1-128位元組的SPI通信模塊 可以修改CPOL、CPHA來進行不同的通信模式 可以設置輸出的時鐘 狀態轉移圖和思路與多位元組串口發送模塊一樣,這裡就不給出了,具體可看該隨筆。 一、模塊代碼 1、需要的模塊 通用8位SPI介面模塊 `tim ...
  • 簡介: 享元模式,屬於結構型的設計模式。運用共用技術有效地支持大量細粒度的對象。 適用場景: 具有相同抽象但是細節不同的場景中。 優點: 把公共的部分分離為抽象,細節依賴於抽象,符合依賴倒轉原則。 缺點: 增加複雜性。 代碼: //用戶類 class User { private $name; fu ...
  • 【前置內容】Spring 學習筆記全系列傳送門: Spring學習筆記 - 第一章 - IoC(控制反轉)、IoC容器、Bean的實例化與生命周期、DI(依賴註入) Spring學習筆記 - 第二章 - 註解開發、配置管理第三方Bean、註解管理第三方Bean、Spring 整合 MyBatis 和 ...
  • 簡介: 中介者模式,屬於行為型的設計模式。用一個中介對象來封裝一系列的對象交互。中介者是各對象不需要顯式地相互引用,從而使其耦合鬆散,而且可以獨立地改變他們之間的交互。 適用場景: 如果平行對象間的依賴複雜,可以使用中介者解耦。 優點: 符合迪米特法則,減少成員間的依賴。 缺點: 不適用於系統出現對 ...
  • 這篇文章主要描述RPC的路由策略,包括為什麼需要請求隔離,為什麼不在註冊中心中實現請求隔離以及不同粒度的路由策略。 ...
  • 這道題只要會自定義cmp恰當地進行排序,其他部分沒有什麼大問題。 上代碼: 1 #include<bits/stdc++.h> 2 using namespace std; 3 int n,s,h1,h2,cnt; 4 struct apple{ 5 int height,ns;//height為蘋 ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...