【全球快播报】ASP.NET Core+Element+SQL Server开发校园图书管理系统（一）

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

【全球快播报】ASP.NET Core+Element+SQL Server开发校园图书管理系统（一）

2023-01-16 22:08:32 来源：博客园

随着技术的进步，跨平台开发已经成为了标配，在此大背景下，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方式，先创建数据库和对应的表结构，根据业务需求分析，

主要包括三部分：

书室管理：书室信息（Librarys），书架信息（BookRacks）
图书管理：书籍信息（Book），借还记录（Circulates）
系统管理：用户信息（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     ///  7     /// 创建数据库上下文类 8     /// 
 9     public class DataContext : DbContext10     {11         public DbSet Users { get; set; }12 13         public DbSet Menus { get; set; }14 15         public DbSet Roles { get; set; }16 17         public DbSet UserRoles { get; set; }18 19         public DbSet RoleMenus { get; set; }20 21         /// 22         /// 图书室23         /// 
24         public DbSet Librarys { get; set; }25 26         /// 27         /// 阅览架28         /// 
29         public DbSet BookRacks { get; set; }30 31         /// 32         /// 借还记录33         /// 
34         public DbSet Circulates { get; set; }35 36         /// 37         /// 图书38         /// 
39         public DbSet 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().ToTable("Users");50             modelBuilder.Entity().ToTable("Menus");51             modelBuilder.Entity().ToTable("Roles");52             modelBuilder.Entity().ToTable("UserRoles");53             modelBuilder.Entity().ToTable("RoleMenus");54             //55             modelBuilder.Entity().ToTable("Librarys");56             modelBuilder.Entity().ToTable("BookRacks");57             modelBuilder.Entity().ToTable("Circulates");58             modelBuilder.Entity().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(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             else30             {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                 else40                 {41                     msg.message = "用户名或密码验证错误";42                     msg.code = 1;43                     return msg;44                 }45 46             }47         }48     }49 }

2. 创建登录视图

视图主要用于数据的呈现和交互，登录视图对应Login/Index.cshtml页面。主要功能如下：

引入需要的客户端组件库。
页面布局，主要使用Element组件。
登录按钮功能，主要用axios组件库，提交数据到控制器。

登录视图代码如下：

1 @{  2     Layout = null;  3 }  4   5   6   7     校园图书管理系统  8       9      10      11      12      13      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  19  20  21  22      23         校园图书管理系统
 24          25              26                  27                      28                  29                  30                      31                  32                  33                      34                  35                 取消 36                 登录 37                 
 38                  39                     注册 40                 
 41                  42              43         
 44         
 45         
 46     
 47      48          © 2022-2023 校园图书管理系统. All Rights Reserved | Design by 小六公子
 49     
 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     128 129

运行测试

经过以上步骤，登录功能已经做好，运行程序。然后数据账号密码，点击登录进行跳转，如下所示：

登录成功后，如下所示：

以上就是校园图书管理系统的基础环境搭建以及登录功能实现，后续功能再继续介绍。旨在抛砖引玉，一起学习，共同进步。

关键词：开发环境产品经理