老师救...

首页课程实战体系课手记专栏慕课教程

老师救...

来源：3-4 引入kaptcha实现验证码

qq_粽翎_0

2020-02-23 11:38:45

救命，加了验证码没有显示。。

还有想问一下，最下面图片的js路径，为啥只需要退一级目录就能获取到了？参照我这里的目录结构，shop_operation.html退一级目录不是到与html文件夹同级目录下么？求解，谢谢

写回答

14回答

好帮手慕柯南

2020-02-23

已采纳

同学你好！

老师使用你的代码是可以的。你可以直接在浏览器输入地址测试一下

比如：http://localhost:8080/o2o/kaptcha?66

你第一次加载页面时，图片可以出来吗？你是点击的时候出现的问题吗？如果是：你刷新一下页面重新测试一下。可能访问加载比较慢导致的

注意：是否有大小写不一致问题

祝学习愉快~

hq_粽翎_0

h 找到原因了，是lib文件夹下没有引入验证码的jar包。又有新问题了555，看回答区哦

h020-02-23

共1条回复

好帮手慕柯南

2020-02-25

同学你好！

老师这里测试没有复现你所说的现象。

建议你对最新的代码做以下检查：

验证码错误之后是否直接返回了
在浏览器的控制台看一下发送了几次请求。如果是两次可以是误操作
在后台打断点，跟踪一下数据，可能是调用了两次添加数据的代码

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

hq_粽翎_0

h 我学傻了老师，逻辑其实是正常的。麻烦老师了，谢谢

h020-02-25

共1条回复

好帮手慕柯南

2020-02-25

同学你好！

formData不是一个字符串，而是一个变量，所以建议你将上面的引号去掉

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

hq_粽翎_0

h 世纪难题！终于解决了，谢谢老师！不过有一点bug，不知道是不是代码逻辑引起的：第一次输入错误验证码，点击提交，会提示错误，数据不会写入数据库。然后页面不变，其他填写好的内容不动，只把错误的验证码改为正确的验证码，然后提交。成功，但是数据库写了两遍一模一样的数据，这又是啥世纪问题555

h020-02-25

共1条回复

qq_粽翎_0

提问者

2020-02-24

增加一些：

ajax这里URL，type，data这些都是未定义...

qq_粽翎_0

提问者

2020-02-24

前端传递的值是可以正常接收到的，那些分类和区域的下拉选项都能正常读出来，IDE的控制台没有打印如何错误信息

我打印了这个，获取不到值。程序跑到处理验证码那里判断为空，就直接在前端页面返回验证码不能为空的错误信息了

好帮手慕柯南

2020-02-24

同学你好！

你前端传递的数据是否正确
你在测试是区域和分类的数据是否有加载出来，如果没有可能会导致问题
idea以及浏览器的控制台是否报错了

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

hq_粽翎_0

h 老师看回答区哦

h020-02-24

共1条回复

好帮手慕柯南

2020-02-24

同学你好！

你的代码少写了@ResponseBody注解，建议你添加测试一下

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

hq_粽翎_0

h 添加了@ResponseBody前端返回提示了，现在的问题是前端数据提交后台接收不到，shopStr从request域获取是null，救..

h020-02-24

共1条回复

qq_粽翎_0

提问者

2020-02-24

@Controller("shopManagementController")
@RequestMapping("/shop_admin")
public class ShopManagementController {

    @Autowired
    private ShopService shopService;
    @Autowired
    private ShopCategoryService shopCategoryService;
    @Autowired
    private AreaService areaService;


    @RequestMapping("/shop_init")
    @ResponseBody
    private Map<String, Object> initShop() {
        Map<String, Object> modelMap = null;
        List<Area> areaList = null;
        List<ShopCategory> shopCategoryList = null;
        try {
            modelMap = new HashMap<>();
            areaList = areaService.getAllArea();
            shopCategoryList = shopCategoryService.getShopCategory(new ShopCategory());
            modelMap.put("areaList",areaList);
            modelMap.put("shopCategoryList",shopCategoryList);
            modelMap.put("success",true);
        } catch (Exception e) {
            modelMap.put("success",false);
            modelMap.put("msg", e.getMessage());
        }
        return modelMap;
    }

    @RequestMapping("/shop_register")
    private Map<String, Object> registerShop(HttpServletRequest request) {
        Map<String, Object> modelMap = new HashMap<>();
        //先处理验证码
        if (!VerifyCodeUtil.checkVerifyCode(request)) {
            modelMap.put("success", false);
            modelMap.put("msg", "验证码错误！");
            return modelMap;
        }
        //1.接收并转换相应参数，包括店铺信息和图片信息
        String shopStr = HttpServletRequestUtil.getString(request, "shopStr");
        ObjectMapper mapper = new ObjectMapper();
        Shop shop = null;
        try {
            shop = mapper.readValue(shopStr, Shop.class);   //将页面读取到的参数转换为shop实体类
        } catch (Exception e) {
            modelMap.put("success", false);
            modelMap.put("msg", e.getMessage());
            return modelMap;
        }
        CommonsMultipartFile shopImg = null;
        //定义文件上传解析器，去解析request里面的文件信息
        CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(
                request.getSession().getServletContext());
        //判断是否有上传的文件流
        if (commonsMultipartResolver.isMultipart(request)) {
            MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
            //通过指定参数获取文件流，并进行转换成spring能够处理的CommonsMultipartFile类型
            shopImg = (CommonsMultipartFile) multipartHttpServletRequest.getFile("shopImg");
        } else {
            modelMap.put("msg", "上传图片不能为空");
            return modelMap;
        }
        //2.注册店铺
        if (shopImg != null && shop != null) {
            User user = (User)request.getSession().getAttribute("user");
            shop.setUser(user);
            ShopExecution shopExecution = null;
            try {
                shopExecution = shopService.addShop(shopImg.getInputStream(), shopImg.getOriginalFilename(), shop);
                if (shopExecution.getStatus() == ShopStatusEnum.CHECK.getStatus()) {
                    modelMap.put("success", true);
                } else {
                    modelMap.put("success", false);
                    modelMap.put("msg", shopExecution.getStatusInfo());
                }
            } catch (IOException e) {
                modelMap.put("success", false);
                modelMap.put("msg", e.getMessage());
                return modelMap;
            }
            return modelMap;
        } else {
            modelMap.put("success", false);
            modelMap.put("msg", "请输入店铺信息");
            return modelMap;
        }
    }
}

