最新要闻

广告

手机

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

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

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

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

家电

  1. 首页
  2. 移动通信
  3. 内容

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

来源：博客园


(资料图片)

随着技术的进步，跨平台开发已经成为了标配，在此大背景下，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-menu组件，为网站提供导航功能的菜单。有顶栏，侧栏，折叠等不同用法。
  • axios组件，是一个基于promise 的网络请求库，axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。在本示例中，所有的前后端交互，均是通过axios库。

核心源码

1. 组件引入

因为使用了Element提供的组件，大大节约了工作量，可以专注于业务逻辑的处理。引入组件库也非常简单，在客户端库安装以后【具体安装可参考前一篇文章】，直接在视图中进行引用即可，如下所示：

1  2     校园图书管理系统 3      4      5      6      7      8      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

2. 页面布局

页面布局采用el-container，代码结构清晰明了，易于理解，如下所示：

1 
 2      3        4           
 5               校园图书管理系统  Campus Library Management System 6           
 7           
 8               首页| 9               {{nickName}}|10               退出11           
12       13       14         15             24               25                 28                 29                     {{menu.menuName}}30                 31               32             33         34         35           36               39           40           41               
 © 2022-2023 校园图书管理系统. All Rights Reserved | Design by 小六公子
42           43         44       45     46

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 _logger; 6  7         private DataContext dataContext; 8  9         public HomeController(ILogger 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             else31             {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 GetUserRights()50         {51             int? userId = HttpContext.Session.GetInt32("UserId");52             if (userId != null)53             {54                 var query = from u in dataContext.UserRoles55                             join r in dataContext.Roles on u.RoleId equals r.Id56                             join x in dataContext.RoleMenus on r.Id equals x.RoleId57                             join m in dataContext.Menus on x.MenuId equals m.Id58                             where u.UserId == userId59                             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         /// 67         /// 退出68         /// 69         public IActionResult Logout()70         {71             HttpContext.Session.Clear();72             return Redirect("/Login");73         }74     }75 }

运行测试

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

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

关键词： 运行测试 应用程序 一篇文章