e3mall商城的概括總結4之圖片服務器以及文本編輯器

1、圖片服務器

——一、認識圖片服務器

你們可能都知道在分佈式架構中使用圖片上傳可能會致使文件存放在某一個項目，而咱們的項目基本上都採用集羣的方式 ，所以這樣會致使圖片的問題比較難以存放，在這裏咱們有兩個解決思路
a、開發時經過開發工具設置一個workspace（文件夾），讓咱們能夠訪問到該文件夾，而後把照片存入在其中，把圖片名存放在數據庫中。再經過tomcat訪問該文件夾。當項目上線後能夠經過nginx訪問該文件夾。固然該方法適用於中小型項目，（開發流程跳轉，往後再寫一篇文章介紹）
b、使用圖片服務器（本章重點）
使用FastDFS，分佈式文件系統。存儲空間能夠橫向擴展，能夠實現服務器的高可用。支持每一個節點有備份機。

——二、FastDFS

FastDFS是用c語言編寫的一款開源的分佈式文件系統。FastDFS爲互聯網量身定製，充分考慮了冗餘備份、負載均衡、線性擴容等機制，
並注重高可用、高性能等指標，使用FastDFS很容易搭建一套高性能的文件服務器集羣提供文件上傳、下載等服務。    
FastDFS架構包括 Tracker server和Storage server。客戶端請求Tracker server進行文件上傳、下載，
經過Tracker server調度最終由Storage server完成文件上傳和下載。
Tracker server做用是負載均衡和調度，經過Tracker server在文件上傳時能夠根據一些策略找到Storage server提供文件上傳服務。
能夠將tracker稱爲追蹤服務器或調度服務器。
Storage server做用是文件存儲，客戶端上傳的文件最終存儲在Storage服務器上，Storage server沒有實現本身的文件系統而是利用操做系統
的文件系統來管理文件。能夠將storage稱爲存儲服務器。

下面用圖片來解釋一下

服務端兩個角色：
Tracker：管理集羣，tracker也能夠實現集羣。每一個tracker節點地位平等。
收集Storage集羣的狀態。
Storage：實際保存文件
Storage分爲多個組，每一個組之間保存的文件是不一樣的。每一個組內部能夠有多個成員，組成員內部保存的內容是同樣的，組成員的地位是一致的，沒有主從的概念。

也就是說該服務器兩個大模塊Tracker server和Storage server。
Tracker server是領導,而Storage server是員工,當客戶端發送請求時,要知道客戶端是很重要的,因此須要領導來接待,領導接待後,確定須要出去吃飯娛樂等^ _ ^ ,那麼就須要員工去安排了.固然員工也須要天天每週像領導彙報本身的狀況.大體流程用下圖來表示

上傳文件的保存路徑規則爲:
組名(storage)/虛擬磁盤號(store_path)/XX(目錄)/XX(目錄)/文件名.後綴名

——三、圖片服務器的安裝

這裏圖片服務器的安裝較爲困難,黑馬那裏只提供了VM虛擬機配置好的系統壓縮文件.直接解壓後導入到Vm虛擬機中就能夠了。因爲圖片服務器的配置改較爲麻煩，所以最好也是用黑馬提供的ip地址：192.168.25.133
若使用該ip地址，必須將VM的區域網設置改爲NAT模式。
能夠有不少同窗不太理解VM的三種虛擬網絡（橋接模式、僅主機模式、NAT模式）
橋接模式：虛擬機ip地址須要與主機在同一個網段，網關、子網掩碼都須要和主機一致。
NAT模式：虛擬機ip地址不和主機在同一個網段，虛擬機又開了一個網段,主機和虛擬機能夠相互ping通(經過VMnet8). 也能夠和外網ping通.
僅主機模式:虛擬機ip地址不和主機在同一個網段，虛擬機又開了一個網段,主機和虛擬機能夠相互ping通.若是想上網,必須經過主機的虛擬網卡(VMnet1共享網絡).
具體可查看我轉載的文章:轉到
注意：導入虛擬機後選擇我已移動該虛擬機
移動：網絡配置不發生變化。要使用圖片服務器，須要保證網絡配置不變。
複製：從新生成一塊網卡mac地址是新地址。

2、前端訪問url以及配置

url:/pic/upload

文本編輯器要求服務器回覆的字段爲

服務器上傳圖片須要在配置文件中添加上傳解析器

<!-- 定義文件上傳解析器 -->
	<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>

解決文本編輯器的亂碼須要服務器返回text/plain類型字段

3、添加商品

url:/item/save
前端的form表單中的name數據和Tb_item裏的屬性一致,所以用對象去接收數據,springmvc會自動把數據存到對象中,還有一個name=desc的商品描述。
所以再加上String desc參數
代碼以下：
controller層

