前面已經將博類別的相關頁面與後臺實現,並且將部落格的一些管理實現了(刪除,條件查詢),最後我們就針對我這次部落格實現的內容做個大概的過程介紹(包括遇到的問題,我是如何碰壁的,如何解決)

1、最開始的時候部落格類別的datagrid,我是使用js實現出來的,然後嘗試使用easyui的另一種方法,就是使用(通過<table>建立資料表格標記。巢狀的< th >標記定義列的表。具體開APII),在這個基礎上,我開始實現接收後臺傳遞的json資料,由於不熟悉,百度了很多,參考了很多,但還是覺得沒有js實現好用,所以又換成了js實現datagrid。開發過程中的小問題我就不說了,就談談我實現datagrid部落格分類這列上碰的壁,因為,使用者不知道我們blogType的id指的是什麼意思,所以,必須,必須轉換成使用者能夠理解的blogTypeName,這種形式例如:”生活”,“工作“才是我們需要展示給使用者看的。所以就存在一個現實欄位資料前對資料進行處理,把“1”程式設計“生活”,在easyui datagrid中這個叫做formatter,具體自行查閱API。

我使用的ajax訪問後臺,獲取typeid對應typename,ajax回撥函式中的typename,在ajax中無法使用,這個困擾了我很久,最後的解決辦法是,使用jq的最基礎的ajax,將async :設定成false,必選是同步,才能使用ajax中的變數。在分頁查詢的過程中,出現一個問題就是,如何設計成點選查詢按鈕,將文字框中的值作為title的模糊查詢的使用的引數?這裡出現一個問題就是,如何將頁面中的值傳遞給後臺,我是使用改變datagrid中的url的值(在地址後新增?str="生"),然後出現一個問題就是亂碼,由於未找到合適的方法,最後使用

$('#dg').datagrid({ url: '${pageContext.request.contextPath}/admin/Selectmh'});
$("#dg").datagrid("load",{
str:str
}); 

來進行傳引數。經過測試,實現了傳參需求。

最後一個問題就是如何,如果合併兩個查詢(查詢全部、模糊查詢)?

我的解決方案是,在後臺使用mybatis逆向工程生成的example建立criteria 來新增條件,這樣的話就可以通過if語句來判斷何時需要模糊查詢。

TBlogExample example = new TBlogExample();
Criteria criteria = example.createCriteria();
if (str != null && str != "") {


criteria.andTitleLike("%" + str + "%");
}

其實中間走了很多彎路,說不清楚的頁面除錯與後臺的debug,這個的話需要朋友們自行聯絡

現在貼上頁面程式碼:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>部落格管理</title>
<%@include file="../common/head.jspf"%>
<script type="text/javascript">
	
