移動商城第八篇【添加商品之基本屬性和大字段數據（FCK文本編輯器）】

添加商品

修改對應的超連接url，controller轉發到對應的JSP頁面

<a href="${path}/item/toAddItem.do" class="btn80x20" title="添加商品">添加商品</a>

/** * 跳轉到添加商品頁面 * @return */
    @RequestMapping("/toAddItem.do")
    public String toAddItem() {

        return "item/addItem";
    }

咱們發現添加商品頁面是由4個選項卡組成：

基本信息

在基本信息的選項卡中，仍是須要咱們查詢全部的品牌數據，在頁面上給用戶選擇：

<select id="brandId" name="brandId">
    <option value="">請選擇</option>
    <c:forEach items="${ebBrands }" var="brand">
        <option value="${brand.brandId }">${brand.brandName }</option>
    </c:forEach>
</select>

上傳文件

咱們在添加品牌的時候已經作過了上傳文件的功能了，邏輯大體是同樣的，咱們拿過來修改一些東西便可!

在表單form標籤中，記得要使用如下的數據類型進行表單提交！

enctype="multipart/form-data"

修改對應的name名稱

 <p><label></label><input type='file' size='27' id='imgsFile' name='imgsFile' class="file" onchange='submitUpload()'/><span id="submitImgTip" class="pos">請上傳圖片寬爲120px，高爲50px，大小不超過100K。</span> <input type='hidden' id='imgs' name='imgs' value='' reg2="^.+$" tip="親！您忘記上傳圖片了。"/> <span></span> </p>

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，咱們是自增加的。*/
        <selectKey keyProperty="itemId" order="BEFORE" resultType="long">
            select seqitemid.nextval from dual
        </selectKey>

對於審覈狀態，默認設置爲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}
      )

大字段數據

咱們第二個選項卡的原型界面以下：

咱們須要用到另一張表：

所以咱們須要逆向工程對應的表：

<table schema="" tableName="EB_ITEM_CLOB" enableCountByExample="false"
            enableUpdateByExample="false" enableDeleteByExample="false"
            enableSelectByExample="false" selectByExampleQueryId="false"
        >

加載對應的映射文件：

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文件

<script type="text/javascript" src="<c:url value='/${system }/res/plugins/fckeditor/fckeditor.js'/>"></script>

建立出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值：

<textarea name="itemDesc" id="itemDesc"></textarea>

建立出處理uploadForFck.do的方法：

• 須要使用到工具類UploadResponse

@RequestMapping("/uploadForFck.do")
    public void uploadForFck(HttpServletRequest request, HttpServletResponse response) throws IOException {


        //把request轉換成複雜request
        MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
        //得到文件
        Map<String, MultipartFile> map = mr.getFileMap();
        Set<String> set = map.keySet();
        Iterator<String> it = set.iterator();
        String fileInputName = it.next();
        MultipartFile imgsFile = map.get(fileInputName);


        //上傳文件的名字是不能相同的，所以咱們設置一下文件的名稱
        String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
        Random random = new Random();
        for(int i = 0; i < 3; i++){
            fileName = fileName + random.nextInt(10);
        }
        //拿到該文件的原始名稱
        String originalFilename = imgsFile.getOriginalFilename();

        //獲取該文件的後綴
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));

        /*** * 絕對路徑是留給頁面src屬性作顯示的 * 相對路徑是保存在數據庫中，經過input來進行提交的。 */
        //得到上傳文件的絕對路徑
        String realPath = ResourcesUtils.readProp("file_path")+"/upload/"+fileName+suffix;
        //得到相對路徑
        String relativePath = "/upload/"+fileName+suffix;

        //建立jersy的客戶端
        Client client = Client.create();
        //建立web資源對象
        WebResource wr = client.resource(realPath);

        //拿到文件的二進制數據，使用web資源對象上傳
        byte[] bytes = imgsFile.getBytes();
        wr.put(bytes);

        /** * 在FCK中，咱們就再也不是使用JSON來返回了，咱們使用的是內部的對象 */
        UploadResponse ur = new UploadResponse(UploadResponse.EN_OK,realPath);
        response.getWriter().print(ur);

    }

在controller中使用EbItemClob對象，便可接收咱們的大字段數據!

@RequestMapping("/addItem.do")
        public void addItem(EbItem ebItem, EbItemClob ebItemClob) {

    }