//添加商品
	@RequestMapping("/item/save")
	@ResponseBody
	public E3Result InsertItem(TbItem item, String desc) {
		return itemService.InsertItem(item, desc);
	}

service層

//添加商品
	@Override
	public E3Result InsertItem(TbItem item, String desc) {
		final long id = IDUtils.genItemId();
		//補齊數據
		item.setId(id);
		//1-正常，2-下架，3-刪除
		item.setStatus((byte) 1);
		item.setCreated(new Date());
		item.setUpdated(new Date());
		TbItemMapper.insert(item);
		TbItemDesc itemDesc = new TbItemDesc();
		itemDesc.setItemId(id);
		itemDesc.setItemDesc(desc);
		itemDesc.setCreated(new Date());
		itemDesc.setUpdated(new Date());
		itemDescMapper.insert(itemDesc);
  		//返回e3Result對象，到前端進行解析 200表示添加成功  E3Result.ok()的狀態就是200
		return E3Result.ok();
	}

3、做業

因爲不少同窗反應不會寫留下的做業，所以做業這部分詳細講解一個邏輯步驟，邏輯爲主，代碼爲輔。相信會給迷惑的你帶來靈感的。

a、商品編輯

尋找前端url：/rest/page/item-edit
item-list.jsp中

後臺controller：

//返回商品編輯頁面 
	@RequestMapping("/rest/page/item-edit")
	public String itemEdit() { 
		return "item-edit";
	}

返回商品編輯頁面後頁面自動加載商品規格和商品詳情，這兩個部分是經過兩個get方式獲取的。返回json對象仍是e3Result。
先看前端url：/rest/item/param/item/query/’+data.id

後臺controller：

//返回商品的屬性
	@RequestMapping("/rest/item/param/item/query/{id}")
	@ResponseBody
	public String queryitem (@PathVariable Long id) {
		TbItem item = itemService.getItemByid(id);
		Editdata editdata = new Editdata();
		editdata.setId(item.getId());
		editdata.setParamData(item); 
		
		E3Result e3Result = new E3Result();
		e3Result.setData(editdata);
		return JsonUtils.objectToJson(e3Result);
	}

後臺service經過逆向工程查詢數據庫的數據（此時能夠先查redis，若redis沒有，則查數據庫，再把查到的數據存放到redis中。能夠給商品設置一個TTl（expire屬性），讓熱門商品第一次訪問存到redis中，冷門商品不常常訪問則丟失，有效的控制redis的內存數據）

b、商品刪除

刪除估計不少人都會,就更簡單了.先找前端的URL.
刪除的URL:/rest/item/delete

controller層:

//批量刪除商品
	@RequestMapping("/rest/item/delete")
	@ResponseBody
	public E3Result deleteItems(Long[] ids) {
		itemService.deleteItems(ids);
		return E3Result.ok();
		
	}

service層:

//商品刪除
	@Override
	public void deleteItems(Long[] ids) {
		//遍歷數組而後刪除
		for (Long l : ids) {
			TbItemMapper.deleteByPrimaryKey(l);
			itemDescMapper.deleteByPrimaryKey(l);
		}
	}

b、商品上下架

有同窗問我上架下架啥意思,我也是欲哭無淚了.那我仍是說一遍吧上架表明顧客用戶能夠經過商城首頁看到該商品,下架就是表明該商品已經搜不到了(緣由:商家質量問題、無庫存等因素).可是可能之後還會上架。主要就是修改商品的屬性。很簡單！直接演示。
service層

//商品上架
	@Override
	public void updateItems_S(Long[] ids) {
		for (Long l : ids) {
			TbItem item = new TbItem();
			item.setId(l);
			//1-正常，2-下架，3-刪除
			item.setStatus((byte) 1);
			TbItemMapper.updateByPrimaryKeySelective(item);
		}
	}
	//商品下架
	@Override
	public void updateItems_X(Long[] ids) {
		for (Long l : ids) {
			TbItem item = new TbItem();
			item.setId(l);
			//1-正常，2-下架，3-刪除
			item.setStatus((byte) 2);
			TbItemMapper.updateByPrimaryKeySelective(item);
		}
	}

controller層

//批量上架商品
	@RequestMapping("/rest/item/reshelf")
	@ResponseBody
	public E3Result status_shang(Long[] ids) {
		itemService.updateItems_S(ids);
		return E3Result.ok();
	}
	//批量下架商品
	@RequestMapping("/rest/item/instock")
	@ResponseBody
	public E3Result status_xia(Long[] ids) {
		itemService.updateItems_X(ids);
		return E3Result.ok();
	}

再看看演示結果：