版权声明：高性能MySQL是第3版，注意mysql版本；很多博客都参考或者直接转载自网络，如果不方便被转载，看到请与我联系 https://blog.csdn.net/ma15732625261/article/details/82118338
前言：
前言就只是个前言，不哭不闹、静静地摆在这里了
正文：
先上效果，界面不太好看，凑合着看，现在想想 其实没什么好写的，不过知识点还是有的
html ——》 iframe ——》 tab ——》 iframe
这个iframe是从博客里面抄过来的，本着试试看的态度、运行、点击 竟然成功了：不过源地址忘了，抱歉、感觉实在太nice所以先分享一下，如果作者看到、不太合适的话，您联系我
<div class="li-nav" style="float: left">
<ul class="nav" id="menuID">
<li><a href="food.html" target="targetText">饮食推荐</a></li>
<li><a href="health.html" target="targetText">健康养生</a></li>
</ul>
</div>
<div id="mainContents">
<iframe class="main-content" src="health.html" allowtransparency="yes"
style="min-height: 600px;width: 1100px;margin-left: 10px;"
frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"name="targetText"></iframe>
</div>
</body>
<script>
//子元素
var menu = $("#menuID > li"),
srcLi = menu.next('ul').find('li');
srcLi.on('click',function (e) {
var href = $(this).find("a").attr('href');
$('#mainContents').empty();
$.ajax({
type:'GET',
url:href,
success:function (data) {
$('#mainContents').append(data);
}
});
//阻止跳转
$(this).parents('li').addClass('active').siblings('li').removeClass('active');
return false;
});
menu.on('click', function() {
$(this).next('ul').slideToggle(400);
$(this).stop('false').toggleClass('on');
});
</script>文件格式转换：分页
<html>
<head>
<meta charset="UTF-8">
<title>文件格式转换</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
</head>
<body>
<div id="tt" class="easyui-tabs" fit="true" plain="true">
<div title="上传文件">
<div class="panel-class tab-pane">
<div>
<iframe src="upload.html" class="inner-html"></iframe>
</div>
</div>
</div>
<div title="编辑数据">
<div class="panel-class" >
<div>
<iframe src="datagrid.html" class="inner-html"></iframe>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="css/index-cumstom.css">
<script src="js/index-cumstom.js"></script>这个js里面没有什么
</body>
</html>datagrid
<table id="dg" class="easyui-datagrid" title="编辑添加资源信息,单击行可进行修改和删除操作"
style="width:1000px;height:auto;"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
striped:true,
url: '',
fitColumns:true,
toolbar: '#tb',
method: 'get',
rownumbers : true,
pageList: [10,20,30,50],
pagination : true,
onClickRow: onClickRow
">
<thead>
<tr>
<th data-options="field:'id',editor:{type:'textbox'}" style="display: none;">id</th>
<th data-options="field:'name',width:100,align:'center',editor:{type:'textbox'}">资源名称</th>
<th data-options="field:'fileUrl',width:350,align:'center',editor:{type:'textbox'}">资源url</th>
<th data-options="field:'playDate',width:180,align:'center',editor:'textbox'">播放日期</th>
<th data-options="field:'duration',width:100,align:'center',editor:'textbox'">播放时长</th>
<th data-options="field:'remark',width:100,align:'center',editor:'textbox'">播放时长</th>
<th data-options="field:'status',align:'center',editor:{type:'checkbox',options:{on:'ok',off:''}}">
完成
</th>
</tr>
</thead>
</table>
<div id="tb" style="height:auto">
<!--http://www.jeasyui.net/tutorial/22.html-->
<span>资源名称:</span>
<input id="name" style="line-height:20px;border:1px solid #ccc">
<span>资源url:</span>
<input id="url" style="line-height:20px;border:1px solid #ccc">
<span>资源时长:</span>
<input id="duration" style="line-height:20px;border:1px solid #ccc">
<span>备注:</span>
<input id="remark" style="line-height:20px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">搜索</a>
<br/>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
onclick="append()">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"
onclick="accept()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"
onclick="removeit()">删除（获取焦点的行）</a>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
<script src="js/datagrid-cumstom.js"></script>多条件筛选：https://blog.csdn.net/wjsshhx/article/details/74315914
EasyUI 还是很强大的：http://www.jeasyui.net/plugins/183.html
文件上传
进度条还是比较满意的，过程中有一个jQuery.form.js
https://contribute.jquery.org/documentation/
https://blog.csdn.net/m0_37505854/article/details/79639046
<link rel="stylesheet" href="css/upload-cumstom.css">
<!--https://www.cnblogs.com/tyqing/p/5995538.html-->
<a target="_self" href="/养生课堂.xls" onclick="showupload()" class="temp-a">
请先下载导入模版</a>，将要导入的数据填写到模板里并上传
<br/>
<br/>
<div id="upload-class">
<form method="post" enctype="multipart/form-data">
请选择要上传的文件：<br/>
<input type="file" name="file" id="file" class="button button1 "/><span></span>
<br/>
</form>
<br/><br/>
<input type="button" value="点击上传" onclick="upload()"
class="button button1 upload-btn"/>
<div class="progress">
<p id="progress">0 bytes</p>
<p id="info"></p>
上传进度：
<progress style="width: 30%;"></progress>
<br/>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//绑定所有type=file的元素的onchange事件的处理函数
$(':file').change(function () {
if (!checkFileForm()) {
return false;
}
var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了
name = file.name;
size = file.size;
type = file.type;
url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片
//$(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);
totalSize += size;
$("#info").html("总大小: " + totalSize + "bytes");
});
function showupload() {
$("#upload-class").toggle();
}
var totalSize = 0;
function upload() {
//创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");
if (!checkFileForm()) {
return false;
}
var formData = new FormData($('form')[0]);
//ajax异步上传
$.ajax({
url: "upload_file",
type: "POST",
data: formData,
xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { //检查upload属性是否存在
//绑定progress事件的回调函数
myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
}
return myXhr; //xhr对象返回给jQuery使用
},
success: function (result) {
$("#result").html(result.data);
},
contentType: false, //必须false才会自动加上正确的Content-Type
processData: false //必须false才会避开jQuery对 formdata 的默认处理
});
}
//上传进度回调函数：
function progressHandlingFunction(e) {
if (e.lengthComputable) {
$('progress').attr({value: e.loaded, max: e.total}); //更新数据到进度条
var percent = e.loaded / e.total * 100;
$('#progress').html(e.loaded + "/" + e.total + " bytes. " + percent.toFixed(2) + "%");
}
}
function checkFileForm() {
var fileName = $("#file").val();
var index = fileName.lastIndexOf(".");
var suffix = fileName.substring(index).toLowerCase();
// 验证文件格式
if (fileName == "" || ".xls" != suffix) {
alert(" 按照模板导入哦，请先下载模板，并将要导入的数据填写到模板里面、上传、导入！");
return false;
} else {
return true;
}
}
</script>小结：
这个是之前准备做但是没说什么时候做的时候我自己简单弄的小界面（好员工吧）不过后来吧没有做，于是宝宝被调去了做开放平台账号连接，连的不是平台是一个一个的坑，诶~、过程挺曲折的，开始自己坑自己：着急了、没有好好读文档，后来404 500 401 跨域 不可预期的token > ssl 什么的 还有困 这个世界太复杂、让宝宝安安静静地休眠十天本个月的、可好（此处是不是应该上传一个可怜兮兮De自拍） 我要坚强，账号啊、让我连上吧！！！