[{    
    "id": 1,    
    "text": "Node 1",    
    "state": "closed"
},{    
    "id": 2,    
    "text": "Node 2",    
    "state": "closed"   
}]

状態：子ノード「閉じた」は、存在する場合はノードの下の子ノード「オープン」であれば

POJOは、ツリーのノード情報を作成し、3つの属性ID、テキスト、状態を含め、説明します。taotao共通のプロジェクトを置きます。

public class EasyUITreeNode implements Serializable{

	private long id;
	private String text;
	private String state;
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getState() {
		return state;
	}
	public void setState(String state) {
		this.state = state;
	}
	
}

そして、何のボタンが存在しないこの時点では、何の結合命令は、外部jsファイルで構成されていないがあります

1.2.2探しのカテゴリー

発見後1つの説明は、彼

1.2.3カテゴリを選択の初期化コンポーネント：

 // 初始化选择类目组件
    initItemCat : function(data){
    	$(".selectItemCat").each(function(i,e){
    		var _ele = $(e);
    		if(data && data.cid){
    			_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
    		}else{
    			_ele.after("<span style='margin-left:10px;'></span>");
    		}
    		_ele.unbind('click').click(function(){
    			$("<div>").css({padding:"5px"}).html("<ul>")
    			.window({
    				width:'500',
    			    height:"450",
    			    modal:true,
    			    closed:true,
    			    iconCls:'icon-save',
    			    title:'选择类目',
    			    onOpen : function(){
    			    	var _win = this;
    			    	$("ul",_win).tree({
    			    		url:'/item/cat/list',
    			    		animate:true,
    			    		onClick : function(node){
    			    			if($(this).tree("isLeaf",node.target)){
    			    				// 填写到cid中
    			    				_ele.parent().find("[name=cid]").val(node.id);
    			    				_ele.next().text(node.text).attr("cid",node.id);
    			    				$(_win).window('close');
    			    				if(data && data.fun){
    			    					data.fun.call(this,node);
    			    				}
    			    			}
    			    		}
    			    	});
    			    },
    			    onClose : function(){
    			    	$(this).window("destroy");
    			    }
    			}).window('open');
    		});
    	});
    },
    
    createEditor : function(select){
    	return KindEditor.create(select, TT.kingEditorParams);
    },

1.2.4クエリのテーブル：

tb_item_cat

クエリ列：

ID、名前、isparent

クエリPARENTID

1.3 Dao层

tb_item_cat

あなたが事の多くを保存し、基本的なCRUDは、単一のテーブルを持って、生成されたコードのリバースエンジニアリングを使用することができ、記述する必要はありません。

1.4サービス層

パラメータ：長いPARENTID

ビジネスロジック：

PARENTIDクエリノードリストに従って
EasyUITreeNodeリストに変換します。
リターン。

戻り値：リスト<EasyUITreeNode>

@Service
public class ItemCatServiceImpl implements ItemCatService {

	@Autowired
	private TbItemCatMapper itemCatMapper;
	
	
	@Override
	public List<EasyUITreeNode> getCatList(long parentId) {
		// 1、根据parentId查询节点列表
		TbItemCatExample example = new TbItemCatExample();
		//设置查询条件
		Criteria criteria = example.createCriteria();
		criteria.andParentIdEqualTo(parentId);
		List<TbItemCat> list = itemCatMapper.selectByExample(example);
		// 2、转换成EasyUITreeNode列表。
		List<EasyUITreeNode> resultList = new ArrayList<>();
		for (TbItemCat tbItemCat : list) {
			EasyUITreeNode node = new EasyUITreeNode();
			node.setId(tbItemCat.getId());
			node.setText(tbItemCat.getName());
			node.setState(tbItemCat.getIsParent()?"closed":"open");
			//添加到列表
			resultList.add(node);
		}
		// 3、返回。
		return resultList;
	}

}

発行サービス

プレゼンテーション層

レファレンスサービス

コントローラ

ツリーの初期化要求URL：/アイテム/猫/リスト

パラメータ：

長いID（親ID）

戻り値：JSON。データフォーマット

一覧<EasyUITreeNode>

@Controller
public class ItemCatController {

