上一篇文章介绍了：.net 6.0 webAPI EFCore链接mysql

本篇介绍对接前端：

咱们那先封装一个数据接口访问JS:

sensor.js（名字可以自己起。。。）

function methodInfo(methodName,data){    this.method=methodName    this.data=data}let serverOrigin=location.origin;let serverUrl=serverOrigin+'/api'//let serverUrl=';let code_success=200;var sensorServer= {    //向服务器法送数据    postServerData: function (postUrl, postData) {        $.ajaxSettings.async = false;        var url = postUrl;        var serverResultData;        var jsonData = JSON.stringify(postData)        $.ajax({            //请求类型，这里为POST            type: 'POST', //你要请求的api的URL            url: url, //是否使用缓存            cache: false, //数据类型，这里我用的是json            dataType: "json",            contentType: "application/json;charset=utf-8",            //必要的时候需要用JSON.stringify() 将JSON对象转换成字符串            data: jsonData, //data: {key:value},            //添加额外的请求头            headers: {'Access-Control-Allow-Origin': '*', "token": window.localStorage.getItem("token")}, //请求成功的回调函数            success: function (data) {                //函数参数 "data" 为请求成功服务端返回的数据                // if (data.code==510){                //     alert("重新登录！");                //     open("./login.html");                // }                serverResultData = data.data;            }        });        $.ajaxSettings.async = true;        return serverResultData;    },    postServerDataSync: function (postUrl, postData) {        //   $.ajaxSettings.async = false;        var url = postUrl;        var serverResultData = false;        var jsonData = JSON.stringify(postData)        $.ajax({            //请求类型，这里为POST            type: 'POST', //你要请求的api的URL            url: url, //是否使用缓存            cache: false, //数据类型，这里我用的是json            dataType: "json",            contentType: "application/json;charset=utf-8",            //必要的时候需要用JSON.stringify() 将JSON对象转换成字符串            data: jsonData, //data: {key:value},            //添加额外的请求头            headers: {'Access-Control-Allow-Origin': '*', "token": window.localStorage.getItem("token")}, //请求成功的回调函数            success: function (data) {                serverResultData = data.data;                return data.data;            }        });        // $.ajaxSettings.async = true;        return serverResultData;    },    //获取传感器数据 list    getSensorList: function (postData) {        var url = serverUrl + "/sensor/list";        $.ajaxSettings.async = false;        return sensorServer.postServerData(url, postData);    },    //登陆    loginAccount: function (postData) {        var url = serverUrl + "/login";        return sensorServer.postServerData(url, postData);    },    //------------------------------------------------上传文件 通用接口----------------------------------------------------------------    uploadFileInfoToServer: function (postData) {        $.ajaxSettings.async = false;        var url = serverUrl + "/upload/info";        return sensorServer.postServerData(url, postData);    },    //获取上传上传文件URL    getUploadFileUrl: function () {        return url = serverUrl + "/upload/info";    },    //修改系统设置    updateSettingsInfo: function (postData) {        $.ajaxSettings.async = false;        var url = serverUrl + "/settings/update";        return sensorServer.postServerData(url, postData);    },    //获取账户列表    getAccountList: function (postData) {        $.ajaxSettings.async = false;        var url = serverUrl + "/account/list";        return sensorServer.postServerData(url, postData);    },    getAccountInfoById: function (postData) {        $.ajaxSettings.async = false;        let url = serverUrl + "/account/byId";        return sensorServer.postServerData(url, postData);    },    //增加账号    addAccount: function (postData) {        $.ajaxSettings.async = false;        let url = serverUrl + "/account/add";        return sensorServer.postServerData(url, postData);    },    //修改账号    updateAccount: function (postData) {        $.ajaxSettings.async = false;        let url = serverUrl + "/account/update";        return sensorServer.postServerData(url, postData);    },    //删除账号    delAccount: function (postData) {        $.ajaxSettings.async = false;        let url = serverUrl + "/account/del";        return sensorServer.postServerData(url, postData);    }}

在以上的js文件内包含了账户表。增删改查全部接口调用：

新建accountList.html来显示 列表页：

    <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.getSensorList({"page":1,"rows":1000});            if (dataSensor!=null) {                let optionList="";                for(let i=0;i<dataSensor.data.length;i++){                    optionList+="<option value='"+dataSensor.data[i].pid+"'>"+dataSensor.data[i].devicelocation+"-"+dataSensor.data[i].deviceid+"</option>";                }                $("#select_address").append(optionList);            }        }        //请求数据        function getData(page,limit) {            var resultData;            let sensorPid = ""; //$("#select_address").val();            var params = { "pageIndex": page, "pageSize": limit, "username": sensorPid }            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>

这里前端界面使用的layui 框架来做的，都在源码里包含着。

来看下前端已经实现的功能：

删除点击删除，删除对应的行的数据，成功后提示删除成功，刷新界面显示。

  var params = obj.data;            var resultData = sensorServer.delAccount(params);            if (resultData == 1) {                location.reload();            } else {                layer.msg('删除失败!', { icon: 1, time: 1000 });            }

查询：

   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 //解析数据列表                        }                    }                });

修改：

修改这里采用的是编辑表格方式，就像Excel编辑一样双击即可编辑。、

{ field: 'username', title: '名字', edit: 'text' }

edit text类型表明可以选择编辑。

编辑的最新数据结果：

                //监听单元格编辑                 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 });                         }                     });

代码：netCoreAdmin: 基于最新.net 6.0 开源的前后端分离模式 框架开源的后台管理系统。