qq_粽翎_0

提问者

2020-02-24

$(function () {
    var initUrl = '/o2o/shop_admin/shop_init';
    var registerShopUrl = '/o2o/shop_admin/shop_register';
    getShopInit();
    function getShopInit() {
        $.getJSON(initUrl,function (data) {
            if (data.success) {
                var tempHtml = '';
                var tempAreaHtml = '';
                data.shopCategoryList.map(function (item,index){
                    tempHtml += '<option data-id="'+ item.shopCategoryId + '">'
                    + item.shopCategoryName + '</option>';
                });
                data.areaList.map(function (item,index){
                    tempAreaHtml += '<option data-id="'+ item.areaId + '">'
                    + item.areaName + '</option>';
                });
                $('#shop-category').html(tempHtml);
                $('#shop-area').html(tempAreaHtml);
            }
        })
    }

    $('#submit').click(function () {
        var shop = {};
        shop.shopName = $('#shop-name').val();
        shop.shopAddr = $('#shop-addr').val();
        shop.phone = $('#shop-phone').val();
        shop.shopDesc = $('#shop-desc').val();
        shop.shopCategory = {
            shopCategoryId : $('#shop-category').find('option').not(function () {
                return !this.selected;
            }).data('id')
        };
        shop.area = {
            areaId : $('#shop-area').find('option').not(function () {
                return !this.selected;
            }).data('id')
        };
        var shopImg = $('#shop-img')[0].files[0];
        var formData = new FormData();
        formData.append('shopImg', shopImg);
        formData.append('shopStr', JSON.stringify(shop));
        var verifyCodeActual = $('#shop-kaptcha').val();
        if (!verifyCodeActual) {
            $.toast('请输入验证码！');
            return;
        }
        formData.append('verifyCodeActual', verifyCodeActual);
        $.ajax({
            url : registerShopUrl,
            type : 'POST',
            data : 'formData',
            contentType : false,
            processData : false,
            cache : false,
            success : function(data){
                if (data.success) {
                    $.toast('提交成功！');
                } else {
                    $.toast('提交失败！'+data.msg);
                }
                $('#kaptcha_img').click();
            }
        });
    });
});

好帮手慕柯南

2020-02-24

同学你好！

你这里时点击注册之后404吗？
这里是ajax请求，并且注册成功之后会跳转至商铺列表页面
你的为什么时到注册页面呢？另外根据你之前的目录结构，是找不到跳转的地址的？你是否做了一些修改呢？

关于无法贴代码的问题，我们会向相关的工作人员进行反馈~

同学现在可以贴代码吗？

祝学习愉快~

hq_粽翎_0

h 那些目录结构没有做修改，都没有动，老师还可以参照我之前的截图

h020-02-24

共3条回复

qq_粽翎_0

提问者

2020-02-23

点击右下角的错误连接：

而下面的提示是这样：

hq_粽翎_0

h 代码发不出去...

h020-02-24

共2条回复

qq_粽翎_0

提问者

2020-02-23

好了，新问题出来了，图片加载不出来，求救~

<!--验证码相关配置-->
<servlet>
    <servlet-name>kaptcha</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
    <!--是否有边框-->
    <init-param>
        <param-name>kaptcha.border</param-name>
        <param-value>no</param-value>
    </init-param>
    <!--图片宽度-->
    <init-param>
        <param-name>kaptcha.image.width</param-name>
        <param-value>135</param-value>
    </init-param>
    <!--图片高度-->
    <init-param>
        <param-name>kaptcha.image.height</param-name>
        <param-value>50</param-value>
    </init-param>
    <!--字体-->
    <init-param>
        <param-name>kaptcha.textproducer.font.names</param-name>
        <param-value>Arial</param-value>
    </init-param>
    <!--字体颜色-->
    <init-param>
        <param-name>kaptcha.textproducer.font.color</param-name>
        <param-value>red</param-value>
    </init-param>
    <!--字体大小-->
    <init-param>
        <param-name>kaptcha.textproducer.font.size</param-name>
        <param-value>43</param-value>
    </init-param>
    <!--干扰线颜色-->
    <init-param>
        <param-name>kaptcha.noise.color</param-name>
        <param-value>black</param-value>
    </init-param>
    <!--使用哪些字符生成验证码-->
    <init-param>
        <param-name>kaptcha.textproducer.char.string</param-name>
        <param-value>ACDGHLINRTXM23579</param-value>
    </init-param>
    <!--验证码字符个数-->
    <init-param>
        <param-name>kaptcha.textproducer.char.length</param-name>
        <param-value>4</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>kaptcha</servlet-name>
    <url-pattern>/kaptcha</url-pattern>
</servlet-mapping>