	@Autowired
	private ItemCatService itemCatService;
	@RequestMapping("/item/cat/list")
	@ResponseBody
	public List<EasyUITreeNode> getItemCatList(@RequestParam(value="id", defaultValue="0")Long parentId) {
		
		List<EasyUITreeNode> list = itemCatService.getCatList(parentId);
		return list;
	}
}

2画像のアップロード解析

伝統的な方法：

クラスター環境：

ソリューション：

写真は、画像を保存するための専用サーバーを設定します。あなたは、分散ファイルシステムFastDFSを使用することができます。

3画像サーバのインストール

収納スペースを拡大することができます。
統一されたアクセス方法を提供します。

使用FastDFS、分散ファイルシステム。収納スペースは、横方向に延長することができる、高可用性サーバが実装されてもよいです。各ノードは、バックアップ・マシンをサポートしています。

3.1 FastDFSは何ですか？

FastDFSは、分散ファイルシステム、オープンソースのC言語で書かれています。FastDFSインターネットのためのオーダーメイド、冗長性の完全なアカウント、ロードバランシング、および拡張リニア他のメカニズム、および高可用性に焦点を当て、高い性能と他の指標、それはファイルのアップロードとダウンロードを提供するために、高性能なファイルサーバクラスタを構築するために使用FastDFSに簡単です。その他のサービス。

3.2 FastDFSアーキテクチャ

FastDFSアーキテクチャは、トラッカーサーバーとストレージサーバーが含まれています。トラッカーサーバーのスケジュールによってストレージ・サーバによって確定ファイルのアップロード、ダウンロード、アップロードおよびダウンロードファイルのためのトラッカーサーバーのクライアント要求。

トラッカーサーバーの役割は、負荷分散であるとスケジューリングは、ファイルがアップロードされたときに、いくつかのポリシーに従って、トラッカーサーバーへのファイルアップロードサービスを提供するために、ストレージサーバーを見つけることができます。トラッカートラックのサーバーまたはディスパッチサーバと呼ぶことができます。

ストレージサーバーの役割は、ストレージ・サーバは、独自のファイル・システム・クライアントは、最終的なファイルストレージをアップロードしても、ファイルを管理するには、オペレーティングシステムのファイルシステムを使用して実装していないストレージ・サーバー上に保存されたファイルです。ストレージは、ストレージサーバと呼ぶことができます。

2つのサーバーの役割：

トラッカー：管理クラスタは、トラッカーはまた、クラスタを実現することができます。各トラッカは対等ノード。

状態ストレージクラスタを収集します。

ストレージ：実際にファイルを保存します

ストレージのグループに分け、保存ファイル間の各グループは異なっています。各グループ内の内部基含量のメンバーが同じで保存、グループメンバーのステータスは、マスタとスレーブの概念がない、同じであり、複数の部材を有することができます。

3.3ファイルのアップロードプロセス

クライアントの後、ファイルIDを格納するファイルサーバがクライアントに返されたファイルのため、後でアクセスインデックス情報については、このIDファイルをアップロードします。ファイルのインデックス情報が含まれています：グループ名、仮想ディスクのパスは、2つのデータ・ディレクトリ、ファイル名を。

グループ名：ファイルアップロードの名前の後にストレージグループは、成功した復帰後のファイルのアップロードは、クライアントが自分自身を保存する必要があり、ストレージサーバーを持っています。
仮想ディスクのパス：ストレージ仮想パスの設定、およびディスクのオプションstore_path *対応。あなたが設定した場合、あなたのconfigure store_path1がM01である、というように場合store_path0はM00が、あります。
データ二つのディレクトリ：ストレージ・サーバーは、データファイルを格納するために、各仮想ディスクのパスで2つのディレクトリを作成します。
別のアップロードやファイル：ファイル名。ストレージサーバによって生成された特定の情報に基づいており、ファイル名が含まれています：ストレージサーバ、ファイル作成タイムスタンプ、ファイルサイズ、乱数とファイル名の拡張子やその他の情報の送信元IPアドレスを。

3.4をダウンロード

3.5最も簡単なアーキテクチャFastDFS

4画像サーバのインストール方法

4.1インストール手順

最初のステップ：画像サーバ解凍。

