随着技術的進步，跨平台開發已經成為了标配，在此大背景下，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;
}
}
}
}
6. 圖書管理功能測試
經過以上幾個步驟，即可完成圖書管理的基本操作，主要包括圖書的查詢，新增，編輯，删除，已經分頁等功能，如下所示：
圖書借還
1. 圖書借還資料表結構
圖書借還包括圖書的借閱和歸還，兩個功能，主要記錄借閱人，借閱時間，歸還時間，以及經手人，資料表結構如下所示：
2. 圖書借還實體類
資料表實體類和資料表一一對應，主要通過EntityFrameword與資料庫進行映射。如下所示：
namespace CLMS.Entity
{
/// <summary>
/// 借還記錄
/// </summary>
public class CirculateEntity
{
/// <summary>
/// 唯一辨別
/// </summary>
public int Id { get; set; }
/// <summary>
/// 圖書辨別
/// </summary>
public int BookId { get; set; }
/// <summary>
/// 是否歸還
/// </summary>
public bool IsReturn { get; set; }
/// <summary>
/// 借閱人
/// </summary>
public string BorrowUser { get; set; }
/// <summary>
/// 借閱時間
/// </summary>
public DateTime BorrowTime { get; set; }
/// <summary>
/// 借閱确認人
/// </summary>
public string BorrowConfirmor { get; set; }
/// <summary>
/// 歸還時間
/// </summary>
public DateTime? ReturnTime { get; set; }
/// <summary>
/// 歸還确認人
/// </summary>
public string? ReturnConfirmor { 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>
<el-button type="primary" v-on:click="handleQuery">查詢</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="handleBorrow">借閱</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="handleReturn">歸還</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%" border :default-sort="{prop: 'BorrowTime', order: 'descending'}">
<el-table-column prop="Name" label="書籍名稱" sortable ></el-table-column>
<el-table-column prop="ISBN" label="ISBN" sortable ></el-table-column>
<el-table-column prop="BorrowUser" label="借閱人" sortable ></el-table-column>
<el-table-column prop="BorrowTime" label="借閱時間" sortable ></el-table-column>
<el-table-column prop="BorrowConfirmor" label="借閱經手人" sortable ></el-table-column>
<el-table-column prop="IsReturn" label="是否歸還" sortable ></el-table-column>
<el-table-column prop="ReturnTime" label="歸還時間" sortable ></el-table-column>
<el-table-column prop="ReturnConfirmor" label="歸還經手人" sortable ></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="dialogFormBorrowVisible">
<el-form :model="borrowForm">
<el-form-item label="ISBN" :label-width="formLabelWidth">
<el-input v-model="borrowForm.ISBN" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="書籍名稱" :label-width="formLabelWidth">
<el-input v-model="borrowForm.Name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="借閱人" :label-width="formLabelWidth">
<el-input v-model="borrowForm.BorrowUser" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button v-on:click="dialogFormBorrowVisible = false">取 消</el-button>
<el-button type="primary" v-on:click="handleSaveBorrow">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="歸還資訊" :visible.sync="dialogFormReturnVisible">
<el-form :model="returnForm">
<el-form-item label="ISBN" :label-width="formLabelWidth">
<el-input v-model="returnForm.ISBN" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="書籍名稱" :label-width="formLabelWidth">
<el-input v-model="returnForm.Name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button v-on:click="dialogFormReturnVisible = false">取 消</el-button>
<el-button type="primary" v-on:click="handleSaveReturn">确 定</el-button>
</div>
</el-dialog>
</template>
</div>
4. 圖書借還資料互動
資料互動通過JS腳本進行，書寫格式和VUE2.0保持一緻，在頁面啟動時，加載所有的圖書借還資訊，并綁定到el-table對象，是以需要在mounted函數中增加調用向伺服器端送出請求，當使用者借閱或歸還儲存時，通過axios發送請求到服務端接口。
<script>
var app= new Vue({
el: '#app',
data:function() {
return {
queryCondition:{
Name:''
},
formLabelWidth: '120px',
addOrEditForm:{
Id:0,
ISBN: '',
Name: '',
BorrowConfirmor: '',
BorrowTime: '',
BorrowUser: '',
IsReturn:'',
ReturnConfirmor: '',
ReturnTime: '',
},
borrowForm:{
Id:0,
ISBN: '',
Name: '',
BorrowUser:''
},
returnForm:{
Id:0,
ISBN: '',
Name: '',
},
total:0,
pageSize:10,
currentPage:1,
tableData: [],
dialogFormBorrowVisible: false,
dialogFormReturnVisible: false,
}
},
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(){
console.log("query");
this.query(1);
},
handlePageChanged(val){
this.query(val);
},
handlePrevClick(){
//query(this.currentPage);
},
handleNextClick(){
//query(this.currentPage);
},
handleBorrow(){
this.dialogFormBorrowVisible=true;
},
handleReturn(){
this.dialogFormReturnVisible=true;
},
handleSaveBorrow(){
this.$confirm('确定要借閱編号為'+this.borrowForm.ISBN+'的書籍嗎?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var that=this;
axios.post('/Circulate/Borrow', {
Id:that.borrowForm.Id,
ISBN:that.borrowForm.ISBN,
Name:that.borrowForm.Name,
BorrowUser:that.borrowForm.BorrowUser,
}).then(function (response) {
if(response.status==200){
var msg = response.data;
console.log(msg);
if(msg.code=="0"){
//重新整理頁面
that.dialogFormBorrowVisible=false;
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: '已取消借閱'
});
});
},
handleSaveReturn(){
this.$confirm('确定要歸還編号為'+this.returnForm.ISBN+'的書籍嗎?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var that=this;
axios.post('/Circulate/Return', {
Id:that.returnForm.Id,
ISBN:that.returnForm.ISBN,
Name:that.returnForm.Name,
}).then(function (response) {
if(response.status==200){
var msg = response.data;
console.log(msg);
if(msg.code=="0"){
//重新整理頁面
that.dialogFormReturnVisible=false;
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('/Circulate/Query', {params:{
Name:this.queryCondition.Name,
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,
BorrowConfirmor: data.items[i].borrowConfirmor,
BorrowTime: data.items[i].borrowTime,
BorrowUser: data.items[i].borrowUser,
IsReturn:data.items[i].isReturn==true?'已歸還':'未歸還',
ReturnConfirmor: data.items[i].returnConfirmor,
ReturnTime: data.items[i].returnTime,
});
}
}
console.log(response);
}).catch(function (error) {
console.log(error);
});
},
}
});
</script>
5. 圖書借還控制器CirculateController
控制器主要用于響應使用者的請求，與資料庫互動，并傳回執行的結果資訊。
namespace CLMS.Host.Controllers
{
/// <summary>
/// 借還管理
/// </summary>
public class CirculateController : Controller
{
private DataContext dataContext;
public CirculateController(DataContext context)
{
dataContext = context;
}
public IActionResult Index()
{
return View();
}
[HttpGet]
public PagedRequest<Circulate> Query(string Name, int pageNum, int pageSize)
{
Name = string.IsNullOrEmpty(Name) ? string.Empty : Name;
var dtos = dataContext.Circulates.Join(dataContext.Books, c => c.BookId, b => b.Id, (c, b) => new Circulate()
{
Id = c.Id,
Name = b.Name,
BookId = c.BookId,
BorrowConfirmor = c.BorrowConfirmor,
BorrowTime = c.BorrowTime,
BorrowUser = c.BorrowUser,
ISBN = b.ISBN,
IsReturn = c.IsReturn,
ReturnConfirmor = c.ReturnConfirmor,
ReturnTime = c.ReturnTime,
}).Where(r=>r.Name.Contains(Name));
var total = dtos.Count();
var dtos2 = dtos.Skip((pageNum - 1) * pageSize).Take(pageSize).ToList();
//
return new PagedRequest<Circulate>()
{
count = total,
items = dtos2,
};
}
[Consumes("application/json")]
[HttpPost]
public Msg Borrow([FromBody]Borrow borrow) {
Msg msg = new Msg();
if (borrow == null || string.IsNullOrEmpty(borrow.ISBN))
{
msg.code = 1;
msg.message = "書籍為空";
return msg;
}
var book = dataContext.Books.FirstOrDefault(r => r.ISBN == borrow.ISBN);
if (book == null)
{
msg.code = 1;
msg.message = "ISBN有誤";
return msg;
}
var entity = dataContext.Circulates.FirstOrDefault(r => r.BookId == book.Id && r.IsReturn == false);
if (entity != null)
{
msg.code = 1;
msg.message = "書籍已被借閱";
return msg;
}
var userId = HttpContext.Session.GetInt32("UserId");
if (userId < 0) {
msg.code = 1;
msg.message = "尚未登入";
return msg;
}
var borrorConfirmor = dataContext.Users.FirstOrDefault(r => r.Id == userId)?.NickName;
var entity2 = new CirculateEntity()
{
Id = 0,
BookId = book.Id,
IsReturn = false,
BorrowTime = DateTime.Now,
BorrowUser=borrow.BorrowUser,
BorrowConfirmor= borrorConfirmor,
};
this.dataContext.Circulates.Add(entity2);
this.dataContext.SaveChanges();
msg.code = 0;
msg.message = "success";
return msg;
}
/// <summary>
/// 歸還
/// </summary>
/// <param name="returns"></param>
/// <returns></returns>
[Consumes("application/json")]
[HttpPost]
public Msg Return([FromBody] Return returns) {
Msg msg = new Msg();
if (returns == null || string.IsNullOrEmpty(returns.ISBN))
{
msg.code = 1;
msg.message = "書籍為空";
return msg;
}
var book = dataContext.Books.FirstOrDefault(r => r.ISBN == returns.ISBN);
if (book == null)
{
msg.code = 1;
msg.message = "ISBN有誤";
return msg;
}
var userId = HttpContext.Session.GetInt32("UserId");
if (userId < 0)
{
msg.code = 1;
msg.message = "尚未登入";
return msg;
}
var returnConfirmor = dataContext.Users.FirstOrDefault(r => r.Id == userId)?.NickName;
var entity = dataContext.Circulates.FirstOrDefault(r => r.BookId == book.Id && r.IsReturn == false);
if (entity != null)
{
entity.IsReturn = true;
entity.ReturnTime = DateTime.Now;
entity.ReturnConfirmor=returnConfirmor;
dataContext.Circulates.Update(entity);
dataContext.SaveChanges();
msg.code = 0;
msg.message = "success";
}
else {
msg.code = 1;
msg.message = "書籍已歸還";
}
return msg;
}
}
}
6. 圖書借還功能測試
圖書借還主要包括借閱和歸還，如下所示：
以上就是校園圖書管理系統的圖書管理及圖書借還功能實作，功能正在開發完善中，後續功能再繼續介紹。旨在抛磚引玉，一起學習，共同進步。