折叠面板实现，上传文件进度条，三级联选择器，多级联选择器， 利用layui实现
首先贴出html代码
<form class="layui-form" action="">
<div class="layui-form-item checkBox">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="多选/全选" checked="">
</div>
</div>
<div class="info-edit-cont">
<div class="info-item">
<h2 class="info-title clearfix file-progress">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="file-text fl nowrap">
<i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<!-- <i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
</div>
<div class="progress-cont fl clearfix">
<div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
lay-filter="demo">
<div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
</div>
<div class="progress-label fr">
正在生成
</div>
</div>
<div class="fr handle-view cancelFile">
取消上传
</div>
</h2>
<div class="info-item-view">
<h2 class="info-title clearfix file-edit">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="layui-input-block item-title fl">
<input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
placeholder="请输入文件名称" />
</div>
<div class="fr handle-view">
<i class="showView layui-icon layui-icon-down"></i>
<i class="deleteView layui-icon layui-icon-delete"></i>
</div>
</h2>
<div class="info-content">
<div class="layui-form-item">
<label class="layui-form-label">课程：</label>
<div class="layui-input-block">
<input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">应用类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">媒体类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">资源简介：</label>
<div class="layui-input-block">
<textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">使用建议：</label>
<div class="layui-input-block">
<textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
<span class="icon-tip">
?
<div id="fileTips" class="fileTips">
<b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
<div class="tip-title">
推荐给学生的资源，学生登录,系统也可以查看哦！
</div>
</div>
</span>
</div>
</div>
</div>
</div> </div>
<div class="info-item">
<h2 class="info-title clearfix file-progress">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="file-text fl nowrap">
<!-- <i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
<i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<!-- <i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
</div>
<div class="progress-cont fl clearfix">
<div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
lay-filter="demo">
<div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
</div>
<div class="progress-label fr">
正在生成
</div>
</div>
<div class="fr handle-view cancelFile">
取消上传
</div>
</h2>
<div class="info-item-view">
<h2 class="info-title clearfix file-edit">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="layui-input-block item-title fl">
<input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
placeholder="请输入文件名称" />
</div>
<div class="fr handle-view">
<i class="showView layui-icon layui-icon-down"></i>
<i class="deleteView layui-icon layui-icon-delete"></i>
</div>
</h2>
<div class="info-content">
<div class="layui-form-item">
<label class="layui-form-label">课程：</label>
<div class="layui-input-block">
<input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">应用类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">媒体类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">资源简介：</label>
<div class="layui-input-block">
<textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">使用建议：</label>
<div class="layui-input-block">
<textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
<span class="icon-tip">
?
<div id="fileTips" class="fileTips">
<b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
<div class="tip-title">
推荐给学生的资源，学生登录,系统也可以查看哦！
</div>
</div>
</span>
</div>
</div>
</div>
</div> </div>
</div>
</form>
css less代码如下:
.info-item {
background: #fff;
border: 1px solid #d5ebff;
margin-bottom:10px;
}
.info-item-view{
display: none;
}
.info-title {
height: 62px;
padding: 0 20px;
border-bottom: 1px solid #e8ecf0;
background-color: #f1f5f8;
.item-title {
margin-left: 0px;
}
.title-input {
width: 648px;
height: 30px;
line-height: 30px;
margin-top: 15px;
}
.handle-view {
line-height: 60px;
i {
margin-left: 10px;
color: #bcc0c5;
font-size: 18px;
cursor: pointer;
}
i:hover {
color: #228cf9;
}
}
.cancelFile{
color:#FD5A62;
cursor: pointer;
}
}
.info-content {
background-color: #fff;
padding-top: 20px;
display: none;
.layui-form-label {
width: 120px;
text-align: right;
color: #75797a;
}
.layui-input-block {
margin-left: 120px;
width: 648px;
}
.layui-inline {
.layui-input-block {
width: 140px;
}
}
}
/*进度条样式*/
.file-progress{
.file-text{
width:300px;
line-height: 60px;
>i{
display: inline-block;
width:18px;
height: 18px;
position: relative;
top:4px;
margin-right:4px;
}
.icon-file-file{
background:url('../../img/upload/icon-file-file.png') center center no-repeat;
}
.icon-file-video{
background:url('../../img/upload/icon-file-video.png') center center no-repeat;
}
.icon-file-music{
background:url('../../img/upload/icon-file-music.png') center center no-repeat;
}
.icon-file-photo{
background:url('../../img/upload/icon-file-photo.png') center center no-repeat;
}
.icon-file-td{
background:url('../../img/upload/icon-file-td.png') center center no-repeat;
}
}
.progress-cont{
display: none;
position: relative;
margin-right:10px;
top:20px;
}
.progress-view{
width:180px;
position: relative;
top:4px;
}
.progress-label{
color:#3ED07B;
font-size: 14px;
line-height: 22px;
margin-left: 10px;
}
.progress-over{
box-sizing: border-box;
margin-left:26px;
width:18px;
height:18px;
background:rgba(62,208,123,1);
border-radius:50%;
color:#fff;
line-height: 18px;
font-style: normal;
text-align: center;
}
.layui-bg-color{
background-color:#3ED07B;
}
.layui-progress-text {
position: relative;
top: 0px;
line-height: 12px;
font-size: 12px;
color: #666;
}
.layui-progress-big, .layui-progress-big .layui-progress-bar {
height: 14px;
line-height: 14px;
}
.layui-progress {
background-color: #F1EFFF;
position: relative;
height: 14px;
border-radius: 2px;
border:1px solid #E8ECF0;
}
.layui-progress-bar {
position: absolute;
left:;
top:;
width:;
max-width: 100%;
height: 6px;
border-radius: 2px;
text-align: right;
background-color: #5FB878;
transition: all .3s;
-webkit-transition: all .3s;
}
}
js代码如下：
<script src="../../static/js/libs/jquery-1.9.1.min.js"></script>
<script src="../../layui/layui.all.js"></script>
<script>
$(function () {
layui
.config({
base: "../../layui/lay/mymodules/"
})
.use(["form", "cascader", "upload", "element"], function () {
var form = layui.form;
form.render();
var cascader = layui.cascader;
var upload = layui.upload;
var element = layui.element; /* 级联选择器 方法 开始 */
var id = 1;
var casView = cascader({
elem: "#courseSelect",
data: [{
value: "A",
label: "a"
}],
lazy: true,
lazyLoad: function (node, callback) {
setTimeout(() => {
var arr = [];
id++;
/* 这里可以写动态获取数据数组*/
for (var i = 0; i < id; i++) {
arr.push({
value: id + "-" + i,
label: "选项" + id + "-" + i,
leaf: id >= 6
});
}
// node节点数据需要与新数据一并传递回去
callback(arr, node);
}, 1000);
},
success: function (valData, labelData) {
console.log(valData, labelData);
}
}); /* 进度条设置 开始*/
//触发事件
/* 执行 */
var fileProgress = function () {
var fileSize = 41.12;
var othis = $(this);
// var DISABLED = 'layui-btn-disabled';
// if(othis.hasClass(DISABLED)) return;
element.progress('demo', '0%');
$(".progress-cont").css({
"display": "block"
});
$(".progress-label").removeClass("progress-over").text('0k/' + fileSize + "k")
$(".progress-view").css({
"display": "block"
});
//模拟loading
var n = 0,
timer = setInterval(function () {
n = n + Math.random() * 10 | 0;
$(".progress-label").removeClass("progress-over").text((fileSize * (n / 100)).toFixed(2) + 'k/' +
fileSize + "k")
if (n > 100) {
n = 100;
clearInterval(timer);
// othis.removeClass(DISABLED);
$(".progress-label").addClass("progress-over").text('✓');
$(".progress-view").css({
"display": "none"
}); /* 上传成功之后 */
/* 取消上传 按钮 进行隐藏 */
$(".cancelFile").css({display:'none'})
/* 将file-progress隐藏 info-item-view显示*/
$(".file-progress").css({display:'none'})
$(".info-item-view").css({display:'block'})
}
element.progress('demo', n + '%');
}, 300 + Math.random() * 1000); // othis.addClass(DISABLED);
};
/* 进度条设置 结束*/
//执行进度条方法
fileProgress();
}); /* 取消上传 */
$(".cancelFile").click(function(){
var itemBoxHtml = $(this).parents('.info-item').first();
$(itemBoxHtml).css({display:'none'})
dataCount = dataCount-1;
flagShowCheckBox();
}) /* 点击头部的 关闭 展示按钮 */
$(".showView").click(function () {
let falg = $(this).hasClass('layui-icon-up')
if (falg) {
$(this).removeClass('layui-icon-up').addClass('layui-icon-down');
$(this).parents('.info-item').find(".info-content").css({
display: 'none'
});
} else {
$(this).parents('.info-item').find(".info-content").css({
display: 'block'
});
$(this).removeClass('layui-icon-down').addClass('layui-icon-up');
}
}) /* 点击删除按钮 */
$(".deleteView").click(function () {
$(this).parents(".info-item").css({
display: 'none'
});
dataCount = dataCount-1;
flagShowCheckBox();
})
/* 用来判断是否显示复选框
* 当值大于1时才显示复选框
*/
var dataCount = $(".info-edit-cont").find('.info-item').length;
console.log(dataCount);
var flagShowCheckBox = function () {
if (dataCount > 1) {
$(".checkBox").css({
display: 'block'
})
} else {
$(".checkBox").css({
display: 'none'
})
}
}
flagShowCheckBox(); $("#addBtn").click(function(){
window.location.href = './resourcesUpload.html'
})
});
</script>
<form class="layui-form" action="">
<div class="layui-form-item checkBox">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="多选/全选" checked="">
</div>
</div>
<div class="info-edit-cont">
<div class="info-item">
<h2 class="info-title clearfix file-progress">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="file-text fl nowrap">
<i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<!-- <i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
</div>
<div class="progress-cont fl clearfix">
<div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
lay-filter="demo">
<div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
</div>
<div class="progress-label fr">
正在生成
</div>
</div>
<div class="fr handle-view cancelFile">
取消上传
</div>
</h2>
<div class="info-item-view">
<h2 class="info-title clearfix file-edit">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="layui-input-block item-title fl">
<input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
placeholder="请输入文件名称" />
</div>
<div class="fr handle-view">
<i class="showView layui-icon layui-icon-down"></i>
<i class="deleteView layui-icon layui-icon-delete"></i>
</div>
</h2>
<div class="info-content">
<div class="layui-form-item">
<label class="layui-form-label">课程：</label>
<div class="layui-input-block">
<input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">应用类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">媒体类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">资源简介：</label>
<div class="layui-input-block">
<textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">使用建议：</label>
<div class="layui-input-block">
<textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
<span class="icon-tip">
?
<div id="fileTips" class="fileTips">
<b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
<div class="tip-title">
推荐给学生的资源，学生登录,系统也可以查看哦！
</div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="info-item">
<h2 class="info-title clearfix file-progress">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="file-text fl nowrap">
<!-- <i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
<i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<!-- <i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
</div>
<div class="progress-cont fl clearfix">
<div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
lay-filter="demo">
<div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
</div>
<div class="progress-label fr">
正在生成
</div>
</div>
<div class="fr handle-view cancelFile">
取消上传
</div>
</h2>
<div class="info-item-view">
<h2 class="info-title clearfix file-edit">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="layui-input-block item-title fl">
<input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
placeholder="请输入文件名称" />
</div>
<div class="fr handle-view">
<i class="showView layui-icon layui-icon-down"></i>
<i class="deleteView layui-icon layui-icon-delete"></i>
</div>
</h2>
<div class="info-content">
<div class="layui-form-item">
<label class="layui-form-label">课程：</label>
<div class="layui-input-block">
<input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">应用类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">媒体类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">资源简介：</label>
<div class="layui-input-block">
<textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">使用建议：</label>
<div class="layui-input-block">
<textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
<span class="icon-tip">
?
<div id="fileTips" class="fileTips">
<b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
<div class="tip-title">
推荐给学生的资源，学生登录,系统也可以查看哦！
</div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
折叠面板实现，上传文件进度条，三级联选择器，多级联选择器， 利用layui实现的更多相关文章
- node实现http上传文件进度条 -我们到底能走多远系列（37）
我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- asp.net大文件上传与上传文件进度条问题
利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...
- php上传文件进度条
ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...
- ajax上传文件进度条
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5异步上传图片显示上传文件进度条
<html> <head> </head> <body> <p> emo_album_id:<input type="tex ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...
- Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...
随机推荐
- “庚武讲堂”(v.gw66.net) 缘起
转载自: https://v.gw66.net/origin/ 我叫“庚武”,一个从业10余年的程序员,其实我更愿意自称软件工程师或软件设计师.转眼间倏忽十年,从最开始用ASP.net 2.0做网站入 ...
- 阿里云环境安装K8S步骤
1. 安装docker yum install -y docker 2. 修改 /etc/docker/daemon.json 文件并添加上 registry-mirrors 键值 $ vim /et ...
- 安装 create-react-app@latest 失败，错误代码：243
在创建react项目,执行以下命令的时候 npx create-react-app my-app 报错如下: 解决方案: 全局安装即可 npm install -g create-react-app
- url、href、src
一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...
- NET高级开发工程师职责要求
岗位职责1.参与架构以及核心业务的设计:2.使用简单,干净,可维护性高,扩展性好的代码实现产品功能,并在必要时重构现有代码:3.贯彻面向接口以及模块化组件的设计理念:4.熟练RabbitMQ.ES.M ...
- webapi+swagger ui 文档描述
代码:GitHub swagger ui在我们的.NET CORE和.NET Framework中的展现形式是不一样的,如果有了解的,在.NET CORE中的是比.NET Framework好的.两张 ...
- 【问题】Could not locate PropertySource and the fail fast property is set, failing
这是我遇到的问题 Could not locate PropertySource and the fail fast property is set, failing springcloud的其他服务 ...
- OpenLayers加载百度离线瓦片地图（完美无偏移）
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
- 安装rabbitMQ的PHP扩展
1.环境准备:centos 7.6+PHP7.3 2.安装rabbitmq-ctar xf rabbitmq-c-0.9.0.tar.gzcd rabbitmq-c-0.9.0mkdir build ...
- python 职责链模式
模式定义 责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链. 这种模式给予请求的类型,对请求的发送者和接收者进行解耦. 这种类型的设计模式属于 ...