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

来源:https://www.cnblogs.com/hsiang/archive/2023/01/16/17054526.html
-Advertisement-
Play Games

隨著技術的進步,跨平臺開發已經成為了標配,在此大背景下,ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例,簡述基於MVC三層架構開發的常見知識點,僅供學習分享使用,如有不足之處,還請指正。 ...


隨著技術的進步,跨平臺開發已經成為了標配,在此大背景下,ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例,簡述基於MVC三層架構開發的常見知識點,僅供學習分享使用,如有不足之處,還請指正。

涉及知識點

在本示例中,涉及到B/S全棧開發的常見知識點,包括後端與前端,主要如下:

  • 開發工具:Visual Studio 2022
  • 目標框架:.Net 6.0
  • 架構:MVC三層架構【Model-View-Controller】
  • 前端框架:前端採用Element框架,一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫。可以大大提高開發效率,減少工作量。
  • 資料庫:SQL Server 2012。需要掌握基礎的增刪改查語句使用。

Element框架簡介

Element,一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫。具體組件使用方法,可參考官網:https://element.eleme.io/#/zh-CN,

搭建開發框架

工欲善其事必先利其器,所以開發具體功能之前,首先要搭建開發環境,步驟如下所示:

1. 創建項目

本示例中的校園圖書管理系統,基於ASP.NET Core MVC三層架構,在創建時選擇對應模板即可,如下所示:

根據創建嚮導進行創建即可,在項目名稱處輸入CLMS,目標框架選擇.Net6.0即可。為了項目可移植性,將DAL層和Entity層獨立出來成單獨的工程。項目結構如下所示:

2. 創建資料庫

在本示例中,採用Data First方式,先創建資料庫和對應的表結構,根據業務需求分析,

主要包括三部分:

  1. 書室管理:書室信息(Librarys),書架信息(BookRacks)
  2. 圖書管理:書籍信息(Book),借還記錄(Circulates)
  3. 系統管理:用戶信息(Users),角色信息(Roles),菜單信息(Menus)以及角色許可權分配(RoleMenus),用戶角色分配(RoleMenus)

如下所示:

3. 在項目中配置資料庫

連接資料庫,需要在配置文件appsettings.json中,添加資料庫連接字元串,如下所示:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "ConnectionStrings": {
    "Default": "Server=localhost;Database=CLMS;Trusted_Connection=True;User Id=sa;Password=abc123;Encrypt=True;TrustServerCertificate=True;"
  },
  "AllowedHosts": "*"
}

4. 創建資料庫操作對象上下文

EntityFrameWork框架需要進行安裝,目前版本為7.0.1,可通過NuGet包管理器進行安裝,如下所示:

 資料庫操作採用EntityFrameCore框架,繼承自DbContext,如下所示:

 1 using CLMS.Entity;
 2 using Microsoft.EntityFrameworkCore;
 3 
 4 namespace CLMS.DAL
 5 {
 6     /// <summary>
 7     /// 創建資料庫上下文類
 8     /// </summary>
 9     public class DataContext : DbContext
10     {
11         public DbSet<UserEntity> Users { get; set; }
12 
13         public DbSet<MenuEntity> Menus { get; set; }
14 
15         public DbSet<RoleEntity> Roles { get; set; }
16 
17         public DbSet<UserRoleEntity> UserRoles { get; set; }
18 
19         public DbSet<RoleMenuEntity> RoleMenus { get; set; }
20 
21         /// <summary>
22         /// 圖書室
23         /// </summary>
24         public DbSet<LibraryEntity> Librarys { get; set; }
25 
26         /// <summary>
27         /// 閱覽架
28         /// </summary>
29         public DbSet<BookRackEntity> BookRacks { get; set; }
30 
31         /// <summary>
32         /// 借還記錄
33         /// </summary>
34         public DbSet<CirculateEntity> Circulates { get; set; }
35 
36         /// <summary>
37         /// 圖書
38         /// </summary>
39         public DbSet<BookEntity> Books { get; set; }
40 
41         public DataContext(DbContextOptions options) : base(options)
42         {
43 
44         }
45 
46         protected override void OnModelCreating(ModelBuilder modelBuilder)
47         {
48             base.OnModelCreating(modelBuilder);
49             modelBuilder.Entity<UserEntity>().ToTable("Users");
50             modelBuilder.Entity<MenuEntity>().ToTable("Menus");
51             modelBuilder.Entity<RoleEntity>().ToTable("Roles");
52             modelBuilder.Entity<UserRoleEntity>().ToTable("UserRoles");
53             modelBuilder.Entity<RoleMenuEntity>().ToTable("RoleMenus");
54             //
55             modelBuilder.Entity<LibraryEntity>().ToTable("Librarys");
56             modelBuilder.Entity<BookRackEntity>().ToTable("BookRacks");
57             modelBuilder.Entity<CirculateEntity>().ToTable("Circulates");
58             modelBuilder.Entity<BookEntity>().ToTable("Books");
59         }
60     }
61 }

