02課后day03.nginx,類目選擇新增商品

1、1. 課程計劃1. 實現(xiàn)通用頁面跳轉(zhuǎn)方法2. 使用系統(tǒng)使用 Nginx 反相服務(wù)器實現(xiàn) BaseService實現(xiàn)商品類目選擇實現(xiàn)商品新增2. 實現(xiàn)通用頁面跳轉(zhuǎn)方法2.1. 實現(xiàn)分析查看 taotao-manager-web 系統(tǒng)的 index.jsp發(fā)現(xiàn)請求 url 都是差不多，/rest/page/，其的部分正好是 views 的視圖名：可以直接獲取 url 的視圖名稱，然后返回，就可以實現(xiàn)通用跳轉(zhuǎn)方法2.2. 編寫 Controller在 taotao-manager-web 編寫 Controller2.3. 效果3. 使用系統(tǒng)3.1. 現(xiàn)在的方式存在的問題現(xiàn)在的路徑：存在的問題：1.

2、 開發(fā)環(huán)境和測試環(huán)境的 ip 不一樣，每次環(huán)境變化時，都需要修改地址。2. 頁面加載資源文件，有可能使用 url 的全路徑，一旦更換環(huán)境（ip 變了），資源文件就無法加載了。3. ip 地址沒有意義，不容易，用戶不會通過 ip，一般通過3.2. 使用進行可以通過修改 hosts 文件的方式，增加 ip 地址和的使用的步驟如果手動修改 hosts 文件，會非常麻煩，環(huán)境的切換非常復(fù)雜，企業(yè)中一般不這么干3.3. 使用 SwitchHosts 管理SwitchHosts 幫助所在位置：管理 hosts 文件，其實就是管理自定義 ip 和的功能說明：可以增加多個方案，淘淘商城開發(fā)環(huán)境和淘淘商城測試環(huán)

3、境，可以方便的切換存在的問題實現(xiàn)通過用戶是直接輸入后，還存在端的問題，不會填寫端。4. Nginx 介紹使用 Nginx 反相，虛擬主機，負(fù)載均衡4.1. 反相反向是指以服務(wù)器來接受ernet 上的連接請求，然后將請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器，并將從服務(wù)器上得到的結(jié)果返回給ernet 上請求連接的客戶端。此時服務(wù)器對外就表現(xiàn)為一個反向服務(wù)器。4.2. Nginx 目錄結(jié)構(gòu)解壓后的目錄結(jié)構(gòu)4.3. Nginx 配置文件修改配置文件：4.4. Nginx 三個命令啟動 cmd 命令行輸入命令三個命令啟動:停止:重載:start nginx.exenginx.exe s stop nginx.exe

4、 s reload啟動成功：有且僅有兩個線程啟動報錯,查看日志文件發(fā)現(xiàn) 80 端口被占用使用命令 nets-ano 命令查看端口占用情況發(fā)現(xiàn)有程序占用 80 端口，根據(jù)查看是哪個進程打開任務(wù)管理器，根據(jù)停止程序即可查詢到是 eclipse 的 Tomcat 占用 80 端口流程4.5. Nginx5. 實現(xiàn) BaseService一般在項目開始時，就會編寫 BaseSerivce，否則后續(xù)編寫 BaseService 時候，需要對所有 service 進行改造，增加開發(fā)成本實現(xiàn)常用方法1.2.3.4.5.6.7.8.9.queryByIdqueryAllqueryCountByWhere qu

5、eryListByWhere queryByPagequeryOne save updateByIddeleteById10. deleteByIds5.1. 編寫 Service 接口在 taotao-manager-erface 子工程中編寫接口publicerface BaseService /*根據(jù) id 查詢數(shù)據(jù)*param idreturn*/public T queryById(Long id);/*查詢所有數(shù)據(jù)*return*/public List queryAll();/*根據(jù)條件查詢數(shù)據(jù)條數(shù)*param t* return*/publiceger queryCountBy

