使用Layui前端框架完成简单的增删改查

18 篇文章 0 订阅
11 篇文章 0 订阅

1.本文学习 简介

  • 使用layui前端框架搭配MVC
  • 使用EF Core ORM 快速建模
  • 暂不做复杂分层
  • 简单增删改查
  • 开发环境:Visual Studio 2019、MicroSoft SQL Server 2008

2. 往期学习文章

实践是检验真理的唯一标准,废话不多说,直接进入今天代码的实践讲解环节。

3. 构建数据模型

新建http://ASP.NET Core MVC项目

 

v2-8e0e2a72d2e6fc6826514674208d3819_b.jpg

从Nuget中安装EF core相关包

  • Microsoft.EntityFrameworkCore
  • Microsoft.EntityFrameworkCore.Design
  • Microsoft.EntityFrameworkCore.SqlServer
  • Microsoft.EntityFrameworkCore.Tools

控制台输入命令,从数据库中生成模型

Scaffold-DbContext -Force “Data Source=.; Initial Catalog=Student; Persist Security Info=True; User ID=sa; Password=123456;” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models/DataModels

 

v2-228ead6f6c00acc4296fa0e77355676d_b.png

将生成的模型类输出到Models下的DataModels

 

v2-755750f5a2e923fc89c066b20e6b238b_b.jpg

封装数据库连接字符串

注释掉ef自动生成的数据库上下文类StudentContext中重写的OnConfiguring方法

 

v2-4c4db51769c0fa87fa4da0bf130e896b_b.jpg

转而通过在配置文件appsettings.json中获取连接字符串更为安全的形式,appsettings.json的配置如下:

 

v2-0bc72dcf05bb951e113d3fefb700ba61_b.jpg

使用依赖注入上下文对象的实现:

service.AddDbContext<StudentContext>(options=>{options.UseSqlServer(connectionString);})

 

v2-485f30e45c84caae19870ca62a85a4f8_b.jpg

4. 引入layui前端框架

从layui的官网下载前端包,解压之后直接复制粘贴至项目的wwwroot下

 

v2-c59413604351138dbbbf155f62941086_b.jpg

5.构建业务逻辑

新建Service层,并新建学生服务类:StudentService用于实现学生的业务逻辑服务

依赖构造注入StudentContext上下文对象

 

v2-bcfd91d241aa7d39c985b5b986541a92_b.jpg

下面依次完善功能:登录,查询、增加、删除、修改

6.完善登录方法

  • 新建Student控制器,新建Login动作action,index方法返回Login的视图,在Login动作方法当中,写出简单的逻辑,调用服务_dal的登录方法,如若登录账号和密码匹配,则将登录人的用户名储存到session当中,并且使用数据传递对象ViewData["info"]点击此处链接进入MVC数据传递相关文章用于向视图返回数据,用户登录成功之后,显示用户名。

 

v2-f02067d7dbd9ed3881d6c09bedad725b_b.jpg

 

v2-8ac3cfd171fe82b68d77fcf6fe0d3354_b.jpg
  • 服务类当中的登录方法如下图:

 

v2-01fa37ce0e2fd734c345180c024ee1a4_b.jpg
  • 测试登录方法:这里我们运行dotnet watch run,以便监视项目的运行,这样子项目源码更改之后,就不必频繁的进行保存、生成、运行来调试啦~

 

v2-7e2e5c879d39dd5000d5e509cadd893f_b.jpg
  • 可以看到上图中,项目已经成功地进行了监视,并且Started了。我们来看一下登录页面的前端页面

 

v2-0d1ad0eabe749bc311b843074eaf6472_b.jpg
  • 有点简陋,咳咳,凑合着用吧。查询数据库用户表

 

v2-27009582ba95a592cf827f92b1e8ca3c_b.jpg
  • 我们选择用户wanghuahua,在页面中输入wanghuahua及密码123456

 

v2-559016026d099b7e4f05c0e84289e54a_b.jpg
  • 点击登录,可以看到登录成功!页面成功地显示出了王华华的用户名!

 

v2-47fc1493682bfa172b00d5f9e174a4a5_b.jpg

7.完善查询方法

  • 构建学生管理页面之查询模块。根据layui官网的示例和api简单构建动态数据表格,前端视图代码如下:

 

v2-4197d2d8fcfebe3d89f8d79370d0ff39_b.jpg
  • url即为后端提供数据的接口,我们在服务类中完善查询方法。

 

v2-0b9a835ccb0755f1411506e756ba637e_b.jpg
  • 下面进行测试,别忘了在之前登陆页面放置一个导向管理页面的超链接

 

v2-fb79e1fd884af12fb4c37edc7b3dc15f_b.jpg
  • 点击超链接进入,如下图,可见数据初始化表格成功!

 

v2-67d9625f3c13ea1783e3690cb1f39422_b.jpg

 

v2-5b340f6bc2e671cd3f08aa69076af6e6_b.jpg
  • 完善一下,使其可以进行条件查询

 

v2-9b99d05ac78d095790e2c490e0bdf8a8_b.jpg

 

v2-f251890cf7fd59c3350aa87cc32f6b35_b.jpg
  • 我们在前端页面尝试条件查询

 

v2-f4f36b0f8114bff2dc690cfc19dff513_b.jpg
  • 选择终极一班,点击查询

 

v2-e0b6eedf5d251eddab55658b743ef68e_b.jpg

结果如上图所示,条件查询成功!

8.完善删除方法

  • 开启复选框{type:'checkbox'}

 

v2-4f8059ccc17bb7b519b766a099a7aac3_b.jpg
  • 新增删除按钮,完成前端js验证逻辑

 

v2-3730a4274da0d972ab74f22fd3d2e0f1_b.jpg
  • 完善后台删除方法

 

v2-5b2ee3aad396af5066468a879d5f992c_b.jpg
  • 测试一下,选中张三和如花,点击删除,显示删除成功!

 

v2-b88b15d16d7c0d86115982678c10c8a8_b.jpg

9.完善编辑方法

  • 为了快速演示,这里我选择使用layui数据表格的行内编辑,且只允许年龄可编辑

 

v2-ba6bfca756bc6154b8bb5bb78b5adc56_b.jpg
  • 完善前端js部分逻辑。使其可获取到更改的部分并提交到后台

 

v2-6b6c1fa98200b7191db2d9c9cba7d7f0_b.jpg
  • 完善后台逻辑修改方法

 

v2-84825522bb74c2590a3beb6d3e3d525d_b.jpg
  • 测试一下,修改阿星的年龄,改为18,让星爷永远18,嘻嘻~

 

v2-a75a40d064fc3e8858c0c9c1d1531505_b.jpg
  • 数据显示,修改成功!

 

v2-ba2dc99b783cd8f4ea198c5be159629b_b.jpg

 

v2-1945f0760fd18d0ee8985253440dbcea_b.jpg
  • 好了,至此,还剩一个添加部分,就留给你们啦~哈哈

本示例代码下载地址:https://github.com/huguangcheng/_NET-Core_Study

欢迎关注公众号:dotNET学习天地 一起学习与成长!

欢迎留言交流,下期再见!

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值