5. EntityFramework配置

在Startup.cs中,添加EntittyFramework的註入,如下所示:

 1 using Autofac.Extensions.DependencyInjection;
 2 using CLMS.DAL;
 3 using Microsoft.EntityFrameworkCore;
 4 
 5 var builder = WebApplication.CreateBuilder(args);
 6 
 7 // Add services to the container.
 8 builder.Services.AddControllersWithViews();
 9 builder.Services.AddDbContext<DataContext>(options => options.UseSqlServer(builder.Configuration.GetConnectionString("Default")));
10 builder.Services.AddHttpContextAccessor();
11 builder.Services.AddSession();//配置session訪問服務
12 // 以下是autofac依賴註入
13 builder.Host.UseServiceProviderFactory(new AutofacServiceProviderFactory());
14 var app = builder.Build();
15 
16 // Configure the HTTP request pipeline.
17 if (!app.Environment.IsDevelopment())
18 {
19     app.UseExceptionHandler("/Home/Error");
20     // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
21     app.UseHsts();
22 }
23 
24 app.UseHttpsRedirection();
25 
26 app.UseStaticFiles();
27 
28 app.UseRouting();
29 app.UseSession();
30 app.UseAuthorization();
31 
32 app.MapControllerRoute(
33     name: "default",
34     pattern: "{controller=Home}/{action=Index}/{id?}");
35 
36 app.Run();

6. 安裝客戶端框架

在本示例中,主要用到Element UI框架,以及axios框,Vue2.0,可通過Visual Studio進行安裝,如下所示:

選擇Web項目,右鍵-->添加-->客戶端庫。打開添加視窗,然後選擇對應庫進行安裝即可,如下所示:

 安裝成功後,如下所示:

 登錄頁面

當基礎開發環境搭建好後,就可以進行具體功能開發,以登錄功能為例,步驟如下:

1. 創建控制器LoginController

控制器主要負責頁面導航和邏輯處理,如下所示:

 1 namespace CLMS.Host.Controllers
 2 {
 3     public class LoginController : Controller
 4     {
 5         private DataContext dataContext;
 6 
 7         public LoginController(DataContext context)
 8         {
 9             dataContext = context;
10         }
11 
12         [HttpGet]
13         public IActionResult Index()
14         {
15             return View();
16         }
17 
18         [Consumes("application/json")]
19         [HttpPost]
20         public Msg Login([FromBody]User user)
21         {
22             Msg msg = new Msg();
23             if (string.IsNullOrEmpty(user.UserName) || string.IsNullOrEmpty(user.Password))
24             {
25                 msg.message = "用戶名或密碼為空";
26                 msg.code = 1;
27                 return msg;
28             }
29             else
30             {
31                 var item = dataContext.Users.FirstOrDefault(i => i.UserName == user.UserName && i.Password == user.Password);
32                 if (item != null)
33                 {
34                     HttpContext.Session.SetInt32("UserId", item.Id);
35                     msg.message = "success";
36                     msg.code = 0;
37                     return msg;
38                 }
39                 else
40                 {
41                     msg.message = "用戶名或密碼驗證錯誤";
42                     msg.code = 1;
43                     return msg;
44                 }
45 
46             }
47         }
48     }
49 }

2. 創建登錄視圖

視圖主要用於數據的呈現和交互,登錄視圖對應Login/Index.cshtml頁面。主要功能如下:

  1. 引入需要的客戶端組件庫。
  2. 頁面佈局,主要使用Element組件。
  3. 登錄按鈕功能,主要用axios組件庫,提交數據到控制器。