6、Where(T t);/*根據(jù)條件查詢數(shù)據(jù)*param treturn*/public List queryListByWhere(Tt);/*分頁查詢數(shù)據(jù)*param pageparam rowsreturn*/public List queryByPage(egage,egerrows);/*根據(jù)條件查詢一條數(shù)據(jù)*param treturn*/public T queryOne(T t);/*新增*param treturn*/public void save(T t);/*新增，忽略空參數(shù)*param treturn*/public void saveSelective(Tt);5.2.

7、 編寫 Service 實現(xiàn)類在 taotao-manager-service 子工程中public class BaseServiceImpl implements BaseService Autowiredprivate Mapper mapper;private Class clazz;/*根據(jù)主鍵更新*param treturn*/public void updateById(T t);/*根據(jù)主鍵更新，忽略空參數(shù)*param treturn*/public void updateByIdSelective(T t);/*根據(jù) id 刪除數(shù)據(jù)*param idreturn*/publi

8、c void deleteById(Long id);/*根據(jù) ids 批量刪除數(shù)據(jù)*param idsreturn*/public void deleteByIds(List ids);public BaseServiceImpl() / 獲取父類的 typeType type = this.getClass().getGenericSuperclass();/ 強轉(zhuǎn)為 ParameterizedType，可以使用獲取泛型類型的方法ParameterizedType pType = (ParameterizedType) type;/ 獲取泛型的 classthis.clazz = (Cla

9、ss) pType.getActualTypeArguments()0;Overridepublic T queryById(Long id) T t = this.mapper.selectByPrimaryKey(id); return t;Overridepublic List queryAll() List list = this.mapper.select(null); return list;Overridepubliceger queryCountByWhere(T t) count = this.mapper.selectCount(t);return count;Overri

10、depublic List queryListByWhere(T t) List list = this.mapper.select(t); return list;Overridepublic List queryListByPage(egage,eger rows) PageHelper.startPage(page, rows);List list = this.mapper.select(null);return list;Overridepublic T queryOne(T t) T result = this.mapper.selectOne(t); return result;

11、Overridepublic void save(T t) this.mapper.insert(t);Overridepublic void saveSelective(T t) this.mapper.insertSelective(t);Overridepublic void updateById(T t) this.mapper.updateByPrimaryKey(t);Overridepublic void updateByIdSelective(T t) this.mapper.updateByPrimaryKeySelective(t);Overridepublic void

12、deleteById(Long id) this.mapper.deleteByPrimaryKey(id);Overridepublic void deleteByIds(List ids) 條件/Example example = new Example(this.clazz);example.createCriteria().andIn(id, ids);this.mapper.deleteByExample(example);5.3. 改造商品類目 service 和 controller使用 BaseService，改造商品類目的 service 和 controller改造 Ite

13、mCatService 接口，繼承 BaseService，注釋掉之前的方法改造 ItemCatServiceImpl 實現(xiàn)類，把方法注釋掉改造 ItemCatController，使用 BaseService 的方法6. 實現(xiàn)類目選擇點擊新增商品，彈出類目選擇窗口6.1. 數(shù)據(jù)庫分析看到有 parent_id 和 is_parent 判斷是一個樹形結(jié)構(gòu)使用 parent_id 作為條件進行查詢，發(fā)現(xiàn)有三級類目一共 1182 條數(shù)據(jù)6.2. 創(chuàng)建 pojoItemCat 里面沒有新增時間和更新時間屬性， 這兩個屬性被抽取出來放在BasePojo 中了BasePojo抽取共用的屬性不希望直接創(chuàng)建

