AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-07-29 59
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
RDS SQL Server Serverless，2-4RCU 50GB 3个月
推荐场景：
云数据库 RDS SQL Server，基础系列 2核4GB
推荐场景：
SQL Server性能诊断案例分析
简介： 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与数据库进行映射。如下所示：

namespace CLMS.Entity
{
    /// <summary>
    /// 图书馆实体
    /// </summary>
    public class LibraryEntity
    {
        /// <summary>
        /// 唯一标识
        /// </summary>
        public int Id { get; set; }
        /// <summary>
        /// 图书馆名称
        /// </summary>
        public string? Name { get; set; }
        /// <summary>
        /// 图书室名称
        /// </summary>
        public string? SubName { get; set; }
        /// <summary>
        /// 位置
        /// </summary>
        public string? Location { get; set; }
        /// <summary>
        /// 管理员
        /// </summary>
        public string? Manager { 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>
            <el-table-column prop="Name" label="图书馆名称" sortable></el-table-column>
            <el-table-column prop="SubName" label="书室名称" sortable></el-table-column>
            <el-table-column prop="Location" label="位置" sortable></el-table-column>
            <el-table-column prop="Manager" 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-input v-model="addOrEditForm.Name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="书室名称" :label-width="formLabelWidth">
                    <el-input v-model="addOrEditForm.SubName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="位置" :label-width="formLabelWidth">
                    <el-input v-model="addOrEditForm.Location" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="管理员" :label-width="formLabelWidth">
                    <el-input v-model="addOrEditForm.Manager" 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: '',
            },
            formLabelWidth: '120px',
            addOrEditForm:{
                ID:0,
                Name: '',
                SubName: '',
                Location:'',
                Manager:''
             },
             total:0,
             pageSize:20,
             currentPage:1,
             dialogFormVisible: false,
             tableData: []
           }
         },
         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(this.currentPage);
           },
           handleNextClick(val){
            //this.query(this.currentPage);
           },
           handleEdit(index,row){
            console.log("当前index="+index);
            console.log(row);
            this.addOrEditForm.Id=row.Id;
            this.addOrEditForm.Name=row.Name;
            this.addOrEditForm.SubName=row.SubName;
            this.addOrEditForm.Location=row.Location;
            this.addOrEditForm.Manager=row.Manager;
            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('/Library/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(){
             this.addOrEditForm.Id=0;
             this.addOrEditForm.Name='';
             this.addOrEditForm.SubName='';
             this.addOrEditForm.Location='';
             this.addOrEditForm.Manager='';
             this.dialogFormVisible=true;
             console.log("add");
           },
           handleSave(){
            var that=this;
            axios.post('/Library/Add', {
                Id:this.addOrEditForm.Id,
                Name:this.addOrEditForm.Name,
                SubName:this.addOrEditForm.SubName,
                Location:this.addOrEditForm.Location,
                Manager:this.addOrEditForm.Manager
            }).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('/Library/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,
                            Name: data.items[i].name,
                            SubName:  data.items[i].subName,
                            Location: data.items[i].location,
                            Manager:data.items[i].manager,
                            CreateTime: data.items[i].createTime,
                        });
                    }
                }
                console.log(that.tableData);
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            });
           }
         }
    });
</script>

5. 书室控制器逻辑LibraryController

控制器主要用于响应用户的请求，与数据库交互，并返回执行的结果信息。