ステップ2：VMwareの中のサーバーに画像を追加。

第三のステップVMware社のネットワーク構成。

ステップ4：ブート

モバイル：ネットワーク設定は変更されません。画像サーバを使用するには、ネットワークの構成変更しないことを確認する必要があります。

コピー：ネットワークカードのMACアドレスが新しいアドレスで再構築します。

IPアドレス：192.168.25.133

ユーザー名ルート、itcast

パスワード：itcast

5画像サーバの使用

5.1 Javaクライアント：

5.2 Mavenの環境：

5.3アップロードの写真

アップロードの手順
設定ファイルの読み込み、設定ファイルの内容は、アドレス追跡サービスです。

プロフィール内容：tracker_server = 192.168.25.133：22122

TrackerClientオブジェクトを作成します。新しいダイレクト。
TrackerServerオブジェクトを取得するためにTrackerClientオブジェクトを使用して接続を作成します。
参照を作成StorageServer、値はnullです
StorageClientオブジェクトを作成すると、参照のオブジェクトTrackerServer 2つのパラメータが必要ですStorageServer
使用StorageClientは、写真をアップロードするオブジェクト。
配列を返します。グループのパス名と画像が含まれています。

5.3.1コード

public class FastDFSTest {

	@Test
	public void testFileUpload() throws Exception {
		// 1、加载配置文件，配置文件中的内容就是tracker服务的地址。
		ClientGlobal.init("D:/workspaces-itcast/term197/taotao-manager-web/src/main/resources/resource/client.conf");
		// 2、创建一个TrackerClient对象。直接new一个。
		TrackerClient trackerClient = new TrackerClient();
		// 3、使用TrackerClient对象创建连接，获得一个TrackerServer对象。
		TrackerServer trackerServer = trackerClient.getConnection();
		// 4、创建一个StorageServer的引用，值为null
		StorageServer storageServer = null;
		// 5、创建一个StorageClient对象，需要两个参数TrackerServer对象、StorageServer的引用
		StorageClient storageClient = new StorageClient(trackerServer, storageServer);
		// 6、使用StorageClient对象上传图片。
		//扩展名不带“.”
		String[] strings = storageClient.upload_file("D:/Documents/Pictures/images/200811281555127886.jpg", "jpg", null);
		// 7、返回数组。包含组名和图片的路径。
		for (String string : strings) {
			System.out.println(string);
		}
	}
}

5.4のツールを使用してアップロードします

テスト：

@Test
	public void testFastDfsClient() throws Exception {
		FastDFSClient fastDFSClient = new FastDFSClient("D:/workspaces-itcast/term197/taotao-manager-web/src/main/resources/resource/client.conf");
		String file = fastDFSClient.uploadFile("D:/Documents/Pictures/images/2f2eb938943d.jpg");
		System.out.println(file);
	}

6画像のアップロード機能

6.1機能解析

KindEditorマルチ画像アップロードプラグインを使用します。

KindEditor 4.xのドキュメント

http://kindeditor.net/doc.php

要求URL：/ PIC /アップロード

パラメータ：MultiPartFile uploadFile

戻り値：
あなたは、対応する戻り値POJOを作成することができます。あなたはマップを使用することができます

コモンズ-IO、プロジェクトに追加したファイルアップロードのjarパッケージする必要があります。
マルチメディアパーサを設定します。

<!-- 定义文件上传解析器 -->
	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- 设定默认编码 -->
		<property name="defaultEncoding" value="UTF-8"></property>
		<!-- 设定文件上传的最大值5MB，5*1024*1024 -->
		<property name="maxUploadSize" value="5242880"></property>
	</bean>

6.2コントローラ

@Controller
public class PictureController {
	
	@Value("${IMAGE_SERVER_URL}")
	private String IMAGE_SERVER_URL;

