ASP.NET Core+Element+SQL Server开发校园图书管理系统(四)

  • ASP.NET Core+Element+SQL Server开发校园图书管理系统(四)已关闭评论
  • 251 次浏览
  • A+
所属分类:.NET技术
摘要

随着技术的进步,跨平台开发已经成为了标配,在此大背景下,ASP.NET Core也应运而生。本文主要基于ASP.NET Core+Element+Sql Server开发一个校园图书管理系统为例,简述基于MVC三层架构开发的常见知识点,前三篇篇文章简单介绍了如何搭建开发框架,登录功能,主页面功能,以及书室管理,书架管理功能的实现,本篇文章继续讲解书籍管理以及借还功能相关功能的开发,仅供学习分享使用,如有不足之处,还请指正。

随着技术的进步,跨平台开发已经成为了标配,在此大背景下,ASP.NET Core也应运而生。本文主要基于ASP.NET Core+Element+Sql Server开发一个校园图书管理系统为例,简述基于MVC三层架构开发的常见知识点,前三篇篇文章简单介绍了如何搭建开发框架,登录功能,主页面功能,以及书室管理,书架管理功能的实现,本篇文章继续讲解书籍管理以及借还功能相关功能的开发,仅供学习分享使用,如有不足之处,还请指正。

涉及知识点

在本示例中,应用最多的就是如何Element中提供的组件,和控制器中业务逻辑处理,涉及知识点如下所示:

  • MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式,其中Controller(控制器)处理输入(写入数据库记录)。控制器Controller,是应用程序中处理用户交互的部分,通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。
  • Element组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。可以大大提高开发效率,减少工作量。在主页面中,主要用到如下几种:
    • 表单控件el-form,由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据到后台。
    • 列表控件el-table,用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。主要用户显示结构化列表的数据。
    • 分页控件el-pagination,当数据量过多时,使用分页分解数据。
    • 弹出窗口el-dialog,在保留当前页面状态的情况下,告知用户并承载相关操作。主要用于弹出新建或编辑窗口。
  • axios组件,是一个基于promise 的网络请求库,axios本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范。在本示例中,所有的前后端交互,均是通过axios库。

功能介绍

本文主要介绍书籍管理和借还管理两个功能,如下所示:

  1. 图书管理,主要包括书籍的检索,新增,修改,删除等基本功能,另外书籍的存放位置和书架ID相关,书架又与书室相关,所有相对比较复杂。
  2. 借还管理,主要根据用于输入或扫描的ISBN号,进行借阅以及归还,主要记录借阅人,借阅时间,借阅经手人,归还时间,归还经手人等信息。

图书管理

1. Book表结构

图书管理,主要是对Book表的CRUD操作,表结构如下所示:

ASP.NET Core+Element+SQL Server开发校园图书管理系统(四)

 

 其中BookRackId为书架ID,与BookRack表的外键。

2. Book表实体类