namespace CLMS.Host.Controllers
{
    public class LibraryController : Controller
    {
        private DataContext dataContext;
        public LibraryController(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<Library> 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));
            var total = entities.Count();
            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();
            return new PagedRequest<Library>()
            {
                count = total,
                items = dtos,
            };
        }
        /// <summary>
        /// 查询所有信息
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public List<Library> QueryAll() {
            var dtos = dataContext.Librarys.Select(r=> new Library() { Id = r.Id, Name = r.Name, SubName = r.SubName}).ToList();
            return dtos;
        }
        [Consumes("application/json")]
        [HttpPost]
        public Msg Add([FromBody] Library library)
        {
            Msg msg = new Msg();
            if (library == null)
            {
                msg.code = 1;
                msg.message = "对象为空";
                return msg;
            }
            else
            {
                var userId= HttpContext.Session.GetInt32("UserId");
                if (library.Id > 0)
                {
                    //更新
                    var entity = dataContext.Librarys.Where(r => r.Id == library.Id).FirstOrDefault();
                    if (entity != null)
                    {
                        entity.Name = library.Name;
                        entity.SubName = library.SubName;
                        entity.Location = library.Location;
                        entity.Manager= library.Manager;
                        entity.LastEditUser = userId.GetValueOrDefault();
                        entity.LastEditTime = DateTime.Now;
                        dataContext.Librarys.Update(entity);
                        dataContext.SaveChanges();
                    }
                    else {
                        msg.code = 1;
                        msg.message = "修改失败";
                        return msg;
                    }
                }
                else
                {
                    //新增
                    var entity = new LibraryEntity()
                    {
                        Id = library.Id,
                        Name = library.Name,
                        SubName = library.SubName,
                        Location = library.Location,
                        Manager = library.Manager,
                        CreateTime = DateTime.Now,
                        CreateUser = userId.GetValueOrDefault(),
                        LastEditTime = DateTime.Now,
                        LastEditUser = userId.GetValueOrDefault(),
                    };
                    dataContext.Librarys.Add(entity);
                    dataContext.SaveChanges();
                }
                msg.code = 0;
                msg.message = "success";
                return msg;
            }
        }
        [Consumes("application/json")]
        [HttpPost]
        public Msg Delete([FromBody] Library library)
        {
            Msg msg = new Msg();
            if (library == null)
            {
                msg.code = 1;
                msg.message = "对象为空";
                return msg;
            }
            else
            {
                if (library.Id > 0)
                {
                    var entity = dataContext.Librarys.Where(r => r.Id == library.Id).FirstOrDefault();
                    if (entity != null)
                    {
                        dataContext.Librarys.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;
            }
        }
    }
}


文章标签：
云数据库 RDS SQL Server 版
JavaScript
.NET
前端开发
数据库
开发者
开发框架
关键词：
.NET core sqlserver
ASP element校园图书管理系统
相关实践学习
使用SQL语句管理索引
本次实验主要介绍如何在RDS-SQLServer数据库中，使用SQL语句管理索引。
SQL Server on Linux入门教程
SQL Server数据库一直只提供Windows下的版本。2016年微软宣布推出可运行在Linux系统下的SQL Server数据库，该版本目前还是早期预览版本。本课程主要介绍SQLServer On Linux的基本知识。 相关的阿里云产品：云数据库RDS&nbsp;SQL Server版 RDS SQL Server不仅拥有高可用架构和任意时间点的数据恢复功能，强力支撑各种企业应用，同时也包含了微软的License费用，减少额外支出。 了解产品详情:&nbsp;https://www.aliyun.com/product/rds/sqlserver
老码识途
目录
相关文章
小王老师呀
|
1月前
|
存储 开发框架 JSON
ASP.NET Core OData 9 正式发布
【10月更文挑战第8天】Microsoft 在 2024 年 8 月 30 日宣布推出 ASP.NET Core OData 9，此版本与 .NET 8 的 OData 库保持一致，改进了数据编码以符合 OData 规范，并放弃了对旧版 .NET Framework 的支持，仅支持 .NET 8 及更高版本。新版本引入了更快的 JSON 编写器 `System.Text.UTF8JsonWriter`，优化了内存使用和序列化速度。
小王老师呀
70 0
小王老师呀
|
2月前
|
开发框架 监控 前端开发
在 ASP.NET Core Web API 中使用操作筛选器统一处理通用操作
【9月更文挑战第27天】操作筛选器是ASP.NET Core MVC和Web API中的一种过滤器，可在操作方法执行前后运行代码，适用于日志记录、性能监控和验证等场景。通过实现`IActionFilter`接口的`OnActionExecuting`和`OnActionExecuted`方法，可以统一处理日志、验证及异常。创建并注册自定义筛选器类，能提升代码的可维护性和复用性。
小王老师呀
38 3
长梦
|
2月前
|
开发框架 .NET 中间件
ASP.NET Core Web 开发浅谈
本文介绍ASP.NET Core，一个轻量级、开源的跨平台框架，专为构建高性能Web应用设计。通过简单步骤，你将学会创建首个Web应用。文章还深入探讨了路由配置、依赖注入及安全性配置等常见问题，并提供了实用示例代码以助于理解与避免错误，帮助开发者更好地掌握ASP.NET Core的核心概念。
长梦
99 3
追逐时光者
|
1月前
|
开发框架 JavaScript 前端开发
一个适用于 ASP.NET Core 的轻量级插件框架
一个适用于 ASP.NET Core 的轻量级插件框架
追逐时光者
60 0
小王老师呀
|
2月前
|
开发框架 NoSQL .NET
利用分布式锁在ASP.NET Core中实现防抖
【9月更文挑战第5天】在 ASP.NET Core 中，可通过分布式锁实现防抖功能，仅处理连续相同请求中的首个请求，其余请求返回 204 No Content，直至锁释放。具体步骤包括：安装分布式锁库如 `StackExchange.Redis`；创建分布式锁服务接口及其实现；构建防抖中间件；并在 `Startup.cs` 中注册相关服务和中间件。这一机制有效避免了短时间内重复操作的问题。
小王老师呀
72 4
代码掌控者
|
3月前
|
开发框架 前端开发 中间件
聊聊 ASP.NET Core 中间件（二）：中间件和筛选器的区别
聊聊 ASP.NET Core 中间件（二）：中间件和筛选器的区别
代码掌控者
125 1
代码掌控者
|
3月前
|
开发框架 缓存 NoSQL
聊聊 ASP.NET Core 中间件（一）：一个简单的中间件例子
聊聊 ASP.NET Core 中间件（一）：一个简单的中间件例子
代码掌控者
43 1
代码掌控者
|
3月前
|
开发框架 .NET 数据库连接
闲话 Asp.Net Core 数据校验（三）EF Core 集成 FluentValidation 校验数据例子
闲话 Asp.Net Core 数据校验（三）EF Core 集成 FluentValidation 校验数据例子
代码掌控者
89 1
代码掌控者
|
3月前
|
开发框架 前端开发 .NET
闲话 ASP.NET Core 数据校验（二）：FluentValidation 基本用法
闲话 ASP.NET Core 数据校验（二）：FluentValidation 基本用法
代码掌控者
44 1
代码掌控者
|
3月前
|
开发框架 前端开发 .NET
闲话 ASP.NET Core 数据校验（一）：内置数据校验
闲话 ASP.NET Core 数据校验（一）：内置数据校验
代码掌控者
95 1

