目录
项目相关说明
所运用的框架语言等：
- 工具：VS2022
- 开发框架：ASP.NET Web Core App(MVC)
- 后端语言：C#
- 前端框架：Layui（layuimini - 基于Layui的后台管理系统前端模板 (99php.cn)）
- 可视化图表：echarts（Apache ECharts）
- 数据库：sqlite
通过ASP.NET（MVC）建立学生信息页面，包含前端，后端，数据库部分的实现介绍。
完整功能展示如图：
1：新建项目
在VS2022中选择ASP.NET Web Core App(Model-View-Controller)
写上项目名：该例子为TEST
选择Framework的模板，这里是使用的是.NET6.0
创建成功后的文件如图：
3：引入与下载相关包
layui与echarts相关包的引入：
在使用layui与echarts搭建前端时我们首先需要下载所需的包，将下载好的包导入MVC的wwwroot下。其中css存放的是css文件，js存放的是js文件，lib存放的是完整的包。导入后便可在页面中通过引入地址对文件进行引用。
包可从该地址进行下载：Github（layuimini）。
图为放入layui与echarts包后的结果：
数据库使用所需相关基础包下载：
这里包的下载与layui的不同，需要在VS2022中进行下载。
进入:Tools -> NuGet Package Manager -> Manage NuGet Packages Solution
进入后将出现该页面，在search中对下载所需的包。
所需下载的包：
sqlite部分：
Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.Sqlite
（当出现System.Web.Http找不到时，解决该问题需要下载以下两个包。参考地址：【ASP.NET】未能加载文件或程序集“System.Web.Http“）
Microsoft.AspNet.WebApi.Core
Microsoft.AspNet.WebApi.WebHost
EF种子迁移部分：
Microsoft.EntityFrameworkCore.Tools
EntityFramework(6.4.4)
4：建立StudentMessage.cshtml
在该页面中，建立一个拥有表单和搜索框的页面，并且表单中的数据从数据库中进行获取。
效果：
新建页面：
首先，我们需要新建一个StudentMessage.cshtml页面。在该项目中，所有建立的页面均放于Student文件夹下。
在Views文件夹下Add，新建Student文件夹。
在新建的Student文件夹下，右键Add 选择View。
进入该页面选择Razor View-Empty，点击Add。
Add之后将名字修改为StudentMessage.cshtml，点击Add便添加新页面完成。
实际上，在MVC中，我们需要在Controllers中添加对页面的控制，才能查看页面的效果。由于我们新建了一个Student文件夹放置该项目的页面，因此我们需要添加一个新的Controller对该文件夹下的页面进行控制，并且该Controller的命名需为：Views中新建的文件夹名+Controller。
在Controllers文件夹中右键Add，选择Controller。
选中MVC Controller-Empty。
将名字改为StudentController。
添加完成后Controllers下将会新增我们添加的FController。
进入StudentController，添加入对StudentMessage.cshtml页面的控制。若需对其他页面进行控制，只需将StudentMessage(）改为页面名()。
public IActionResult StudentMessage()
{
return View();
}此时可以查看所写好的页面效果。
数据库部分：
Model：
首先，我们需要新建一个Model，对于数据库中的字段进行基础的设置。因此在新建的Model中便要想好数据库中所想要保存的信息以及类型。
在Models文件夹下右键Add，选中class：
这里的名字可以任意命名，无限制，该例中命名为Student。
在Student.cs中写入数据库中所需每列的列名以及对于的数据类型。
namespace TEST.Models
{
public class Student
{
public int ID { get; set; }//数据库每列的列名和类型
public string ClassName { get; set; }
public int StudentID { get; set; }
public string StudentName { get; set; }
public string SubjectName { get; set; }
public float Grades { get; set; }
public float Time { get; set; }
}
}AppDbContext.cs
在项目下新建一个Data文件夹，在文件夹下新建AppDbContext.cs,在该cs中对新建的Model：Student.cs进行引入，获取值。
新建Data文件夹：
Data文件夹中新建AppDbContext.cs：
AppContext.cs内通过Models.Student获取数据库的值：
using Microsoft.EntityFrameworkCore;
using TEST.Models;
namespace TEST.Data
{
public class AppDbContext:DbContext
{
public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
{
}
//引入Models Student,获取值
public DbSet<Student> students { get; set; }
}
}Appsettings.json
在Appsettings.json中我们需要对数据库的地址进行添加（这里不需要新建数据库）
完整Appsettings.json:
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*",
//添加数据库部分设置
"ConnectionStrings": {
"studentConnection": "Data Source=" //请添加数据表的地址:如：Data Source=C:\\Users\\Desktop\\studentMessage.sqlite
}
}初始化数据库中的数据
在对数据库进行设置完成之后我们便可以初始化数据库数据，即向数据库中添加初始数据。有两种方式，这里使用的是法一。
法一：EF CODE first
学习参考地址：使用Code First 迁移种子设定数据库 | Microsoft Learn
首先，新建Model：AddSqliteData.cs初始化数据库数据。在AddSqliteData.cs中实例化AppDbContext，添加初始化数据。
using TEST.Data;
using Microsoft.EntityFrameworkCore;
using System.Security.Cryptography.X509Certificates;
namespace TEST.Models
{
public class AddSqliteData
{
public static void Initialize(IServiceProvider serviceProvider)
{
using (var context = new AppDbContext(
serviceProvider.GetRequiredService<DbContextOptions<AppDbContext>>()))
{
if (context.students.Any())
{
return;
}
context.students.AddRange(
new Student
{
ID=1,
ClassName = "初一三班",
StudentID = 2022110301,
StudentName = "Lily",
SubjectName = "语文",
Grades =81,
Time = 42.6F
},
new Student
{
ID = 2,
ClassName = "初一三班",
StudentID = 2022110301,
StudentName = "Lily",
SubjectName = "数学",
Grades = 72,
Time = 46.0F
},
new Student
{
ID = 3,
ClassName = "初一三班",
StudentID = 2022110301,
StudentName = "Lily",
SubjectName = "英语",
Grades = 51,
Time = 58.0F
}) ;
context.SaveChanges();
}
}
}
}初始化完成后需要在Console中进行迁移。
进入Tools->NuGet Package Manager->Package Manager Console：
在下方PM中分别输入：
Enable-Migrations
Add-Migration Initial
Update-Database
迁移完成后TEST项目中将会新增Migrations包并在所设置好的地址下生成数据库。
此时数据库中的数据为：
法二：
直接手动新增数据库StudentMessage.sqlite并向该数据表内初始化相关数据。
前端部分：
现在进入StudentMessage.cshtml，对前端页面的部分进行搭建。在html页面中对相应文件的引用中，一般css的引用放在head中，js的放在body中。
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--引入相关包文件-->
<link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="/css/public.css" media="all" />
</head>
<!--使用layui框架-->
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<!--搜索框部分-->
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">学科</label>
<div class="layui-input-inline">
<select id="subjectSelect" class="layui-input" lay-search lay-filter="select-Message">
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">班级</label>
<div class="layui-input-inline">
<select id="classSelect" class="layui-input" lay-search="" lay-filter="select-Message">
</select>
</div>
</div>
</div>
</form>
</div>
</fieldset>
<!--新建表格部分-->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button id="btn-add" class="layui-btn" lay-event="add">新建</button>
</div>
</script>
<!--表格部分，在下方table.render部分进行表格操作-->
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">编辑</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="delete">删除</button>
</script>
</div>
</div>
<!--引入相关包文件-->
<!--<script src="/js/lay-config.js" charset="utf-8"></script>-->
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script type="text/javascript">
layui.use(['upload', 'form', 'layer', 'jquery', 'echarts'], function () {
var upload = layui.upload,
form = layui.form,
layer = layui.layer,
$ = layui.jquery,
echarts = layui.echarts,
table = layui.table;//对layui引用包中所定义模块的使用，具体可查看layui的官网
table.render({
elem: '#currentTableId',//添加table的id
url: '../Student/AllStudentMessage',//获得后端数据的地址
toolbar: '#toolbarDemo',//新建的script id
defaultToolbar: ['exports', 'print'],//导出，打印标签
cols: [[//添加表格部分的内容,field后需添加后端所返回data的相同键名,可全部自定义或根据后端所返回的名进行设置，这里采用的是后者
{ field: 'className', width: 210, title: '班级', sort: true},
{ field: 'studentName', width: 210, title: '姓名' },
{ field: 'studentID', width: 210, title: '学号' },
{ field: 'subjectName', width: 210, title: '学科' },
{
field: 'grades', width: 210, title: '成绩', sort: true, templet: function (data) {
if (data.grades< 60) {//对这一部分的数据进行了特殊的返回
return "<a lay-event='TIP'><u style='color: white;background-color:red'>" + data.grades + "</u></a>"
}
else{
return data.grades
}
}
},
{ field: 'time', width: 210, title: '用时', sort: true },
{ title: '操作', minWidth: 210, toolbar: '#currentTableBar', align: "center" }
]],
limits: [5,10, 15, 20, 25, 50],//页数
limit: 5,
page: true,//分页设置
skin: 'line',
id: 'TableId',
parseData: function (res) {//获取后端所传回的数据进行分页处理
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
}
else {
result = res.data.slice(0, this.limit);
}
return { "code": res.code, "msg": res.msg, "count": res.count, "data": result };
}
});
});
</script>
</body>
</html>在该部分代码中涉及到了后端所传回数据的接收以及处理，在url中所填写的后端地址便是我们接下来在StudentController.cs中所新增的用于获取数据库数据的后端部分。
在地址的填写中，获取Controller前部分的名字/Controller下的函数。由于接下来在StudentController.cs中所新增的方法名为AllStudentMessage，因此该例的地址为：../Student/AllStudentMessage。
后端部分：
在StudentController.cs中新增AllStudentMessage方法：获取数据库中的数据并进行返回
注意：所传回的数据形式须符合layui的数据接口规则，具体可参考：table 数据表格文档 - Layui (itze.cn)
在获取数据库中的数据时，可通过自定义键名的方式返回数据给前端进行接收（这里前端的field名便为所自定义的键名），或根据所自动带的键名对前端的field名进行定义接收。
在StudentController.cs中添加：
[HttpGet]
public JsonResult AllStudentMessage([FromUri] int page, [FromUri] int limit,[FromUri] string subjectData = "", [FromUri] string classData = "")
{
var allMessageData = _appDbContext.students.ToList();//获得数据库中的数据，为List类型
/*自定义键名
List<Dictionary<string, string>> list = new List<Dictionary<string, string>>();//列表中嵌套字典
for (int i = 0; i < allMessageData.Count; i++)
{
Dictionary<string, string> _testDic = new Dictionary<string, string>();
_testDic.Add("className", allMessageData[i].ClassName);
_testDic.Add("studentID", allMessageData[i].StudentID.ToString());
_testDic.Add("studentName", allMessageData[i].StudentName);
_testDic.Add("subjectName", allMessageData[i].SubjectName);
_testDic.Add("grades", allMessageData[i].Grades.ToString());
_testDic.Add("time", allMessageData[i].Time.ToString());//键名需要与StudentMessage.cshtml中table.render的field值名相同
list.Add(_testDic);
}
*/
if (!string.IsNullOrEmpty(subjectData))
{
allMessageData = (from t in allMessageData
where t.SubjectName == subjectData
select t).ToList();
}
if (!string.IsNullOrEmpty(classData))
{
allMessageData = (from t in allMessageData
where t.ClassName == classData
select t).ToList();
}
return Json(new
{//所返回的形式要符合layui的table接收形式
code = 0,
msg = "",
count = allMessageData.Count(),
data = allMessageData,//直接根据键名进行后端返回
});
}在后续将会在此基础上对所需的功能进行扩展。
395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
