这段时间一直在按照公司的安排开发一个进销存系统给用户使用。作为一个喜欢后端的开发程序猿，前端那套东西写起来自然没那么熟悉了，而且，作为公司暂时唯一一个后台开发人员，PC端的页面、后台、App的API接口、数据库、服务器都是我一个人在负责，找一个功能强大的前端框架能节省很多时间精力。所以，结合我这段时间来的实际开发体验，给像我一样要写前端还要写后端的程序猿推荐一个我觉得还顺手的后台框架–vip-admin。
首先，放一张图片展示一下：
实话实说，这个框架也不是特别漂亮，但是作为一个简单的行业软件后台框架可以说足够了。
基于layui的这个框架，该有的组件除了排版系统，其余的组件都有了，像是表单、弹窗、表格等也足够好看，作为一个后端开发人员，可以说几乎不用写什么CSS代码就能实现很美观的页面效果，而JavaScript代码相对来说也很少，我用到的基本上都是通过ajax调用我自己写好的接口数据然后通过弹窗的样式提示用户。
再放几张图：
记录几段常用代码：
显示msg后回调刷新页面：
layer.msg('下单成功~', {
time: 2000
}, function () {
window.location.reload();
});
表单校验：
form.verify({
contact_name: function (value) {
if (value == "") {
return "请输入法人姓名";
}
var reg = /[\u4E00-\u9FA5]/;
if (reg.test(value) === false) {
return "法人姓名输入不合法";
}
},
principal_name: function (value) {
if (value == "") {
return "请输入法人姓名";
}
var reg = /[\u4E00-\u9FA5]/;
if (reg.test(value) === false) {
return "法人姓名输入不合法";
}
},
contact_number: function (value) {
if (value == "") {
return "请输入联系电话";
}
var reg = /(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}/;
if (reg.test(value) === false) {
return "联系电话输入不合法";
}
},
principal_id: function (value) {
if (value == "") {
return "请负责人身份证号码";
}
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (reg.test(value) === false) {
return "身份证输入不合法";
}
},
principal_number: function (value) {
if (value == "") {
return "请负责人电话";
}
var reg = /(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}/;
if (reg.test(value) === false) {
return "联系电话输入不合法";
}
},
id_number: function (value) {
if (value == "") {
return "请输入身份证件号码";
}
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (reg.test(value) === false) {
return "身份证输入不合法";
}
},
shop_name: function (value) {
if (value == "") {
return "请输入门店名称";
}
},
business_license_number: function (value) {
if (value == "") {
return "请输入门店营业执照证号统一码";
}
var reg = /^[a-zA-Z0-9_-]{4,32}$/;
if (reg.test(value) === false) {
return "门店营业执照证号统一码输入不合法";
}
},
province: function (value) {
if (value == "0") {
return "请选择正确的地区信息";
}
},
city: function (value) {
if (value == "0") {
return "请选择正确的城市信息";
}
},
area: function (value) {
if (value == "0") {
return "请选择正确的所在区信息";
}
},
address: function (value) {
if (value == "") {
return "请输入正确的地址信息";
}
}
});
ajax提交表单：
form.on('submit(submit)', function (data) {
var submit_key_array = ['id_card_front', 'business_license', 'id_card_back', 'id_card_front', 'lease_agreement',
'store_pic_inside', 'store_pic_outside', 'official_seal','rent_bill','property_fee'];
// console.log(submit_array);
for (var i = 0; i < submit_key_array.length; i++) {
if (!submit_array.hasOwnProperty(submit_key_array[i])) {
layer.msg('您有项目未填~');
return false;
}
data.field[submit_key_array[i]] = submit_array[submit_key_array[i]];
}
// console.log(data.field);
$.ajax({
type: 'POST',
url: '/Buyer/Super_buyer/add_sub_buyer_api',
data: data.field,
dataType: 'json',
success: function (submit_result) {
// console.log(submit_result);
if (submit_result.success == 1) {
layer.msg(submit_result.msg, {icon: 6, shade: [0.5, '#333333'], time: 5000}, function (index) {
// location.href = '/Buyer/Super_buyer/sub_buyer_list';
layer.close(index);
window.location.reload();
});
} else {
layer.alert(submit_result.msg, {
title: '提示'
});
}
},
error: function (xhr) {
layer.msg('登录出错，请联系客服~');
// console.log(xhr);
}
});
return false;
});
点击按钮，请求接口：
$(".delete-btn").click(function (event) {
// alert ("0000");
var cart_id = $(this).attr('cart_id');
layer.confirm('您确定要删除？', {
btn: ['删除', '取消'] //按钮
}, function () {
// alert(cart_id);
$.ajax({
type: 'POST',
url: '/buyer/super_buyer/cart_delete?random=' + Math.random(),
data: {cart_id: cart_id},
dataType: 'json',
success: function (cart_delete) {
if (cart_delete.success == 1) {
layer.msg('删除成功', {
time: 1000
});
} else {
layer.alert(cart_delete.msg, {
title: '提示'
});
}
window.location.reload();
},
error: function (xhr) {
layer.msg('请求出错，请刷新后再试~');
}
});
}, function () {
layer.msg('取消删除', {icon: 1});
});
// var cart_id = $(this).attr('cart_id');
// alert(cart_id);
return false;
});