技术渣，找到一个前端实习的工作。公司项目是layui搭建的，刚开始接触一脸懵逼，以此记录自己的学习足迹。持续更新。。。
- 今天经理让我改一下首页的点击收缩展开，再不断的找前人经验下，写出了一段jQuery代码，然而还是实现不了。后来厚着脸皮请教了公司前端娇姐，娇姐帮我调试了一下，终于出来了。
//收缩展开 $(document).ready(function(){ $(".kit-item").click(function(){ $(".user-icon").toggle(); }); });注意点：
- 取值要取到合适的地方，看清楚需要修改的是哪个div，可以在浏览器上操作
- 书写格式需要仔仔细细的看清楚
- 验证一个表单金额，使其输入金额必须是数字，且保留两位小数
/*表单校验*/
layui.use('form',function () {
var form=layui.form;
//验证规则
form.verify({
sumMoney:[/^(([1-9]{1}\d*)|(0{1}))(\.\d{2})$/,'输入金额必须是数字，且保留两位小数']
});
})注意点：
- 正则表达式的写法，其实暂时还没有学会，这个正则表达式是借鉴了前人的经验
- layui方法的使用要好好学习。
- 今天做出了自己的第一个页面，虽然也有参考其他页面，不过也算是进步了吧。今天学到了在layui中渲染表格的方法。初步了解了jQuery的声明方法。具体代码如下：
layui.use(['jquery','table','layer','laypage','tools'], ()=>{
const $=layui.jquery;
const table=layui.table;
const layer=layui.layer;
const laypage=layui.laypage;
const tools=layui.tool;
let query = layui.queryEntry.get();
let rule_data = {};
//渲染表格
const ruleTable=table.render({
elem:"#tb_rule",
cellMinWidth: 60,
toolbar: '#tableBar',
defaultToolbar: ['filter','print','exports'],
cols: [[
{field:"rule-name",title:"规则名称",width:"200",align:'center'},
{field:"rule",title:"规则",width:"300",align:'center'},
{title:'操作',fixed:'right',width:350,align:'center',toolbar:'#toolBar'},
]],
data: []
});注意点：写jQuery代码时太容易出错了，得特别注意逗号，今天就是有个逗号写错了地方，报错还找不到。还有空格，声明id时不可以打空格，会导致出错，而且还找不到。
- 今天还在娇姐那个页面上学了tab切换的方法
<script>
//tab的切换
layui.use('element', function() {
var $ = layui.jquery,
element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
//触发事件
var active = {
tabAdd: function() {
//新增一个Tab项
element.tabAdd('demo', {
title: '新选项' + (Math.random() * 1000 | 0) //用于演示
,
content: '内容' + (Math.random() * 1000 | 0),
id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
})
}
,
tabChange: function() {
//切换到指定Tab项
element.tabChange('demo', '22'); //切换到：用户管理
}
};
$('.site-demo-active').on('click', function() {
var othis = $(this),
type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
});
//Hash地址的定位
var layid = location.hash.replace(/^#test=/, '');
element.tabChange('test', layid);
element.on('tab(test)', function(elem) {
location.hash = 'test=' + $(this).attr('lay-id');
});
});
</script>- 又爬上来更新了，最近学的感觉没有什么新技术，所以没来写。今天要我实现一个文件下载的功能，找了半天js的方法没实现成功，最后发现h5的a标签就有下载的功能，只需要一行简单的代码，就可以实现制定路径下的文件下载。
<a href="/template/question.docx">点击下载</a>- 还有一个文件上传的实现，我在layui里找到的方法，也实现了。但是公司大牛又改进了一下，直接可以上传文件或图片，下次再更新吧。之前做好的页面经理说他觉得这样设计不好，要做大更改，希望下班之前能改好。
文件上传代码见下
layui.define(['jquery', 'upload', 'ossApi', 'layer'], function (exports) {
const MOD_NAME = 'upfile';
const $ = layui.jquery;
const upload = layui.upload;
const ossApi = layui.ossApi;
const layer = layui.layer;
let region, accessKeyId, accessKeySecret, stsToken, bucket;
const obj = function (config) {
this.config = {
//选择器id或class
elem: '',
//可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
accept: 'images',
//规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表
acceptMime: 'image/jpg, image/png',
//允许上传的文件后缀
exts: 'jpg|png',
//指向一个按钮触发上传.默认自动上传
bindAction: null,
//设置文件最大可允许上传的大小，单位 KB 默认4mb
size: 4096,
// 是否允许多文件上传。设置 true即可开启
multiple: false,
//设置同时可上传的文件数量 默认10
number: 10,
//是否接受拖拽的文件上传 默认否
drag: false,
//是否使用oss上次 默认true
oss: true,
//文件的上传路径 如果开启oss则为前缀路径，如果关闭oss则为要上传的接口路径
url: '',
//选择文件后的回调函数。返回一个object参数
choose: function (object) {
},
//文件提交上传前的回调。返回一个object参数（同上）
before: function (object) {
},
//执行上传请求后的回调
done: function () {
},
//执行上传请求出现异常的回调
error: function () {
}
};
//实例化配置
this.config = $.extend(this.config, config);
//请求Sts
this.getSts = function () {
const o = this, c = o.config;
if (c.oss) {
ossApi.sts()
.then(data => {
if (data.code === 200) {
region = data.data.region;
accessKeyId = data.data.sts.accessKeyId;
accessKeySecret = data.data.sts.accessKeySecret;
stsToken = data.data.sts.securityToken;
bucket = data.data.bucket;
}
});
}
};
//oss 上传
this.ossUpload = function (r, fun) {
const o = this, c = o.config;
const client = new OSS.Wrapper({
region: region,
//云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
accessKeyId: accessKeyId,
accessKeySecret: accessKeySecret,
stsToken: stsToken,
bucket: bucket//用户oss仓库地址
});
const filePath = (c.url ? (c.url.charAt(c.url.length - 1) === "/" ? c.url : (c.url + "/")) : "") + o.timestamp() + ".jpg";
const json = {
"code": 200
, "msg": ""
, "data": {
"src": "",
"key": ""
}
};
client.multipartUpload(filePath, r).then(function (result) {
json.data.src = cfx.ossPath(result.name, 0, 0);
json.data.key = result.name;
fun(json)
}).catch(function (err) {
json.code = 500;
fun(json)
});
};
/**
* 生成文件名
* @returns
*/
this.timestamp = function timestamp() {
const o = this, c = o.config;
const time = new Date();
const y = time.getFullYear();
const m = time.getMonth() + 1;
const d = time.getDate();
const h = time.getHours();
const mm = time.getMinutes();
const s = time.getSeconds();
// console.log(y);
return "" + y + o.add(m) + o.add(d) + o.add(h) + o.add(mm) + o.add(s);
};
this.add = function add(m) {
return m < 10 ? '0' + m : m;
};
};
//渲染一个实例
obj.prototype.render = function () {
const o = this, c = o.config;
$E = $(c.elem);
if ($E.length === 0) {
console.error(MOD_NAME + ' hint：找不到容器 ' + c.elem);
return false;
}
//如果是oss上传 加载令牌
if (c.oss) {
o.getSts();
}
upload.render({
elem: c.elem
, url: c.url //必填项
, accept: c.accept
, acceptMime: c.acceptMime
, exts: c.exts
, bindAction: c.bindAction
, size: c.size
, multiple: c.multiple
, number: c.number
, drag: c.drag
, upload: c.oss ? function (r, fun) {
o.ossUpload(r, fun);
} : null
, choose: c.choose
, before: function () {
cfx.loading();
c.before()
}
, done: function (r) {
cfx.close();
layer.msg("上传成功");
c.done(r);
}
, error: function () {
cfx.close();
layer.msg("上传失败，请重试");
c.error();
}
});
};
//输出
exports(MOD_NAME, function (config) {
const _this = new obj(config);
_this.render();
return _this;
});
});- 今天做了个点击radio更改指定地方的文本内容。按照我自己找到的方法没有实现成功，后来参考了经理写的方法。
//点击radio改变下面内容
form.on('radio(changeIp)', function(data) {
if (data.value == '0'){
$("#change").text("增加：");
}
if (data.value == '1') {
$("#change").text("减少：");
}
});- 我自己写的没有实现的方法见下，以后看能不能实现它。感觉没实现的原因还是因为我对jQuery的代码的不了解。
$("#cut").click(function () {
if ($("input[type=radio]:checked").val(0)){
$("#change").text("增加：");
}else if ($("input[type=radio]:checked").val(1)){
$("#change").text("减少：");
}
})- detail和edit页面共用共一个页面，在edit为1/0判断是编辑页面还是查看页面。现在实现一个查看页面时让所有input框都没有边框。但编辑页面时有边框。
const isEdit = tools.getUrlParam("edit");
// 禁用/启用表单元素
tools.disabledForm(isEdit);
if (isEdit == 1) {
$(document).ready(function(){
$("input" ).removeClass("deleteBorder");
});
};- jQuery中的属性操作
- 如果遇到同源阻止页面的弹出，路径这么写。如果需要带参数就按第二种，主要是路径需要这么写
- div+css设置label标签内文字在超过宽度时自动换行显示
white-space:normal - layui表格内使用表单元素CheckBox时，如何获取到选中值，采用行监听
//表格渲染方式 { field: "lesson", title: "记上课", width: "16%", align: "center", totalRow: true, templet: function (d){ return '<input name="lesson" type="checkbox" class="layui-form-checkbox">\n' } },//监听行点击事件 table.on('row(account_list)', function(obj){ const on=$("input:checkbox[name='lesson']:checked").length; const not=parseInt(count)-parseInt(on) console.log(count); //获取选中行数量，可作为是否有选中行的条件 $("div[id='amount']").html(count+"人"+" "+" "+"出勤"+on+"人"+" "+" "+"缺勤"+not+"人" ); });<!----合计行的写法----> <div class="layui-form-item"> <div style="float: right"> <label class="layui-form-label Qh-insrt-form" style="width: 50px">合计：</label> <div class="layui-inline "> <div class="layui-form-label Qh-insrt-form" style="width: 190px" id="amount"></div> </div> </div> </div>效果图：
-
传属性：id，name ---------->params
传对象：--------------->data
- 筛选表格数据
//点击按钮筛选数据
let choose = $('input[name="csp.isAccredit"]:checked ').val();
if (choose === "0") {
type = "1";
query.equals['csp.isAccredit'] = $("input[name='csp.isAccredit']:checked").val();
}
form.on('radio', function (data) {
query.equals['csp.isAccredit'] = $("input[name='csp.isAccredit']:checked").val();
queryCourse(query);
if ($("input[name='csp.isAccredit']:checked").val() === "0"){
type = "1";
} else if($("input[name='csp.isAccredit']:checked").val() === "1"){
type = "0";
}
});- detail页面的设计
因为科目的值是后台传过来的，所以不可以通过监听radio的值来对元素进行操作，可以通过传参的值来判断。追加必填和清除必填。
courseInfo.isMoreCourse = courseInfo.isMoreCourse.toString();
//根据是否多科的值添加*号
if (courseInfo.isMoreCourse === "0") {
//添加必填*
$("#subject").append('<span style="color:red">*</span>')
}else{
//移除必填*
$("#subject :last-child").remove();
}
- 点击按钮，清空隐藏输入框的值和设置必填校验
form.on('radio(chekIp)', function (data) {
if (data.value == '1') {
$("#price").css('display', 'none');
$("#pC").removeAttr("lay-verify");
$('#pC').val('');
$("#isHidden").css('display', 'block');
$("#pT").attr("lay-verify", "number");
$("#tP").attr("lay-verify", "number");
}
if (data.value == '0') {
$("#isHidden").css('display', 'none');
$("#pT").removeAttr("lay-verify");
$("#tP").removeAttr("lay-verify");
$('#tP').val('');
$('#pT').val('');
$("#price").css('display', 'block');
$("#pC").attr("lay-verify", "number");
}
});
- 自定义校验单选按钮是否选中
$(function () {
$("#btn_submit").click(function () {
const boolCheck = $('input:radio[name="isPhase"]').is(":checked");
const subjectCheck = $('input:radio[name="isMoreCourse"]').is(":checked");
if (boolCheck == false) {
layer.msg('请先选择是否按期！');
return false;
}
if (subjectCheck == false) {
layer.msg('请先选择是否多科！');
return false;
}
return true;
});
});
- 调用两个api时使用责任链
具体可以参考https://blog.csdn.net/Wbiokr/article/details/79490390
//查询 分校
const queryOrg = () => {
//责任链
new Promise((resolve, reject) => {
courseApi.listPriceAccredit(courseId)
.then((data) => {
if (data.code === 200) {
course2school2priceEntity_data = data.data.list;//校区价格授权表
resolve(course2school2priceEntity_data);
}
cfx.close();
});
}).then(course2school2priceEntity_data => {
orgApi.listCompanyByTop(topId)
.then((data) => {
if (data.code === 200) {
org_data = data.data;
course_data = data.data;
for (let i = 0; i < org_data.length; i++) {
for (let j = 0; j < course2school2priceEntity_data.length; j++) {
if (org_data[i].orgId == course2school2priceEntity_data[j].accreditCompanyId) {
org_data[i]['id'] = course2school2priceEntity_data[j].id;
org_data[i]['accreditPrice'] = course2school2priceEntity_data[j].accreditPrice;
org_data[i]['accreditCompanyId'] = course2school2priceEntity_data[j].accreditCompanyId;
org_data[i]['createCompanyId'] = course2school2priceEntity_data[j].companyId;
}
}
if (!org_data[i]['id']) {
org_data[i]['id'] = "";
org_data[i]['accreditPrice'] = "";
}
}
course_school_price_list.reload({
data: org_data
});
cfx.close();
}
});
});
};- 实现将数组里面的数据取出来放到一个list里面，失败了。
for (let j = 0; j < Array.length; j++) {
staffIds =staffIds+Array[j].id+",";//将循环取出来的数据再重新放到一个list里面，好像没有实现？？
}