开发工具与关键技术：VS MVC
作者：陈芝番
撰写时间：2019.3.22
思路：创建登陆界面——构建模板——导入数据——页面嵌套—页面数据绑定—跳转页面传输数据—构建模态框—创建工作簿Excel--完善模板内容
基础点：查询，新增，修改，删除
1.layui
├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
2.Layui表格使用
table 模块是我们的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
快速使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
//第一：样式引用
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
//第二：构建表格
<table id="demo" lay-filter="test"></table>
//第三：引用js
<script src="/layui/layui.js"></script>
<script>
//第四：渲染方法
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: '/demo/table/user/' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
});
</script>
</body>
</html>-
这三种数据表格渲染方式，可以根据个人的喜好和实际情况灵活使用。
方式渲染：可以脱离HTML文件，而专注于JS本身。
//第四步：方法渲染
layui.use(['layer', 'table'], function () {
layuiTable = layui.table;
layer = layui.layer,
//执行渲染
//第一个实例
tabAcademe = layuiTable.render({
elem: '#tabAcademe'//指定原始表格元素选择器（推荐id选择器）
, url: '/SystemManagements/CollegeInfor/SelectAcademeAll/' //数据接口
, cols: [[ //表头
{ type: 'radio', fixed: 'left' },//单选框列,fixed:'left' 将列固定在左边
{ type: 'numbers', title: '序号' },//序号列，title设定标题名称
{ field: 'AcademeID', title: 'AcademeID', hide: true },//hide:true 隐藏列
{ field: 'AcademeName', title: '学院名称' },
{ field: 'AcademeCode', title: '学院代号' },
{ title: '操作', templet: setOperate, width: 160, align: 'center', fixed: 'right' }//width: 160 指定宽度，align 指定对其方式
]]
自动渲染
带有 class="layui-table" 的 <table> 标签。
2) 对标签设置属性 lay-data="" 用于配置一些基础参数
3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息
实例
<table class="layui-table" lay-data="{height:135, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'wealth', sort: true}">财富</th>
</tr>
</thead>
</table>
转换静态表格
在静态表格的 th 标签中加上 lay-data="" 属性：
HTML
<table lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'sign'}">转换</th>
</tr>
</thead>
<tbody>
<tr>
<td>1314</td>
</tr>
</tbody>
</table>
然后执行用于转换表格的JS方法，就可以达到目的了：
Javascript
var table = layui.table;
//转换静态表格
table.init('demo', {
height: 135
,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
//支持所有基础参数
});
layer.confirm//询问框
//eg1
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
//do something
layer.close(index);
});
//eg2
layer.confirm('is not?', function(index){
//do something
layer.close(index);
});
//图片文件 正则表达式过滤
regexImageFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
//文件读取 onload事件
imgReader.onload = function (evt) {
//绑定图片
$("#IsImgStudentPicture").attr("src", evt.target.result);
}
//将选择的图片显示到 img元素
function loadImgToEimg(imageFileId) {
//选取选择图片
var imgfFile = $("#" + imageFileId).get(0).files[0];
//加载image标签中
if (!regexImageFilter.test(imgfFile.type)) {
//alert("选择的不是一个有效的图片文件");
layer.msg('选择的不是一个有效的图片文件', { icon: 0 });
}
imgReader.readAsDataURL(imgfFile);
}
//打开图片文件选择
function showImageFile(imageFileId) {
$("#" + imageFileId).click();
}
$("#IsStudentIDNum").blur(function () {
var idCard = idCardNo($("#IsStudentIDNum").val());
if (idCard == false) {
layer.msg("身份证有误，请检查！");
}
});Layui和bootstrap都是前端框架
读取浏览器请求传递的cookie
Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。
Areas是ASP.NET MVC用来将相关功能组织成一组单独命名空间（路由）和文件夹结
构（视图）的功能。使用Areas创建层次结构的路由，是通过添加另一个路由参数area到Controller和action。
Areas 提供了一种把大型 ASP.NET Core MVC Web 应用程序分为较小的功能分组的方 法。Area 是应用程序内部一个有效的 MVC 结构。
iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
匹配图片正则表达式，图片文件 正则表达式过滤
下载导入考生信息的模板
思路：判断类型是不是: .xls
-
有工作簿
-
有工作表
-
有数据
-
数据准确性(学院 专业 年级 班级 表跟表之间的关系)
-
获取读取的文件，把文件转换为二进制数组，二进制数组转成内存流，利用NPOI把内存流中的数据读取成Excel
结语：用心与你沟通