登錄視圖代碼如下:

  1 @{
  2     Layout = null;
  3 }
  4 <!DOCTYPE html>
  5 <html>
  6 <head>
  7     <title>校園圖書管理系統</title>
  8     <!-- For-Mobile-Apps-and-Meta-Tags -->
  9     <meta name="viewport" content="width=device-width, initial-scale=1" />
 10     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 11     
 12     <!-- 引入樣式 -->
 13     <link rel="stylesheet" href="/lib/element-ui/theme-chalk/index.min.css">
 14     <!-- 引入組件庫 -->
 15     <script src="/lib/vue/dist/vue.min.js"></script>
 16     <script src="/lib/element-ui/index.min.js"></script>
 17     <script src="/lib/axios/axios.min.js"></script>
 18 </head>
 19 
 20 <body style="background:url('/imgs/loginbg.jpg');background-size: 100% 100%;background-repeat:no-repeat;width: 100%;height: 100vh;margin:0;">
 21 
 22     <div id="app">
 23         <h1>校園圖書管理系統</h1>
 24         <div class="loginbody">
 25             <el-form label-width="70px" style="margin-top:40px;" :model="form">
 26                 <el-form-item label="用戶名">
 27                     <el-input placeholder="Please input username" v-model="form.UserName"/>
 28                 </el-form-item>
 29                 <el-form-item label="密碼">
 30                     <el-input type="password" placeholder="Please input password" show-password v-model="form.Password"/>
 31                 </el-form-item>
 32                 <el-form-item style="text-align:left;">
 33                     <el-checkbox label="記住密碼" size="large"  v-model="form.Remember"  />
 34                 </el-form-item>
 35                 <el-button>取消</el-button>
 36                 <el-button type="primary" plain v-on:click="onSubmit">登錄</el-button>
 37                 <br />
 38                 <div class="reg">
 39                     <el-link type="warning" style="text-align:right;">註冊</el-link>
 40                 </div>
 41                 
 42             </el-form>
 43         </div>
 44         <br />
 45         <br />
 46     </div>
 47     <div class="footer">
 48         <p> &copy; 2022-2023 校園圖書管理系統. All Rights Reserved | Design by 小六公子</p>
 49     </div>
 50     
 51     <script>
 52        var app= new Vue({
 53             el: '#app',
 54             data:function() {
 55               return {
 56                 form: {
 57                   UserName: '',
 58                   Password: '',
 59                   Remember: false,
 60                 }
 61               }
 62             },
 63             methods: {
 64               onSubmit() {
 65                 console.log('submit!');
 66                 axios.post('/Login/Login', {
 67                     UserName: this.form.UserName,
 68                     Password: this.form.Password
 69                 }).then(function (response) {
 70                     if(response.status==200){
 71                         var msg = response.data;
 72                         if(msg.code=="0"){
 73                             window.location="/Home";
 74                         }else{
 75                              window.alert(msg.message);
 76                         }
 77                     }
 78                     console.log(response);
 79                 }).catch(function (error) {
 80                     console.log(error);
 81                 });
 82               }
 83             }
 84           });
 85     </script>
 86     <style>
 87         #app{
 88             width:100%;
 89             height:60%;
 90             text-align:center;
 91             position:absolute;
 92             top:100px;
 93         }
 94         .el-input{
 95             height:35px;
 96             width:90%;
 97         }
 98         .el-button{
 99             width:120px;
100             height:35px;
101         }
102         .loginbody{
103             display: block;
104             background: white;
105             width: 25%;
106             height: 300px;
107             position: absolute;
108             left: 38%;
109             border-radius:5px;
110         }
111         .footer{
112             position: absolute;
113 	   

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

-Advertisement-
Play Games
更多相關文章
  • Spring管理Bean-IOC 1.Spring配置/管理bean介紹 Bean管理包括兩方面: 創建bean對象 給bean註入屬性 Bean的配置方式: 基於xml文件配置方式 基於註解配置方式 2.基於XML配置bean 2.1通過類型來獲取bean 通過id來獲取bean在Spring基本 ...
  • 1、yaml文件準備 common: secretid: AKIDxxxxx secretKey: 3xgGxxxx egion: ap-guangzhou zone: ap-guangzhou-7 InstanceChargeType: POSTPAID_BY_HOUR 2、config配置類準備 ...
  • 簡介 Netflix Eureka是微服務系統中最常用的服務發現組件之一,非常簡單易用。當客戶端註冊到Eureka後,客戶端可以知道彼此的hostname和埠等,這樣就可以建立連接,不需要配置。 Eureka 服務端 添加Maven依賴: <dependency> <groupId>org.spr ...
  • 寫代碼的時候經常遇到這樣的場景:根據某個欄位值來進行不同的邏輯處理。例如,不同的會員等級在購物時有不同的折扣力度。如果會員的等級很多,那麼代碼中與之相關的if...elseif...else...會特別長,而且每新增一種等級時需要修改原先的代碼。可以用策略模式來優化,消除這種場景下的if...els ...
  • 一、前言 第一次記錄自己的年度總結,一直想寫,不知從何寫起;其實也是自己這兩年來瞭解到的東西,分享給大家,雖然是個井底之蛙,但是也要勇於說出自己的看法,歡迎大佬指導哈。可能自己語言功底太差,這也是小編一直寫博客的動力,鍛煉自己的寫作能力! 本次主要來說一下小編對於Java後端開發人員的一些見解哈! ...
  • 近期做了一個前後端合併的spring boot項目,但是要求達成exe文件,提供給不懂電腦的小白安裝使用,就去研究了半天,踩了很多坑,寫這篇文章,是想看到這篇文章的人,按照我的步驟走,能少踩坑。 準備 準備工作: 一個jar包,沒有bug能正常啟動的jar包 exe4j,一個將jar轉換成exe的工 ...
  • 題目描述 KiKi 學會了 printf 在屏幕輸出信息,他想輸出一架小飛機。請幫他編寫程式輸出這架小飛機。 輸入描述 無 輸出描述 解題思路 方案一 將小飛機的圖形按照行進行劃分,總共可以分成 6行。然後依照每行空格與 * 的排布位置輸出相應的字元即可。 具體代碼如下: #include <std ...
  • 1 什麼是Terraform? Terraform是一個IaC工具,IaC全稱為Infrastructure as Code,基礎設施即代碼。它的理念是通過代碼來管理基礎設施,如伺服器、資料庫等,更多請看《Terraform入門教程,示例展示管理Docker和Kubernetes資源》。 而作為Ia ...
一周排行
    -Advertisement-
    Play Games
  • 在本篇教程中,我們學習瞭如何使用 Taurus.MVC WebMVC 框架創建一個簡單的頁面。 我們創建了一個控制器並編寫了一個用於呈現頁面的方法,然後創建了對應的視圖,並最終成功運行了應用程式。 在下一篇教程中,我們將繼續探索 Taurus.MVC WebMVC 框架的更多功能和用法。 ...
  • 一:背景 1. 講故事 很多.NET開發者在學習高級調試的時候,使用sos的命令輸出會發現這裡也看不懂那裡也看不懂,比如截圖中的這位朋友。 .NET高級調試屬於一個偏冷門的領域,國內可觀測的資料比較少,所以很多東西需要你自己去探究源代碼,然後用各種調試工具去驗證,相關源代碼如下: coreclr: ...
  • 我一直都以為c中除以2的n次方可以使用右移n位代替,然而在實際調試中發現並不都是這樣的。是在計算餘數是發現了異常 被除數:114325068 右移15計算結果:3488 除法取整計算結果:3489 右移操作計算餘數:33772 除法取整計算餘數:1005 顯然:這是不一樣的。 移位操作是一條cpu指 ...
  • 在上一篇文章中,我們介紹了ReentrantLock類的一些基本用法,今天我們重點來介紹一下ReentrantLock其它的常用方法,以便對ReentrantLock類的使用有更深入的理解。 ...
  • Excelize 是 Go 語言編寫的用於操作電子錶格辦公文檔的開源基礎庫,2024年2月26日,社區正式發佈了 2.8.1 版本,該版本包含了多項新增功能、錯誤修複和相容性提升優化。 ...
  • 雲採用框架(Cloud Adoption Framework,簡稱CAF)為企業上雲提供策略和技術的指導原則和最佳實踐,幫助企業上好雲、用好雲、管好雲,併成功實現業務目標。本雲採用框架是基於服務大量企業客戶的經驗總結,將企業雲採用分為四個階段,並詳細探討企業應在每個階段採取的業務和技術策略;同時,還 ...
  • 與TXT文本文件,PDF文件更加專業也更適合傳輸,常用於正式報告、簡歷、合同等場合。項目中如果有使用Java將TXT文本文件轉為PDF文件的需求,可以查看本文中介紹的免費實現方法。 免費Java PDF庫 本文介紹的方法需要用到Free Spire.PDF for Java,該免費庫支持多種操作、轉 ...
  • 指針和引用 當我們需要在程式中傳遞變數的地址時,可以使用指針或引用。它們都可以用來間接訪問變數,但它們之間有一些重要的區別。 指針是一個變數,它存儲另一個變數的地址。通過指針,我們可以訪問存儲在該地址中的變數。指針可以被重新分配,可以指向不同的變數,也可以為NULL。指針使用*運算符來訪問存儲在地址 ...
  • 即使再小再簡單的需求,作為研發開發完畢之後,我們可以直接上線麽?其實很多時候事故往往就是由於“不以為意”發生的。事故的發生往往也遵循“墨菲定律”,這就要求我們更要敬畏線上,再小的需求點都需要經過嚴格的測試驗證才能上線。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、是什麼 許可權是對特定資源的訪問許可,所謂許可權控制,也就是確保用戶只能訪問到被分配的資源 而前端許可權歸根結底是請求的發起權,請求的發起可能有下麵兩種形式觸發 頁面載入觸發 頁面上的按鈕點擊觸發 總的來說,所有的請求發起都觸發自前端路由或 ...