移动商城第八篇【添加商品之基本属性和大字段数据（FCK文本编辑器）】

川长思鸟来 2021-09-17 07:40 220阅读 0赞

# 添加商品 #

修改对应的超链接url，controller转发到对应的JSP页面

/** * 跳转到添加商品页面 * @return */
        @RequestMapping("/toAddItem.do")
        public String toAddItem() {
    
            return "item/addItem";
        }

我们发现添加商品页面是由4个选项卡组成：

![这里写图片描述][SouthEast]

## 基本信息 ##

在基本信息的选项卡中，还是需要我们查询所有的品牌数据，在页面上给用户选择：

<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代码：

![这里写图片描述][SouthEast 1]

### **添加基本属性测试** ###

到目前位置，我们的Controller可以拿到Item页面全部的基本属性：

![这里写图片描述][SouthEast 2]

![这里写图片描述][SouthEast 3]

### **商品基本属性中的隐藏属性** ###

**商品的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}
          )

## 大字段数据 ##

我们第二个选项卡的原型界面如下：

![这里写图片描述][SouthEast 4]

我们需要用到另外一张表：

![这里写图片描述][SouthEast 5]

因此我们需要逆向工程对应的表：

加载对应的映射文件：

![这里写图片描述][SouthEast 6]

### **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目录下。

![这里写图片描述][SouthEast 7]

引入核心的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值：

创建出处理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);
    
        }

![这里写图片描述][SouthEast 8]

![这里写图片描述][SouthEast 9]

在controller中使用EbItemClob对象，即可接收我们的大字段数据!

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

--------------------

[SouthEast]: /images/20210827/0542ff304ed34a28b0c1ec545f35c636.png
[SouthEast 1]: /images/20210827/debf3cf8e3cc4c17a0e3d9e65785f08b.png
[SouthEast 2]: /images/20210827/442ad681cd3a443cbbf6b4bb699ff17c.png
[SouthEast 3]: /images/20210827/a7a40d8abddc47ebb39e6788596584ec.png
[SouthEast 4]: /images/20210827/1ff382550d654eb0a1778a6393b689df.png
[SouthEast 5]: /images/20210827/a46886791d594cbca0cfe8f9ffb8febd.png
[SouthEast 6]: /images/20210827/3f14dfdd7f564134a308140a2d6a08a3.png
[SouthEast 7]: /images/20210827/77edeb18aa2b4f07b642fc1928a74b1c.png
[SouthEast 8]: /images/20210827/1a95d4964c324c9ba4e49642477ab66f.png
[SouthEast 9]: /images/20210827/97c3fa6b699640369d2f067add7ed4b7.png