SSM專案之---淘淘商城（第三天）
1 課程計劃
後臺管理商品的新增功能
1、商品分類選擇
2、上傳圖片
3、富文字編輯器（kindEditor）
4、實現商品的新增
5、課後作業（商品的修改、刪除）
2 商品新增功能說明
3 類目選擇
3.1 需求
點選類目選擇按鈕彈出類目選擇視窗，視窗中是一個樹形檢視。分級展示商品分類。當選擇商品分類的葉子節點後，關閉視窗並將選中的商品分類的名稱顯示到網頁上。
1、初始化tree的url：
/item/cat/list
2、請求的引數
Id（當前節點的id，根據此id查詢子節點）
3、返回資料的格式json資料：
[{
"id": 1, //當前節點的id
"text": "Node 1", //節點顯示的名稱
"state": "closed" //節點的狀態，如果是closed就是一個資料夾形式，
// 當開啟時還會 做一次請求。如果是open就顯示為葉子節點。
},{
"id": 2,
"text": "Node 2",
"state": "closed"
}]
3.1 Mapper
資料中的表：
3.1.1 Sql語句
SELECT * FROM `tb_item_cat` where parent_id=父節點id;
可以使用 逆向工程生成的mapper。
3.1 Service層
功能：根據parentId查詢商品分類列表。
引數：parentId
返回值：返回tree所需要的資料結構，是一個節點列表。
可以建立一個tree node的pojo表示節點的資料，也可以使用map。
List<TreeNode>
3.1.1 建立一個tree node的pojo：
是一個通用的pojo可以放到taotao-common中。
|
public class TreeNode { private long id; private String text; private String state; public TreeNode(long id, String text, String state) { this this.text = text; this.state = 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; } } |
3.1.2 程式碼實現
|
@Service public class ItemCatServiceImpl implements ItemCatService { @Autowired private TbItemCatMapper itemCatMapper; @Override public List<TreeNode> getItemCatList(long parentId) { //根據parentId查詢分類列表 TbItemCatExample example = new TbItemCatExample(); //設定查詢條件 Criteria criteria = example.createCriteria(); criteria.andParentIdEqualTo(parentId); //執行查詢 List<TbItemCat> list = itemCatMapper.selectByExample(example); //分類列表轉換成TreeNode的列表 List<TreeNode> resultList = new ArrayList<>(); for (TbItemCat tbItemCat : list) { //建立一個TreeNode物件 TreeNode node = new TreeNode(tbItemCat.getId(), tbItemCat.getName(), tbItemCat.getIsParent()?"closed":"open"); resultList.add(node); } returnresultList; } } |
3.2 表現層
功能：接收頁面傳遞過來的id，作為parentId查詢子節點。
引數：Long id
返回值：要返回json資料要使用@ResponseBody。List<TreeNode>
|
@Controller @RequestMapping("/item/cat") public class ItemCatController { @Autowired private ItemCatService itemCatService; @RequestMapping("/list") @ResponseBody public List<TreeNode> getItemCatList(@RequestParam(value="id", defaultValue="0")Long parentId) { List<TreeNode> list = itemCatService.getItemCatList(parentId); returnlist; } } |
4 圖片上傳
4.1 圖片上傳實現
1.1.1 需求分析
Common.js
1、繫結事件
2、初始化引數
3、上傳圖片的url：
/pic/upload
4、上圖片引數名稱：
uploadFile
5、返回結果資料型別json
參考文件：
返回格式(JSON)
|
//成功時 { "error" : 0, "url" : "http://www.example.com/path/to/file.ext" } //失敗時 { "error" : 1, "message" : "錯誤資訊" } |
1.1.2 Service
功能：接收controller層傳遞過來的圖片物件，把圖片上傳到ftp伺服器。給圖片生成一個新的名字。
引數：MultiPartFile uploadFile
返回值：返回一個pojo，應該是PictureResult。
1.1.2.1 PictureResult
應該把此pojo放到taotao-common工程中。
|
public class PictureResult { private int error; private String url; private String message; private PictureResult(int error, String url, String message) { this.error = error; this.url = url; this.message = message; } //成功時呼叫的方法 public static PictureResult ok(String url) { return new PictureResult(0, url, null); } //失敗時呼叫的方法 public static PictureResult error(String message) { returnnew PictureResult(1, null, message); } public int getError() { return error; } public void setError(int error) { this.error = error; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } } |
1.1.2.2 Service實現
|
@Service public class PictureServiceImpl implements PictureService { @Value("${FTP_ADDRESS}") private String FTP_ADDRESS; @Value("${FTP_PORT}") private Integer FTP_PORT; @Value("${FTP_USER_NAME}") private String FTP_USER_NAME; @Value("${FTP_PASSWORD}") private String FTP_PASSWORD; @Value("${FTP_BASE_PATH}") private String FTP_BASE_PATH; @Value("${IMAGE_BASE_URL}") private String IMAGE_BASE_URL; @Override public PictureResult uploadPicture(MultipartFile uploadFile) { //判斷上傳圖片是否為空 if (null == uploadFile || uploadFile.isEmpty()) { return PictureResult.error("上傳圖片為空"); } //取副檔名 String originalFilename = uploadFile.getOriginalFilename(); String ext = originalFilename.substring(originalFilename.lastIndexOf(".")); //生成新檔名 //可以使用uuid生成新檔名。 //UUID.randomUUID() //可以是時間+隨機數生成檔名 String imageName = IDUtils.genImageName(); //把圖片上傳到ftp伺服器（圖片伺服器） //需要把ftp的引數配置到配置檔案中 //檔案在伺服器的存放路徑，應該使用日期分隔的目錄結構 DateTime dateTime = new DateTime(); String filePath = dateTime.toString("/yyyy/MM/dd"); try { FtpUtil.uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USER_NAME, FTP_PASSWORD, FTP_BASE_PATH, filePath, imageName + ext, uploadFile.getInputStream()); } catch (Exception e) { e.printStackTrace(); return PictureResult.error(ExceptionUtil.getStackTrace(e)); } //返回結果，生成一個可以訪問到圖片的url返回 return PictureResult.ok(IMAGE_BASE_URL + filePath + "/" + imageName + ext); } } |
1.1.3 Controller
功能：接收頁面傳遞過來的圖片。呼叫service上傳到圖片伺服器。返回結果。
引數：MultiPartFile uploadFile
返回值：返回json資料，應該返回一個pojo，PictureResult物件。
|
@Controller public class PictureController { @Autowired private PictureService pictureService; @RequestMapping("/pic/upload") @ResponseBody public PictureResult upload(MultipartFile uploadFile) { PictureResult result = pictureService.uploadPicture(uploadFile); returnresult; } } |
1.1.4 Springmvc.xml
|
<!-- 定義檔案上傳解析器 --> <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> |
2 富文字編輯器
2.1 使用方法
第一步：在jsp中加入富文字編輯器js的引用。
第二步：在富文字編輯器出現的位置新增一個input 型別為textarea
第三步：呼叫js方法初始化富文字編輯器。
第四步：提交表單時，呼叫富文字編輯器的同步方法sync，把富文字編輯器中的內容同步到textarea中。
6、商品新增功能實現
1.1 功能分析
1、請求的url
/item/save
2、返回結果，自定義。
TaotaoResult，參見參考資料。
1.2 Dao層
1.2.1 資料庫
商品表、商品描述表。
分開的目的是為了提高查詢效率。
1.1.1 Mapper檔案
逆向工程生成的mapper可以使用。
1.1 Service層
功能分析：接收controller傳遞過來的物件一個是item一個是itemDesc物件。需要生成商品的id。把不為空的欄位都補全。分別向兩個表中插入資料。
引數：TbItem，TbItemDesc
返回值：TaotaoResult
|
@Override public TaotaoResult addItem(TbItem item, TbItemDesc itemDesc) { try { //生成商品id //可以使用redis的自增長key，在沒有redis之前使用時間+隨機數策略生成 Long itemId = IDUtils.genItemId(); //補全不完整的欄位 item.setId(itemId); item.setStatus((byte) 1); Date date = new Date(); item.setCreated(date); item.setUpdated(date); //把資料插入到商品表 itemMapper.insert(item); //新增商品描述 itemDesc.setItemId(itemId); itemDesc.setCreated(date); itemDesc.setUpdated(date); //把資料插入到商品描述表 itemDescMapper.insert(itemDesc); } catch (Exception e) { e.printStackTrace(); return TaotaoResult.build(500, ExceptionUtil.getStackTrace(e)); } return TaotaoResult.ok(); } |
1.2 Controller
功能分析：接收頁面傳遞過來的資料包括商品和商品描述。
引數：TbItem、TbItemDesc。
返回值：TaotaoResult
|
@RequestMapping("/save") @ResponseBody public TaotaoResult addItem(TbItem item, String desc) { TbItemDesc itemDesc = new TbItemDesc(); itemDesc.setItemDesc(desc); TaotaoResult result = itemService.addItem(item, itemDesc); returnresult; } |