2. 程式人生 > >專案中使用ecTable的程式碼

專案中使用ecTable的程式碼

阿新 • • 發佈：2018-11-17

這是不配置extremetable.properties的初始樣式。

這是配置了extremetable.properties自定義的樣式，主要是加了一個頁數下拉框，可以選擇第幾頁，每頁幾行。這個下拉框要加上對應的onchange()方法、action，非常複雜。

專案目錄。

-------------------------------------------------------------------------------------------------------------------

ecTable的初步配置很簡單。匯入jar包。web.xml裡面可以指定extremetable.properties。然後配置extremetable.properties。可以不指定，使用預設樣式。還有一些image。可以自定義css。我們的css這裡不寫了，大致是這樣：.eXtremeTable .tableRegion ，以.eXtremeTable開頭。可以去下載專案。

http://download.csdn.net/detail/u010653311/6453225

web.xml就不貼了。這裡沒有配置匯出報表和國際化。

index.jsp

<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  		<%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %>
		<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
		<c:set var="ctx" value="${pageContext.request.contextPath}"/>
		<link href="${ctx}/css/extremecomponents.css" type="text/css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="${ctx}/css/common.css" />
		
  </head>
  
  <body style="padding:0 100px;">
    <br/>
    <div id="TableBody">
	    <ec:table tableId="adhocSql" items="data" var="map"
			width="100%" form="EditForm"
			action="${ctx}/adhocSql/query.action"
			imagePath="${ctx}/images/extremecomponents/*.gif" view="html"
			retrieveRowsCallback="limit" autoIncludeParameters="false">
			<ec:exportXls fileName="adhocSqlList.xls" tooltip="匯出Excel" />
			<ec:row>
				<ec:column property="name" title="姓名" width="10%"/>
				<ec:column property="age" title="年齡" width="10%" />
				
			</ec:row>
		</ec:table>
	</div>
  </body>
</html>

配置檔案： 

table.filterable=false
table.imagePath=/images/extremecomponents/*.gif
table.locale=zh_CN
table.view.html=com.huateng.framework.extremecomponents.view.IssueView

exportXls.view=org.extremecomponents.table.view.XlsView

row.highlightRow=true

column.format.date=yyyy/MM/dd/hh/mm/ss
column.format.currency=###,###,###,###,#00.00

table.maxRowsDisplayed=50
table.medianRowsDisplayed=20
table.rowsDisplayed=10

column.cell.OrderState=com.huateng.framework.extremecomponents.cell.CustomerOrderStateCell 

這裡指定了一個IssueView。自定義樣式都是這個類。

column.cell.OrderState是這麼用的：jsp裡面

<ec:column property="orderStat" cell="OrderState" title="訂單狀態" width="10%"/>
就會找到CustomerOrderStateCell這個類。另外cell=""裡面好像可以直接寫類和包的全稱。

這個類可以把一個輸入轉為一個輸出。Action傳過來的實際值比如是1，顯示到頁面上面可以變為‘草稿’。

public class CustomerOrderStateCell extends AbstractCell {

	/* (non-Javadoc)
	 * @see org.extremecomponents.table.cell.AbstractCell#getCellValue(org.extremecomponents.table.core.TableModel, org.extremecomponents.table.bean.Column)
	 */
	@SuppressWarnings("unchecked")
	@Override
	protected String getCellValue(TableModel model, Column column) {
		
		List<DictInfoDTO> list = (List<DictInfoDTO>)SystemInfo.getDictInfo().get(SystemInfoConstants.CUSTOMER_ORDER_STATE);
		
		String value = column.getValueAsString();
		if (StringUtils.isBlank(value))
			return "";
		
		for (DictInfoDTO d : list) {
			if (value.equals(String.valueOf(d.getDictId()))) {
				value = d.getDictShortName();
				break;
			}
		}
		return value;
	}
}

這個類比較簡單。

再看IssueView

package com.huateng.framework.extremecomponents.view;

import org.extremecomponents.table.core.TableModel;
import org.extremecomponents.table.view.CompactView;
import org.extremecomponents.util.HtmlBuilder;

import com.huateng.framework.extremecomponents.toolbar.IssueToolbar;

public class IssueView extends CompactView {