14、實例，加上 abstract6.3. 根據(jù) BasePojo 改造 BaseServiceBasePojo 抽取出共用的 created 屬性和 updated 屬性可以在 BaseServiceImpl 的新增和更新方法中直接設(shè)置這兩個屬性，其他人調(diào)用方法的時候就不用設(shè)置新增和更新屬性了6.3.1. 限定泛型必須繼承 BasePojo6.3.2. 改造 BaseService 新增和更新方法在 BaseServiceImpl 修改更新和新增方法Overridepublic void save(T t) / 需要判斷，如果調(diào)用者沒有設(shè)置時間，則這里設(shè)置，如果設(shè)置了時間，則這里不設(shè)置了if (t

15、.getCreated() = null) t.setCreated(new Date(); t.setUpdated(t.getCreated(); else if (t.getUpdated() = null) t.setUpdated(t.getCreated();this.mapper.insert(t);Overridepublic void saveSelective(T t) / 需要判斷，如果調(diào)用者沒有設(shè)置時間，則這里設(shè)置，如果設(shè)置了時間，則這里不設(shè)置了if (t.getCreated() = null) t.setCreated(new Date(); t.setUpdate

16、d(t.getCreated(); else if (t.getUpdated() = null) t.setUpdated(t.getCreated();this.mapper.insertSelective(t);6.4. 類目顯示前端分析點擊選擇類目彈出窗口，分析按鈕的點擊事件在 index.jsp 查看新增頁面的按鈕，確認(rèn)新增頁面的是 item-add.jspOverridepublic void updateById(T t) / 更新方法直接設(shè)置時間 t.setUpdated(new Date(); this.mapper.updateByPrimaryKey(t);Overrid

17、epublic void updateByIdSelective(T t) / 更新方法直接設(shè)置時間t.setUpdated(new Date();this.mapper.updateByPrimaryKeySelective(t);查看新增頁面頁面邏輯一般使用 id 或者 class 獲取頁面元素，這里只有 class。選中 selectItemCat，按 ctrl+k，查找當(dāng)前頁面同樣的元素發(fā)現(xiàn) initItemCat 是 js 方法名，搜索 initItemCat這里可以確認(rèn)，當(dāng)頁面加載完成后，就會執(zhí)行類目初始化方法6.5. js 邏輯當(dāng)頁面加載完成后，執(zhí)行 initItemCat()調(diào)

18、用的是 initItemCat()方法/類目選擇初始化function initItemCat()/獲取 class 為 selectItemCat 的元素，其實就是類目選擇按鈕var selectItemCat = $(.selectItemCat);/給類目選擇按鈕增加點擊事件 selectItemCat.click(function()/添加 div，并設(shè)置 css 屬性/在 div里面添加 ul，并打開窗口$().css(padding:5px).html().window(/窗口創(chuàng)建屬性 width:500,height:450, modal:true, closed:true, i

19、conCls:icon-save, title:選擇類目,/當(dāng)窗口打開后執(zhí)行的邏輯 onOpen : function()/這里的 this 是打開的窗口var _win = this;/在窗口范圍內(nèi)，搜索 ul/找到 ul，并創(chuàng)建 EasyUI 樹$(ul,_win).tree(/發(fā)起請求，創(chuàng)建樹邏輯實現(xiàn)6.6.前端創(chuàng)建樹需要從獲取數(shù)據(jù)。根據(jù)前端頁面的要求，實現(xiàn)邏輯6.6.1. 編寫 controller在 taotao-manager-web 增加 ItemCatController 的方法/ url:/rest/item/cat?id=nodeId,/ method:GET,/ 第一次請

20、求是沒有 id 參數(shù)，需要設(shè)置默認(rèn)的 parentId 為 0，查詢一級類目/*根據(jù) parentId 查詢類目*param parentIdreturn*/RequestMap(method = RequestMethod.GET)url:/rest/item/cat, method:GET,url:/rest/item/cat, method:GET, animate:true,/給樹上的所有節(jié)點添加點擊事件 onClick : function(node)if($(this).tree(isLeaf,node.)/ 填寫到 cid 中selectItemCat.parent().find

21、(name=cid).val(node.id);selectItemCat.next().text(node.text);$(_win).window(close););,onClose : function()$(this).window(destroy);).window(open););,6.6.2. 編寫 service在 taotao-manager-erface 編寫接口在 taotao-manager-service 實現(xiàn)方法Overridepublic List queryItemCatByParentId(Long parentId) / 設(shè)置查詢條件ItemCat para

22、m = new ItemCat(); param.setParentId(parentId);List list = super.queryListByWhere(param); return list;ResponseBodypublic List queryItemCatByParentId(RequestParam(value = id defaultValue = 0) Long parentId) List list =this.itemCatService.queryItemCatByParentId(parentId);return list;6.6.3. 修改 pojo發(fā)現(xiàn)節(jié)點

23、能查出來，但是都是 undefined查看文檔，返回的節(jié)點需要有 text 和 se 屬性改造 ItemCat，增加 get 方法6.7. 效果7. 商品新增7.1. 商品數(shù)據(jù)庫表產(chǎn)品經(jīng)理提供需求7.1.1. 導(dǎo)入數(shù)據(jù)庫表導(dǎo)入兩張表，商品表和商品描述表7.1.2. 商品表數(shù)據(jù)庫表設(shè)計的價格數(shù)據(jù)類型是 big（優(yōu)化點）設(shè)置價格類型是整型，避免了小數(shù)問題打印結(jié)果是public sic void main(String args) float a = 1.3f;doub= 1.3;float aa = a * 3;doubb = b * 3; System.out.prln(aa); System.

24、out.prln(bb);3.89999993.9000000000000004存在的問題前端顯示是元，兩位小數(shù)，保存在數(shù)據(jù)庫是分，所以保存數(shù)據(jù)需要把顯示的數(shù)據(jù)乘以 1007.1.3. 商品描述表(優(yōu)化點)商品描述特點數(shù)據(jù)量大修改頻率低需要進行拆分7.2. 完成 pojo拷貝 pojo 到工程7.2.1. 商品 pojo7.2.2. 商品描述 pojo7.3. 前端實現(xiàn)7.3.1. 商品價格富文本編輯器 kindeditor效果原理：實際上就是對 html 代碼的拼接7.3.2.2. 前端實現(xiàn)前端 td 只是一個多行文本在頁面加載成功后，創(chuàng)建富文本編輯器參數(shù)一就是創(chuàng)建富文本編輯在哪個元素上面。

25、參數(shù)二就是創(chuàng)建富文本編輯器的參數(shù)7.3.2.3. 需要加載資源文件 js上面使用了 KindEditor 創(chuàng)建富文本編輯器，要使用 KindEditor 這個對象，必 須加載以下資源。類似使用$或者 jQuery，必須加載 jQuery 的 js。7.3.2.4. 結(jié)構(gòu)7.4. 表單提交前端邏輯在 item-add.jsp 中的 js 提交邏輯：js 代碼演示效果/提交商品信息到function submitForm()/校驗表單if(!$(#itemAddForm).form(validate)$.messager.alert(提示,表單還未填寫完成!);return ;/獲取 id 為 i

26、temAddForm 的元素，就是提交表單，/查找屬性有 name=price 的元素，就是需要提交到的 input/eval 方法是做字符串計算1+2 =3。這個方法執(zhí)行成功后的效果是，把用戶數(shù)據(jù)的價格乘以一百$(#itemAddForm name=price).val(eval($(#itemAddForm name=priceView).val() * 100);/把富文本編輯器編輯區(qū)域的 html 代碼。同步到多行文本中，向提交的是多行文本/因為編輯器的編輯區(qū)域是 div，不能提交itemAddEditor.sync();/提交到的 RESTful$.ajax(type: T, url: /rest/item,data: $(#itemAddForm).serialize(), sucs: function(msg)$.messager.alert(提示,新增商品成功!);,error: function()$.messager.alert(提示,新增商品失敗!););7.5. 后端實現(xiàn)分析前端邏輯提交請求路徑是商品信息需要保存到兩張表，一張商品表，一張商品描述表不需要對返回值進行處理，返回值可以隨意確定，返回 OK7.5.1. 編寫 Mapper在 taotao-manager-mapper 編寫商