ASP.NET Core+Element+SQL Server开发校园图书管理系统（三）

随着技术的进步，跨平台开发已经成为了标配，在此大背景下，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. 运行测试

经过以上几个步骤，即可完成书架管理的基本操作，主要包括书架的查询，新增，编辑，删除，已经分页等功能，如下所示：

新增或编辑页面

 

 

 以上就是校园图书管理系统的书室管理及书架管理功能实现，功能正在开发完善中，后续功能再继续介绍。旨在抛砖引玉，一起学习，共同进步。

posted @ 2023-02-02 00:02  老码识途呀  阅读(580)  评论(0)  编辑  收藏  举报