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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...