    protected void toolbar(HtmlBuilder html, TableModel model) {
        new IssueToolbar(html, model).layout();
    }
}

IssueToolBar: 

package com.huateng.framework.extremecomponents.toolbar;

import java.util.Iterator;

import org.extremecomponents.table.bean.Export;
import org.extremecomponents.table.core.TableModel;
import org.extremecomponents.table.view.CompactToolbar;
import org.extremecomponents.table.view.html.BuilderConstants;
import org.extremecomponents.table.view.html.BuilderUtils;
import org.extremecomponents.util.HtmlBuilder;

public class IssueToolbar extends CompactToolbar {

    public IssueToolbar(HtmlBuilder html, TableModel model) {
	super(html, model);
    }
    
    protected void columnRight(HtmlBuilder html, TableModel model) {
        boolean filterable = BuilderUtils.filterable(model);
        boolean showPagination = BuilderUtils.showPagination(model);
        boolean showExports = BuilderUtils.showExports(model);

        IssueToolbarBuilder toolbarBuilder = new IssueToolbarBuilder(html, model);

        html.td(4).styleClass(BuilderConstants.COMPACT_TOOLBAR_CSS).align("right").close();

        html.table(4).border("0").cellPadding("1").cellSpacing("2").close();
        html.tr(5).close();

        if (showPagination) {
            html.td(5).close();
            toolbarBuilder.firstPageItemAsImage();
            html.tdEnd();

            html.td(5).close();
            toolbarBuilder.prevPageItemAsImage();
            html.tdEnd();

            html.td(5).close();
            toolbarBuilder.nextPageItemAsImage();
            html.tdEnd();

            html.td(5).close();
            toolbarBuilder.lastPageItemAsImage();
            html.tdEnd();

            html.td(5).close();
            toolbarBuilder.separator();
            html.tdEnd();

            html.td(5).close();
            toolbarBuilder.rowsDisplayedDroplist();
            html.tdEnd();

            if (showExports) {
                html.td(5).close();
                toolbarBuilder.separator();
                html.tdEnd();
            }
        }

        if (showExports) {
            Iterator iterator = model.getExportHandler().getExports().iterator();
            for (Iterator iter = iterator; iter.hasNext();) {
                html.td(5).close();
                Export export = (Export) iter.next();
                toolbarBuilder.exportItemAsImage(export);
                html.tdEnd();
            }
        }

        if (filterable) {
            if (showExports || showPagination) {
                html.td(5).close();
                toolbarBuilder.separator();
                html.tdEnd();
            }

            html.td(5).close();
            toolbarBuilder.filterItemAsImage();
            html.tdEnd();

            html.td(5).close();
            toolbarBuilder.clearItemAsImage();
            html.tdEnd();
        }

        html.trEnd(5);

        html.tableEnd(4);

        html.tdEnd();
    }

}

IssueToolbarBuilder: 

package com.huateng.framework.extremecomponents.toolbar;

import org.extremecomponents.table.core.TableConstants;
import org.extremecomponents.table.core.TableModel;
import org.extremecomponents.table.view.html.TableActions;
import org.extremecomponents.table.view.html.ToolbarBuilder;
import org.extremecomponents.util.HtmlBuilder;

import com.huateng.framework.extremecomponents.tableaction.IssueTableActions;

public class IssueToolbarBuilder extends ToolbarBuilder {
    private static String pathString="/EcTableWeb";
    public IssueToolbarBuilder(HtmlBuilder html, TableModel model) {
	super(html, model);
    }

