电商项目第五天

电商项目的相册的实现：

使用shop-generator生成商品相册pojo、mapper

修改shop-generator项目的配置文件、运行util工具类

第一步：生成商品相册（t_goods_images）、pojo、mapper

第二步：编辑ftl页面、修改后台代码

前端：

在goods.add.ftl:的上传商品图片中添加form表单

<form enctype="multipart/form-data">
    <!--文件上传成功的地址的隐藏域-->
    <input id="file-goods-category" class="file" name="file" type="file"
           data-min-file-count="1">
</form>

然后在下面添加

//---------------------------商品相册begin-------------------
/**
* 初始设置
*    language指定语言
*    uploadUrl指定文件上传的后台地址
*    allowedPreviewTypes允许上传文件的类型
*/
$('#file-goods-images').fileinput({
    language: 'zh',
    uploadUrl: '${ctx}/goods/images/save',
    allowedPreviewTypes: ['image', 'html', 'text', 'video', 'audio', 'flash'],
    //文件上传插件提交额外参数
    uploadExtraData: function () {
        var goodsId = {"goodsId": $("#goodsId").val()};
        return goodsId;
    }
});
/**
* 上传文件失败后 调用方法（回调函数）
*/
$('#file-goods-images').on('fileuploaderror', function (event, data, previewId, index) {
    var form = data.form,
        files = data.files,
        extra = data.extra,
        response = data.response,
        reader = data.reader;
    console.log(data);
    console.log('File upload error');
});
/**
* 文件错误 比如文件类型错误 调用方法（回调函数）
*/
$('#file-goods-images').on('fileerror', function (event, data) {
    console.log(data.id);
    console.log(data.index);
    console.log(data.file);
    console.log(data.reader);
    console.log(data.files);
});
/**
* 文件上传成功后 调用方法（回调函数）
*/
$('#file-goods-images').on('fileuploaded', function (event, data, previewId, index) {
    var form = data.form,
        files = data.files,
        extra = data.extra,
        response = data.response,
        reader = data.reader;
    console.log('File uploaded triggered');
});


//---------------------------商品相册end------------------------

后端：

IGoodsImagesService.java:服务层：

public interface IGoodsImagesService {
    public BaseResult saveGoodsImages(GoodsImages goodsImages);
}

IGoodsImagesServiceImpl.java：实现类

