ASP.NET Core+Element+SQL Server开发校园图书管理系统（二）

老码识途 2023-03-28 原文

随着技术的进步，跨平台开发已经成为了标配，在此大背景下，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 }

运行测试

导航菜单主要分为图书管理，书室管理，系统管理三大块，可以折叠展开。主页面开发完成后，运行测试。如下所示：

以上就是校园图书管理系统的主页面功能实现，功能正在开发完善中，后续功能再继续介绍。旨在抛砖引玉，一起学习，共同进步。

Element 校园 span style color .NET技术

有关ASP.NET Core+Element+SQL Server开发校园图书管理系统（二）的更多相关文章

ruby - i18n Assets 管理/翻译 UI - 2
我正在使用i18n从头开始构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在rubyonrails-talk上遇到了这个问题，我们深表歉意) 最佳答案有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi
ruby - 使用 C 扩展开发 rubygem 时，如何使用 Rspec 在本地进行测试？ - 2
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
Ruby Sinatra 配置用于生产和开发 - 2
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？最佳答案根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2
我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？最佳答案设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI
ruby-on-rails - 获取 inf-ruby 以使用 ruby 版本管理器 (rvm) - 2
我安装了ruby版本管理器，并将RVM安装的ruby实现设置为默认值，这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时，它使用安装在/usr/bin中的ruby。有没有办法让emacs像shell一样尊重ruby的路径？谢谢! 最佳答案我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣，可以在这里获取:http://github.com/senny/rvm.el
ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反？ - 2
这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？最佳答案我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub
ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2
我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain
ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2
是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？最佳答案您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
电脑0x0000001A蓝屏错误怎么U盘重装系统教学 - 2
　　电脑0x0000001A蓝屏错误怎么U盘重装系统教学分享。有用户电脑开机之后遇到了系统蓝屏的情况。系统蓝屏问题很多时候都是系统bug，只有通过重装系统来进行解决。那么蓝屏问题如何通过U盘重装新系统来解决呢？来看看以下的详细操作方法教学吧。　　准备工作：　　1、U盘一个（尽量使用8G以上的U盘）。　　2、一台正常联网可使用的电脑。　　3、ghost或ISO系统镜像文件（Win10系统下载_Win10专业版_windows10正式版下载-系统之家）。　　4、在本页面下载U盘启动盘制作工具：系统之家U盘启动工具。　　U盘启动盘制作步骤：　　注意：制作期间，U盘会被格式化，因此U盘中的重要文件请注