$(function() {
	//datagrid初始化
	$('#dg').datagrid({
		//請求資料的url
		url : '${pageContext.request.contextPath}/admin/Selectmh',
		//載入提示資訊
		loadMsg : 'loading...',
		//水平自動展開,如果設定此屬性,則不會有水平滾動條,演示凍結列時,該引數不要設定
		fitColumns : true,
		//資料多的時候不換行
		nowrap : true,
		//設定分頁
		pagination : true,
		//設定每頁顯示的記錄數,預設是10個
		pageSize : 5,
		//每頁顯示記錄數
		pageList : [ 2, 5, 10, 15, 20 ],
		//指定id為標識欄位,在刪除,更新的時候有用,如果配置此欄位,在翻頁時,換頁不會影響選中的項
		idField : 'id',
		//上方工具條 新增 修改 刪除 重新整理按鈕  '-'是分割符
		toolbar : [
			{  
	            text: '標題:<input type="text" id="s_title"/>'  
	        },'-',
			{
				iconCls : 'icon-search',
				text : '查詢',
				handler : function() {
					str = $("#s_title").val();
					$('#dg').datagrid({ url: '${pageContext.request.contextPath}/admin/Selectmh'});
					$("#dg").datagrid("load",{
						str:str
					}); 
				}
			},'-',
			{
			iconCls : 'icon-edit',
			text : '刪除',
			handler : function() {
                 //獲取選中要刪除的行
		        var selectedRows = $("#dg").datagrid("getSelections");
		        //判斷是否有選擇的行
		        if(selectedRows.length == 0) {
		            $.messager.alert("系統提示", "請選擇要刪除的資料");
		            return;
		        }
		        //定義選中 選中id陣列
		        var idsStr = [];
		        //迴圈遍歷將選中行的id push進入陣列
		        for(var i = 0; i < selectedRows.length; i++) {
		            idsStr.push(selectedRows[i].id);
		        }
		        //將陣列安裝,連線成字串
		        var ids = idsStr.join(","); //1,2,3,4
		        //提示是否確認刪除
		        $.messager.confirm("系統提示", "<font color=red>您確定要刪除選中的"+selectedRows.length+"條資料麼?</font>", function(r) {
		            if(r) {
		            	
		                $.post("${pageContext.request.contextPath}/admin/deleteBlog",
		                    {"ids": ids}, function(result){
		                    
		                        if(result.status==400) {
		                            $.messager.alert("系統提示", '該類別下有部落格,不能刪除!');
		                        } else if(result.status==200) {
		                            $.messager.alert("系統提示", "資料刪除成功!");
		                            $("#dg").datagrid("reload");
		                        } else {
		                            $.messager.alert("系統提示", "資料刪除失敗!");
		                        }
		                    });
		            }
		        });
			}
		}, '-', {
			iconCls : 'icon-reload',
			text : '重新整理',
			handler : function() {
				$("#dg").datagrid("reload");
			}
		} ],
		//同列屬性,但是這些列將會凍結在左側
		frozenColumns : [ [ {
			field : 'checkbox',
			checkbox : true
		},
		{
			field : 'id',
			title : '編號',
			width : 200
		} 
		] ],
		columns : [ [ {
			field : 'title',
			title : '標題',
			width : 300
		}, 
		{
			field : 'releasedate',
			title : '發表日期',
			width : 300
		}, 
		{
			field : 'typeId',
			title : '部落格類別',
			width : 300,
			formatter:function(value){
				var typeId = value;
				$.ajax({
					type : "POST",
					url : "${pageContext.request.contextPath}/admin/selectBlogType",
					data : {
						"typeId" : typeId
					},
					async : false, //核心啊 ,因為這個我調了很久,必選是同步,才能使用ajax中的變數
					success : function(result) {
						if (result.status == 200) {
							str = result.data.typename;
						}
					}
				});
				if (str == null || str == "") {
					return value;
				}else{
					return str;
				}
				
			}
		}
		] ],
	});
});


</script>
</head>
<body>
	<table id="dg"></table>
	
</body>
</html>

先貼上後臺的程式碼:

BlogController.java

package com.lailai.controller;

import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.lailai.common.utils.EasyUIDataGridResult;
import com.lailai.common.utils.MyResult;
import com.lailai.entity.TBlog;
import com.lailai.service.BlogService;

@Controller
@RequestMapping("admin")
public class BlogController {
	@Autowired
	private BlogService blogService;

	@RequestMapping("manageBlog")
	public String gotoBlogMange() {
		return "admin/manageBlog2";
	}

	// 新增或更新部落格
	@RequestMapping("saveBlog")
	@ResponseBody
	public MyResult saveBlog(TBlog blog) {
		Integer n;
		if (blog.getId() == null) {
			n = blogService.saveBlog(blog);
		} else {
			n = blogService.updateBlog(blog);
		}
		if (n > 0) {
			return MyResult.ok();
		}
		return MyResult.build(400, "操作失敗");
	}

	// 刪除部落格
	@RequestMapping("deleteBlog")
	@ResponseBody
	public MyResult deleteBlog(String ids, HttpServletResponse response) {
		String[] idsArr = ids.split(",");
		for (String id : idsArr) {
			blogService.deleteBlog(new Integer(id));
		}
		return MyResult.ok();
	}

