.net 6.0+webapi+mysql5.7+layui extremos delantero y trasero separados.
wwwroot coloca archivos front-end
Cree un AccountController para agregar, eliminar, modificar y verificar usuarios.
using HcyWebAPI.Models;
using Microsoft.AspNetCore.Mvc;
using static HcyWebAPI.Controllers.Params.AccountParams;
namespace HcyWebAPI.Controllers
{
[ApiController]
[Route("api/account/")]
public class AccountController : ControllerBase
{
private readonly MyDbContext _context = new MyDbContext();
/// <summary>
/// 查询所有用户 根据条件
/// </summary>
/// <param name="params"></param>
/// <returns></returns>
[HttpPost]
[Route("list")]
public Models.ResultMsg GetAccountList(AccountListParams @params)
{
Models.ResultMsg resultMsg = new Models.ResultMsg();
Models.ResultDataInfo resultDataInfo = new Models.ResultDataInfo();
Func<Models.Account, bool> whereLam = (p => true);
if (@params.username!=null&&@params.username != "")
{
whereLam = p => p.Username.Contains(@params.username);
}
if (@params.deptId != 0) {
whereLam= (p => [email protected]);
}
var temp = _context.Account.Where(whereLam)
.OrderBy(p => p.Id)
.Skip(@params.pageSize * (@params.pageIndex - 1)) //跳过多少
.Take(@params.pageSize) //取多少
.ToList();
var count = _context.Account.Count(whereLam);
//最后转为集合
resultDataInfo.data = temp;
resultDataInfo.total = count;
resultMsg.data = resultDataInfo;
return resultMsg;
}
/// <summary>
/// 查询用户 根据指定ID
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpGet]
[Route("list/{id}")]
public Models.Account? GetAccountById(int id)
{
int count = _context.Account.Count(b => b.Id == id);
if (count == 0)
return null;
var person = _context.Account.Single(b => b.Id == id);
List<Models.Account> peopleList = new List<Models.Account>();
peopleList.Add(person);
return person;
}
/// <summary>
/// 删除用户 指定ID
/// </summary>
/// <param name="account"></param>
/// <returns></returns>
[HttpPost]
[Route("del")]
public ResultMsg DeleteAccout(Models.Account account)
{
ResultMsg resultMsg = new ResultMsg();
var temp = _context.Account.Single(p => p.Id == account.Id);
_context.Account.Remove(temp);
int result = _context.SaveChanges();
resultMsg.data = result;
return resultMsg;
}
/// <summary>
/// 修改用户信息
/// </summary>
/// <param name="account"></param>
/// <returns></returns>
[HttpPost]
[Route("update")]
public ResultMsg UpdateAccount(Models.Account account)
{
ResultMsg resultMsg=new ResultMsg();
_context.Update(account);
int result = _context.SaveChanges();
resultMsg.data = result;
return resultMsg;
}
}
}
Cree la página de administración de archivos front-end accountList.html en wwwroot:
1. Realice la función de consulta.
2. Realice la función de paginación.
3. Implemente la función de eliminación.
4. Realizar la función de modificación. (La función de modificación incluye hacer doble clic en la celda para modificar)
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>账户列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />-->
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./data/sensor.js"></script>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="x-nav">
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">账户列表</a>
<a>
<cite>账户列表</cite></a>
</span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
</a>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<!-- <div class="layui-card-body ">-->
<!-- <form class="layui-form layui-col-space5">-->
<!-- <div class="layui-inline layui-show-xs-block">-->
<!-- <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start"></div>-->
<!-- <div class="layui-inline layui-show-xs-block">-->
<!-- <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"></div>-->
<!-- <div class="layui-inline layui-show-xs-block">-->
<!-- <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div>-->
<!-- <div class="layui-inline layui-show-xs-block">-->
<!-- <button class="layui-btn" lay-submit="" lay-filter="sreach">-->
<!-- <i class="layui-icon"></i></button>-->
<!-- </div>-->
<!-- </form>-->
<!-- </div>-->
<div class="layui-card-body ">
<!-- <table class="layui-table" lay-data="{url:'./user.json',page:true,toolbar: '#toolbarDemo',id:'test'}" lay-filter="test">-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <th lay-data="{type:'checkbox'}">ID</th>-->
<!-- <th lay-data="{field:'pid', width:80, sort: true}">ID</th>-->
<!-- <th lay-data="{field:'deviceId', width:120, sort: true, edit: 'text'}">设备标识</th>-->
<!-- <th lay-data="{field:'deviceIp', edit: 'text', minWidth: 150}">设备IP</th>-->
<!-- <th lay-data="{field:'deviceLocation', width:80,templet: '#switchTpl'}">位置信息</th>-->
<!-- <th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th>-->
<!-- <th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th>-->
<!-- <th lay-data="{field:'dw_xinzhi',templet: function(d){ return d.dw_xinzhi.titel;}}">学校</th></tr>-->
<!-- </thead>-->
<!-- </table>-->
地点: <select id="select_address" style="width: 100px;height: 20px">
<option value="0">请选择</option>
</select>
用户名：<input type="text" id="input_username" placeholder="请输入要查询的用户名" />
<div class="layui-inline layui-show-xs-block">
<button class="layui-btn" lay-submit="" lay-filter="sreach" onclick="searchInfo()">
<i class="layui-icon"></i></button>
</div>
<table id="demo" class="layui-table" lay-filter="test_table" ></table>
<div id="test1"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/html" id="toolbarDemo">
<div class = "layui-btn-container" >
<!-- <button class = "layui-btn layui-btn-sm" lay-event = "getCheckData" > 获取选中行数据 </button>-->
<!-- <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button >-->
<!-- <button class = "layui-btn layui-btn-sm" lay-event = "isAll" > 验证是否全选</button>-->
<button class = "layui-btn layui-btn-danger" lay-event = "delete" > 删除</button>
{
{# if(d.active==1){ }}
<button class = "layui-btn layui-btn-sm" lay-event = "updateWarningInfo" > 确定</button>
{
{# } }}
</div >
</script>
<script type="text/javascript">
// setInterval(function(){
// // initData();
// },1000);
$(function () {
initSelectData();
searchInfo();
});
function searchInfo(){
initData();
}
function initSelectData() {
var dataSensor = sensorServer.getDeptList({ "pageIndex": 1,"pageSize":1000});
if (dataSensor!=null) {
let optionList="";
for(let i=0;i<dataSensor.data.length;i++){
optionList+="<option value='"+dataSensor.data[i].id+"'>"+dataSensor.data[i].deptName+"</option>";
}
$("#select_address").append(optionList);
}
}
//请求数据
function getData(page,limit) {
var resultData;
let sensorPid = ""; //$("#select_address").val();
let username = $("#input_username").val();
var params = { "pageIndex": page, "pageSize": limit, "username": username }
resultData = sensorServer.getAccountList(params);
return resultData;
}
function refData(dataList){
//var dataList=dataArraygetData(page,limit).data;
layui.use('table', function () {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 450
,data: dataList
,limit:dataList.length
//page:false
,cols: [[ //表头
{ field: 'id', title: '编号', width: 80, sort: true, fixed: 'left' }
, { field: 'username', title: '名字', edit: 'text' }
, { field: 'password', title: '密码', edit: 'text'}
, {field: '', title: '编辑', width: 250, sort: true, toolbar:'#toolbarDemo',fixed: 'right'}
]],
loading:true,
done:function (res, curr, count) {
//$("[data-field='active']").children().each(function(){
// if($(this).text()==1){
// $(this).text("未阅")
// }else if($(this).text()==0){
// $(this).text("阅读并处理")
// }
//});
},
parseData:function(res){
return {
"code" : res.code, //解析接口状态
"msg" : res.msg, //解析提示文本
"data" : res.data //解析数据列表
}
}
});
//监听单元格编辑
table.on('edit(test_table)',
function (obj) {
var value = obj.value //得到修改后的值
,
data = obj.data //得到所在行所有键值
,
field = obj.field; //得到字段
layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
var jsonResult = sensorServer.updateAccount(obj.data);
if (jsonResult == 1) {
layer.msg('修改成功!', { icon: 1, time: 1000 });
} else {
layer.msg('修改失败!', { icon: 2, time: 1000 });
}
});
//监听行单击事件（双击事件为：rowDouble）
// table.on('row(test_table)', function(obj){
// var data = obj.data;
// layer.alert(JSON.stringify(data), {
// title: '当前行数据：'
// });
//
// //标注选中样式
// obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
// });
//列里的工具栏
table.on('tool(test_table)',
function(obj) {
//var checkStatus = table.checkStatus(obj.config.pid);
switch (obj.event) {
case 'delete':
layer.msg('data:'+obj.data.pid);
del(obj);
break;
case 'updateWarningInfo':
layer.msg('data:'+obj.data.pid);
updateWarningInfo(obj);
break;
};
});
});
}
function initData() {
var initData=getData(1,10);
var total=initData.total;
var dataList=initData.data;
layui.use('table', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,count: total //数据总数，从服务端得到
//,limit:10
,limits:[10,20,30]
,curr:1
,group:5
,layout: ['prev', 'page', 'next','limit','refresh','skip','count']
,jump: function(obj, first){
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
refData(getData(obj.curr,obj.limit).data);
}else{
refData(dataList);
}
}
});
});
}
//删除
function del(obj) {
var params = obj.data;
var resultData = sensorServer.delAccount(params);
if (resultData == 1) {
location.reload();
} else {
layer.msg('删除失败!', { icon: 1, time: 1000 });
}
}
function updateWarningInfo(obj){
obj.data.active=0;
msg="确认已阅读此警示，并进行相关处理吗？";
layer.confirm(msg,function(index){
var jsonResult = sensorServer.updateWarningInfo(obj.data);
layer.msg('已设置!',{icon:1,time:1000});
location.reload();
});
}
</script>
</html>