    public void rowsDisplayedDroplist() {
	int rowsDisplayed = getTableModel().getTableHandler().getTable()
		.getRowsDisplayed();
	int medianRowsDisplayed = getTableModel().getTableHandler().getTable()
		.getMedianRowsDisplayed();
	int maxRowsDisplayed = getTableModel().getTableHandler().getTable()
		.getMaxRowsDisplayed();
	int currentRowsDisplayed = getTableModel().getLimit()
		.getCurrentRowsDisplayed();
	//System.out.println(rowsDisplayed+","+medianRowsDisplayed+","+maxRowsDisplayed+","+currentRowsDisplayed);
	//10,20,50,10

	//顯示頁數的下拉框
	
	getHtmlBuilder().table(0).close().tr(4).close().td(8).style(" padding:0 0 0 4px;").close();

	int currentPage = getTableModel().getLimit().getPage();
	int totalRows = getTableModel().getLimit().getTotalRows();
	int totalPages = 1;

	if (totalRows % currentRowsDisplayed > 0) {
	    totalPages = totalRows / currentRowsDisplayed + 1;
	} else {
	    totalPages = totalRows / currentRowsDisplayed;
	}

	getHtmlBuilder().select().name(
		getTableModel().getTableHandler().prefixWithTableId()
			+ TableConstants.PAGE_SCOPE);

	StringBuffer onchangePage = new StringBuffer();
	onchangePage.append(new IssueTableActions(getTableModel())
		.getPagesDisplayedAction());
	getHtmlBuilder().onchange(onchangePage.toString());

	getHtmlBuilder().close();

	getHtmlBuilder().newline();
	getHtmlBuilder().tabs(4);

	for (int i = 1; i <= totalPages; i++) {
	    getHtmlBuilder().option().value(String.valueOf(i));
	    if (i == currentPage) {
		getHtmlBuilder().selected();
	    }
	    getHtmlBuilder().close();
	    getHtmlBuilder().append(String.valueOf(i));
	    getHtmlBuilder().optionEnd();
	}

	getHtmlBuilder().newline();
	getHtmlBuilder().tabs(4);
	getHtmlBuilder().selectEnd();
	
//	getHtmlBuilder().br();
//	getHtmlBuilder().img("images/extremecomponents/rowsDisplayed.gif");
//	getHtmlBuilder().nbsp();

	// 顯示條數的下拉框
	
	getHtmlBuilder().tdEnd().td(8).style(" padding:0 0 0 4px;").close();
	
	getHtmlBuilder().select().name(
		getTableModel().getTableHandler().prefixWithTableId()
			+ TableConstants.ROWS_DISPLAYED);

	StringBuffer onchange = new StringBuffer();
	onchange.append(new TableActions(getTableModel())
		.getRowsDisplayedAction());
	getHtmlBuilder().onchange(onchange.toString());

	getHtmlBuilder().close();

	getHtmlBuilder().newline();
	getHtmlBuilder().tabs(4);

	// default rows
	getHtmlBuilder().option().value(String.valueOf(rowsDisplayed));
	if (currentRowsDisplayed == rowsDisplayed) {
	    getHtmlBuilder().selected();
	}
	getHtmlBuilder().close();
	getHtmlBuilder().append(String.valueOf(rowsDisplayed));
	getHtmlBuilder().optionEnd();

	// median rows
	getHtmlBuilder().option().value(String.valueOf(medianRowsDisplayed));
	if (currentRowsDisplayed == medianRowsDisplayed) {
	    getHtmlBuilder().selected();
	}
	getHtmlBuilder().close();
	getHtmlBuilder().append(String.valueOf(medianRowsDisplayed));
	getHtmlBuilder().optionEnd();

	// max rows
	getHtmlBuilder().option().value(String.valueOf(maxRowsDisplayed));
	if (currentRowsDisplayed == maxRowsDisplayed) {
	    getHtmlBuilder().selected();
	}
	getHtmlBuilder().close();
	getHtmlBuilder().append(String.valueOf(maxRowsDisplayed));
	getHtmlBuilder().optionEnd();

	getHtmlBuilder().newline();
	getHtmlBuilder().tabs(4);
	getHtmlBuilder().selectEnd();
	
	getHtmlBuilder().tdEnd().trEnd(4);
	getHtmlBuilder().tr(4).close().td(8).close();
	getHtmlBuilder().img(pathString+"/images/extremecomponents/rowsDisplayed.gif");
	getHtmlBuilder().tdEnd().td(8).close();
	getHtmlBuilder().img(pathString+"/images/extremecomponents/table/rowsDisplayed.gif");
	getHtmlBuilder().tdEnd().trEnd(4).tableEnd(0);
    }
}

用來指定onchange() Action的IssueTableActions： 

package com.huateng.framework.extremecomponents.tableaction;