	// 通過id獲取部落格
	@RequestMapping("getBlog")
	@ResponseBody
	public TBlog getById(Integer id) {
		TBlog blog = blogService.getById(id);
		return blog;
	}

	// 分頁查詢部落格
	@RequestMapping("SelectAllBlog")
	@ResponseBody
	public EasyUIDataGridResult SelectAllBlog(int page, int rows) {
		EasyUIDataGridResult allBlog = blogService.SelectAllBlog(page, rows);
		return allBlog;
	}
	
	// 分頁模糊部落格
	@RequestMapping("Selectmh")
	@ResponseBody
	public EasyUIDataGridResult Selectmh(String str,int page, int rows) {
		EasyUIDataGridResult allBlog = blogService.Selectmh(str,page, rows);
		return allBlog;
	}
}

BlogServiceImpl.java

package com.lailai.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.lailai.common.utils.EasyUIDataGridResult;
import com.lailai.entity.TBlog;
import com.lailai.entity.TBlogExample;
import com.lailai.entity.TBlogExample.Criteria;
import com.lailai.mapper.TBlogMapper;
import com.lailai.service.BlogService;

@Service
public class BlogServiceImpl implements BlogService {

	@Autowired
	private TBlogMapper blogMapper;

	/**
	 * 儲存部落格
	 */
	public Integer saveBlog(TBlog tBlogWithBLOBs) {
		return blogMapper.insert(tBlogWithBLOBs);
	}

	/**
	 * 修改部落格
	 */

	public Integer updateBlog(TBlog blog) {
		return blogMapper.updateByPrimaryKeyWithBLOBs(blog);
	}

	/**
	 * 刪除部落格
	 */
	public Integer deleteBlog(Integer id) {
		return blogMapper.deleteByPrimaryKey(id);
	}

	/**
	 * 按ID查詢部落格
	 */
	public TBlog getById(Integer id) {
		TBlogExample example = new TBlogExample();
		Criteria criteria = example.createCriteria();
		criteria.andIdEqualTo(id);
		List<TBlog> list = blogMapper.selectByExampleWithBLOBs(example);
		return list.get(0);
	}

	/**
	 * 查詢所有部落格(與下面的模糊查詢合併了)
	 */
	public EasyUIDataGridResult SelectAllBlog(int pageNum, int pageSize) {
		return null;
		/*
		 ** 設定分頁資訊 PageHelper.startPage(pageNum, pageSize); TBlogExample example
		 * = new TBlogExample(); Criteria criteria = example.createCriteria();
		 * List<TBlog> list = blogMapper.selectByExampleWithBLOBs(example); //
		 * 建立一個返回值物件 EasyUIDataGridResult result = new EasyUIDataGridResult();
		 * result.setRows(list); // 取分頁結果 PageInfo<TBlog> pageInfo = new
		 * PageInfo<>(list); // 取總記錄數 long total = pageInfo.getTotal();
		 * result.setTotal(total); return result;
		 */ }

	public EasyUIDataGridResult Selectmh(String str, int pageNum, int pageSize) {
		// 設定分頁資訊
		PageHelper.startPage(pageNum, pageSize);
		TBlogExample example = new TBlogExample();
		Criteria criteria = example.createCriteria();
		if (str != null && str != "") {

			criteria.andTitleLike("%" + str + "%");
		}
		List<TBlog> list = blogMapper.selectByExampleWithBLOBs(example);
		// 建立一個返回值物件
		EasyUIDataGridResult result = new EasyUIDataGridResult();
		result.setRows(list);
		// 取分頁結果
		PageInfo<TBlog> pageInfo = new PageInfo<>(list);
		// 取總記錄數
		long total = pageInfo.getTotal();
		result.setTotal(total);
		return result;
	}
}

到現在為止,我們已經實現了部落格管理的基本操作了,希望喜歡我文章的朋友們能夠有所收穫,要是能夠跟著聯絡的話,應該對ssm、easyui有更深的理解。文章還在編輯ing......希望大家繼續關注我。

彩蛋:搞到現在還沒開始實現部落格的編輯,在下一篇中就開始使用富文字了,大家關注哦!