随着技术的进步，跨平台开发已经成为了标配，在此大背景下，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表实体类是数据表的数据映射，和数据表一一对应，如下所示：
namespace CLMS.Entity { /// <summary> /// 图书实体 /// </summary> public class BookEntity { /// <summary> /// 唯一标识 /// </summary> public int Id { get; set; } /// <summary> /// 图书编号 /// </summary> public string ISBN { get; set; } /// <summary> /// 图书名称 /// </summary> public string Name { get; set; } /// <summary> /// 图书作者 /// </summary> public string Author { get; set; } /// <summary> /// 图书出版社 /// </summary> public string Publisher { get; set; } /// <summary> /// 出版时间 /// </summary> public DateTime PublishDate { get; set; } /// <summary> /// 图书类型 /// </summary> public string BookType { get; set; } /// <summary> /// 描述 /// </summary> public string Description { get; set; } /// <summary> /// 书架ID /// </summary> public long BookRackId { get; set; } /// <summary> /// 创建时间 /// </summary> public DateTime CreateTime { get; set; } /// <summary> /// 当前登录的账号的ID /// </summary> public int CreateUser { get; set; } /// <summary> /// 最后编辑时间 /// </summary> public DateTime? LastEditTime { get; set; } /// <summary> /// 最后修改人 /// </summary> public int LastEditUser { get; set; } } }
3. 图书管理页面布局
图书管理页面主要包括对书籍的查询，新增，编辑，删除等操作，页面布局如下所示：
<div id="app"> <template> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item>图书管理</el-breadcrumb-item> <el-breadcrumb-item>图书管理</el-breadcrumb-item> </el-breadcrumb> <el-form :inline="true" :model="queryCondition" class="demo-form-inline" style="margin-top: 10px; border: solid;border-width: 1px;border-color: #ebeef5;padding: 10px;"> <el-form-item label="书籍名称"> <el-input v-model="queryCondition.Name" placeholder="书籍名称"></el-input> </el-form-item> <el-form-item label="出版社"> <el-input v-model="queryCondition.Publisher" placeholder="出版社"></el-input> </el-form-item> <el-form-item> <el-button type="primary" v-on:click="handleQuery">查询</el-button> </el-form-item> <el-form-item> <el-button type="primary" v-on:click="handleAdd">新增</el-button> </el-form-item> </el-form> <el-table :data="tableData" style="width: 100%" border :default-sort="{prop: 'date', order: 'descending'}"> <el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand"> <el-form-item label="图书馆"> <span>{{ props.row.LibraryName }}</span> </el-form-item> <el-form-item label="图书室"> <span>{{ props.row.LibrarySubName }}</span> </el-form-item> <el-form-item label="排"> <span>{{ props.row.Row }}</span> </el-form-item> <el-form-item label="列"> <span>{{ props.row.Column }}</span> </el-form-item> </el-form> </template> </el-table-column> <el-table-column prop="ISBN" label="ISBN" sortable ></el-table-column> <el-table-column prop="Name" label="书籍名称" sortable ></el-table-column> <el-table-column prop="Author" label="作者" sortable ></el-table-column> <el-table-column prop="Publisher" label="出版社" sortable ></el-table-column> <el-table-column prop="BookType" label="书籍类型" sortable ></el-table-column> <el-table-column prop="CreateTime" label="上架时间" sortable ></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="medium" type="primary" plain v-on:click="handleEdit(scope.$index,scope.row)">编辑</el-button> <el-button size="medium" type="danger" v-on:click="handleDelete(scope.$index,scope.row)">删除</el-button> </template> </el-table-column> </el-table> <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> <el-dialog title="书籍信息" :visible.sync="dialogFormVisible"> <el-form :model="addOrEditForm"> <el-form-item label="ISBN" :label-width="formLabelWidth"> <el-input v-model="addOrEditForm.ISBN" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍名称" :label-width="formLabelWidth"> <el-input v-model="addOrEditForm.Name" autocomplete="off"></el-input> </el-form-item> <el-form-item label="书籍作者" :label-width="formLabelWidth"> <el-input v-model="addOrEditForm.Author" autocomplete="off"></el-input> </el-form-item> <el-form-item label="出版社" :label-width="formLabelWidth"> <el-input v-model="addOrEditForm.Publisher" autocomplete="off"></el-input> </el-form-item> <el-form-item label="出版时间" :label-width="formLabelWidth"> <el-date-picker v-model="addOrEditForm.PublishDate" type="date" placeholder="选择日期"></el-date-picker> </el-form-item> <el-form-item label="书籍类型" :label-width="formLabelWidth"> <el-select v-model="addOrEditForm.BookType" placeholder="请选择书籍类型"> <el-option label="技术类" value="技术类"></el-option> <el-option label="科普类" value="科普类"></el-option> <el-option label="文学类" value="文学类"></el-option> <el-option label="社科类" value="社科类"></el-option> <el-option label="语言类" value="语言类"></el-option> </el-select> </el-form-item> <el-form-item label="书籍描述" :label-width="formLabelWidth"> <el-input v-model="addOrEditForm.Description" autocomplete="off"></el-input> </el-form-item> <el-form-item label="存放位置" :label-width="formLabelWidth"> <el-tag v-model="addOrEditForm.Location" style="vertical-align:middle;">{{addOrEditForm.Location}}</el-tag> <el-button icon="el-icon-place" circle v-on:click="handleLocation"></el-button> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button v-on:click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" v-on:click="handleSave">确 定</el-button> </div> <el-dialog title="位置信息" :visible.sync="dialogLocationVisible"> <el-table :data="locationData" style="width: 100%" highlight-current-row border :default-sort="{prop: 'date', order: 'descending'}" v-on:current-change="handleLocationCurrentChange"> <el-table-column prop="Name" label="图书馆" sortable ></el-table-column> <el-table-column prop="SubName" label="图书室" sortable ></el-table-column> <el-table-column prop="Row" label="排" sortable ></el-table-column> <el-table-column prop="Column" label="列" sortable ></el-table-column> <el-table-column prop="Description" label="描述" sortable ></el-table-column> </el-table> <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> <div slot="footer" class="dialog-footer"> <el-button v-on:click="dialogLocationVisible = false">取 消</el-button> <el-button type="primary" v-on:click="handleLocationSave">确 定</el-button> </div> </el-dialog> </el-dialog> </template> </div>
4. 图书管理数据交互
数据交互通过JS脚本进行，书写格式和VUE2.0保持一致，在页面启动时，加载所有的书室信息，并绑定到el-table对象，所以需要在mounted函数中增加调用向服务器端发出请求，当用户新增或编辑保存时，通过axios发送请求到服务端接口。
<script> var app= new Vue({ el: '#app', data:function() { return { queryCondition:{ Name:'', Publisher:'' }, formLabelWidth: '120px', addOrEditForm:{ Id:0, ISBN: '', Name: '', Author: '', Publisher: '', PublishDate: '', BookType: '', Description: '', BookRackId:'', Location:'' }, total:0, pageSize:10, currentPage:1, dialogFormVisible: false, dialogLocationVisible:false, tableData: [], queryLocationCondition:{ Name:'', Publisher:'' }, locationData:[], locationTotal:0, locationPageSize:5, locationCurrentPage:1, locationCurrentRow: null, } }, mounted:function(){ this.query(1); }, methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); }, formatter(row, column) { return row.address; }, handleQuery(){ this.query(1); }, handlePageChanged(val){ this.query(val); }, handlePrevClick(){ //query(this.currentPage); }, handleNextClick(){ //query(this.currentPage); }, handleLocationPageChanged(val){ this.queryLocation(val); }, handleLocationPrevClick(){ //query(this.currentPage); }, handleLocationNextClick(){ //query(this.currentPage); }, handleAdd(){ this.addOrEditForm.Id=0; this.addOrEditForm.ISBN= ''; this.addOrEditForm.Name= ''; this.addOrEditForm.Author= ''; this.addOrEditForm.Publisher= ''; this.addOrEditForm.PublishDate= ''; this.addOrEditForm.BookType= ''; this.addOrEditForm.Description= ''; this.addOrEditForm.BookRackId=''; this.addOrEditForm.Location=''; this.dialogFormVisible=true; console.log("add"); }, handleEdit(index,row){ console.log("当前index="+index); console.log(row); this.addOrEditForm.Id=row.Id; this.addOrEditForm.ISBN=row.ISBN; this.addOrEditForm.Name=row.Name; this.addOrEditForm.Author=row.Author; this.addOrEditForm.Publisher=row.Publisher; this.addOrEditForm.PublishDate=row.PublishDate; this.addOrEditForm.BookType=row.BookType; this.addOrEditForm.Description=row.Description; this.addOrEditForm.BookRackId=row.BookRackId; this.addOrEditForm.Location=row.LibraryName+"-"+row.LibrarySubName+"-"+row.Row+"排"+row.Column+"列";; this.dialogFormVisible=true; }, handleDelete(index,row){ console.log("当前index="+index); console.log(row); this.$confirm('确定要删除编号为'+row.Id+'的书籍吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { var that=this; axios.post('/Book/Delete', { Id:row.Id }).then(function (response) { if(response.status==200){ var msg = response.data; console.log(msg); if(msg.code=="0"){ //刷新页面 that.$message({ type: 'success', message: '删除成功!' }); that.query(1); }else{ that.$message.error(msg.message); } } console.log(response); }).catch(function (error) { that.$message.error(error); }); console.log("delete"); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, query(pageNum){ var that = this; this.tableData=[]; console.log("query"); axios.get('/Book/Query', {params:{ Name:this.queryCondition.Name, Publisher:this.queryCondition.Publisher, PageSize:this.pageSize, PageNum:pageNum }}).then(function (response) { if(response.status==200){ var data = response.data; var count=data.count; that.total = count; for (let i = 0; i < data.items.length; i++) { that.tableData.push({ Id:data.items[i].id, ISBN: data.items[i].isbn, Name: data.items[i].name, Author: data.items[i].author, Publisher: data.items[i].publisher, PublishDate: data.items[i].publishDate, Description:data.items[i].description, BookType: data.items[i].bookType, CreateTime: data.items[i].createTime, LibraryName:data.items[i].libraryName, LibrarySubName:data.items[i].librarySubName, Row:data.items[i].row, Column:data.items[i].column, }); } } console.log(response); }).catch(function (error) { console.log(error); }); }, handleLocation(){ this.queryLocation(1); this.dialogLocationVisible=true; }, handleLocationCurrentChange(row){ this.locationCurrentRow=row; }, queryLocation(pageNum){ this.locationData=[]; var that=this; console.log("location query"); axios.get('/BookRack/Query',{params: { Name:this.queryLocationCondition.Name, SubName:this.queryLocationCondition.SubName, PageSize:this.locationPageSize, PageNum:pageNum }}).then(function (response) { if(response.status==200){ var data = response.data; var count=data.count; that.locationTotal = count; for (let i = 0; i < data.items.length; i++) { that.locationData.push({ Id: data.items[i].id, libraryId:data.items[i].libraryId, Name: data.items[i].name, SubName: data.items[i].subName, Row : data.items[i].row, Column : data.items[i].column, Location : data.items[i].location, Description:data.items[i].description, CreateTime: data.items[i].createTime, }); } } console.log(that.locationData); console.log(response); }).catch(function (error) { console.log(error); }); }, handleLocationSave(){ console.log(this.locationCurrentRow); if(this.locationCurrentRow!=null){ this.addOrEditForm.BookRackId=this.locationCurrentRow.Id; this.addOrEditForm.Location=this.locationCurrentRow.Name+"-"+this.locationCurrentRow.SubName+"-"+this.locationCurrentRow.Row+"排"+this.locationCurrentRow.Column+"列"; } this.dialogLocationVisible=false; }, handleSave(){ var that=this; axios.post('/Book/Add', { Id:this.addOrEditForm.Id, ISBN: this.addOrEditForm.ISBN, Name: this.addOrEditForm.Name, Author: this.addOrEditForm.Author, Publisher: this.addOrEditForm.Publisher, PublishDate: this.addOrEditForm.PublishDate, BookType: this.addOrEditForm.BookType, Description: this.addOrEditForm.Description, BookRackId:this.addOrEditForm.BookRackId, }).then(function (response) { if(response.status==200){ var msg = response.data; console.log(msg); if(msg.code=="0"){ that.dialogFormVisible=false; //刷新页面 that.query(1); }else{ window.alert(msg.message); } console.log(that.dialogFormVisible); } console.log(response); }).catch(function (error) { console.log(error); }); console.log("save"); }, } }); </script>
5. 图书控制器逻辑BookController
控制器主要用于响应用户的请求，与数据库交互，并返回执行的结果信息。
namespace CLMS.Host.Controllers { public class BookController : Controller { private DataContext dataContext; public BookController(DataContext context) { dataContext = context; } public IActionResult Index() { return View(); } /// <summary> /// 获取符合条件的查询 /// </summary> /// <param name="Name"></param> /// <param name="Publisher"></param> /// <param name="pageNum"></param> /// <param name="pageSize"></param> /// <returns></returns> [HttpGet] public PagedRequest<Book> Query(string Name, string Publisher, int pageNum, int pageSize) { Name = string.IsNullOrEmpty(Name) ? string.Empty : Name; Publisher = string.IsNullOrEmpty(Publisher) ? string.Empty : Publisher; var bookEntities = dataContext.Books.Where(r => r.Name.Contains(Name) && r.Publisher.Contains(Publisher)); var total = bookEntities.Count(); 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(); //位置 var bookRackIds = bookDtos.Select(r => r.BookRackId).ToList(); 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(); bookDtos.ForEach(r => { var location = locations.FirstOrDefault(l => l.Id == r.BookRackId); if (location != null) { r.LibraryName = location.Name; r.LibrarySubName=location.SubName; r.Row=location.Row; r.Column=location.Column; } }); // return new PagedRequest<Book>() { count = total, items = bookDtos, }; } [Consumes("application/json")] [HttpPost] public Msg Add([FromBody] Book book) { Msg msg = new Msg(); if (book == null) { msg.code = 1; msg.message = "对象为空"; return msg; } else { var userId = HttpContext.Session.GetInt32("UserId"); if (book.Id > 0) { //更新 var entity = dataContext.Books.Where(r => r.Id == book.Id).FirstOrDefault(); if (entity != null) { entity.BookRackId = book.BookRackId; entity.Author = book.Author; entity.Publisher = book.Publisher; entity.Description = book.Description; entity.BookType = book.BookType; entity.ISBN = book.ISBN; entity.Name = book.Name; entity.LastEditUser = userId.GetValueOrDefault(); entity.LastEditTime = DateTime.Now; dataContext.Books.Update(entity); dataContext.SaveChanges(); } else { msg.code = 1; msg.message = "修改失败"; return msg; } } else { //新增 var entity = new BookEntity() { BookRackId = book.BookRackId, Author = book.Author, Publisher = book.Publisher, PublishDate = book.PublishDate, Description = book.Description, BookType = book.BookType, ISBN = book.ISBN, Name = book.Name, CreateTime = DateTime.Now, CreateUser = userId.GetValueOrDefault(), LastEditTime = DateTime.Now, LastEditUser = userId.GetValueOrDefault(), }; dataContext.Books.Add(entity); dataContext.SaveChanges(); } msg.code = 0; msg.message = "success"; return msg; } } [Consumes("application/json")] [HttpPost] public Msg Delete([FromBody] Book book) { Msg msg = new Msg(); if (book == null) { msg.code = 1; msg.message = "对象为空"; return msg; } else { if (book.Id > 0) { var entity = dataContext.Books.Where(r => r.Id == book.Id).FirstOrDefault(); if (entity != null) { dataContext.Books.Remove(entity); dataContext.SaveChanges(); msg.code = 0; msg.message = "success"; } else { msg.code = 1; msg.message = "对象不存在或已被删除"; } } else { msg.code = 1; msg.message = "对象Id小于0"; } return msg; } } } }
