1.解析js
1.1為什麼要用eval呢？
因為不用eval的情況下，‘100’*100,那麼程式會報錯，我們這裡要轉為js對象（number）來進行計算
ajax參數的寫法有兩種，一種是對象形式來寫的，一種是k=v&k=v等号連接配接的方式
1.1.1 系統傳回值SysResult對象
由于這個是一個系統對象，是以我們應該定義到hcds-common中，建立com.hc.vo包
package com.hc.vo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
//通過SysResult 對象實作前後端資料互動的載體
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult {
private Integer status; //如果後端伺服器正常運作 傳回200 否則傳回201 表示失敗
private String msg; //服務起傳回提示
private Object data; //伺服器傳回業務資料
public static SysResult fail(){
return new SysResult(201,"伺服器異常請求稍後",null);
}
public static SysResult success(){
return new SysResult(200,"伺服器執行成功",null);
}
public static SysResult success(Object data){
return new SysResult(200,"伺服器執行成功",data);
}
public static SysResult success(String msg,Object data){
return new SysResult(200,msg,data);
}
}
1.1.2 編輯ItemController
/**
* 業務說明：商品新增
* url:http://localhost:8091/item/save
* 請求參數： form表單 item對象接收
* 傳回值 SysResult
*/
@RequestMapping("/save")
public SysResult saveItem(Item item){
try{
itemService.saveItem(item);
return SysResult.success();
}catch (Exception e){
e.printStackTrace();
return SysResult.fail();
}
}
1.1.3 編輯ItemService
@Override
public void saveItem(Item item) {
//因為add頁面沒有沒有狀态和時間，是以我們需要傳入
item.setStatus(1).setCreated(new Date()).setUpdated(item.getCreated());
itemMapper.insert(item);
}
頁面展示
1.2 全局異常處理
說明：在hcds-common中添加全局異常處理機制
建立一個包叫aop,類名叫SysResultException
package com.hc.aop;
import com.hc.vo.SysResult;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
//spring中的通知 核心原理：Spring AOP機制
@RestControllerAdvice //隻對controller代碼層有效
public class SysResultException {
//該注解隻攔截運作時異常
@ExceptionHandler({RuntimeException.class})
public SysResult exception(Exception e){
e.printStackTrace();
return SysResult.fail();
}
}
優化下ItemController
測試異常處理
雖然我們這裡出現了一個異常，但是它在插入之後出現的，那麼這個資料插入成功了嗎？很顯然，成功了，因為我們沒有對事務進行控制，是以我們需要添加一個注解
然後運作項目，發現資料庫插不進去了
1.3 MP自動填充實作
1.3.1 業務說明
說明：由于入庫時需要手動的完成時間字段操作，但是操作比較通用，任何一張表都有建立時間/更新時間，需求：能否簡化代碼
1.3.2 辨別屬性
說明:将需要自動填充的屬性 進行辨別
package com.hc.pojo;
import java.io.Serializable;
import java.util.Date;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import lombok.experimental.Accessors;
//pojo基類，完成2個任務，2個日期，實作序列化
@Data
@Accessors(chain=true)
public class BasePojo implements Serializable{
@TableField(fill = FieldFill.INSERT)
private Date created; //新增操作有效
@TableField(fill = FieldFill.INSERT_UPDATE)
private Date updated; //新增和更新操作有效
}
但是咱們雖然自動填充了，但是填充的内容還是要配置一下的，畢竟mp不知道我們想填充什麼
在common中建立一個包config
package com.hc.config;
import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
import lombok.extern.slf4j.Slf4j;
import org.apache.ibatis.reflection.MetaObject;
import org.springframework.stereotype.Component;
import java.util.Date;
@Slf4j
@Component
public class MyMetaObjectHandler implements MetaObjectHandler {
//因為我們新增操作的時候，需要維護created/updated
@Override
public void insertFill(MetaObject metaObject) {
Date date=new Date();
this.setFieldValByName("created", date, metaObject);
this.setFieldValByName("updated", date, metaObject);
}
@Override
public void updateFill(MetaObject metaObject) {
this.setFieldValByName("updated", new Date(), metaObject);
}
}
頁面展示
2. 商品背景的業務操作
2.1 工具欄的操作
2.1.1 工具欄入門案例
首先打開我們的easy-ui,複制easyui-6-datagrid.html的路徑，通路localhost:8091/easy-ui/easyui-6-datagrid.html,檢視頁面資訊
toolbar在我們ui架構中他屬于一個特殊的關鍵字，有特殊含義
iconCls 代表圖示的樣式
handler代表點選之後的動作
咱們點選新增商品之後，滑鼠右鍵，檢查，檢視網頁元素
我們會發現新增商品這個span元素，但是span元素是什麼呢？他是一個行内元素，那麼我們想把他變成塊級元素，取一下他的父級，這個div也就是所謂的塊級元素
取到我們的父級元素之後，點選，實作發送url,進行跳轉
點選編輯按鈕，什麼都不選點選，會出現一個提示
輸出使用者選中的資料，重新整理頁面，點選查詢，選中多項資料，點選編輯
function getSelectionsIds(){
//選中的所有表格資料資訊
var itemList = $("#itemList");
/*[item,item,item,item]*/
//擷取使用者選中的元素
var sels = itemList.datagrid("getSelections");
console.log(sels)
var ids = [];
for(var i in sels){
ids.push(sels[i].id);
}
//将數組拼接成串 1,2,3,4,5
ids = ids.join(",");
return ids;
}
<div id="itemEditWindow" class="easyui-window" title="編輯商品" data-options="modal:true,closed:true,iconCls:'icon-save',href:'/page/item-edit'" style="width:80%;height:80%;padding:10px;">
</div>
itemEditWindow這個選擇器下有href屬性，href屬性這裡是一個請求路徑，執行之後我們得到一個jsp頁面（item-edit.jsp）我們點選之後出現的彈出框效果時item-edit.jsp給的
這裡的load屬性，會根據我們的data屬性，和form表單中的name一一對應進行資料的回顯，根據$("#itemEditForm").form(“load”,data);找到item-edit.jsp,發現這個form表單進行商品分類回顯（問題：回顯數字）
我們進行回顯操作的時候會發顯商品類目裡面回顯的是一個數字，能不能動态的擷取這個cid屬性
//根據id 動态擷取商品分類名稱
var cid=data.cid;
//通過ajax請求動态的擷取使用者資料
$.get("/itemCat/findItemCatById",{id:cid},function(data){
var name=data.name;
//如何将name屬性綁定到分類表格中
//.text("xxxx") 給标簽中的文本值指派 .val("xxxx") 給value指派
$("#itemeEditForm input[name='cid']").prev().text(name)
})
檢視網頁，發現沒有span這個标簽，說明這個标簽時ui給我們生成的，不需要我們寫，但是既然是架構渲染出來的，那麼我們怎麼改呢？我們總不能改源碼吧
頁面效果
2.2 商品更新操作
2.2.1 頁面分析
我們表單裡面的資料已經填充進彈出框了，那麼我們點選送出按鈕試一試，結果發現一些屬性和對應屬性值，這是怎麼回事呢，在我們item-edit.jsp 102行有一個彈出form表單資料的應用
将alert注釋，影響我們業務
2.2.2 頁面JS分析
2.2.3 編輯ItemController
/**
* 完成商品修改操作
* url位址：http://localhost:8091/item/update
* 參數： form 表單 Item對象
* 傳回值：SysResult
*/
@RequestMapping("/update")
public SysResult updateItem(Item item){
itemService.updateItem(item);
return SysResult.success();
}
2.2.4 編輯ItemService
@Transactional //标記方法使用事務控制
@Override
public void updateItem(Item item) {
itemMapper.updateById(item);
}
頁面展示
2.3 商品删除
2.3.1 頁面URL分析
2.3.2 頁面參數
2.3.3 頁面JS分析
2.3.4 編輯ItemController
/**
* 批量完成商品删除操作
* url位址：http://localhost:8091/item/delete
* 參數： ids=100,101,102
* 傳回值：SysResult對象
* 是以我們采用...
* ...是可變參數
* 它的實質就是一個數組
* 簡化操作：當我們參數采用，号分隔時，會自動轉化為數組
*/
@RequestMapping("/delete")
public SysResult deleteItems(Long... ids){
itemService.deleteItems(ids);
return SysResult.success();
}
2.3.4 編輯ItemService
/**
* sql:delete from tb_item where id in (xxx,xxxx,xxxxx...)
* @param ids
*/
@Override
@Transactional //标記方法使用事務控制
public void deleteItems(Long[] ids) {
itemMapper.deleteByIds(ids);
}