6. 书室功能运行测试
经过以上几个步骤，即可完成书室管理的基本操作，主要包括书室的查询，新增，编辑，删除，已经分页等功能，如下所示：
书室功能新增或编辑页面
书架管理
书架管理是在书室管理的基础之上，进步细化书架的具体位置，方便用户查找书籍。
1. 书架数据表结构
书架表主要包括Id(唯一标识)，LibraryId(书室表的唯一标识)，Row(行)，Column(排)等几个字段。如下所示：
2. 书架数据表实体类
数据表实体类和数据表一一对应，主要通过EntityFrameword与数据库进行映射。如下所示：
namespace CLMS.Entity { /// <summary> /// 阅览架 /// </summary> public class BookRackEntity { /// <summary> /// 唯一标识 /// </summary> public int Id { get; set; } /// <summary> /// 图书室ID /// </summary> public int LibraryId { get; set; } /// <summary> /// 排 /// </summary> public int Row { get; set; } /// <summary> /// 列 /// </summary> public int Column { get; set; } /// <summary> /// 描述 /// </summary> public string Description { 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.SubName" 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 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-column prop="CreateTime" label="创建时间" sortable min-width="120"></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="书室名称" :label-width="formLabelWidth"> <el-select v-model="addOrEditForm.libraryId" clearable placeholder="请选择"> <el-option v-for="item in librarys" :key="item.Id" :label="item.Label" :value="item.Id"> </el-option> </el-select> </el-form-item> <el-form-item label="排" :label-width="formLabelWidth"> <el-input v-model="addOrEditForm.Row" autocomplete="off"></el-input> </el-form-item> <el-form-item label="列" :label-width="formLabelWidth"> <el-input v-model="addOrEditForm.Column" autocomplete="off"></el-input> </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> <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> </template> </div>
4. 书架数据交互
数据交互通过JS脚本进行，书写格式和VUE2.0保持一致，在页面启动时，加载所有的书架信息，并绑定到el-table对象，所以需要在mounted函数中增加调用向服务器端发出请求，当用户新增或编辑保存时，通过axios发送请求到服务端接口。
<script> var app= new Vue({ el: '#app', data:function() { return { queryCondition:{ Name: '', SubName: '', }, addOrEditForm:{ Id:0, libraryId:'', Row: '', Column: '', Description:'', }, formLabelWidth: '120px', tableData: [], librarys:[], total:0, pageSize:10, currentPage:1, dialogFormVisible: 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(){ this.query(1); console.log("query"); }, handlePageChanged(val){ this.query(val); }, handlePrevClick(val){ //this.query(val); }, handleNextClick(val){ //this.query(val); }, handleEdit(index,row){ var that=this; that.librarys=[]; that.addOrEditForm.Id=0; axios.get('/Library/QueryAll',{params: {}}).then(function (response) { if(response.status==200){ var data = response.data; for (let i = 0; i < data.length; i++) { that.librarys.push({ Id: data[i].id, Label: data[i].name+'-'+data[i].subName }); } that.dialogFormVisible=true; } console.log(that.librarys); console.log(response); }).catch(function (error) { console.log(error); }); console.log("当前index="+index); console.log(row); this.addOrEditForm.Id=row.Id; this.addOrEditForm.libraryId=row.libraryId; this.addOrEditForm.Row=row.Row; this.addOrEditForm.Column=row.Column; this.addOrEditForm.Description=row.Description; 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('/BookRack/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: '已取消删除' }); }); }, handleAdd(){ var that=this; that.librarys=[]; that.addOrEditForm.Id=0; that.addOrEditForm.libraryId=''; that.addOrEditForm.Row= ''; that.addOrEditForm.Column= ''; that.addOrEditForm.Description=''; axios.get('/Library/QueryAll',{params: {}}).then(function (response) { if(response.status==200){ var data = response.data; for (let i = 0; i < data.length; i++) { that.librarys.push({ Id: data[i].id, Label: data[i].name+'-'+data[i].subName }); } that.dialogFormVisible=true; } console.log(that.librarys); console.log(response); }).catch(function (error) { console.log(error); }); console.log("add"); }, handleSave(){ var that=this; axios.post('/BookRack/Add', { Id:this.addOrEditForm.Id, LibraryId:this.addOrEditForm.libraryId, Row:this.addOrEditForm.Row, Column:this.addOrEditForm.Column, Description:this.addOrEditForm.Description, }).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"); }, query(pageNum){ var that = this; this.tableData=[]; console.log("query"); axios.get('/BookRack/Query',{params: { Name:this.queryCondition.Name, SubName:this.queryCondition.SubName, 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, 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.tableData); console.log(response); }).catch(function (error) { console.log(error); }); } } }); </script>
5. 书架控制器逻辑BookRackController
控制器主要用于响应用户的请求，与数据库交互，并返回执行的结果信息。
namespace CLMS.Host.Controllers { public class BookRackController : Controller { private DataContext dataContext; public BookRackController(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<BookRack> Query(string Name, string SubName, int pageNum, int pageSize) { Name = string.IsNullOrEmpty(Name) ? string.Empty : Name; SubName = string.IsNullOrEmpty(SubName) ? string.Empty : SubName; var entities = dataContext.Librarys.Where(r => r.Name.Contains(Name) && r.SubName.Contains(SubName)).Join(dataContext.BookRacks,l=>l.Id,b=>b.LibraryId,(l,b) =>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 }); var total = entities.Count(); var dtos = entities.Skip((pageNum - 1) * pageSize).Take(pageSize).ToList(); return new PagedRequest<BookRack>() { count = total, items = dtos, }; } [Consumes("application/json")] [HttpPost] public Msg Add([FromBody] BookRack bookRack) { Msg msg = new Msg(); if (bookRack == null) { msg.code = 1; msg.message = "对象为空"; return msg; } else { var userId = HttpContext.Session.GetInt32("UserId"); if (bookRack.Id > 0) { //更新 var entity = dataContext.BookRacks.Where(r => r.Id == bookRack.Id).FirstOrDefault(); if (entity != null) { entity.LibraryId = bookRack.LibraryId; entity.Row = bookRack.Row; entity.Column = bookRack.Column; entity.Description = bookRack.Description; entity.LastEditUser = userId.GetValueOrDefault(); entity.LastEditTime = DateTime.Now; dataContext.BookRacks.Update(entity); dataContext.SaveChanges(); } else { msg.code = 1; msg.message = "修改失败"; return msg; } } else { //新增 var entity = new BookRackEntity() { Id = bookRack.Id, LibraryId = bookRack.LibraryId, Row = bookRack.Row, Column = bookRack.Column, Description = bookRack.Description, CreateTime = DateTime.Now, CreateUser = userId.GetValueOrDefault(), LastEditTime = DateTime.Now, LastEditUser = userId.GetValueOrDefault(), }; dataContext.BookRacks.Add(entity); dataContext.SaveChanges(); } msg.code = 0; msg.message = "success"; return msg; } } [Consumes("application/json")] [HttpPost] public Msg Delete([FromBody] BookRack bookRack) { Msg msg = new Msg(); if (bookRack == null) { msg.code = 1; msg.message = "对象为空"; return msg; } else { if (bookRack.Id > 0) { var entity = dataContext.BookRacks.Where(r => r.Id == bookRack.Id).FirstOrDefault(); if (entity != null) { dataContext.BookRacks.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. 运行测试
经过以上几个步骤，即可完成书架管理的基本操作，主要包括书架的查询，新增，编辑，删除，已经分页等功能，如下所示：
新增或编辑页面
以上就是校园图书管理系统的书室管理及书架管理功能实现，功能正在开发完善中，后续功能再继续介绍。旨在抛砖引玉，一起学习，共同进步。
