.Net Core3.1 MVC + EF Core+ AutoFac+LayUI+Sqlserver的框架搭建--------layui框架
前端架构用layui，虽然layui官网已经下架了，可能以后也不会在更新了，但是也不能否认，layui的影响力，他的确很好用。好用归好用，但是以后项目的前端框架可能会用vue，elementUI去做了，毕竟一个框架一直没有新的血液注入，迟早也会没落的。哎，不废话了，直接进入主题：
嵌入layui架构：
列表展示母版页_layouList,编辑母版页_layouEdit:
_LayoutList:
<!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" /> <link href="~/xadmin/css/xadmin.css" rel="stylesheet" /> <link href="~/xadmin/css/font.css" rel="stylesheet" /> <script src="/xadmin/lib/layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="/xadmin/js/xadmin.js"></script> <script src="~/xadmin/js/jquery.min.js"></script> <style> .layui-table-body { overflow: hidden; } </style> <!--[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> @RenderBody() <script> // 列表初始化 var table; layui.use(['table', 'jquery'], function () { $ = layui.$; table = layui.table; }) //1、通用无刷新搜索 formId 搜索form表单 function def_Search(formId) { table.reload('listtable', { page: {//重新从第 1 页开始 curr: 1 } , where: form2JsonString(formId) }); } //2、通用打开 showtitle 弹框名称， url 目标页， 宽度 高度 function def_Open(showtitle, url, w, h) { xadmin.open(showtitle, url, w, h); } //3、通用删除 showtitle 弹框提示， url 目标页 data 参数 function def_Del(showtitle, url, data) { layer.confirm('确认要删除吗？', function (index) { $.ajax({ url: url, data: data, type: "post", success: function (res) { var returnres = $.parseJSON(res); if (returnres.status == 1) { layer.msg(returnres.msg, { icon: 1, time: 2000, end: function () { window.location.reload(); } }); } else { layer.msg("删除失败", { icon: 5 }); } } }); }); } //4、通用批量删除 url 目标页 ， idname 删除所需数据源列名 function def_DelAll(url, dataname) { var checklist = ''; var checkdata = layui.table.checkStatus('listtable').data; for (i = 0; i < checkdata.length; i++) { checklist = checklist + ',' + checkdata[i][dataname]; } checklist = checklist.substr(1); if (checklist.length == 0) { layer.open({ title: '提示', content: '请选择要删除信息' }); return false; } layer.confirm('确定要删除所选信息吗？', { time: 20000, //20s后自动关闭 btn: ['确定', '取消'], yes: function (index) { layer.close(index); $.ajax({ type: 'post', url: url, data: { checklist: checklist }, dataType: 'json', success: function (data) { var returnres = $.parseJSON(data); if (returnres.status == "1") { layer.msg(returnres.msg, { icon: 1, time: 2000, end: function () { window.location.reload(); } }); } else { layer.msg(returnres.msg, { icon: 1, time: 2000, end: function () { window.location.reload(); } }); } } }); } }); } /** 表单序列化成json对象 */ function form2JsonString(formId) { var paramArray = $('#' + formId).serializeArray(); var jsonObj = {}; $(paramArray).each(function () { jsonObj[this.name] = this.value; }); return jsonObj; } </script> </body> </html>
_LayouEdit:
<!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" /> <link rel="stylesheet" href="/xadmin/css/font.css"> <link rel="stylesheet" href="/xadmin/css/xadmin.css"> <script src="/xadmin/lib/layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="/xadmin/js/xadmin.js"></script> <!-- 让IE8/9支持媒体查询，从而兼容栅格 --> <!--[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]--> <style> .layui-form-item { margin-bottom: 5px; } </style> </head> <body> <script type="text/javascript"> //表单初始化 layui.use(['form', 'layer'], function () { $ = layui.jquery; var form = layui.form, layer = layui.layer; //自定义验证规则 form.verify({ nikename: function (value) { if (value.length < 5) { return '昵称至少得5个字符啊'; } }, pass: [/(.+){6,12}$/, '密码必须6到12位'], repass: function (value) { if ($('#L_pass').val() != $('#L_repass').val()) { return '两次密码不一致'; } } }); //监听提交 form.on('submit(add)', function (data) { $.ajax({ url: data.form.action, data: data.field, type: "post", success: function (res) { var returnres = $.parseJSON(res); layer.msg(returnres.msg, { icon: 1, time: 2000, end: function () { if (returnres.status > 0 && returnres.url.length > 0) { if (returnres.noparent == 1) { window.location.href = returnres.url; } else { window.parent.location.href = returnres.url; } } } }); } }); return false; }); }); </script> @RenderBody() </body> </html>
定义一个控制器BaseController，所有控制器都继承该控制器
using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace Core.Net.Web.Common { public class BaseController : Controller { public IActionResult List() { return View(); } #region 页面处理结果返回封装 /// <summary> /// 返回添加、编辑等处理结果提示栏,result 大于0代表成功，0为失败 /// </summary> /// <param name="result">操作返回数据值</param> /// <param name="msg">返回消息</param> /// <param name="url">需要跳转Url，为空不跳转</param> /// <param name="noparent">0表示默认父类页面跳转，1 当前页面跳转</param> /// <returns></returns> protected virtual JsonResult OperateResult(int result, string msgSuccess, string msgFail, string url, int noParent = 0) { if (result > 0) { return Json("{\"status\":" + 1 + ",\"msg\":\"" + msgSuccess + "\",\"url\":\"" + url + "\",\"noparent\":" + noParent + "}"); } else { return Json("{\"status\":" + 0 + ",\"msg\":\"" + msgFail + "\",\"url\":\"" + url + "\",\"noparent\":" + noParent + "}"); } } #endregion #region 底层封装Cookie操作 /// <summary> /// 设置本地cookie /// </summary> /// <param name="key">键</param> /// <param name="value">值</param> /// <param name="minutes">过期时长，单位：分钟</param> protected void SetCookies(string key, string value, int minutes = 120) { HttpContext.Response.Cookies.Append(key, value, new CookieOptions { Expires = DateTime.Now.AddMinutes(minutes) }); } /// <summary> /// 获取cookies /// </summary> /// <param name="key">键</param> /// <returns>返回对应的值</returns> protected string GetCookies(string key) { HttpContext.Request.Cookies.TryGetValue(key, out string value); if (string.IsNullOrEmpty(value)) value = string.Empty; return value; } /// <summary> /// 删除指定的cookie /// </summary> /// <param name="key">键</param> protected void DeleteCookies(string key) { HttpContext.Response.Cookies.Delete(key); } #endregion } }
到这里前端架构已经完全嵌入工程中了，下一篇就从登录开始再到权限一步一步把架构架起来。
.Net Core
