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-form，由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据到后台。
- 列表控件el-table，用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。主要用户显示结构化列表的数据。
- 分页控件el-pagination，当数据量过多时，使用分页分解数据。
- 弹出窗口el-dialog，在保留当前页面状态的情况下，告知用户并承载相关操作。主要用于弹出新建或编辑窗口。
axios组件，是一个基于promise 的网络请求库，axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。在本示例中，所有的前后端交互，均是通过axios库。

功能介绍

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

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

图书管理

1. Book表结构

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

其中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. 图书管理功能测试

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

图书借还

1. 图书借还数据表结构

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

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