import org.apache.commons.lang.StringUtils;
import org.extremecomponents.table.core.TableConstants;
import org.extremecomponents.table.core.TableModel;
import org.extremecomponents.table.view.html.BuilderUtils;
import org.extremecomponents.table.view.html.TableActions;

/**
 * 擴充套件TableActions，使原來頁面中下拉框由顯示行數變為顯示頁敄1�7
 * 這裡完成了下拉框中js語句onchenge()的實玄1�7
 * @author liming.feng
 *
 */
public class IssueTableActions extends TableActions {
	
	private TableModel model;

	public IssueTableActions(TableModel model) {
		super(model);
		this.model = model;
	}
	
	/**
	 * 構建頁面控制元件“翻頁下拉框”的js中onchenge()語句
	 * @return String
	 */
    public String getPagesDisplayedAction() {
        StringBuffer action = new StringBuffer("javascript:");

        action.append(getClearedExportTableIdParameters());

        action.append(getRowsDisplayedFormParameter(TableConstants.PAGE));
        action.append(getOnInvokeOrSubmitAction());
        
        return action.toString();
    }
    
    /*
     * Added 16 AUG 2007 - Todd Fredrich - To duplicate previous functionality of getOnInvokeAction().
     */
    public String getOnInvokeOrSubmitAction() {
        String onInvokeAction = getOnInvokeAction();
        if (StringUtils.isNotBlank(onInvokeAction)) {
            return onInvokeAction;
        }
        
        return getSubmitAction();
    }
    
    public String getSubmitAction() {
        StringBuffer result = new StringBuffer();

        String form = BuilderUtils.getForm(model);
        String action = model.getTableHandler().getTable().getAction();
        result.append("document.forms.").append(form).append(".setAttribute('action','").append(action).append("');");
        
        String method = model.getTableHandler().getTable().getMethod();
        result.append("document.forms.").append(form).append(".setAttribute('method','").append(method).append("');");

        result.append("document.forms.").append(form).append(".submit()");
        
        return result.toString();
    }
    
}

說幾點細節：比如getHtmlBuilder().table(0).close().tr(4).close().td(8)

close()方法是加上‘>’符號，tr(4)裡面的數字沒有實際意義，如果system.out打印出來發現那裡是縮進了幾格。這個htmlBuilder就是像手寫html程式碼一樣。可以直接列印看字串。

另外帶上Action


package com.huateng.action;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class DataInitAction {

	private List<Map<String, Object>> data = new ArrayList<Map<String,Object>>();
	private int totalRows = 0;
	public String init(){
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("name", "tommy");
		map.put("age", 22);
		data.add(map);
		map = new HashMap<String, Object>();
		map.put("name", "jerry");
		map.put("age", 33);
		data.add(map);
		totalRows = data.size();
		return "succ";
	}
	
	public List<Map<String, Object>> getData() {
		return data;
	}
	public void setData(List<Map<String, Object>> data) {
		this.data = data;
	}
	public int getTotalRows() {
		return totalRows;
	}
	public void setTotalRows(int totalRows) {
		this.totalRows = totalRows;
	}
}

這裡沒連資料庫，翻頁什麼都做不了。

實際中Action中還有一個方法取得頁面頁數等資料，是這樣的：


/**
     * list列表頁面初始化獲得頁數等資訊
     *
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    protected void ListPageInit(String tableId, PageQueryDTO pageQueryDTO) throws Exception {

        if (pageQueryDTO == null)
            return;

        if (tableId != null)
            this.tableId = tableId;

        HttpServletRequest request = getRequest();

        Limit limit = getLimit(request, tableId);
        pageQueryDTO.setCurrentPage(limit.getPage());

        pageQueryDTO.setRowsDisplayed(getRowsDisplayed(request, tableId));

        pageQueryDTO.setQueryAll(this.isExportView(request, tableId));

        // 是否有排序，如果有，記錄排序的欄位名、欄位別名和排序的種類（降序or升序）
        if (limit.getSort() != null) {
            // 排序的種類
            pageQueryDTO.setSort(limit.getSort().getSortOrder());
            if (TableConstants.SORT_ASC.equals(limit.getSort().getSortOrder())
                    || TableConstants.SORT_DESC.equals(limit.getSort().getSortOrder())) {
                // 排序的欄位名
                pageQueryDTO.setSortFieldName(limit.getSort().getProperty());
                // 排序的欄位別名
                pageQueryDTO.setSortFieldAliasName(limit.getSort().getAlias());
            }
        }
    }


/**
     * 得到ec分頁、排序、索引用的Limit
     *
     * @param request
     * @return
     */
    protected Limit getLimit(HttpServletRequest request, String tableId) {
        if (tableId == null)
            tableId = "ec";
        Context context = new HttpServletRequestContext(request);
        LimitFactory limitFactory = new TableLimitFactory(context, tableId);
        Limit limit = new TableLimit(limitFactory);
        return limit;
    }

