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