移動商城第三篇(商品管理)【查詢商品、新增商品】

gamebus發表於2021-09-09

tags: 移動商城專案


我們發現頁面是這樣子的。

圖片描述

我們可以從原型介面上知道:使用者可以根據多個條件來對我們的資料進行篩選,並且我們是需要做分頁的

搜尋:

到目前為止,我們4個查詢條件可以都使用了。接下來就是我們的資料回顯了。

為什麼要資料回顯??我們一旦使用了條件查詢,跳轉到對應的controller時,返回的頁面的查詢條件就沒有了,這是不合理的。因此我們要對條件查詢進行回顯

品牌回顯:只要查詢條件的值等於品牌對應的值,那麼我們就選中!


        

稽核條件回顯:只要查詢條件的值等於稽核條件的值,那麼就選中!


    

模糊查詢回顯:


上架狀態條件回顯:

上架狀態的條件並不是透過表單來提交的,而是直接使用超連結定位的。


        
        
        

當我們店家未上架商品的時候,我們的樣式應該是會改變到here屬性上的。因此,我們想要上架狀態條件回顯,首先得獲取到對應的值

        
         

使用jquery程式碼進行控制樣式


        $(function () {
            var showStatusVal =  $("#showStatus").val();
            if(showStatusVal=='0') {
                $("#label5").attr("class", "here");
            }else if(showStatusVal=='1') {
                $("#label4").attr("class", "here");
            }else {
                $("#label6").attr("class", "here");
            }
        });

我們也可以使用Jquery程式碼來對分頁進行頁面的邏輯控制


            //得到當前頁數,總頁數
            var pageNoVal = parseInt($("#currentPageNo").val());//1,2
            var totalPageVal = parseInt($("#totalPage").val());

            //上一頁和下一頁都不顯示的條件
            if (pageNoVal ==1 && pageNoVal==totalPageVal ) {
                $("#previous").hide();
                $("#next").hide();
            }//顯示下一頁,不顯示上一頁的條件
            else if (pageNoVal == 1 && pageNoVal  1 && pageNoVal  1 && pageNoVal==totalPageVal) {
                $("#next").hide();
                $("#previous").show();
            }

            //按鈕點選事件
            $("#next").click(function () {

                //將當前頁數+1,設定到我們的隱藏域中
                pageNoVal++;//2
                $("#pageNo").val(pageNoVal);//2

                //提交表單
                $("#form1").submit();
            });

            $("#previous").click(function () {
                //將當前頁數+1,設定到我們的隱藏域中
                pageNoVal--;
                $("#pageNo").val(pageNoVal);

                //提交表單
                $("#form1").submit();
            });

需要值得注意的是:我們在input標籤上多了一行這麼一段程式碼:


    

那為什麼我們要使用currentPageNo這麼一行程式碼呢???而我們的Jquery程式碼也是拿currentPageNo它的值作為我們頁面跳轉

如果沒有這行程式碼,直接使用PageNo會怎麼樣呢??

解釋:

其實我們的頁面跳轉也是需要根據查詢條件的結果來進行跳轉的

  • 如果我們查詢了所有資料,我們跳轉到第7頁,再設定條件為“三星”,如果直接使用PageNo的話,那麼系統就會去找“三星”的第七頁資料,顯然,這是不合理的,當我們設定了查詢條件時,應該跳轉到的是“三星”的第一頁資料!
  • 歸終到底,currentPageNo它就是根據我們當前條件來進行跳轉如果查詢條件修改了,那麼PageNo預設的值是為1的(因為透過隱藏域帶過去的資料一直都是0)
    /**
     * 跳轉到新增商品頁面
     * @return
     */
    @RequestMapping("/toAddItem.do")
    public String toAddItem() {

        return "item/addItem";
    }

我們發現新增商品頁面是由4個選項卡組成:

圖片描述

基本資訊

在基本資訊的選項卡中,還是需要我們查詢所有的品牌資料,在頁面上給使用者選擇:


上傳檔案

我們在新增品牌的時候已經做過了上傳檔案的功能了,邏輯大致是一樣的,我們拿過來修改一些東西即可!

在表單form標籤中,記得要使用以下的資料型別進行表單提交!


  enctype="multipart/form-data" 

修改對應的name名稱


                

請上傳圖片寬為120px,高為50px,大小不超過100K。

