随着技术的进步，跨平台开发已经成为了标配，在此大背景下，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
控制器主要用于响应用户的请求，与数据库交互，并返回执行的结果信息。
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. 图书借还功能测试
图书借还主要包括借阅和归还，如下所示：
以上就是校园图书管理系统的图书管理及图书借还功能实现，功能正在开发完善中，后续功能再继续介绍。旨在抛砖引玉，一起学习，共同进步。
标签：Core,ASP,Name,Server,var,msg,message,data,Id From： https://www.cnblogs.com/hsiang/p/17097092.html