/**
     * 得到每頁的頁數
     *
     * @param request
     * @return
     */
    protected int getRowsDisplayed(HttpServletRequest request, String tableId) {
        if (tableId == null)
            tableId = "ec";
        Context context = new HttpServletRequestContext(request);
        String rowsDisplayed = String.valueOf(getLimit(request, tableId).getCurrentRowsDisplayed());
        Preferences preferences = new TableProperties();
        preferences.init(context, TableModelUtils.getPreferencesLocation(context));
        if ("0".equals(rowsDisplayed)) {
            Object rd = request.getParameterMap().get(tableId + "_" + TableConstants.ROWS_DISPLAYED);
            if (rd != null) {
                rowsDisplayed = ((String[]) rd)[0];
            } else {
                rowsDisplayed = preferences.getPreference(PreferencesConstants.TABLE_ROWS_DISPLAYED);
            }
        }
        return Integer.parseInt(rowsDisplayed);
    }

/**
     * 判斷是否是匯出操作
     *
     * @param request
     * @return
     */
    protected boolean isExportView(HttpServletRequest request, String tableId) {
        if (tableId == null)
            tableId = "ec";
        Object rd = request.getParameterMap().get(TableConstants.EXPORT_TABLE_ID);

        if (rd != null) {
            String ex = ((String[]) rd)[0];
            return StringUtils.isNotBlank(ex);
        }
        return false;
    }

下載位置http://download.csdn.net/detail/u010653311/6453225

相關推薦

統計一下專案中的程式碼有多少行是你貢獻的

文章目錄 方法一 Ubuntu Mac 方法二 Ubuntu Mac 同一作者不同名稱的問題 輸出統計耗時 Ubuntu 最終指令碼 Mac 最終指令碼

專案中的程式碼不規範問題整理(基於阿里規範的外掛)

專案中成員能力不一，開發質量良莠不齊，一個良好的開發規範和約束可以極大的提高專案的穩定性。 之前專案都是快速迭代，根本沒有時間review，都是滿足功能為主，年前，列舉中專案中存在的問題，制定了一下程式碼規範問題。 一、必須修復問題： 1.    很多地方沒有加大括號 2

maven專案中測試程式碼

1 在src/test/java中新建測試的java類 以下是一段測試程式碼 package com.nufront.euht.test; import java.util.List; impor

我專案中的程式碼都是如何分層的？

1、背景 說起應用分層，大部分人都會認為這個不是很簡單嘛 就controller，service, mapper三層。看起來簡單，很多人其實並沒有把他們職責劃分開，在很多程式碼中，controller做的邏輯比service還多,service往往當成透傳了，這其實是很多人開發程式碼都沒有注意到的地方，反正功

專案中使用ecTable的程式碼

這是不配置extremetable.properties的初始樣式。 這是配置了extremetable.properties自定義的樣式，主要是加了一個頁數下拉框，可以選擇第幾頁，每頁幾行。這個下拉框要加上對應的onchange()方法、action，非常複雜。 專案目錄

[專案實踐] 在專案實戰中提升程式碼效率的的一次應用實踐-----使用列表解析式輸出當前android裝置的CPU核數

1、先按照初學者思維程式碼應該是這樣的 1 #coding:utf-8 2 import os 3 text = os.popen("adb shell command cat /proc/cpuinfo",'r').read().split("\n") 4 i = 0 5 for j i

所謂的網頁爬蟲用java程式碼來實現，此程式碼適合在maven專案中使用中使用，因為，程式碼中的類所對應的依賴可以讓maven下載。

