• 移动商城第八篇【添加商品之基本属性和大字段数据(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) {
    
        }

  • 相关阅读:
    基于ARM的指纹采集仪的设计与实现
    基于单片机和CPLD的数字频率计的设计
    转来的
    单片机式语音播报伏特表
    汽车驾驶模拟器单片机系统设计
    基于AT89C51的智能矿井环境质量监控系统
    我的理解OpenAPI原理
    关联规则中的支持度与置信度
    LVS-NAT实现负载均衡
    在IIS上部署Analysis Services
  • 原文地址:https://www.cnblogs.com/zhong-fucheng/p/7554327.html
Copyright © 2020-2023  润新知