注册
|
登录
发帖
热搜
活动
交友
discuz
论坛
BBS
翼度工具
翼度网址导航
开发工具
Linux命令速查
网页设计配色表
在线制作icon
颜色代码选取器
翼度科技
»
论坛
›
编程开发
›
.net
›
查看内容
返回列表
发新帖
ASP.NET Core+Element+SQL Server开发校园图书管理系统(一)
午觉
午觉
当前离线
积分
18
6
主题
6
帖子
18
积分
新手上路
新手上路, 积分 18, 距离下一级还需 32 积分
新手上路, 积分 18, 距离下一级还需 32 积分
积分
18
发消息
显示全部楼层
随着技术的进步,跨平台开发已经成为了标配,在此大背景下,ASP.NET Core也应运而生。本文主要基于ASP.NET Core+Element+Sql Server开发一个校园图书管理系统为例,简述基于MVC三层架构开发的常见知识点,仅供学习分享使用,如有不足之处,还请指正。
涉及知识点
在本示例中,涉及到B/S全栈开发的常见知识点,包括后端与前端,主要如下:
开发工具:Visual Studio 2022
目标框架:.Net 6.0
架构:MVC三层架构【Model-View-Controller】
前端框架:前端采用Element框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。可以大大提高开发效率,减少工作量。
数据库:SQL Server 2012。需要掌握基础的增删改查语句使用。
Element框架简介
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。具体组件使用方法,可参考官网:https://element.eleme.io/#/zh-CN,
搭建开发框架
工欲善其事必先利其器,所以开发具体功能之前,首先要搭建开发环境,步骤如下所示:
1. 创建项目
本示例中的校园图书管理系统,基于ASP.NET Core MVC三层架构,在创建时选择对应模板即可,如下所示:
根据创建向导进行创建即可,在项目名称处输入CLMS,目标框架选择.Net6.0即可。为了项目可移植性,将DAL层和Entity层独立出来成单独的工程。项目结构如下所示:
2. 创建数据库
在本示例中,采用Data First方式,先创建数据库和对应的表结构,根据业务需求分析,
主要包括三部分:
书室管理:书室信息(Librarys),书架信息(BookRacks)
图书管理:书籍信息(Book),借还记录(Circulates)
系统管理:用户信息(Users),角色信息(Roles),菜单信息(Menus)以及角色权限分配(RoleMenus),用户角色分配(RoleMenus)
如下所示:
3. 在项目中配置数据库
连接数据库,需要在配置文件appsettings.json中,添加数据库连接字符串,如下所示:
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"ConnectionStrings": {
"Default": "Server=localhost;Database=CLMS;Trusted_Connection=True;User Id=sa;Password=abc123;Encrypt=True;TrustServerCertificate=True;"
},
"AllowedHosts": "*"
}
复制代码
4. 创建数据库操作对象上下文
EntityFrameWork框架需要进行安装,目前版本为7.0.1,可通过NuGet包管理器进行安装,如下所示:
数据库操作采用EntityFrameCore框架,继承自DbContext,如下所示:
1 using CLMS.Entity;
2 using Microsoft.EntityFrameworkCore;
3
4 namespace CLMS.DAL
5 {
6 /// <summary>
7 /// 创建数据库上下文类
8 /// </summary>
9 public class DataContext : DbContext
10 {
11 public DbSet<UserEntity> Users { get; set; }
12
13 public DbSet<MenuEntity> Menus { get; set; }
14
15 public DbSet<RoleEntity> Roles { get; set; }
16
17 public DbSet<UserRoleEntity> UserRoles { get; set; }
18
19 public DbSet<RoleMenuEntity> RoleMenus { get; set; }
20
21 /// <summary>
22 /// 图书室
23 /// </summary>
24 public DbSet<LibraryEntity> Librarys { get; set; }
25
26 /// <summary>
27 /// 阅览架
28 /// </summary>
29 public DbSet<BookRackEntity> BookRacks { get; set; }
30
31 /// <summary>
32 /// 借还记录
33 /// </summary>
34 public DbSet<CirculateEntity> Circulates { get; set; }
35
36 /// <summary>
37 /// 图书
38 /// </summary>
39 public DbSet<BookEntity> Books { get; set; }
40
41 public DataContext(DbContextOptions options) : base(options)
42 {
43
44 }
45
46 protected override void OnModelCreating(ModelBuilder modelBuilder)
47 {
48 base.OnModelCreating(modelBuilder);
49 modelBuilder.Entity<UserEntity>().ToTable("Users");
50 modelBuilder.Entity<MenuEntity>().ToTable("Menus");
51 modelBuilder.Entity<RoleEntity>().ToTable("Roles");
52 modelBuilder.Entity<UserRoleEntity>().ToTable("UserRoles");
53 modelBuilder.Entity<RoleMenuEntity>().ToTable("RoleMenus");
54 //
55 modelBuilder.Entity<LibraryEntity>().ToTable("Librarys");
56 modelBuilder.Entity<BookRackEntity>().ToTable("BookRacks");
57 modelBuilder.Entity<CirculateEntity>().ToTable("Circulates");
58 modelBuilder.Entity<BookEntity>().ToTable("Books");
59 }
60 }
61 }
复制代码
5. EntityFramework配置
在Startup.cs中,添加EntittyFramework的注入,如下所示:
1 using Autofac.Extensions.DependencyInjection;
2 using CLMS.DAL;
3 using Microsoft.EntityFrameworkCore;
4
5 var builder = WebApplication.CreateBuilder(args);
6
7 // Add services to the container.
8 builder.Services.AddControllersWithViews();
9 builder.Services.AddDbContext<DataContext>(options => options.UseSqlServer(builder.Configuration.GetConnectionString("Default")));
10 builder.Services.AddHttpContextAccessor();
11 builder.Services.AddSession();//配置session访问服务
12 // 以下是autofac依赖注入
13 builder.Host.UseServiceProviderFactory(new AutofacServiceProviderFactory());
14 var app = builder.Build();
15
16 // Configure the HTTP request pipeline.
17 if (!app.Environment.IsDevelopment())
18 {
19 app.UseExceptionHandler("/Home/Error");
20 // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
21 app.UseHsts();
22 }
23
24 app.UseHttpsRedirection();
25
26 app.UseStaticFiles();
27
28 app.UseRouting();
29 app.UseSession();
30 app.UseAuthorization();
31
32 app.MapControllerRoute(
33 name: "default",
34 pattern: "{controller=Home}/{action=Index}/{id?}");
35
36 app.Run();
复制代码
6. 安装客户端框架
在本示例中,主要用到Element UI框架,以及axios框,Vue2.0,可通过Visual Studio进行安装,如下所示:
选择Web项目,右键-->添加-->客户端库。打开添加窗口,然后选择对应库进行安装即可,如下所示:
安装成功后,如下所示:
登录页面
当基础开发环境搭建好后,就可以进行具体功能开发,以登录功能为例,步骤如下:
1. 创建控制器LoginController
控制器主要负责页面导航和逻辑处理,如下所示:
1 namespace CLMS.Host.Controllers
2 {
3 public class LoginController : Controller
4 {
5 private DataContext dataContext;
6
7 public LoginController(DataContext context)
8 {
9 dataContext = context;
10 }
11
12 [HttpGet]
13 public IActionResult Index()
14 {
15 return View();
16 }
17
18 [Consumes("application/json")]
19 [HttpPost]
20 public Msg Login([FromBody]User user)
21 {
22 Msg msg = new Msg();
23 if (string.IsNullOrEmpty(user.UserName) || string.IsNullOrEmpty(user.Password))
24 {
25 msg.message = "用户名或密码为空";
26 msg.code = 1;
27 return msg;
28 }
29 else
30 {
31 var item = dataContext.Users.FirstOrDefault(i => i.UserName == user.UserName && i.Password == user.Password);
32 if (item != null)
33 {
34 HttpContext.Session.SetInt32("UserId", item.Id);
35 msg.message = "success";
36 msg.code = 0;
37 return msg;
38 }
39 else
40 {
41 msg.message = "用户名或密码验证错误";
42 msg.code = 1;
43 return msg;
44 }
45
46 }
47 }
48 }
49 }
复制代码
2. 创建登录视图
视图主要用于数据的呈现和交互,登录视图对应Login/Index.cshtml页面。主要功能如下:
引入需要的客户端组件库。
页面布局,主要使用Element组件。
登录按钮功能,主要用axios组件库,提交数据到控制器。
登录视图代码如下:
1 @{
2 Layout = null;
3 }
4 <!DOCTYPE html>
5 <html>
6 <head>
7 <title>校园图书管理系统</title>
8
9 <meta name="viewport" content="width=device-width, initial-scale=1" />
10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
11
12
13 <link rel="stylesheet" href="/lib/element-ui/theme-chalk/index.min.css">
14
15
16
17
18 </head>
19
20 <body style="background:url('/imgs/loginbg.jpg');background-size: 100% 100%;background-repeat:no-repeat;width: 100%;height: 100vh;margin:0;">
21
22
23 <h1>校园图书管理系统</h1>
24
25 <el-form label-width="70px" style="margin-top:40px;" :model="form">
26 <el-form-item label="用户名">
27 <el-input placeholder="Please input username" v-model="form.UserName"/>
28 </el-form-item>
29 <el-form-item label="密码">
30 <el-input type="password" placeholder="Please input password" show-password v-model="form.Password"/>
31 </el-form-item>
32 <el-form-item style="text-align:left;">
33 <el-checkbox label="记住密码" size="large" v-model="form.Remember" />
34 </el-form-item>
35 <el-button>取消</el-button>
36 <el-button type="primary" plain v-on:click="onSubmit">登录</el-button>
37 <br />
38
39 <el-link type="warning" style="text-align:right;">注册</el-link>
40
41
42 </el-form>
43
44 <br />
45 <br />
46
47
48 <p> © 2022-2023 校园图书管理系统. All Rights Reserved | Design by 小六公子</p>
49
50
51
86
128 </body>
129 </html>
复制代码
运行测试
经过以上步骤,登录功能已经做好,运行程序。然后数据账号密码,点击登录进行跳转,如下所示:
登录成功后,如下所示:
以上就是校园图书管理系统的基础环境搭建以及登录功能实现,后续功能再继续介绍。旨在抛砖引玉,一起学习,共同进步。
来源:
https://www.cnblogs.com/hsiang/archive/2023/01/16/17054526.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
本帖子中包含更多资源
您需要
登录
才可以下载或查看,没有账号?
立即注册
x
上一篇:
C#代码整洁之道读后总结与感想
下一篇:
C#调用js库的方法
发表于 2023-1-16 23:18:58
举报
回复
使用道具
分享
返回列表
发新帖
本版积分规则
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
快速回复
快速回复
返回顶部
返回顶部
返回列表
返回列表