热门文章

最新文章

  • 1
    asp.net中FCKeditor的调用（31）
  • 2
    ASP.NET2.0里的web.config配置接口API(转)
  • 3
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 4
    ASP.NET MVC Music Store教程（3)：视图和视图模型
  • 5
    asp.net(C#)很简单的网络硬盘系统.rar
  • 6
    ASP.NET MVC Bundling and RequireJS
  • 7
    ASP.NET MVC 设置区域默认定向
  • 8
    浅谈ASP.NET Forms验证
  • 9
    ASP.NET弹出遮罩层示例
  • 10
    Asp.Net技巧精萃
  • 1
    如何使用 Containerfile/Dockerfile 构建 .net 镜像？
    204
  • 2
    `openpyxl`是一个用于读写Excel 2010 xlsx/xlsm/xltx/xltm文件的Python库。它不需要Microsoft Excel，也不需要.NET或COM组件。
    96
  • 3
    解决java.net.ConnectException: Connection refused:connect报错
    902
  • 4
    【Azure Developer】一个复制Redis Key到另一个Redis服务的工具(redis_copy_net8)
    51
  • 5
    https://blog.csdn.net/a1657054242/article/details/139965955?spm=1001.2014.3001.5502
    39
  • 6
    【YOLOv8改进 - 注意力机制】HCF-Net 之 DASI： 维度感知选择性整合模块 | 小目标
    214
  • 7
    【YOLOv8改进 - 注意力机制】HCF-Net 之 PPA：并行化注意力设计 | 小目标
    338
  • 8
    【YOLOv8改进 - 注意力机制】HCF-Net 之 MDCR：多稀释通道细化器模块 ，以不同的稀释率捕捉各种感受野大小的空间特征 | 小目标
    148
  • 9
    .NET Core 和 .NET 标准类库项目类型有什么区别？
    53
  • 10
    【Java】已解决java.net.BindException异常
    251

    • 相关课程

    更多
  • SQL Server on Linux入门教程
  • SQL入门与实践
  • SQL完全自学手册
  • SQL进阶及查询
  • 数据库及SQL/MySQL基础
  • SQL基础开发与应用

    • 相关电子书

    更多
  • SQL Server在电子商务中的应用与实践
  • SQL Server云化思考与实践
  • SQL Server 云化思考与实践

    • 相关实验场景

    更多
  • 一小时快速掌握 SQL 语法
  • PolarDB for AI：在数据库中通过SQL实现AI能力
  • 玩转MaxCompute SQL! 30分钟搞定数据分析挖掘
  • SQLServer数据库的创建
  • SQL进阶之约束、索引
  • SQL进阶之子句、关键字和操作符
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)