随着技术的进步,跨平台开发已经成为了标配,在此大背景下,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库。
功能介绍
书室管理和书架管理,主要用于管理书籍的存放位置,及对书室和书架的CRUD(增删改查)等基本操作。每一个书室都有很多书架,并根据分类存放不同书籍,所以书室ID是书架ID的外键。两者之间存在对应关系。下面逐一进行介绍。
书室管理
书室管理就是对书室数据表的增删改查操作,相对比较独立,操作起来也比较简单。
1. 书室数据表结构
书室表主要包括Id(唯一标识),Name(图书馆名称),SubName(书室名称),Location(位置),Manager(管理员)等几个字段,具体如下所示
2. 书室数据表实体类
数据表实体类和数据表一一对应,主要通过EntityFrameword与数据库进行映射。如下所示:
1 namespace CLMS.Entity 2 { 3 /// <summary> 4 /// 图书馆实体 5 /// </summary> 6 public class LibraryEntity 7 { 8 /// <summary> 9 /// 唯一标识 10 /// </summary> 11 public int Id { get; set; } 12 13 /// <summary> 14 /// 图书馆名称 15 /// </summary> 16 public string? Name { get; set; } 17 18 /// <summary> 19 /// 图书室名称 20 /// </summary> 21 public string? SubName { get; set; } 22 23 /// <summary> 24 /// 位置 25 /// </summary> 26 public string? Location { get; set; } 27 28 /// <summary> 29 /// 管理员 30 /// </summary> 31 public string? Manager { get; set; } 32 33 /// <summary> 34 /// 创建时间 35 /// </summary> 36 public DateTime CreateTime { get; set; } 37 38 /// <summary> 39 /// 当前登录的账号的ID 40 /// </summary> 41 public int CreateUser { get; set; } 42 43 /// <summary> 44 /// 最后编辑时间 45 /// </summary> 46 public DateTime LastEditTime { get; set; } 47 48 /// <summary> 49 /// 最后修改人 50 /// </summary> 51 public int LastEditUser { get; set; } 52 } 53 }
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.SubName" 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> 23 <el-table-column prop="Name" label="图书馆名称" sortable></el-table-column> 24 <el-table-column prop="SubName" label="书室名称" sortable></el-table-column> 25 <el-table-column prop="Location" label="位置" sortable></el-table-column> 26 <el-table-column prop="Manager" label="管理员" sortable></el-table-column> 27 <el-table-column prop="CreateTime" label="创建时间" sortable min-width="120"></el-table-column> 28 <el-table-column label="操作"> 29 <template slot-scope="scope"> 30 <el-button size="medium" type="primary" plain v-on:click="handleEdit(scope.$index,scope.row)">编辑</el-button> 31 <el-button size="medium" type="danger" v-on:click="handleDelete(scope.$index,scope.row)">删除</el-button> 32 </template> 33 </el-table-column> 34 </el-table> 35 <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> 36 <el-dialog title="书室信息" :visible.sync="dialogFormVisible"> 37 <el-form :model="addOrEditForm"> 38 <el-form-item label="图书馆名称" :label-width="formLabelWidth"> 39 <el-input v-model="addOrEditForm.Name" autocomplete="off"></el-input> 40 </el-form-item> 41 <el-form-item label="书室名称" :label-width="formLabelWidth"> 42 <el-input v-model="addOrEditForm.SubName" autocomplete="off"></el-input> 43 </el-form-item> 44 <el-form-item label="位置" :label-width="formLabelWidth"> 45 <el-input v-model="addOrEditForm.Location" autocomplete="off"></el-input> 46 </el-form-item> 47 <el-form-item label="管理员" :label-width="formLabelWidth"> 48 <el-input v-model="addOrEditForm.Manager" autocomplete="off"></el-input> 49 </el-form-item> 50 </el-form> 51 <div slot="footer" class="dialog-footer"> 52 <el-button v-on:click="dialogFormVisible = false">取 消</el-button> 53 <el-button type="primary" v-on:click="handleSave">确 定</el-button> 54 </div> 55 </el-dialog> 56 </template> 57 </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 SubName: '', 9 }, 10 formLabelWidth: '120px', 11 addOrEditForm:{ 12 ID:0, 13 Name: '', 14 SubName: '', 15 Location:'', 16 Manager:'' 17 }, 18 total:0, 19 pageSize:20, 20 currentPage:1, 21 dialogFormVisible: false, 22 tableData: [] 23 } 24 }, 25 mounted:function(){ 26 this.query(1); 27 }, 28 methods: { 29 handleOpen(key, keyPath) { 30 console.log(key, keyPath); 31 }, 32 handleClose(key, keyPath) { 33 console.log(key, keyPath); 34 }, 35 formatter(row, column) { 36 return row.address; 37 }, 38 handleQuery(){ 39 this.query(1); 40 console.log("query"); 41 }, 42 handlePageChanged(val){ 43 this.query(val); 44 }, 45 handlePrevClick(val){ 46 //this.query(this.currentPage); 47 }, 48 handleNextClick(val){ 49 //this.query(this.currentPage); 50 }, 51 handleEdit(index,row){ 52 console.log("当前index="+index); 53 console.log(row); 54 this.addOrEditForm.Id=row.Id; 55 this.addOrEditForm.Name=row.Name; 56 this.addOrEditForm.SubName=row.SubName; 57 this.addOrEditForm.Location=row.Location; 58 this.addOrEditForm.Manager=row.Manager; 59 this.dialogFormVisible=true; 60 }, 61 handleDelete(index,row){ 62 console.log("当前index="+index); 63 console.log(row); 64 this.$confirm('确定要删除编号为'+row.Id+'的书室吗?', '提示', { 65 confirmButtonText: '确定', 66 cancelButtonText: '取消', 67 type: 'warning' 68 }).then(() => { 69 var that=this; 70 axios.post('/Library/Delete', { 71 Id:row.Id 72 }).then(function (response) { 73 if(response.status==200){ 74 var msg = response.data; 75 console.log(msg); 76 if(msg.code=="0"){ 77 //刷新页面 78 that.$message({ 79 type: 'success', 80 message: '删除成功!' 81 }); 82 that.query(1); 83 }else{ 84 that.$message.error(msg.message); 85 } 86 } 87 console.log(response); 88 }).catch(function (error) { 89 that.$message.error(error); 90 }); 91 console.log("delete"); 92 }).catch(() => { 93 this.$message({ 94 type: 'info', 95 message: '已取消删除' 96 }); 97 }); 98 }, 99 handleAdd(){ 100 this.addOrEditForm.Id=0; 101 this.addOrEditForm.Name=''; 102 this.addOrEditForm.SubName=''; 103 this.addOrEditForm.Location=''; 104 this.addOrEditForm.Manager=''; 105 this.dialogFormVisible=true; 106 console.log("add"); 107 }, 108 handleSave(){ 109 var that=this; 110 axios.post('/Library/Add', { 111 Id:this.addOrEditForm.Id, 112 Name:this.addOrEditForm.Name, 113 SubName:this.addOrEditForm.SubName, 114 Location:this.addOrEditForm.Location, 115 Manager:this.addOrEditForm.Manager 116 }).then(function (response) { 117 if(response.status==200){ 118 var msg = response.data; 119 console.log(msg); 120 if(msg.code=="0"){ 121 that.dialogFormVisible=false; 122 //刷新页面 123 that.query(1); 124 }else{ 125 window.alert(msg.message); 126 } 127 console.log(that.dialogFormVisible); 128 } 129 console.log(response); 130 }).catch(function (error) { 131 console.log(error); 132 }); 133 console.log("save"); 134 }, 135 query(pageNum){ 136 var that = this; 137 this.tableData=[]; 138 console.log("query"); 139 axios.get('/Library/Query',{params: { 140 Name:this.queryCondition.Name, 141 SubName:this.queryCondition.SubName, 142 PageSize:this.pageSize, 143 PageNum:pageNum 144 }}).then(function (response) { 145 if(response.status==200){ 146 var data = response.data; 147 var count=data.count; 148 that.total = count; 149 for (let i = 0; i < data.items.length; i++) { 150 that.tableData.push({ 151 Id: data.items[i].id, 152 Name: data.items[i].name, 153 SubName: data.items[i].subName, 154 Location: data.items[i].location, 155 Manager:data.items[i].manager, 156 CreateTime: data.items[i].createTime, 157 }); 158 } 159 } 160 console.log(that.tableData); 161 console.log(response); 162 }).catch(function (error) { 163 console.log(error); 164 }); 165 } 166 } 167 }); 168 </script>
5. 书室控制器逻辑LibraryController
控制器主要用于响应用户的请求,与数据库交互,并返回执行的结果信息。
1 namespace CLMS.Host.Controllers 2 { 3 public class LibraryController : Controller 4 { 5 private DataContext dataContext; 6 7 public LibraryController(DataContext context) 8 { 9 dataContext = context; 10 } 11 12 public IActionResult Index() 13 { 14 return View(); 15 } 16 17 /// <summary> 18 /// 获取符合条件的查询 19 /// </summary> 20 /// <param name="Name"></param> 21 /// <param name="Publisher"></param> 22 /// <param name="pageNum"></param> 23 /// <param name="pageSize"></param> 24 /// <returns></returns> 25 [HttpGet] 26 public PagedRequest<Library> Query(string Name, string SubName, int pageNum, int pageSize) 27 { 28 Name = string.IsNullOrEmpty(Name) ? string.Empty : Name; 29 SubName = string.IsNullOrEmpty( SubName) ? string.Empty:SubName; 30 31 var entities = dataContext.Librarys.Where(r => r.Name.Contains(Name) && r.SubName.Contains(SubName)); 32 var total = entities.Count(); 33 var dtos = entities.Skip((pageNum - 1) * pageSize).Take(pageSize).Select(r => new Library() { Id = r.Id, Name = r.Name, SubName=r.SubName,Location=r.Location,Manager=r.Manager, CreateTime = r.CreateTime }).ToList(); 34 return new PagedRequest<Library>() 35 { 36 count = total, 37 items = dtos, 38 }; 39 } 40 41 /// <summary> 42 /// 查询所有信息 43 /// </summary> 44 /// <returns></returns> 45 [HttpGet] 46 public List<Library> QueryAll() { 47 var dtos = dataContext.Librarys.Select(r=> new Library() { Id = r.Id, Name = r.Name, SubName = r.SubName}).ToList(); 48 return dtos; 49 } 50 51 [Consumes("application/json")] 52 [HttpPost] 53 public Msg Add([FromBody] Library library) 54 { 55 Msg msg = new Msg(); 56 if (library == null) 57 { 58 msg.code = 1; 59 msg.message = "对象为空"; 60 return msg; 61 } 62 else 63 { 64 var userId= HttpContext.Session.GetInt32("UserId"); 65 66 if (library.Id > 0) 67 { 68 //更新 69 var entity = dataContext.Librarys.Where(r => r.Id == library.Id).FirstOrDefault(); 70 if (entity != null) 71 { 72 entity.Name = library.Name; 73 entity.SubName = library.SubName; 74 entity.Location = library.Location; 75 entity.Manager= library.Manager; 76 entity.LastEditUser = userId.GetValueOrDefault(); 77 entity.LastEditTime = DateTime.Now; 78 dataContext.Librarys.Update(entity); 79 dataContext.SaveChanges(); 80 } 81 else { 82 msg.code = 1; 83 msg.message = "修改失败"; 84 return msg; 85 } 86 } 87 else 88 { 89 //新增 90 var entity = new LibraryEntity() 91 { 92 Id = library.Id, 93 Name = library.Name, 94 SubName = library.SubName, 95 Location = library.Location, 96 Manager = library.Manager, 97 CreateTime = DateTime.Now, 98 CreateUser = userId.GetValueOrDefault(), 99 LastEditTime = DateTime.Now, 100 LastEditUser = userId.GetValueOrDefault(), 101 }; 102 dataContext.Librarys.Add(entity); 103 dataContext.SaveChanges(); 104 } 105 msg.code = 0; 106 msg.message = "success"; 107 return msg; 108 } 109 } 110 111 [Consumes("application/json")] 112 [HttpPost] 113 public Msg Delete([FromBody] Library library) 114 { 115 Msg msg = new Msg(); 116 if (library == null) 117 { 118 msg.code = 1; 119 msg.message = "对象为空"; 120 return msg; 121 } 122 else 123 { 124 if (library.Id > 0) 125 { 126 var entity = dataContext.Librarys.Where(r => r.Id == library.Id).FirstOrDefault(); 127 if (entity != null) 128 { 129 dataContext.Librarys.Remove(entity); 130 dataContext.SaveChanges(); 131 msg.code = 0; 132 msg.message = "success"; 133 } 134 else 135 { 136 msg.code = 1; 137 msg.message = "对象不存在或已被删除"; 138 } 139 } 140 else 141 { 142 143 msg.code = 1; 144 msg.message = "对象Id小于0"; 145 } 146 return msg; 147 } 148 } 149 } 150 }
6. 书室功能运行测试
经过以上几个步骤,即可完成书室管理的基本操作,主要包括书室的查询,新增,编辑,删除,已经分页等功能,如下所示:
书室功能新增或编辑页面
书架管理
书架管理是在书室管理的基础之上,进步细化书架的具体位置,方便用户查找书籍。
1. 书架数据表结构
书架表主要包括Id(唯一标识),LibraryId(书室表的唯一标识),Row(行),Column(排)等几个字段。如下所示:
2. 书架数据表实体类
数据表实体类和数据表一一对应,主要通过EntityFrameword与数据库进行映射。如下所示:
1 namespace CLMS.Entity 2 { 3 /// <summary> 4 /// 阅览架 5 /// </summary> 6 public class BookRackEntity 7 { 8 /// <summary> 9 /// 唯一标识 10 /// </summary> 11 public int Id { get; set; } 12 13 /// <summary> 14 /// 图书室ID 15 /// </summary> 16 public int LibraryId { get; set; } 17 18 /// <summary> 19 /// 排 20 /// </summary> 21 public int Row { get; set; } 22 23 /// <summary> 24 /// 列 25 /// </summary> 26 public int Column { get; set; } 27 28 /// <summary> 29 /// 描述 30 /// </summary> 31 public string Description { get; set; } 32 33 /// <summary> 34 /// 创建时间 35 /// </summary> 36 public DateTime CreateTime { get; set; } 37 38 /// <summary> 39 /// 当前登录的账号的ID 40 /// </summary> 41 public int CreateUser { get; set; } 42 43 /// <summary> 44 /// 最后编辑时间 45 /// </summary> 46 public DateTime LastEditTime { get; set; } 47 48 /// <summary> 49 /// 最后修改人 50 /// </summary> 51 public int LastEditUser { get; set; } 52 } 53 }
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.SubName" 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 prop="Name" label="图书馆" sortable ></el-table-column> 24 <el-table-column prop="SubName" label="图书室" sortable ></el-table-column> 25 <el-table-column prop="Row" label="排" sortable ></el-table-column> 26 <el-table-column prop="Column" label="列" sortable ></el-table-column> 27 <el-table-column prop="Description" label="描述" sortable ></el-table-column> 28 <el-table-column prop="CreateTime" label="创建时间" sortable min-width="120"></el-table-column> 29 <el-table-column label="操作"> 30 <template slot-scope="scope"> 31 <el-button size="medium" type="primary" plain v-on:click="handleEdit(scope.$index,scope.row)">编辑</el-button> 32 <el-button size="medium" type="danger" v-on:click="handleDelete(scope.$index,scope.row)">删除</el-button> 33 </template> 34 </el-table-column> 35 </el-table> 36 <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> 37 <el-dialog title="书架信息" :visible.sync="dialogFormVisible"> 38 <el-form :model="addOrEditForm"> 39 <el-form-item label="书室名称" :label-width="formLabelWidth"> 40 <el-select v-model="addOrEditForm.libraryId" clearable placeholder="请选择"> 41 <el-option 42 v-for="item in librarys" 43 :key="item.Id" 44 :label="item.Label" 45 :value="item.Id"> 46 </el-option> 47 </el-select> 48 </el-form-item> 49 <el-form-item label="排" :label-width="formLabelWidth"> 50 <el-input v-model="addOrEditForm.Row" autocomplete="off"></el-input> 51 </el-form-item> 52 <el-form-item label="列" :label-width="formLabelWidth"> 53 <el-input v-model="addOrEditForm.Column" autocomplete="off"></el-input> 54 </el-form-item> 55 <el-form-item label="描述" :label-width="formLabelWidth"> 56 <el-input v-model="addOrEditForm.Description" autocomplete="off"></el-input> 57 </el-form-item> 58 </el-form> 59 <div slot="footer" class="dialog-footer"> 60 <el-button v-on:click="dialogFormVisible = false">取 消</el-button> 61 <el-button type="primary" v-on:click="handleSave">确 定</el-button> 62 </div> 63 </el-dialog> 64 </template> 65 </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 SubName: '', 9 }, 10 addOrEditForm:{ 11 Id:0, 12 libraryId:'', 13 Row: '', 14 Column: '', 15 Description:'', 16 }, 17 formLabelWidth: '120px', 18 tableData: [], 19 librarys:[], 20 total:0, 21 pageSize:10, 22 currentPage:1, 23 dialogFormVisible: false, 24 } 25 }, 26 mounted:function(){ 27 this.query(1); 28 }, 29 methods: { 30 handleOpen(key, keyPath) { 31 console.log(key, keyPath); 32 }, 33 handleClose(key, keyPath) { 34 console.log(key, keyPath); 35 }, 36 formatter(row, column) { 37 return row.address; 38 }, 39 handleQuery(){ 40 this.query(1); 41 console.log("query"); 42 }, 43 handlePageChanged(val){ 44 this.query(val); 45 }, 46 handlePrevClick(val){ 47 //this.query(val); 48 }, 49 handleNextClick(val){ 50 //this.query(val); 51 }, 52 handleEdit(index,row){ 53 var that=this; 54 that.librarys=[]; 55 that.addOrEditForm.Id=0; 56 axios.get('/Library/QueryAll',{params: {}}).then(function (response) { 57 if(response.status==200){ 58 var data = response.data; 59 for (let i = 0; i < data.length; i++) { 60 that.librarys.push({ 61 Id: data[i].id, 62 Label: data[i].name+'-'+data[i].subName 63 }); 64 } 65 that.dialogFormVisible=true; 66 } 67 console.log(that.librarys); 68 console.log(response); 69 }).catch(function (error) { 70 console.log(error); 71 }); 72 console.log("当前index="+index); 73 console.log(row); 74 this.addOrEditForm.Id=row.Id; 75 this.addOrEditForm.libraryId=row.libraryId; 76 this.addOrEditForm.Row=row.Row; 77 this.addOrEditForm.Column=row.Column; 78 this.addOrEditForm.Description=row.Description; 79 this.dialogFormVisible=true; 80 }, 81 handleDelete(index,row){ 82 console.log("当前index="+index); 83 console.log(row); 84 this.$confirm('确定要删除编号为'+row.Id+'的书架吗?', '提示', { 85 confirmButtonText: '确定', 86 cancelButtonText: '取消', 87 type: 'warning' 88 }).then(() => { 89 var that=this; 90 axios.post('/BookRack/Delete', { 91 Id:row.Id 92 }).then(function (response) { 93 if(response.status==200){ 94 var msg = response.data; 95 console.log(msg); 96 if(msg.code=="0"){ 97 //刷新页面 98 that.$message({ 99 type: 'success', 100 message: '删除成功!' 101 }); 102 that.query(1); 103 }else{ 104 that.$message.error(msg.message); 105 } 106 } 107 console.log(response); 108 }).catch(function (error) { 109 that.$message.error(error); 110 }); 111 console.log("delete"); 112 }).catch(() => { 113 this.$message({ 114 type: 'info', 115 message: '已取消删除' 116 }); 117 }); 118 }, 119 handleAdd(){ 120 var that=this; 121 that.librarys=[]; 122 that.addOrEditForm.Id=0; 123 that.addOrEditForm.libraryId=''; 124 that.addOrEditForm.Row= ''; 125 that.addOrEditForm.Column= ''; 126 that.addOrEditForm.Description=''; 127 axios.get('/Library/QueryAll',{params: {}}).then(function (response) { 128 if(response.status==200){ 129 var data = response.data; 130 for (let i = 0; i < data.length; i++) { 131 that.librarys.push({ 132 Id: data[i].id, 133 Label: data[i].name+'-'+data[i].subName 134 }); 135 } 136 that.dialogFormVisible=true; 137 } 138 console.log(that.librarys); 139 console.log(response); 140 }).catch(function (error) { 141 console.log(error); 142 }); 143 144 console.log("add"); 145 }, 146 handleSave(){ 147 var that=this; 148 axios.post('/BookRack/Add', { 149 Id:this.addOrEditForm.Id, 150 LibraryId:this.addOrEditForm.libraryId, 151 Row:this.addOrEditForm.Row, 152 Column:this.addOrEditForm.Column, 153 Description:this.addOrEditForm.Description, 154 }).then(function (response) { 155 if(response.status==200){ 156 var msg = response.data; 157 console.log(msg); 158 if(msg.code=="0"){ 159 that.dialogFormVisible=false; 160 //刷新页面 161 that.query(1); 162 }else{ 163 window.alert(msg.message); 164 } 165 console.log(that.dialogFormVisible); 166 } 167 console.log(response); 168 }).catch(function (error) { 169 console.log(error); 170 }); 171 console.log("save"); 172 }, 173 query(pageNum){ 174 var that = this; 175 this.tableData=[]; 176 console.log("query"); 177 axios.get('/BookRack/Query',{params: { 178 Name:this.queryCondition.Name, 179 SubName:this.queryCondition.SubName, 180 PageSize:this.pageSize, 181 PageNum:pageNum 182 }}).then(function (response) { 183 if(response.status==200){ 184 var data = response.data; 185 var count=data.count; 186 that.total = count; 187 for (let i = 0; i < data.items.length; i++) { 188 that.tableData.push({ 189 Id: data.items[i].id, 190 libraryId:data.items[i].libraryId, 191 Name: data.items[i].name, 192 SubName: data.items[i].subName, 193 Row : data.items[i].row, 194 Column : data.items[i].column, 195 Location : data.items[i].location, 196 Description:data.items[i].description, 197 CreateTime: data.items[i].createTime, 198 }); 199 } 200 } 201 console.log(that.tableData); 202 console.log(response); 203 }).catch(function (error) { 204 console.log(error); 205 }); 206 } 207 } 208 }); 209 </script>
5. 书架控制器逻辑BookRackController
控制器主要用于响应用户的请求,与数据库交互,并返回执行的结果信息。
1 namespace CLMS.Host.Controllers 2 { 3 public class BookRackController : Controller 4 { 5 private DataContext dataContext; 6 7 public BookRackController(DataContext context) 8 { 9 dataContext = context; 10 } 11 12 public IActionResult Index() 13 { 14 return View(); 15 } 16 17 /// <summary> 18 /// 获取符合条件的查询 19 /// </summary> 20 /// <param name="Name"></param> 21 /// <param name="Publisher"></param> 22 /// <param name="pageNum"></param> 23 /// <param name="pageSize"></param> 24 /// <returns></returns> 25 [HttpGet] 26 public PagedRequest<BookRack> Query(string Name, string SubName, int pageNum, int pageSize) 27 { 28 Name = string.IsNullOrEmpty(Name) ? string.Empty : Name; 29 SubName = string.IsNullOrEmpty(SubName) ? string.Empty : SubName; 30 31 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 }); 32 var total = entities.Count(); 33 var dtos = entities.Skip((pageNum - 1) * pageSize).Take(pageSize).ToList(); 34 return new PagedRequest<BookRack>() 35 { 36 count = total, 37 items = dtos, 38 }; 39 } 40 41 [Consumes("application/json")] 42 [HttpPost] 43 public Msg Add([FromBody] BookRack bookRack) 44 { 45 Msg msg = new Msg(); 46 if (bookRack == null) 47 { 48 msg.code = 1; 49 msg.message = "对象为空"; 50 return msg; 51 } 52 else 53 { 54 var userId = HttpContext.Session.GetInt32("UserId"); 55 56 if (bookRack.Id > 0) 57 { 58 //更新 59 var entity = dataContext.BookRacks.Where(r => r.Id == bookRack.Id).FirstOrDefault(); 60 if (entity != null) 61 { 62 entity.LibraryId = bookRack.LibraryId; 63 entity.Row = bookRack.Row; 64 entity.Column = bookRack.Column; 65 entity.Description = bookRack.Description; 66 entity.LastEditUser = userId.GetValueOrDefault(); 67 entity.LastEditTime = DateTime.Now; 68 dataContext.BookRacks.Update(entity); 69 dataContext.SaveChanges(); 70 } 71 else 72 { 73 msg.code = 1; 74 msg.message = "修改失败"; 75 return msg; 76 } 77 } 78 else 79 { 80 //新增 81 var entity = new BookRackEntity() 82 { 83 Id = bookRack.Id, 84 LibraryId = bookRack.LibraryId, 85 Row = bookRack.Row, 86 Column = bookRack.Column, 87 Description = bookRack.Description, 88 CreateTime = DateTime.Now, 89 CreateUser = userId.GetValueOrDefault(), 90 LastEditTime = DateTime.Now, 91 LastEditUser = userId.GetValueOrDefault(), 92 }; 93 dataContext.BookRacks.Add(entity); 94 dataContext.SaveChanges(); 95 } 96 msg.code = 0; 97 msg.message = "success"; 98 return msg; 99 } 100 } 101 102 [Consumes("application/json")] 103 [HttpPost] 104 public Msg Delete([FromBody] BookRack bookRack) 105 { 106 Msg msg = new Msg(); 107 if (bookRack == null) 108 { 109 msg.code = 1; 110 msg.message = "对象为空"; 111 return msg; 112 } 113 else 114 { 115 if (bookRack.Id > 0) 116 { 117 var entity = dataContext.BookRacks.Where(r => r.Id == bookRack.Id).FirstOrDefault(); 118 if (entity != null) 119 { 120 dataContext.BookRacks.Remove(entity); 121 dataContext.SaveChanges(); 122 msg.code = 0; 123 msg.message = "success"; 124 } 125 else 126 { 127 msg.code = 1; 128 msg.message = "对象不存在或已被删除"; 129 } 130 } 131 else 132 { 133 134 msg.code = 1; 135 msg.message = "对象Id小于0"; 136 } 137 return msg; 138 } 139 } 140 } 141 }
6. 运行测试
经过以上几个步骤,即可完成书架管理的基本操作,主要包括书架的查询,新增,编辑,删除,已经分页等功能,如下所示:
新增或编辑页面
以上就是校园图书管理系统的书室管理及书架管理功能实现,功能正在开发完善中,后续功能再继续介绍。旨在抛砖引玉,一起学习,共同进步。
标签:Core,ASP,console,log,Server,msg,data,Id,Name From: https://www.cnblogs.com/hsiang/p/17081225.html