Book表实体类是数据表的数据映射,和数据表一一对应,如下所示:

 1 namespace CLMS.Entity  2 {  3     /// <summary>  4     /// 图书实体  5     /// </summary>  6     public class BookEntity  7     {  8         /// <summary>  9         /// 唯一标识 10         /// </summary> 11         public int Id { get; set; } 12  13         /// <summary> 14         /// 图书编号 15         /// </summary> 16         public string ISBN { get; set; } 17  18         /// <summary> 19         /// 图书名称 20         /// </summary> 21         public string Name { get; set; } 22  23         /// <summary> 24         /// 图书作者 25         /// </summary> 26         public string Author { get; set; } 27  28         /// <summary> 29         /// 图书出版社 30         /// </summary> 31         public string Publisher { get; set; } 32  33         /// <summary> 34         /// 出版时间 35         /// </summary> 36         public DateTime PublishDate { get; set; } 37  38         /// <summary> 39         /// 图书类型 40         /// </summary> 41         public string BookType { get; set; } 42  43         /// <summary> 44         /// 描述 45         /// </summary> 46         public string Description { get; set; } 47  48         /// <summary> 49         /// 书架ID 50         /// </summary> 51         public long BookRackId { get; set; } 52  53         /// <summary> 54         /// 创建时间 55         /// </summary> 56         public DateTime CreateTime { get; set; } 57  58         /// <summary> 59         /// 当前登录的账号的ID 60         /// </summary> 61         public int CreateUser { get; set; } 62  63         /// <summary> 64         /// 最后编辑时间 65         /// </summary> 66         public DateTime? LastEditTime { get; set; } 67  68         /// <summary> 69         /// 最后修改人 70         /// </summary> 71         public int LastEditUser { get; set; } 72     } 73 }

3. 图书管理页面布局

图书管理页面主要包括对书籍的查询,新增,编辑,删除等操作,页面布局如下所示:

  1 <div id="app">   2     <template>   3         <el-breadcrumb separator-class="el-icon-arrow-right">   4             <el-breadcrumb-item>图书管理</el-breadcrumb-item>   5             <el-breadcrumb-item>图书管理</el-breadcrumb-item>   6         </el-breadcrumb>   7         <el-form :inline="true" :model="queryCondition" class="demo-form-inline" style="margin-top: 10px; border: solid;border-width: 1px;border-color: #ebeef5;padding: 10px;">   8             <el-form-item label="书籍名称">   9                 <el-input v-model="queryCondition.Name" placeholder="书籍名称"></el-input>  10             </el-form-item>  11             <el-form-item label="出版社">  12                 <el-input v-model="queryCondition.Publisher" placeholder="出版社"></el-input>  13             </el-form-item>  14             <el-form-item>  15                 <el-button type="primary" v-on:click="handleQuery">查询</el-button>  16             </el-form-item>  17             <el-form-item>  18                 <el-button type="primary" v-on:click="handleAdd">新增</el-button>  19             </el-form-item>  20         </el-form>  21           22         <el-table :data="tableData" style="width: 100%" border :default-sort="{prop: 'date', order: 'descending'}">  23             <el-table-column type="expand">  24               <template slot-scope="props">  25                 <el-form label-position="left" inline class="demo-table-expand">  26                   <el-form-item label="图书馆">  27                     <span>{{ props.row.LibraryName }}</span>  28                   </el-form-item>  29                   <el-form-item label="图书室">  30                     <span>{{ props.row.LibrarySubName }}</span>  31                   </el-form-item>  32                   <el-form-item label="排">  33                     <span>{{ props.row.Row }}</span>  34                   </el-form-item>  35                   <el-form-item label="列">  36                     <span>{{ props.row.Column }}</span>  37                   </el-form-item>  38                 </el-form>  39               </template>  40             </el-table-column>  41             <el-table-column prop="ISBN" label="ISBN" sortable ></el-table-column>  42             <el-table-column prop="Name" label="书籍名称" sortable ></el-table-column>  43             <el-table-column prop="Author" label="作者" sortable ></el-table-column>  44             <el-table-column prop="Publisher" label="出版社" sortable ></el-table-column>  45             <el-table-column prop="BookType" label="书籍类型" sortable ></el-table-column>  46             <el-table-column prop="CreateTime" label="上架时间" sortable ></el-table-column>  47             <el-table-column label="操作">  48                 <template slot-scope="scope">  49                     <el-button size="medium" type="primary" plain v-on:click="handleEdit(scope.$index,scope.row)">编辑</el-button>  50                     <el-button size="medium" type="danger" v-on:click="handleDelete(scope.$index,scope.row)">删除</el-button>  51                 </template>  52             </el-table-column>  53         </el-table>  54         <el-pagination background layout="prev, pager, next" :page-size="pageSize" :current-page="currentPage" :total="total" style="margin-top:10px;" v-on:current-change="handlePageChanged" v-on:prev-click="handlePrevClick" v-on:next-click="handleNextClick"></el-pagination>  55         <el-dialog title="书籍信息" :visible.sync="dialogFormVisible">  56           <el-form :model="addOrEditForm">  57             <el-form-item label="ISBN" :label-width="formLabelWidth">  58               <el-input v-model="addOrEditForm.ISBN" autocomplete="off"></el-input>  59             </el-form-item>  60             <el-form-item label="书籍名称" :label-width="formLabelWidth">  61               <el-input v-model="addOrEditForm.Name" autocomplete="off"></el-input>  62             </el-form-item>  63             <el-form-item label="书籍作者" :label-width="formLabelWidth">  64               <el-input v-model="addOrEditForm.Author" autocomplete="off"></el-input>  65             </el-form-item>  66             <el-form-item label="出版社" :label-width="formLabelWidth">  67               <el-input v-model="addOrEditForm.Publisher" autocomplete="off"></el-input>  68             </el-form-item>  69             <el-form-item label="出版时间" :label-width="formLabelWidth">  70               <el-date-picker v-model="addOrEditForm.PublishDate" type="date" placeholder="选择日期"></el-date-picker>  71             </el-form-item>  72             <el-form-item label="书籍类型" :label-width="formLabelWidth">  73               <el-select v-model="addOrEditForm.BookType" placeholder="请选择书籍类型">  74                 <el-option label="技术类" value="技术类"></el-option>  75                 <el-option label="科普类" value="科普类"></el-option>  76                 <el-option label="文学类" value="文学类"></el-option>  77                 <el-option label="社科类" value="社科类"></el-option>  78                 <el-option label="语言类" value="语言类"></el-option>  79               </el-select>  80             </el-form-item>  81             <el-form-item label="书籍描述" :label-width="formLabelWidth">  82               <el-input v-model="addOrEditForm.Description" autocomplete="off"></el-input>  83             </el-form-item>  84             <el-form-item label="存放位置" :label-width="formLabelWidth">  85               <el-tag v-model="addOrEditForm.Location" style="vertical-align:middle;">{{addOrEditForm.Location}}</el-tag>  86               <el-button icon="el-icon-place" circle v-on:click="handleLocation"></el-button>  87             </el-form-item>  88           </el-form>  89           <div slot="footer" class="dialog-footer">  90             <el-button v-on:click="dialogFormVisible = false">取 消</el-button>  91             <el-button type="primary" v-on:click="handleSave">确 定</el-button>  92           </div>  93           <el-dialog title="位置信息" :visible.sync="dialogLocationVisible">  94                <el-table :data="locationData" style="width: 100%" highlight-current-row border :default-sort="{prop: 'date', order: 'descending'}" v-on:current-change="handleLocationCurrentChange">  95                     <el-table-column prop="Name" label="图书馆" sortable ></el-table-column>  96                     <el-table-column prop="SubName" label="图书室" sortable ></el-table-column>  97                     <el-table-column prop="Row" label="排" sortable ></el-table-column>  98                     <el-table-column prop="Column" label="列" sortable ></el-table-column>  99                     <el-table-column prop="Description" label="描述" sortable ></el-table-column> 100                </el-table> 101                <el-pagination background layout="prev, pager, next" :page-size="locationPageSize" :current-page="locationCurrentPage" :total="locationTotal" style="margin-top:10px;" v-on:current-change="handleLocationPageChanged" v-on:prev-click="handleLocationPrevClick" v-on:next-click="handleLocationNextClick"></el-pagination> 102                <div slot="footer" class="dialog-footer"> 103                 <el-button v-on:click="dialogLocationVisible = false">取 消</el-button> 104                 <el-button type="primary" v-on:click="handleLocationSave">确 定</el-button> 105               </div> 106            </el-dialog> 107         </el-dialog> 108          109     </template> 110 </div>

4. 图书管理数据交互

数据交互通过JS脚本进行,书写格式和VUE2.0保持一致,在页面启动时,加载所有的书室信息,并绑定到el-table对象,所以需要在mounted函数中增加调用向服务器端发出请求,当用户新增或编辑保存时,通过axios发送请求到服务端接口。

  1 <script>   2     var app= new Vue({   3          el: '#app',   4          data:function() {   5            return {   6              queryCondition:{   7                 Name:'',   8                 Publisher:''   9              },  10              formLabelWidth: '120px',  11              addOrEditForm:{  12                 Id:0,  13                 ISBN: '',  14                 Name: '',  15                 Author: '',  16                 Publisher: '',  17                 PublishDate: '',  18                 BookType: '',  19                 Description: '',  20                 BookRackId:'',  21                 Location:''  22              },  23              total:0,  24              pageSize:10,  25              currentPage:1,  26              dialogFormVisible: false,  27              dialogLocationVisible:false,  28              tableData: [],  29              queryLocationCondition:{  30                 Name:'',  31                 Publisher:''  32              },  33              locationData:[],  34              locationTotal:0,  35              locationPageSize:5,  36              locationCurrentPage:1,  37              locationCurrentRow: null,  38            }  39          },  40          mounted:function(){  41             this.query(1);  42          },  43          methods: {  44            handleOpen(key, keyPath) {  45              console.log(key, keyPath);  46            },  47            handleClose(key, keyPath) {  48              console.log(key, keyPath);  49            },  50            formatter(row, column) {  51              return row.address;  52            },  53            handleQuery(){  54             this.query(1);  55            },  56            handlePageChanged(val){  57             this.query(val);  58            },  59            handlePrevClick(){  60             //query(this.currentPage);  61            },  62            handleNextClick(){  63             //query(this.currentPage);  64            },  65            handleLocationPageChanged(val){  66             this.queryLocation(val);  67            },  68            handleLocationPrevClick(){  69             //query(this.currentPage);  70            },  71            handleLocationNextClick(){  72             //query(this.currentPage);  73            },  74            handleAdd(){  75              this.addOrEditForm.Id=0;  76              this.addOrEditForm.ISBN= '';  77              this.addOrEditForm.Name= '';  78              this.addOrEditForm.Author= '';  79              this.addOrEditForm.Publisher= '';  80              this.addOrEditForm.PublishDate= '';  81              this.addOrEditForm.BookType= '';  82              this.addOrEditForm.Description= '';  83              this.addOrEditForm.BookRackId='';  84              this.addOrEditForm.Location='';  85              this.dialogFormVisible=true;  86              console.log("add");  87            },  88            handleEdit(index,row){  89             console.log("当前index="+index);  90             console.log(row);  91             this.addOrEditForm.Id=row.Id;  92             this.addOrEditForm.ISBN=row.ISBN;  93             this.addOrEditForm.Name=row.Name;  94             this.addOrEditForm.Author=row.Author;  95             this.addOrEditForm.Publisher=row.Publisher;  96             this.addOrEditForm.PublishDate=row.PublishDate;  97             this.addOrEditForm.BookType=row.BookType;  98             this.addOrEditForm.Description=row.Description;  99             this.addOrEditForm.BookRackId=row.BookRackId; 100             this.addOrEditForm.Location=row.LibraryName+"-"+row.LibrarySubName+"-"+row.Row+"排"+row.Column+"列";; 101             this.dialogFormVisible=true; 102            }, 103            handleDelete(index,row){ 104             console.log("当前index="+index); 105             console.log(row); 106             this.$confirm('确定要删除编号为'+row.Id+'的书籍吗?', '提示', { 107                 confirmButtonText: '确定', 108                 cancelButtonText: '取消', 109                 type: 'warning' 110             }).then(() => { 111                 var that=this; 112                 axios.post('/Book/Delete', { 113                     Id:row.Id 114                 }).then(function (response) { 115                     if(response.status==200){ 116                         var msg = response.data; 117                         console.log(msg); 118                         if(msg.code=="0"){ 119                             //刷新页面 120                             that.$message({ 121                                 type: 'success', 122                                 message: '删除成功!' 123                               }); 124                             that.query(1); 125                         }else{ 126                             that.$message.error(msg.message); 127                         } 128                     } 129                     console.log(response); 130                 }).catch(function (error) { 131                     that.$message.error(error); 132                 }); 133                  console.log("delete"); 134             }).catch(() => { 135                 this.$message({ 136                 type: 'info', 137                 message: '已取消删除' 138                 });           139             }); 140            }, 141            query(pageNum){ 142             var that = this; 143             this.tableData=[]; 144             console.log("query"); 145             axios.get('/Book/Query', {params:{ 146                 Name:this.queryCondition.Name, 147                 Publisher:this.queryCondition.Publisher, 148                 PageSize:this.pageSize, 149                 PageNum:pageNum 150             }}).then(function (response) { 151                 if(response.status==200){ 152                     var data = response.data; 153                     var count=data.count; 154                     that.total = count; 155                     for (let i = 0; i < data.items.length; i++) { 156                         that.tableData.push({ 157                             Id:data.items[i].id, 158                             ISBN: data.items[i].isbn, 159                             Name: data.items[i].name, 160                             Author:  data.items[i].author, 161                             Publisher: data.items[i].publisher, 162                             PublishDate: data.items[i].publishDate, 163                             Description:data.items[i].description, 164                             BookType: data.items[i].bookType, 165                             CreateTime: data.items[i].createTime, 166                             LibraryName:data.items[i].libraryName, 167                             LibrarySubName:data.items[i].librarySubName, 168                             Row:data.items[i].row, 169                             Column:data.items[i].column, 170                         }); 171                     } 172                 } 173                 console.log(response); 174             }).catch(function (error) { 175                 console.log(error); 176             }); 177            }, 178            handleLocation(){ 179             this.queryLocation(1); 180             this.dialogLocationVisible=true; 181            }, 182            handleLocationCurrentChange(row){ 183             this.locationCurrentRow=row; 184            }, 185            queryLocation(pageNum){ 186             this.locationData=[]; 187             var that=this; 188             console.log("location query"); 189             axios.get('/BookRack/Query',{params: { 190                 Name:this.queryLocationCondition.Name, 191                 SubName:this.queryLocationCondition.SubName, 192                 PageSize:this.locationPageSize, 193                 PageNum:pageNum 194             }}).then(function (response) { 195                 if(response.status==200){ 196                     var data = response.data; 197                     var count=data.count; 198                     that.locationTotal = count; 199                     for (let i = 0; i < data.items.length; i++) { 200                         that.locationData.push({ 201                             Id: data.items[i].id, 202                             libraryId:data.items[i].libraryId, 203                             Name: data.items[i].name, 204                             SubName:  data.items[i].subName, 205                             Row : data.items[i].row, 206                             Column : data.items[i].column, 207                             Location : data.items[i].location, 208                             Description:data.items[i].description, 209                             CreateTime: data.items[i].createTime, 210                         }); 211                     } 212                 } 213                 console.log(that.locationData); 214                 console.log(response); 215             }).catch(function (error) { 216                 console.log(error); 217             }); 218            }, 219            handleLocationSave(){ 220             console.log(this.locationCurrentRow); 221             if(this.locationCurrentRow!=null){ 222                 this.addOrEditForm.BookRackId=this.locationCurrentRow.Id; 223                 this.addOrEditForm.Location=this.locationCurrentRow.Name+"-"+this.locationCurrentRow.SubName+"-"+this.locationCurrentRow.Row+"排"+this.locationCurrentRow.Column+"列"; 224             } 225             this.dialogLocationVisible=false; 226            }, 227            handleSave(){ 228             var that=this; 229             axios.post('/Book/Add', { 230                 Id:this.addOrEditForm.Id, 231                 ISBN: this.addOrEditForm.ISBN, 232                 Name: this.addOrEditForm.Name, 233                 Author: this.addOrEditForm.Author, 234                 Publisher: this.addOrEditForm.Publisher, 235                 PublishDate: this.addOrEditForm.PublishDate, 236                 BookType: this.addOrEditForm.BookType, 237                 Description: this.addOrEditForm.Description, 238                 BookRackId:this.addOrEditForm.BookRackId, 239             }).then(function (response) { 240                 if(response.status==200){ 241                     var msg = response.data; 242                     console.log(msg); 243                     if(msg.code=="0"){ 244                         that.dialogFormVisible=false; 245                         //刷新页面 246                         that.query(1); 247                     }else{ 248                         window.alert(msg.message); 249                     } 250                     console.log(that.dialogFormVisible); 251                 } 252                 console.log(response); 253             }).catch(function (error) { 254                 console.log(error); 255             }); 256              console.log("save"); 257            }, 258          } 259        }); 260 </script>

5. 图书控制器逻辑BookController

控制器主要用于响应用户的请求,与数据库交互,并返回执行的结果信息。

  1 namespace CLMS.Host.Controllers   2 {   3     public class BookController : Controller   4     {   5         private DataContext dataContext;   6    7         public BookController(DataContext context) {    8             dataContext = context;   9         }  10   11         public IActionResult Index()  12         {  13             return View();  14         }  15   16         /// <summary>  17         /// 获取符合条件的查询  18         /// </summary>  19         /// <param name="Name"></param>  20         /// <param name="Publisher"></param>  21         /// <param name="pageNum"></param>  22         /// <param name="pageSize"></param>  23         /// <returns></returns>  24         [HttpGet]  25         public PagedRequest<Book> Query(string Name, string Publisher, int pageNum, int pageSize)  26         {  27             Name = string.IsNullOrEmpty(Name) ? string.Empty : Name;  28             Publisher = string.IsNullOrEmpty(Publisher) ? string.Empty : Publisher;  29             var bookEntities = dataContext.Books.Where(r => r.Name.Contains(Name) && r.Publisher.Contains(Publisher));  30             var total = bookEntities.Count();  31             var bookDtos = bookEntities.Skip((pageNum - 1) * pageSize).Take(pageSize).Select(r => new Book() { Id = r.Id, ISBN = r.ISBN, Name = r.Name, Author = r.Author, Publisher = r.Publisher, BookType = r.BookType,BookRackId=r.BookRackId,PublishDate=r.PublishDate, CreateTime = r.CreateTime,Description=r.Description }).ToList();  32   33             //位置  34             var bookRackIds = bookDtos.Select(r => r.BookRackId).ToList();  35             var locations = dataContext.BookRacks.Where(r => bookRackIds.Contains(r.Id)).Join(dataContext.Librarys, b => b.LibraryId, l => l.Id, (b, l) => new BookRack() { Name = l.Name, SubName = l.SubName, Location = l.Location, LibraryId = b.LibraryId, Id = b.Id, Row = b.Row, Column = b.Column, Description = b.Description, CreateTime = b.CreateTime }).ToList();  36   37             bookDtos.ForEach(r => {  38                 var location = locations.FirstOrDefault(l => l.Id == r.BookRackId);  39                 if (location != null) {  40                     r.LibraryName = location.Name;  41                     r.LibrarySubName=location.SubName;  42                     r.Row=location.Row;  43                     r.Column=location.Column;  44                 }  45             });  46             //  47             return new PagedRequest<Book>()  48             {  49                 count = total,  50                 items = bookDtos,  51             };  52         }  53   54         [Consumes("application/json")]  55         [HttpPost]  56         public Msg Add([FromBody] Book book)  57         {  58             Msg msg = new Msg();  59             if (book == null)  60             {  61                 msg.code = 1;  62                 msg.message = "对象为空";  63                 return msg;  64             }  65             else  66             {  67                 var userId = HttpContext.Session.GetInt32("UserId");  68   69                 if (book.Id > 0)  70                 {  71                     //更新  72                     var entity = dataContext.Books.Where(r => r.Id == book.Id).FirstOrDefault();  73                     if (entity != null)  74                     {  75                         entity.BookRackId = book.BookRackId;  76                         entity.Author = book.Author;  77                         entity.Publisher = book.Publisher;  78                         entity.Description = book.Description;  79                         entity.BookType = book.BookType;  80                         entity.ISBN = book.ISBN;  81                         entity.Name = book.Name;  82                         entity.LastEditUser = userId.GetValueOrDefault();  83                         entity.LastEditTime = DateTime.Now;  84                         dataContext.Books.Update(entity);  85                         dataContext.SaveChanges();  86                     }  87                     else  88                     {  89                         msg.code = 1;  90                         msg.message = "修改失败";  91                         return msg;  92                     }  93                 }  94                 else  95                 {  96                     //新增  97                     var entity = new BookEntity()  98                     {  99                         BookRackId = book.BookRackId, 100                         Author = book.Author, 101                         Publisher = book.Publisher, 102                         PublishDate = book.PublishDate, 103                         Description = book.Description, 104                         BookType = book.BookType, 105                         ISBN = book.ISBN, 106                         Name = book.Name, 107                         CreateTime = DateTime.Now, 108                         CreateUser = userId.GetValueOrDefault(), 109                         LastEditTime = DateTime.Now, 110                         LastEditUser = userId.GetValueOrDefault(), 111                     }; 112                     dataContext.Books.Add(entity); 113                     dataContext.SaveChanges(); 114                 } 115                 msg.code = 0; 116                 msg.message = "success"; 117                 return msg; 118             } 119         } 120  121         [Consumes("application/json")] 122         [HttpPost] 123         public Msg Delete([FromBody] Book book) { 124             Msg msg = new Msg(); 125             if (book == null) 126             { 127                 msg.code = 1; 128                 msg.message = "对象为空"; 129                 return msg; 130             } 131             else 132             { 133                 if (book.Id > 0) 134                 { 135                     var entity = dataContext.Books.Where(r => r.Id == book.Id).FirstOrDefault(); 136                     if (entity != null) 137                     { 138                         dataContext.Books.Remove(entity); 139                         dataContext.SaveChanges(); 140                         msg.code = 0; 141                         msg.message = "success"; 142                     } 143                     else {  144                         msg.code = 1; 145                         msg.message = "对象不存在或已被删除"; 146                     } 147                 } 148                 else { 149  150                     msg.code = 1; 151                     msg.message = "对象Id小于0"; 152                 } 153                 return msg; 154             } 155         } 156     } 157 }

6. 图书管理功能测试

经过以上几个步骤,即可完成图书管理的基本操作,主要包括图书的查询,新增,编辑,删除,已经分页等功能,如下所示:

ASP.NET Core+Element+SQL Server开发校园图书管理系统(四)

图书借还

1. 图书借还数据表结构

图书借还包括图书的借阅和归还,两个功能,主要记录借阅人,借阅时间,归还时间,以及经手人,数据表结构如下所示:

ASP.NET Core+Element+SQL Server开发校园图书管理系统(四)

 

2. 图书借还实体类

数据表实体类和数据表一一对应,主要通过EntityFrameword与数据库进行映射。如下所示:

 1 namespace CLMS.Entity  2 {  3     /// <summary>  4     /// 借还记录  5     /// </summary>  6     public class CirculateEntity  7     {  8         /// <summary>  9         /// 唯一标识 10         /// </summary> 11         public int Id { get; set; } 12  13         /// <summary> 14         /// 图书标识 15         /// </summary> 16         public int BookId { get; set; } 17  18         /// <summary> 19         /// 是否归还 20         /// </summary> 21         public bool IsReturn { get; set; } 22  23         /// <summary> 24         /// 借阅人 25         /// </summary> 26         public string BorrowUser { get; set; } 27  28         /// <summary> 29         /// 借阅时间 30         /// </summary> 31         public DateTime BorrowTime { get; set; } 32  33         /// <summary> 34         /// 借阅确认人 35         /// </summary> 36         public string BorrowConfirmor { get; set; } 37  38         /// <summary> 39         /// 归还时间 40         /// </summary> 41         public DateTime? ReturnTime { get; set; } 42  43         /// <summary> 44         /// 归还确认人 45         /// </summary> 46         public string? ReturnConfirmor { get; set; } 47     } 48 }

3. 图书借还页面布局

图书借还主要包括信息查询,借阅和归还等功能,页面布局如下所示:

 1 <div id="app">  2     <template>  3         <el-breadcrumb separator-class="el-icon-arrow-right">  4             <el-breadcrumb-item>图书管理</el-breadcrumb-item>  5             <el-breadcrumb-item>图书借阅及归还</el-breadcrumb-item>  6         </el-breadcrumb>  7         <el-form :inline="true" :model="queryCondition" class="demo-form-inline" style="margin-top: 10px; border: solid;border-width: 1px;border-color: #ebeef5;padding: 10px;">  8             <el-form-item label="书籍名称">  9                 <el-input v-model="queryCondition.Name" placeholder="书籍名称"></el-input> 10             </el-form-item> 11             <el-form-item> 12                 <el-button type="primary" v-on:click="handleQuery">查询</el-button> 13             </el-form-item> 14              <el-form-item> 15                 <el-button type="primary" v-on:click="handleBorrow">借阅</el-button> 16             </el-form-item> 17             <el-form-item> 18                 <el-button type="primary" v-on:click="handleReturn">归还</el-button> 19             </el-form-item> 20         </el-form> 21         <el-table :data="tableData" style="width: 100%" border :default-sort="{prop: 'BorrowTime', order: 'descending'}"> 22             <el-table-column prop="Name" label="书籍名称" sortable ></el-table-column> 23             <el-table-column prop="ISBN" label="ISBN" sortable ></el-table-column> 24             <el-table-column prop="BorrowUser" label="借阅人" sortable ></el-table-column> 25             <el-table-column prop="BorrowTime" label="借阅时间" sortable ></el-table-column> 26             <el-table-column prop="BorrowConfirmor" label="借阅经手人" sortable ></el-table-column> 27             <el-table-column prop="IsReturn" label="是否归还" sortable ></el-table-column> 28             <el-table-column prop="ReturnTime" label="归还时间" sortable ></el-table-column> 29             <el-table-column prop="ReturnConfirmor" label="归还经手人" sortable ></el-table-column> 30         </el-table> 31         <el-pagination background layout="prev, pager, next" :page-size="pageSize" :current-page="currentPage" :total="total" style="margin-top:10px;" v-on:current-change="handlePageChanged" v-on:prev-click="handlePrevClick" v-on:next-click="handleNextClick"></el-pagination> 32         <el-dialog title="借阅信息" :visible.sync="dialogFormBorrowVisible"> 33             <el-form :model="borrowForm"> 34                 <el-form-item label="ISBN" :label-width="formLabelWidth"> 35                   <el-input v-model="borrowForm.ISBN" autocomplete="off"></el-input> 36                 </el-form-item> 37                 <el-form-item label="书籍名称" :label-width="formLabelWidth"> 38                   <el-input v-model="borrowForm.Name" autocomplete="off"></el-input> 39                 </el-form-item> 40                 <el-form-item label="借阅人" :label-width="formLabelWidth"> 41                   <el-input v-model="borrowForm.BorrowUser" autocomplete="off"></el-input> 42                 </el-form-item> 43             </el-form> 44             <div slot="footer" class="dialog-footer"> 45                 <el-button v-on:click="dialogFormBorrowVisible = false">取 消</el-button> 46                 <el-button type="primary" v-on:click="handleSaveBorrow">确 定</el-button> 47             </div> 48         </el-dialog> 49         <el-dialog title="归还信息" :visible.sync="dialogFormReturnVisible"> 50             <el-form :model="returnForm"> 51                 <el-form-item label="ISBN" :label-width="formLabelWidth"> 52                   <el-input v-model="returnForm.ISBN" autocomplete="off"></el-input> 53                 </el-form-item> 54                 <el-form-item label="书籍名称" :label-width="formLabelWidth"> 55                   <el-input v-model="returnForm.Name" autocomplete="off"></el-input> 56                 </el-form-item> 57             </el-form> 58             <div slot="footer" class="dialog-footer"> 59                 <el-button v-on:click="dialogFormReturnVisible = false">取 消</el-button> 60                 <el-button type="primary" v-on:click="handleSaveReturn">确 定</el-button> 61             </div> 62         </el-dialog> 63     </template> 64 </div>

4. 图书借还数据交互

数据交互通过JS脚本进行,书写格式和VUE2.0保持一致,在页面启动时,加载所有的图书借还信息,并绑定到el-table对象,所以需要在mounted函数中增加调用向服务器端发出请求,当用户借阅或归还保存时,通过axios发送请求到服务端接口。

  1 <script>   2     var app= new Vue({   3          el: '#app',   4          data:function() {   5            return {   6                queryCondition:{   7                    Name:''   8                },   9                formLabelWidth: '120px',  10                addOrEditForm:{  11                 Id:0,  12                 ISBN: '',  13                 Name: '',  14                 BorrowConfirmor:  '',  15                 BorrowTime: '',  16                 BorrowUser: '',  17                 IsReturn:'',  18                 ReturnConfirmor: '',  19                 ReturnTime: '',  20                },  21                borrowForm:{  22                 Id:0,  23                 ISBN: '',  24                 Name: '',  25                 BorrowUser:''  26                },  27                returnForm:{  28                 Id:0,  29                 ISBN: '',  30                 Name: '',  31                },  32                total:0,  33                pageSize:10,  34                currentPage:1,  35                tableData: [],  36                dialogFormBorrowVisible: false,  37                dialogFormReturnVisible: false,  38            }  39          },  40          mounted:function(){  41             this.query(1);  42          },  43          methods: {  44             handleOpen(key, keyPath) {  45                 console.log(key, keyPath);  46             },  47             handleClose(key, keyPath) {  48                 console.log(key, keyPath);  49             },  50             formatter(row, column) {  51                 return row.address;  52             },  53             handleQuery(){  54                 console.log("query");  55                 this.query(1);  56             },  57             handlePageChanged(val){  58                 this.query(val);  59             },  60             handlePrevClick(){  61                 //query(this.currentPage);  62             },  63             handleNextClick(){  64                 //query(this.currentPage);  65             },  66             handleBorrow(){  67                 this.dialogFormBorrowVisible=true;  68             },  69             handleReturn(){  70                 this.dialogFormReturnVisible=true;  71             },  72             handleSaveBorrow(){  73                 this.$confirm('确定要借阅编号为'+this.borrowForm.ISBN+'的书籍吗?', '提示', {  74                     confirmButtonText: '确定',  75                     cancelButtonText: '取消',  76                     type: 'warning'  77                 }).then(() => {  78                     var that=this;  79                     axios.post('/Circulate/Borrow', {  80                         Id:that.borrowForm.Id,  81                         ISBN:that.borrowForm.ISBN,  82                         Name:that.borrowForm.Name,  83                         BorrowUser:that.borrowForm.BorrowUser,  84                     }).then(function (response) {  85                         if(response.status==200){  86                             var msg = response.data;  87                             console.log(msg);  88                             if(msg.code=="0"){  89                                 //刷新页面  90                                 that.dialogFormBorrowVisible=false;  91                                 that.$message({  92                                     type: 'success',  93                                     message: '借阅成功!'  94                                   });  95                                 that.query(1);  96                             }else{  97                                 that.$message.error(msg.message);  98                             }  99                         } 100                         console.log(response); 101                     }).catch(function (error) { 102                         that.$message.error(error); 103                     }); 104                      console.log("delete"); 105                 }).catch(() => { 106                     this.$message({ 107                     type: 'info', 108                     message: '已取消借阅' 109                     });           110                 }); 111             }, 112             handleSaveReturn(){ 113                 this.$confirm('确定要归还编号为'+this.returnForm.ISBN+'的书籍吗?', '提示', { 114                     confirmButtonText: '确定', 115                     cancelButtonText: '取消', 116                     type: 'warning' 117                 }).then(() => { 118                     var that=this; 119                     axios.post('/Circulate/Return', { 120                         Id:that.returnForm.Id, 121                         ISBN:that.returnForm.ISBN, 122                         Name:that.returnForm.Name, 123                     }).then(function (response) { 124                         if(response.status==200){ 125                             var msg = response.data; 126                             console.log(msg); 127                             if(msg.code=="0"){ 128                                 //刷新页面 129                                 that.dialogFormReturnVisible=false; 130                                 that.$message({ 131                                     type: 'success', 132                                     message: '归还成功!' 133                                   }); 134                                 that.query(1); 135                             }else{ 136                                 that.$message.error(msg.message); 137                             } 138                         } 139                         console.log(response); 140                     }).catch(function (error) { 141                         that.$message.error(error); 142                     }); 143                      console.log("delete"); 144                 }).catch(() => { 145                     this.$message({ 146                     type: 'info', 147                     message: '已取消归还' 148                     });           149                 }); 150             }, 151             query(pageNum){ 152                 var that = this; 153                 this.tableData=[]; 154                 console.log("query"); 155                 axios.get('/Circulate/Query', {params:{ 156                     Name:this.queryCondition.Name, 157                     PageSize:this.pageSize, 158                     PageNum:pageNum 159                 }}).then(function (response) { 160                     if(response.status==200){ 161                         var data = response.data; 162                         var count=data.count; 163                         that.total = count; 164                         for (let i = 0; i < data.items.length; i++) { 165                             that.tableData.push({ 166                                 Id:data.items[i].id, 167                                 ISBN: data.items[i].isbn, 168                                 Name: data.items[i].name, 169                                 BorrowConfirmor:  data.items[i].borrowConfirmor, 170                                 BorrowTime: data.items[i].borrowTime, 171                                 BorrowUser: data.items[i].borrowUser, 172                                 IsReturn:data.items[i].isReturn==true?'已归还':'未归还', 173                                 ReturnConfirmor: data.items[i].returnConfirmor, 174                                 ReturnTime: data.items[i].returnTime, 175                             }); 176                         } 177                     } 178                     console.log(response); 179                 }).catch(function (error) { 180                     console.log(error); 181                 }); 182            }, 183         } 184     }); 185 </script>

5. 图书借还控制器CirculateController

控制器主要用于响应用户的请求,与数据库交互,并返回执行的结果信息。

  1 namespace CLMS.Host.Controllers   2 {   3     /// <summary>   4     /// 借还管理   5     /// </summary>   6     public class CirculateController : Controller   7     {   8         private DataContext dataContext;   9   10         public CirculateController(DataContext context)  11         {  12             dataContext = context;  13         }  14   15         public IActionResult Index()  16         {  17             return View();  18         }  19   20         [HttpGet]  21         public PagedRequest<Circulate> Query(string Name, int pageNum, int pageSize)  22         {  23             Name = string.IsNullOrEmpty(Name) ? string.Empty : Name;  24             var dtos = dataContext.Circulates.Join(dataContext.Books, c => c.BookId, b => b.Id, (c, b) => new Circulate()  25             {  26                 Id = c.Id,  27                 Name = b.Name,  28                 BookId = c.BookId,  29                 BorrowConfirmor = c.BorrowConfirmor,  30                 BorrowTime = c.BorrowTime,  31                 BorrowUser = c.BorrowUser,  32                 ISBN = b.ISBN,  33                 IsReturn = c.IsReturn,  34                 ReturnConfirmor = c.ReturnConfirmor,  35                 ReturnTime = c.ReturnTime,  36             }).Where(r=>r.Name.Contains(Name));  37             var total = dtos.Count();  38             var dtos2 = dtos.Skip((pageNum - 1) * pageSize).Take(pageSize).ToList();  39             //  40             return new PagedRequest<Circulate>()  41             {  42                 count = total,  43                 items = dtos2,  44             };  45         }  46   47         [Consumes("application/json")]  48         [HttpPost]  49         public Msg Borrow([FromBody]Borrow borrow) {   50             Msg msg = new Msg();  51             if (borrow == null || string.IsNullOrEmpty(borrow.ISBN))  52             {  53                 msg.code = 1;  54                 msg.message = "书籍为空";  55                 return msg;  56             }  57             var book = dataContext.Books.FirstOrDefault(r => r.ISBN == borrow.ISBN);  58             if (book == null)  59             {  60                 msg.code = 1;  61                 msg.message = "ISBN有误";  62                 return msg;  63             }  64             var entity = dataContext.Circulates.FirstOrDefault(r => r.BookId == book.Id && r.IsReturn == false);  65             if (entity != null)  66             {  67                 msg.code = 1;  68                 msg.message = "书籍已被借阅";  69                 return msg;  70             }  71             var userId = HttpContext.Session.GetInt32("UserId");  72             if (userId < 0) {  73                 msg.code = 1;  74                 msg.message = "尚未登录";  75                 return msg;  76             }  77             var borrorConfirmor = dataContext.Users.FirstOrDefault(r => r.Id == userId)?.NickName;  78             var entity2  = new CirculateEntity()  79             {  80                 Id = 0,  81                 BookId = book.Id,  82                 IsReturn = false,  83                 BorrowTime = DateTime.Now,  84                 BorrowUser=borrow.BorrowUser,  85                 BorrowConfirmor= borrorConfirmor,  86             };  87             this.dataContext.Circulates.Add(entity2);  88             this.dataContext.SaveChanges();  89             msg.code = 0;  90             msg.message = "success";  91             return msg;  92         }  93   94         /// <summary>  95         /// 归还  96         /// </summary>  97         /// <param name="returns"></param>  98         /// <returns></returns>  99         [Consumes("application/json")] 100         [HttpPost] 101         public Msg Return([FromBody] Return returns) {  102             Msg msg = new Msg(); 103             if (returns == null || string.IsNullOrEmpty(returns.ISBN)) 104             { 105                 msg.code = 1; 106                 msg.message = "书籍为空"; 107                 return msg; 108             } 109             var book = dataContext.Books.FirstOrDefault(r => r.ISBN == returns.ISBN); 110             if (book == null) 111             { 112                 msg.code = 1; 113                 msg.message = "ISBN有误"; 114                 return msg; 115             } 116             var userId = HttpContext.Session.GetInt32("UserId"); 117             if (userId < 0) 118             { 119                 msg.code = 1; 120                 msg.message = "尚未登录"; 121                 return msg; 122             } 123             var returnConfirmor = dataContext.Users.FirstOrDefault(r => r.Id == userId)?.NickName; 124             var entity = dataContext.Circulates.FirstOrDefault(r => r.BookId == book.Id && r.IsReturn == false); 125             if (entity != null) 126             { 127                 entity.IsReturn = true; 128                 entity.ReturnTime = DateTime.Now; 129                 entity.ReturnConfirmor=returnConfirmor; 130                 dataContext.Circulates.Update(entity); 131                 dataContext.SaveChanges(); 132                 msg.code = 0; 133                 msg.message = "success"; 134             } 135             else { 136                 msg.code = 1; 137                 msg.message = "书籍已归还"; 138             } 139             return msg; 140         } 141     } 142 }

6. 图书借还功能测试

图书借还主要包括借阅和归还,如下所示:

ASP.NET Core+Element+SQL Server开发校园图书管理系统(四)

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