淘淘商城3

昨天講了商品的列表，順便講了一個分頁處理；ssm框架整合；mybatis逆向工程

今天要講一、商品的添加，涉及商品分類選擇(數據庫中作好的)，其中有一個重要的功能：圖片上傳；二、富文本編輯器(編輯框，網頁編輯器kindEditor國產的，fckEditor國外的，富文本編輯器有不少種)的使用；三、商品添加實現

商品類目選擇

控件分析

 

 

使用easyui的異步tree控件(能夠是多級的分類目錄)實現

異步tree的行爲(官方文檔)：樹控件讀取URL。子節點的加載依賴於父節點的狀態。當展開一個封閉的節點，若是節點沒有加載子節點，它將會把節點id的值做爲http請求參數並命名爲'id'，經過URL發送到服務器上面檢索子節點。

異步tree的節點的數據結構：若是有子節點就是closed狀態(有子節點是個文件夾是關閉狀態)，沒有子節點是open狀態

{{   

　　"id": 1,   

　　"text": "Node 1",   

　　「state」:「closed」　　//若是節點爲父節點則狀態爲「closed」,若是是葉子節點「open」

}，{

　　「id」:2,

　　「text」:「Node2」,

　　「state」:「closed」　　//若是節點爲父節點則狀態爲"closed",若是是葉子節點「open」

}}

數據庫

表中的數據爲樹形結構，能夠知足要求。有的就是一個單的大的分類，有的是一個三層分類。

 

 

 

 

點擊父節點，請求初始化子節點動做是tree控件封裝好的。每次打開一個父節點作之前ajax請求。

請求參數：id:當前節點id。

返回結果：一個json數據，是一個列表，上面{{}}格式獲得數據（找到item-add.jsp源碼參考本段文字）

dao層

Sql語句：select * from tb_item_cat where parent_id=1；第一次查詢parent_id=1，再點開一級查詢parent_id=2，在點開一級parent_id=3了，它是一個單表查詢，既然是單表查詢，那麼就能夠用逆向工程生成的代碼，到此dao就算完成了

service層

service要接收一個前臺的parent_id參數，根據parent_id來查詢子類目列表，返回一個分類列表，這個分類列表要建立一個pojo來描述一個節點的格式返回一個pojo的列表，看上面的樹形目錄這個pojo至少要包含一個id,text,state。這個pojo是一個樹形列表的格式，其它工程也可能用因此放在taotao-common中　　service層代碼見service模塊ItemCatServiceImpl.java，接下來就是controller代碼的編寫了

controller層

功能：接收頁面請求參數，名爲id,調用service查詢分類列表。返回json格式是列表。須要使用@ResponseBody註解，前提導入jsckson包

 

圖片上傳

　　上午實現了商品類目選擇，咱們把tree封裝到了一個pojo裏面，實際上用Map不封裝也能夠，或者拼字符串。建立pojo無非就是一個屬性，這個屬性對應一個值，能夠用map來替代。封裝成pojo更直觀List<EUTreeNode>一看就知道里邊是什麼，封裝成map誰知道里邊有多少key啊。

　　上傳圖片主要考慮一個問題，圖片上傳保存的位置？圖片雖然能夠保存到數據庫可是太慢了，通常都是保存一個圖片路徑。

傳統項目與集羣環境保存圖片

傳統項目只有一個web工程，項目用的人很少，了不起幾十人，上百人或者上千人，上千人已經很大了，這一千人也不必定同時訪問。因此服務器壓力並不大，一個服務器安一個tomcat徹底能夠知足需求，即便服務器宕了也沒有關係，重啓一下就能夠了。

如今考慮一件事，用戶愈來愈大，一個tomcat支持600併發，如今要3000併發一個tomcat支撐不住了，如今就要作集羣了。作集羣就不止一個tomcat了，這個時候前端就須要一個負載均衡的服務器，咱們暫且不考慮這個負載均衡的服務器如何實現的，反正它來決定哪一個tomcat給咱們提供服務，這時服務能力就變高了，從600提升到1200了。

首先恰巧tomcat1提供服務上傳了一個圖片，而後想看看圖片存上去了沒有，這時tomcat2提供服務（輪詢機制），就查不到圖片，而後就是刷一下有圖片再刷沒有圖片。這時咱們能夠單獨弄一個圖片服務器

弄一個圖片服務器

須要軟件：一、linux CentOS6.4(本機7.3)　　Nginx　　Vsftpd組件

咱們先看nginx，nginx是怎麼提供http服務，使用ftp服務怎麼訪問到圖片的

1、安裝http服務

 　　linux就不演示了，如今看nginx安裝(後面有對nginx的詳細介紹)，nginx安裝有一個前提條件，

1.安裝nginx，把nginx壓縮包上傳至~目錄（以前要安裝nginx的編譯環境，參考安裝手冊）

2.解壓

3.編譯

配置makefile（這個時候就要使用一個命令了，這個命令比較長了）

命令：cd nginx-1.8.0　　ll　　能夠看到只有一個綠色的configure，只有它是可執行的(藍色文件夾，白色文件)

4.make編譯

有了Makefile後，就能夠命令：make　　了，它就開始編譯

5.make install 安裝　　--prefix=/usr/local/nginx前面的參數設置安裝在這裏

命令：cd sbin　　而後：ll　　發現有一個綠色的nginx可執行文件(綠色表示可執行文件，nginx的可執行文件就這一個)

6.啓動nginx

啓動：進入sbin目錄輸入命令：./nginx　　而後沒有任何提示，沒有任何提示就表示執行成功了，linux裏面沒有消息就是好消息