	@RequestMapping("/pic/upload")
	@ResponseBody
	public Map fileUpload(MultipartFile uploadFile) {
		try {
			//1、取文件的扩展名
			String originalFilename = uploadFile.getOriginalFilename();
			String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
			//2、创建一个FastDFS的客户端
			FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/client.conf");
			//3、执行上传处理
			String path = fastDFSClient.uploadFile(uploadFile.getBytes(), extName);
			//4、拼接返回的url和ip地址，拼装成完整的url
			String url = IMAGE_SERVER_URL + path;
			//5、返回map
			Map result = new HashMap<>();
			result.put("error", 0);
			result.put("url", url);
			return result;
		} catch (Exception e) {
			e.printStackTrace();
			//5、返回map
			Map result = new HashMap<>();
			result.put("error", 1);
			result.put("message", "图片上传失败");
			return result;
		}
	}
}

ブラウザの互換性の問題を解決するために6.3

KindEditor画像アップロードプラグインは、ブラウザの互換性のために良いではありません。

使用@ResponseBody注釈リターンJavaオブジェクト、

コンテンツタイプ：アプリケーション/ JSON;のcharset = UTF-8

文字列を返します：

コンテンツタイプ：テキスト/計画;のcharset = UTF-8

コンテンツタイプの応答結果を指定します。

7リッチテキストエディタを使用します

リッチテキストエディタの7.1はじめに

KindEditor

http://kindeditor.net/

UEditor：Baiduのエディタ

http://ueditor.baidu.com/website/

CKEditorバージョン

http://ckeditor.com/

純粋なJSの開発、背景言語とは何の関係も。

7.2使用

最初のステップ：JSPでKindEditorのCSSとJSコードを導入します。

ステップ2：フォームにTextAreaコントロールを追加します。キャリアは、リッチテキストエディタです。同様のデータ・ソース。

第三段階：リッチテキストエディタを初期化します。公式の初期化を使用してください。

四ステップ：テキストエディタのリッチコンテンツを取ります。

フォームが送信される前に、リッチテキストエディタの内容がTextAreaコントロールに同期されます。

達成するための機能を追加するための8つの項目

8.1機能解析

要求URL：/アイテム/保存

パラメータ：データフォーム。POJOは、データが一致するように入力POJOの形状、必要な属性名および属性を受信し使用することができます。

使用TbItemオブジェクトは、フォームデータを受信します。

TbItem項目、文字列DESC

戻り値：

JSONデータ。これは、財産の状況を含める必要があります。

あなたはtaotao共通に配置され、TaotaoResultを使用することができます。

ビジネスロジック：

プロダクトIDの生成

実装：

UUID、文字列は、お勧めできません。
数値型は、繰り返されることはありません。日付+時間+乱数20160402151333123123
+ミリ秒、ランダムな番号に直接行くことができます。それは使用することができます。
使用すると、Redisの。INCR。推奨。

プロダクトID IDUtilsを使用して生成

完成TbItemオブジェクトのプロパティ
データプロダクトテーブルを挿入
TbItemDescオブジェクトの作成
完成TbItemDescプロパティ
挿入する商品記述データ
TaotaoResult.ok（）

8.2 Dao层

、Tb_item_descはtb_itemにデータを挿入しました

あなたは、リバースエンジニアリングを使用することができます

8.3サービス層

パラメータ：TbItem項目、文字列DESC

ビジネスロジック：ちょっと、上記に参加します

戻り値：TaotaoResult

@Override
	public TaotaoResult addItem(TbItem item, String desc) {
		// 1、生成商品id
		long itemId = IDUtils.genItemId();
		// 2、补全TbItem对象的属性
		item.setId(itemId);
		//商品状态，1-正常，2-下架，3-删除
		item.setStatus((byte) 1);
		Date date = new Date();
		item.setCreated(date);
		item.setUpdated(date);
		// 3、向商品表插入数据
		itemMapper.insert(item);
		// 4、创建一个TbItemDesc对象
		TbItemDesc itemDesc = new TbItemDesc();
		// 5、补全TbItemDesc的属性
		itemDesc.setItemId(itemId);
		itemDesc.setItemDesc(desc);
		itemDesc.setCreated(date);
		itemDesc.setUpdated(date);
		// 6、向商品描述表插入数据
		itemDescMapper.insert(itemDesc);
		// 7、TaotaoResult.ok()
		return TaotaoResult.ok();
	}

8.3.1発行サービス

8.4プレゼンテーション層

8.4.1レファレンスサービス

8.4.2コントローラ