//獲得httpClient物件 CloseableHttpClient httpClient = HttpClients.createDefault(); //url公司域名隨便 String url = "https://www.baidu.co

使用Intellij IDEA在maven專案中整合mybatis-generator外掛，自動生成程式碼

1.在dependencies下新增： <dependency> <groupId>org.mybatis.generator</groupId> <artifactId>mybatis-generator-core</artif

新增外部資料夾程式碼檔案到專案中使用

這種操作在Unity常有，如Unity客戶端與獨立開發的服務端的共享程式碼，原始碼放在Unity的Assets目錄中，然後同時被服務端專案引用。 編輯需要引用的專案的csproj檔案，新增程式碼： <ItemGroup> <Compile Include="..\..\..\P

專案中ant的程式碼與main.jsp

<?xml version="1.0" encoding="UTF-8"?> <project name="project" basedir="." default="clean"> <property file="build.properties" />

如何修改專案引入jar中的程式碼

你是否遇到過這樣的困境：這個問題線上才能出現，可是線上不支援debug，並且懷疑是引入的jar引起的，不能加log怎麼辦？亦或者你覺得引入的jar的某個方法有bug，應該這麼寫才對，如何才能去證實呢。 不知道你是如何解決上訴問題的，筆者的方案就是在專案建立一個一模一樣的需要debug或者修改的C

VS2017在專案中匯入已有程式碼檔案各種方法的一些問題的解決辦法

1.在VS中通過步驟：檔案->新建->從現有程式碼建立專案，這樣方法把現有程式碼加到工程檔案，其實VS只是在你程式碼所在檔案建立了VS必須的.sln等等專案所需檔案，這種方法建立的專案在需要包含如:#include<stdio.h>這種常用庫時，可能會

Gradle專案中gradle.build檔案中的buildScript程式碼塊

在編寫Gradle指令碼的時候，在build.gradle檔案中經常看到這樣的程式碼： buildScript { repositories { mavenCentral() } } repositories { mavenCe

react-native-android-unity（二）建立unity專案，並匯出為android程式碼包，嵌入android專案中

1.建立unity專案 給Main Camera新增指令碼Android，使用C#開發，指令碼內容如下： using System.Collections;
using System.Colle

webpack實戰專案中程式碼打包和優化總結

網上關於webpack的優化的已經很多了，只是都比較零散，結合實戰專案自己做個總結 webpack 優化，實際專案中主要做到了一下幾點： 1、 檔案壓縮（css, js, html, 字型檔案， 圖片檔案） 2、 babel-loader 避免不必要的轉義 3、 babel-轉義結果進行快取

Maven專案中WEB模組中後臺程式碼打成jar包

1、將web模組的後臺程式碼打成jar 包釋出到target目錄下（war包中正常編譯的class依然存在） <build> <plugins>

程式碼規範和Android專案中的一些可用工具

這裡主要講一下關於程式碼規範的相關問題，和在Android專案中如何利用一些工具進行規範和檢查。程式碼規範不是一個Android專案特有的問題，所以前部分內容是不單針對Android的。 什麼是程式碼規範? 程式碼規範一般是指在程式設計過程中的一系列規則規範。 一般來說程式碼規

解決在Vue專案中時常因為程式碼縮排導致頁面報錯的問題

前言 如果我們初次使用vue-cli來構建單頁SPA應用，在擼程式碼的過程中有可能會遇到這種因為程式碼縮排導致 頁面報錯的問題，導致我們煩不勝煩。接下來我們就來看一看如何解決這個小問題。。。

idea中git分享專案與clone程式碼

1.安裝git，在idea中設定git命令目錄 2.建立程式碼的存放地址，我用的coding程式碼庫 3.建立本地倉庫，選擇專案所在目錄，管理原生代碼 4.新增遠端倉庫地址 5.選擇新增第二步建立的倉庫地址 6.提交你想要提交的程式碼，並push到遠

shiro真正專案中的實戰應用核心程式碼！！！

歡迎轉載！！！請註明出處！！！ 說道shiro的學習之路真是相當坎坷，網上好多人發的帖子全是簡單的demo樣例，核心程式碼根本沒有，在學習過程中遇到過N多坑。 經過自己的努力，終於整出來了，等你整明