Jquery程式碼:


  function submitUpload() {
            var opt = {
                //重新指定form的action的值
                url: "${path}/upload/uploadPic.do",
                type: "post",
                dateType: "json",
                success: function (responseText) {
                    var jsonObj = $.parseJSON(responseText.replace(/<.>/ig, ""));
                    $("#imgsImgSrc").attr("src", jsonObj.realPath);
                    $("#imgs").val(jsonObj.relativePath);
                },
                error: function () {
                    alert("系統錯誤");
                }
            };
            $("#form111").ajaxSubmit(opt);
        }

圖片描述

新增基本屬性測試

到目前位置,我們的Controller可以拿到Item頁面全部的基本屬性:

圖片描述

圖片描述

商品基本屬性中的隱藏屬性

商品的id是使用oracle中的序列進行自動增長

        /*對於商品的id,我們是自增長的。*/
        
            select seqitemid.nextval from dual
        

對於稽核狀態,預設設定為0【待稽核】
對於上架狀態,預設設定為1【下架】
對於銷售量,預設設定為0【並沒有人購買】

在Mapper中把對應的屬性設定預設值


(#{itemId,jdbcType=DECIMAL}, #{itemName,jdbcType=VARCHAR}, #{itemNo,jdbcType=VARCHAR}, 
      #{brandId,jdbcType=DECIMAL}, #{catId,jdbcType=DECIMAL}, #{tagImgId,jdbcType=DECIMAL}, 
      #{tagImg,jdbcType=DECIMAL}, #{isNew,jdbcType=DECIMAL}, #{isGood,jdbcType=DECIMAL}, 
      #{isHot,jdbcType=DECIMAL}, #{promotion,jdbcType=VARCHAR}, 0, 
      1, #{imgs,jdbcType=VARCHAR}, #{keywords,jdbcType=VARCHAR}, 
      #{pageDesc,jdbcType=VARCHAR}, #{itemRecycle,jdbcType=DECIMAL}, #{onSaleTime,jdbcType=TIMESTAMP}, 
      #{checkTime,jdbcType=TIMESTAMP}, #{updateTime,jdbcType=TIMESTAMP}, #{updateUserId,jdbcType=DECIMAL}, 
      sysdate, #{checkerUserId,jdbcType=DECIMAL}, #{fullPathDeploy,jdbcType=VARCHAR}, 
      #{fullPathDeployOffer,jdbcType=VARCHAR}, #{originalItemId,jdbcType=DECIMAL}, #{lastStatus,jdbcType=DECIMAL}, 
      #{merchantId,jdbcType=DECIMAL}, #{itemSort,jdbcType=DECIMAL}, 0, 
      #{createUserId,jdbcType=DECIMAL}, #{simLevel,jdbcType=DECIMAL}, #{giftDesc,jdbcType=VARCHAR}, 
      #{giftImg,jdbcType=VARCHAR}, #{giftShowType,jdbcType=VARCHAR}, #{imgSize1,jdbcType=VARCHAR}
      )
大欄位資料

我們第二個選項卡的原型介面如下:

圖片描述

我們需要用到另外一張表:

圖片描述

因此我們需要逆向工程對應的表:


    

載入對應的對映檔案:

圖片描述

Dao層

id是EbItemClob無法從頁面上獲取的,因此我們需要傳遞進去。

@Repository
public class EbItemClobDaoImpl extends SqlSessionDaoSupport implements EbItemClobDao {
    String nameSpace = "com.rl.ecps.sqlMap.sqlMap.EbItemClobMapper.";
    public void saveItemClob(EbItemClob ebItemClob, Long itemId) {
        ebItemClob.setItemId(itemId);
        this.getSqlSession().insert(nameSpace + "insert", ebItemClob);
    }
}

fckEditor文字編輯器

其實就是一個文字域,而該文字域是能帶有格式的。以前我們使用過“富文字編輯器”就是這麼的一種,這次我們使用fckEditor文字編輯器

首先,把我們的下載下來的文件加入到web目錄下。

圖片描述

引入核心的JS檔案


建立出FCK物件,設定相關屬性:


            var fck = new FCKeditor("itemDesc");
            fck.BasePath = "${path}/ecps/console/res/plugins/fckeditor/";
            fck.Config["ImageUploadURL"] = "${path}/upload/uploadForFck.do?typeStr=Image";
            fck.Height = 400;
            fck.ToolbarSet = "Default";
            fck.ReplaceTextarea();

itemDesc就是我們文件域的id值:


 

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4687/viewspace-2800097/,如需轉載,請註明出處,否則將追究法律責任。

相關文章