啓動後怎麼檢驗是否啓動成功呢？在瀏覽器裏邊192.168.1.10::80便可

 

7.關閉nginx

命令：./nginx -s stop　　瀏覽器再刷新就訪問不到了

　　有的時候nginx在持續服務，咱們不能把它關閉，可是還想改一下配置文件，改完了還想讓配置生效，就要從新加載配置文件，命令：./nginx -s reload（至關於重啓了）

2、安裝ftp服務(按照手冊搭建)

　　咱們說圖片服務器應該有兩個服務，一個http服務一個ftp服務，如今服務器是能夠訪問了，你要怎麼把圖片給我放過來呢？如今就要配置ftp服務(實際開發不是重點，可讓運維人員幫助搭建)

1.安裝vsftp組件　　命令：yum -y install vsftpd　　安裝好了之後/etc/vsftpd/vsftpd.conf是vsftp的配置文件

2.添加一個ftp用戶　　命令：useradd ftpuser　　能夠用這個用戶登陸，要選普通登陸，不要匿名　　登陸後默認路徑/home/ftpuser

3.給ftp用戶添加密碼　　命令：passwd ftpuser　　密碼是：12345678

4.防火牆開啓21端口，目的就是爲了能夠訪問，本機centos7，沒有iptables防火牆

5.修改setlinux　　命令：一、setsebool -P allow_ftpd_full_access on　　二、setsebool -P tftp_home_dir on

6.關閉匿名訪問　　設置一個參數爲NO後，重啓ftp　　命令：

7.開啓被動模式，（前面配置了）

8.設置開機自啓

　　訪問ftp服務器，訪問有多種方式，首先用ftp客戶端來試一下，使用ftp客戶端的目的就是測試ftp是不是好使的。實際用的時候不可能用這個工具用吧！咱們應該使用代碼來訪問，用戶把圖片上傳到tomcat，要求tomcat能夠自動把圖片上傳到ftp。

使用java代碼訪問ftp服務：使用代碼把圖片放到home/ftp/www/image文件夾下面，而後讀取

使用apache提供的一個工具包common-net，要依賴此jar包。上傳應該在taotao-manager-web依賴它。web工程依賴了common，因此依賴傳遞過來了，依賴有了。

 

圖片上傳上去了，訪問時倒是花的。咱們用工具filezilla傳的時候沒有花，可是用代碼傳的時候就花了。圖片是二進制格式的，ftpclient默認格式是文本。ftpClient.setFileType(FTP.BINARY_FILE_TYPE);增長一行這樣的代碼便可。實際中要封裝成一個工具類，能夠供其它項目使用，提升代碼的複用性

如今服務器就搭好了，可使用ftp把圖片上傳，恰巧哪一個文件夾就是nginx的根目錄，能夠直接訪問文件夾下面的圖片

圖片上傳實現

　　上傳圖片，圖片要上傳到ftp服務器的，並不要操做數據庫，不和數據庫打交道因此沒有dao層。研究下item-add.jsp

 

需求分析：

接收Controller傳遞過了的參數，一個文件MultPartFile對象。把文件上傳到ftp服務器。生成一個新文件名(避免兩人上傳同一文件名會覆蓋)，返回url路徑。須要保證圖片上傳插件要求的數據格式

使用map包裝返回的json數據，有error和url兩個key

service

controller

功能：接收MultPartFile對象，調用Service上傳圖片返回json數據格式。使用@ResponseBody註解

運行而後上傳圖片報錯：is a MultipartResolver configured?須要在springmvc中配置多部件解析器，添加以下代碼(首先引入fileupload,io)

 爲了保證功能的兼容性，須要把Result轉換成json格式的字符串（在PictureController類中後來添加的）

富文本編輯器使用

　　前面講圖片上傳，而後返回結果@ResponseBody，這個註解放在這是什麼意思呢？前面說responsebody是把java對象轉換成字符串，其實不是，這是表象。實際是responsebody就至關於你調用response這個對象使用它的write方法而後往客戶端寫值。可是你返回是一個java對象時，java對象是不能寫到客戶端的，即使你寫瀏覽器也解析不了。因此springmvc有一個默認行爲把對象轉換成json字符串再響應。返回對象與字符串有什麼區別呢？返回對象是content-type是application/json，返回字符串是text/plain。responsebody也是能夠直接響應字符串的。

　　首先引入富文本編輯器的js，kindeditor.js是沒有壓縮的，kindeditor.min.js是壓縮後的

 

使用方法：

1、須要在jsp中添加富文本編輯器js的引用。如item-add.jsp中

 

2、在jsp的form表單中添加一個textarea域，在富文本編輯器出現的位置添加一個input類型爲textarea，textarea其實它是一個帶有圖標和操做的框

3、初始化富文本編輯器

4、提交前應該把富文本編輯器中的內容和textarea中的內容作一下同步

商品添加功能實現

 

請求url：item/save

參數：表單中的內容作參數，序列化成key-value字符串形式。post請求

響應的內容

 

 

 dao層

 dao層接收了一個表單內容，咱們要把商品信息插入到商品表，是單表操做。既然是單表操做就可使用逆向生成的代碼了。

service層

接收一個商品的pojo，至於pojo怎麼來的就無論了，那是controller層作的事，把pojo的內容比喻update,status信息可能沒有給它補全。而後把商品數據寫入到表tb_item中便可。返回TaotaoResult

 

 

 controller層

接收表單中的內容，把內容放到pojo中，使用pojo來接收表單內容。講springmvc時用pojo來接收參數。調用service返回taotaoresult對象。這個對象是一個json格式的數據，須要使用responsebody註解

 

如今寫完了就看錶單