@Service
@SuppressWarnings("all")
public class GoodsImagesServiceImpl implements IGoodsImagesService {
    @Autowired
    private GoodsImagesMapper goodsImagesMapper;

@Override
public BaseResult saveGoodsImages(GoodsImages goodsImages) {
    int result = goodsImagesMapper.insertSelective(goodsImages);
    return result > 0 ? BaseResult.success() : BaseResult.error();
}

Controller:控制层

GoodsController.java

//保存商品相册
@RequestMapping("images/save")
@ResponseBody
public FileResult saveGoodsImages(@RequestParam(name = "file") MultipartFile file, Integer goodsId) {
    //先判断是否为空
    FileResult fielResult = new FileResult();
    if (file.isEmpty()) {
        fielResult.setError("文件内容不能为空");
        return fielResult;
    }
    try {
        String fileName = file.getOriginalFilename();
        fileName = new SimpleDateFormat("yyy/MM/dd").format(new Date())
                + "/" + System.currentTimeMillis()
                + fileName.substring(fileName.lastIndexOf("."));
        fielResult = uploadService.uploadFile(file.getInputStream(), fileName);
        goodsImagesService.saveGoodsImages(new GoodsImages(goodsId, fielResult.getFileUrl()));
    } catch (Exception e) {
        e.printStackTrace();
        fielResult.setError(e.getMessage());
    }
    return fielResult;
}

第三步：ftl页面逻辑处理

goods-add.ftl：商品详情中

<ul class="nav nav-tabs">
                  <li class="active"><a href="#tab_tongyong" data-toggle="tab">通用信息</a></li>
<!-- <li><a href="#tab_goods_desc" data-toggle="tab">描述信息</a></li>-->
                  <!--添加一个检查方式，保存了才能上传相册-->
                  <li><a href="#tab_goods_images" data-toggle="tab" onclick="checkHasGoods();">商品相册</a></li>
                  <li><a href="#tab_goods_spec" data-toggle="tab">商品模型</a></li>                       
                  <li><a href="#tab_goods_shipping" data-toggle="tab">商品物流</a></li>
              </ul>

商品的通用消息中

function checkHasGoods() {
if (!$("#goodsId").val()){
layer.msg("请先保存商品【通用信息】");
$("#file-goods-images").attr("disabled", true);
}else {
$("#file-goods-images").attr("disabled", false);
}
}

第四步：myFormValidate.js

/**
* ajax 提交表单 到后台去验证然后回到前台提示错误
* 验证通过后,再通过 form 自动提交
* form_id:表单id
* submit_url:提交的url
* add_url:继续新增的url
* list_url:返回列表的url
* hiddenId:隐藏域id
*/
//现在是公共的提交方式
before_request = 1; // 标识上一次ajax 请求有没回来, 没有回来不再进行下一次
function ajax_submit_form(form_id, submit_url, add_url, list_url) {
    if (before_request == 0)
        return false;
    $.ajax({
        type: "POST",
        url: submit_url,
        data: $('#' + form_id).serialize(),// 你的formid
        dataType: "JSON",
        error: function (request) {
            alert("服务器繁忙, 请联系管理员!");
        },
        success: function (result) {
            before_request = 1; // 标识ajax 请求已经返回
            console.log(result)
            if (200 == result.code) {
                //设置商品id
                $("#goodsId").val(result.result);
//这个下面的注释是因为防止点击保存后弄得界面的灰色的
                // layer.confirm("保存成功",
                //     {
                //         btn: ['继续新增', '返回列表', '留在本页'],
                //         btn3: function (index) {
                //             layer.close(index);
                //         }
                //     },
                //     function () {
                //         window.location.href = add_url;
                //     }, function () {
                //         window.location.href = list_url;
                //     });
                alert("商品添加成功!");
            } else {
               // layer.alert(result.message);
                alert("");
            }
        }
    });
    before_request = 0; // 标识ajax 请求已经发出
}


/**
* 在ajax 返回提示错误时， 输入框改变时提示 将隐藏
*/
$(document).ready(function(){
   /*
   $("input").click(function(){               
       var input_name = $(this).attr("name");
      //$("#err_"+input_name).hide();
   });
   $("textarea").click(function(){
       var input_name = $(this).attr("name");
      //$("#err_"+input_name).hide();
   });
   */


});




/**
*  Ajax通用提交表单
*  @var  form表单的id属性值  form_id
*  @var  提交地址 subbmit_url
*/


function post_form(form_id,subbmit_url){
    if(form_id == ''){
        alert('缺少必要参数');
        return false;
    }
    if(!subbmit_url){
        //  默认取当前地址  加上ajax请求标示
        subbmit_url = location.href + '/is_ajax/1';
    }
    //  序列化表单值
    var data = $('#'+form_id).serialize();


    $.post(subbmit_url,data,function(result){
        var obj = $.parseJSON(result);
        if(obj.status == 0){
            //alert(obj.msg);
            return false;
        }
        if(obj.status == 1){
            //alert(obj.msg);
            if(obj.data.return_url){
                //  返回跳转链接
                location.href = obj.data.return_url;
            }else{
                //  刷新页面
                location.reload();
            }
            return;
        }
    })
}




/**
*  伪静态HTML处理
*  @var  网址  url
*/
function convert_url(url){
   if(url){
       url = url.replace('.html','');
   }
    return url;
}


      // 输入框失去焦点 ajax 保存
//    $('input[name^="field_"]').on('blur', function () {
   function ajaxUpdateField(obj){
          var table = $(obj).data('table');
          var id = $(obj).data('id');
          var field = $(obj).attr('name').replace(/field_/ig,""); // 字段名字
          var value = $(obj).val();
          $.ajax({
             type:'POST',
             data:{table:table,id:id, field:field,value:value},
             url:"/admin/Goods/updateField",
             success:function(data){
                    layer.msg('修改成功', {icon: 1,time:1000});
             }
          });
   }
   // });