layui入坑2(基於SSM)
阿新 • • 發佈：2018-11-19
layui2--SSM--網上訂餐系統
- 如果想看用servelet和layui寫的圖書管理系統的話，請參考我的上一篇文章：連結地址.
- 作者在寫這篇文章時還只是小白，目的是為了鞏固知識，意料之內的寫的不好，請多諒解.
- 本文只是擴充套件一些要記的和一些專案中的問題，僅有助於作者本人，請多諒解.
開始（layui部分）
當彈出層的type為1時，也就是content需要自己寫時最好加上body，並且body可以直接用layero賦值，還有彈出層的渲染問題，詳情見下面程式碼。
layer.open({ type: 1 ,//Page層型別, btn: ['確定'], area: ['400px', '200px'], offset: '100px', title: '<li id="icon" class="layui-icon layui-icon-release layui-anim layui-anim-scaleSpring" ' + 'style="font-size: 30px; color: #009688;" data-anim="layui-anim-scaleSpring"></li> 請填寫資訊', shade: 0.6, //遮罩透明度 maxmin: true, //允許全屏最小化 anim: 1, //0-6的動畫形式，-1不開啟 content: '<body>'+'<div>'+ '</div>'+'</body>', success:function(layero, index){ //或者使用 body = layer.getChildFrame('body',index); //對彈出層一些元素如,CheckBox的渲染需要以下兩行程式碼渲染 //獲取新視窗物件 var iframeWindow = layero.find('iframe')[0].contentWindow; //重新渲染 frameWindow.layui.form.render(); body = layero; }, yes:function(layero, index){ var value = body.find("#value").val(); } });
如果你只需要使用到layui的彈出層，並把彈出事件繫結到一個button的onclick事件上時，你需要以下的操作：
function onclick()
{
layui.use(['layer','form'], function(){
var layer = layui.layer; //彈層
var $ = layui.$;
layer.ready(function(){
var body;
//如果你彈出層的背景不只是要iframe當背景時，可以加上parent
parent.layer.open({
}
});
});
}
layui的提示
//提示內容（5是失敗提示，6是成功）
parent.layer.msg("message", {icon: 5});
//關閉全部後重新整理表格，testReload是table.render()上的id屬性
layer.closeAll();
table.reload('testReload', {
where: {
//裡面穿條件
}
});
//刪除提示
layer.confirm('確定刪除該行麼', function(index){
btn: ['按鈕1', '按鈕2', '按鈕3'], //可以無限個按鈕,如果沒寫預設事件只有yes
yes: function(index, layero){
//需要手動關閉彈出層
},btn2:function(index, layero){
//不需要手動關閉
},btn3:function(index, layero){
//不需要手動關閉,依次類推...
}
}
關於layui的表格一些擴充套件，包括加入圖片，繫結欄位事件，欄位顯示處理
table.render({
elem: '#dishTable',
url: BASE_PATH+'/dishCtrl/queryAllDishMessage.do',
page:true, //開啟分頁
id: 'testReload',
//修改傳入資料的欄位名
response: {
statusName: 'status', //資料狀態的欄位名稱，預設：code
statusCode: 200,//成功的狀態碼，預設：0
msgName: 'messages',//狀態資訊的欄位名稱，預設：msg
countName: 'count', //資料總數的欄位名稱，預設：count
dataName: 'data' //資料列表的欄位名稱，預設：data
},
done: function(res, curr, count) { //表格資料載入完後的事件
//呼叫示例
layer.photos({//點選圖片彈出
photos: '.layer-photos-demo',
anim: 1 //0-6的選擇，指定彈出圖片動畫型別，預設隨機（請注意，3.0之前的版本用shift引數）
});
},
cols: [[ //表頭
{type: 'checkbox', fixed: 'left'},
//隱藏欄位
{field: 'dishTypeId',hide:true},
//圖片載入 （需要更改css樣式,後面貼）
{field:'dishImg', title: '圖片', width:110,templet:function (d) {
var str = d.dishImg + "";
var dishImg = BASE_PATH + str.substring(14,str.length);
return '<div class="layer-photos-demo" style="cursor:pointer;">' +
'<img src="' + dishImg + '" width="80px" height="100px"></div>';
}},
//更改欄位顏色，並繫結時間
{field: 'orderState', title: '狀態', width:100,templet: function(res){
if(res.orderState == "1"){
//lay-event事件依舊在table.on('tool()', function(obj){if(obj.event === '')});中實現
return '<a style="color:green" href="javaScript:void(0);" lay-event="orderCtrl"></a>';
}
}},
{field:'right',title: '操作', align:'center', toolbar: '#bar' }
]],
page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定義分頁佈局
groups: 1, //只顯示 1 個連續頁碼
first: '首頁', //不顯示首頁
last: '末頁', //不顯示尾頁
limit:5,
limits:[1,2,3,4,5,6,7,8,9,10]
}
});
以上table操作需要修改css(添加了一些自己用的，讓table具有立體感)
<style type="text/css">
.layui-table-box{
box-shadow: 0 -1px 8px rgba(0,0,0,.3);
background:#ffffff;
}
.layui-table th{
font-weight: 800
}
.layui-card-body{
box-shadow: 0 -1px 8px rgba(0,0,0,.3);
background:#ffffff;
}
.layui-card-header{
padding: 0px 0px 0px 0px;
height:100%;
padding: 10px
}
.layui-form layui-border-box layui-table-view{
padding-left: 10px
}
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
top: 50%;
transform: translateY(-50%);
}
//如果只滿足於圖片或者改變table行號只要寫下面的就行
.layui-table-cell{
height:100px;
line-height: 100px;
}
</style>
layui外部事件監聽（下拉框，搜尋框）
$('.layui-card-body .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//搜尋框
$("#key").bind('input propertychange', function () {
table.reload('testReload', {
where: {
key: $('#key').val()
}
});
});
//下拉框
form.on('select(dishTypeId)', function(data){
var key = $('#key').val();
var dishTypeId = $('#dishTypeId').val();
table.reload('testReload', {
page: {
curr: 1 //重新從第 1 頁開始
},
where: {
key: key,
dishTypeId: dishTypeId
}
});
});
其他一些東西
前臺的時間戳處理（需要擴充套件data）
Date.prototype.format = function(format)
{
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
//欄位操作
{field: 'createTime', title: '建立時間', width:200,templet: function(res){
var a = new Date(res.createTime).format("yyyy-MM-dd");
return a;
}},
有關圖片上傳
/**
* @description: 圖片上傳
* @createTime: 2018年10月26日 上午9:02:29
* @author: huang.weikun
* @param file
* @param request
* @param userId
* @return
*/
@RequestMapping(value = "/uploadDishImg",method=RequestMethod.POST)
@ResponseBody
public Map<String,Object> uploadDishImg(@RequestParam("file") MultipartFile file,
HttpServletRequest request,String dishId) {
Map<String,Object> map = new HashMap<String,Object>();
try {
String filename = file.getOriginalFilename();
String suffix = filename.substring(filename.lastIndexOf("."));
String savename = UUIDUtil.getUUID()+suffix;
String path = "/dishImg/"+ DateUtil.formatDate(new Date(), "yyyyMMdd");
String realpath = request.getSession().getServletContext().getRealPath(path);
File dir = new File(realpath);
if (!dir.exists()) {// 判斷檔案目錄是否存在
dir.mkdirs();
}
String filePath = "";
if (!file.isEmpty()) {
// 檔案儲存路徑
filePath = realpath +"/"+ savename;
// 轉存檔案
file.transferTo(new File(filePath));
}
DishPO dish = null;
dish = sysDishService.getDishById(dishId);
if(dish != null){
//編輯
dish.setDishImg("/TakeoutSystem/"+path+"/"+ savename);
sysDishService.update(dish);
}else{
//新增
dish = new DishPO();
dish.setDishId(dishId);
dish.setDishImg("/TakeoutSystem/"+path+"/"+ savename);
dish.setCreateTime(System.currentTimeMillis());
sysDishService.insert(dish);
}
map.put("code", 0);
} catch (Exception e) {
map.put("code", 1);
e.printStackTrace();
}
return map;
}
在做這個專案中遇到的問題
- 場景：使用者點菜，但是沒有預設的收貨地址，需要判斷如果沒有預設的地址話直接跳轉到新增地址頁面，但是地址在iframe中
$(document).ready(function(){
var isAddress = $('#isAddress').val();
if(isAddress != null && isAddress == "no"){
$('#iframe').attr('src',BASE_PATH+"backCtrl/addressMessgae.do");
}
if(isAddress != null && isAddress == "yes"){
$('#iframe').attr('src',BASE_PATH+"backCtrl/completeOrderMessage.do");
}
});
- 場景：圖片的懶載入問題，使用者進入主頁後先載入一個菜系（重點是在後臺查詢完成之後用StringBuffer拼成html程式碼傳到前臺）
layui.use('flow', function(){
var flow = layui.flow;
flow.load({
elem: '#dishimg2' //流載入容器(div的id)
scrollElem: '#dishimg2'
isAuto: false
isLazyimg: true
done: function(page, next){ //載入下一頁
//模擬插入
setTimeout(function(){
var lis = [];
$.ajax({
url: BASE_PATH+'dishCtrl/getDishImg.do',
async:false,
type: "POST",
data:{
id:page
},
dataType: "json",
success: function(data){
lis.push(data.data);
},
error: function()
{
}
});
next(lis.join(''), page < 8); //假設總頁數為 8
}, 500);
}
});
});
有關前臺需要展示的程式碼塊需要後臺查詢需要的資料，之後拼接成html程式碼，這裡給出關鍵語句
StringBuffer url = request.getRequestURL();
//獲取路徑
String BASE_PATH = url.delete(url.length() - request.getRequestURI().length(),
url.length()).append(request.getContextPath()).append("/").toString();
- 如果SQL語句有用到多個or(如在搜尋框裡可以用多個條件查詢)則and 後面的or語句需要用括號括起來
- 一些資料庫操作的語句
<where>
<if test="">
</if>
<choose>
<when test="">
</when>
<otherwise>
</otherwise>
</choose>
</where>
//更據create_time 降序排序 並且分頁
//這裡的分頁是指從page個開始查詢limit個 所以傳入的page要進行處理 int newpage = (page-1)*limit;
ORDER BY table.create_time desc limit #{page},#{limit}