移动商城第四篇【Controller配置、添加品牌之文件上传和数据校验】

时间 2019-11-21

标签移动商城第四 controller 配置添加品牌文件上传数据校验栏目无线繁體版

原文原文链接

Controller层配置

编写SpringMVC的配置文件javascript

springmvc.xmlhtml

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd "> <context:component-scan base-package="com.rl.ecps.controller"/> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/shop/"></property> <property name="suffix" value=".jsp"></property> </bean> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="1024000"></property> </bean> </beans>

添加品牌

在原型界面上，咱们都是一些“死”数据，咱们须要将数据库的记录代替这些“死”数据！前端

上传图片

服务端console对图片进行上传到咱们的图片服务器上，而portal则访问的时候从图片服务器拿到图片…
java

在前面，咱们已经搭建了图片服务器了，那咱们怎么将console要上传的图片“丢给”图片服务器呢？？？web

上传图片时使用Jersey 客户端 API 调用 REST 风格的 Web 服务, Jersey 1 是一个开源的、能够用于生产环境的 JAX-RS（RESTful Web Services 的 Java API 规范，JSR-311）实现。经过 Jersey 能够很方便的使用 Java 来建立一个 RESTful Web Services。ajax

配置文件上传解析器：spring

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="1024000"></property>
    </bean>

咱们是上传到图片服务器上的，所以须要咱们本身配置对应的路径….而这个配置文件应该是写在core的，由于它颇有多是会被重用的。数据库

值得注意的是：文件服务器要设置成可写的【默认是只读的】json

参考以下博文：
http://blog.csdn.net/hon_3y/article/details/77840532spring-mvc

编写工具类来获取对应的数据

public class ResourcesUtils {
    public static String readProp(String key) {
        InputStream in = ResourcesUtils.class.getClassLoader().getResourceAsStream("system.properties");
        Properties prop = new Properties();
        try {
            prop.load(in);
        } catch (IOException e) {
            e.printStackTrace();
        }

        return prop.getProperty(key);
    }

}

编写处理文件上传的Controller

若是有多个文件的话或者咱们不知道上传的input的name，咱们可使用request对象来获取Map，再来获取对应的文件

//把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 mf = map.get(fileInputName);

而咱们如今是知道input的name的，所以，这里我就直接使用MultipartFile对象来获取了。

@Controller
@RequestMapping("/upload")
public class UploadEbBrandPicController {
    @RequestMapping("/uploadPic.do")
    public void uploadPic(@RequestParam MultipartFile imgsFile, Writer writer) throws IOException {

        //上传文件的名字是不能相同的，所以咱们设置一下文件的名称
        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);

        //使用JSON格式把咱们的绝对路径和相对路径返回出去。
        JSONObject jo = new JSONObject();
        jo.accumulate("realPath", realPath);
        jo.accumulate("relativePath", relativePath);
        String result = jo.toString();
        writer.write(result);
    }
}

在前端咱们是使用ajax进行异步上传文件的，当图片选项修改时，咱们就触发事件把图片上传到咱们的图片服务器上了，。

function submitUpload(){
            var opt = {
                //从新指定form的action的值
                url:"${path}/upload/uploadPic.do",
                type:"post",
                dateType:"json",
                success:function(responseText){
                    //解决多余的字符串数据致使没法解析JSON的问题【另外的博文有写】
                    var jsonObj = $.parseJSON(responseText.replace(/<.*?>/ig,""));
                    $("#imgsImgSrc").attr("src",jsonObj.realPath);
                    $("#imgs").val(jsonObj.relativePath);
                },
                error:function(){
                    alert("系统错误");
                }
            };
            $("#form111").ajaxSubmit(opt);
        }

成功把图片上传到图片服务器中了

数据校验

添加商品的界面是这样子的，须要咱们进行校验

而校验咱们有两种方式：

前台使用JS校验
后台再进行校验

咱们是这样作的：在输入框中自定义了几个属性：reg2表示必定要校验的，reg1表示可校验可不校验。若是reg1有数据的话，那么也要校验

<div class="edit set">
            <p><label><samp>*</samp>品牌名称：</label><input type="text" id="brandName" name="brandName" class="text state" reg2="^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$" tip="必须是中英文或数字字符，长度1-20"/>
                <span></span>
            </p>
            <p><label class="alg_t"><samp>*</samp>品牌LOGO：</label><img id='imgsImgSrc' src="" height="100" width="100" />
            </p>
             <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="亲！您忘记上传图片了。" />
            </p> 

            <p><label>品牌网址：</label><input type="text" name="website" class="text state" maxlength="100" tip="请以http://开头" reg1="http:///*"/>
                <span class="pos">&nbsp;</span>
            </p>
            <p><label class="alg_t">品牌描述：</label><textarea rows="4" cols="45" name="brandDesc" class="are" reg1="^(.|\n){0,300}$" tip="任意字符，长度0-300"></textarea>
                <span class="pos">&nbsp;</span>
            </p>
            <p><label>排序：</label><input type="text" id="brandSort" reg1="^[1-9][0-9]{0,2}$" tip="排序只能输入1-3位数的正整数" name="brandSort" class="text small"/>
                <span class="pos">&nbsp;</span>
            </p>
            <p><label>&nbsp;</label><input type="submit" name="button1" d class="hand btn83x23" value="完成" /><input type="button" class="hand btn83x23b" id="reset1" value='取消' onclick="backList('${backurl}')"/>
            </p>
        </div>

首先，咱们先来写前台的校验…

当该表单提交的时候，咱们就对表单的数据进行校验

检测每一个必填的input输入框数据，若是每一个必填的输入框数据都符合内容，那么检测品牌的名字是否重复！

$(function () {
            $("#form111").submit(function () {
                /*设置标识量为true，若是不校验不经过设置为false*/
                var isSubmit = true;
                /*获得每一个必填的input输入框数据*/
                $("[reg2]").each(function () {
                    var tip = $(this).attr("tip");
                    var regStr = $(this).attr("reg2");
                    /*拿到js校验的对象*/
                    var reg = new RegExp(regStr);
                    var value = $.trim($(this).val());

                    /*校验输入的值与校验规则是否匹配*/
                    if (!reg.test(value)) {
                        /*把错误的信息填充到span中*/
                        $(this).next("span").html("<font color='red'>" + tip + "</font>");
                        isSubmit = false;
                        //中断each使用return false,不能使用return;和break;
                        return false;
                    } else {
                        //必填的数据规则都经过了，那么判断品牌名字是否有重复的【后台校验】
                        var inputName = $(this).attr("name");
                        if (inputName == "brandName") {
                            $.ajax({
                                url: "${path}/brand/validateBrandName.do",
                                type:"post",
                                async:false,
                                data:{
                                    brandName:value
                                },
                                dataType:"text",
                                success: function (responseTest) {
                                    if (responseTest == "no") {
                                        $("#brandNameSpan").html("品牌的名称不能相同！!");
                                        isSubmit = false;
                                        return false;
                                    }else{
                                        $(this).next("span").html("");
                                    }
                                },
                                error: function () {
                                    alert("系统错误");
                                }
                            });
                        }
                    }
                });

                return isSubmit;
            });
        });

检测名字是否相同的controller方法

@RequestMapping("/validateBrandName.do")
    public void validateBrandName(String brandName, Writer out) throws IOException {

        //表示成功
        String responseTest = "yes";

        //根据名字去查找数据库
        List<EbBrand> brands = ebBrandService.selectBrandByName(brandName);
        //若是返回的集合有Brand了，那么就证实数据库有相同的品牌了
        if (brands != null && brands.size() > 0) {
            responseTest = "no";
        }

        out.write(responseTest);

    }

若是品牌名称相同，那么不容许提交！

对于非必填的数据项，若是用户填了数据的话，那么就必须按照咱们的规则来写

/*非必填的数据，若是填了就必须按照规则*/
                $("[reg1]").each(function () {
                    var tip = $(this).attr("tip");
                    var regStr = $(this).attr("reg1");
                    /*拿到js校验的对象*/
                    var reg = new RegExp(regStr);
                    var value = $.trim($(this).val());

                   /*若是用户填了数据，那么就须要按照规则*/
                   if(value!=null && value!="") {
                       if (!reg.test(value)) {
                           /*把错误的信息填充到span中*/
                           $(this).next("span").html("<font color='red'>" + tip + "</font>");
                           isSubmit = false;
                           //中断each使用return false,不能使用return;和break;
                           return false;
                       }else{
                           //若是改正了，那么就把对应的错误提示清空了。
                           $(this).next("span").html("");
                       }
                   }
                });

为了达到更好的用户体验，咱们应该在光标焦点离开的时候就进行一次校验！

逻辑和上边是同样的，只不过咱们使用的是blur方法，而在表单验证的时候使用的是each遍历每个输入框罢了。

//光标失去焦点的校验
            $("#form111").find("[reg2]").blur(function () {
                var tip = $(this).attr("tip");
                var regStr = $(this).attr("reg2");
                /*拿到js校验的对象*/
                var reg = new RegExp(regStr);
                var value = $.trim($(this).val());

                /*校验输入的值与校验规则是否匹配*/
                if (!reg.test(value)) {
                    /*把错误的信息填充到span中*/
                    $(this).next("span").html("<font color='red'>" + tip + "</font>");
                } else {
                    //必填的数据规则都经过了，那么判断品牌名字是否有重复的【后台校验】
                    var inputName = $(this).attr("name");
                    if (inputName == "brandName") {
                        $.ajax({
                            url: "${path}/brand/validateBrandName.do",
                            type: "post",
                            async: false,
                            data: {
                                brandName: value
                            },
                            dataType: "text",
                            success: function (responseTest) {
                                if (responseTest == "no") {
                                    $("#brandNameSpan").html("品牌的名称不能相同！!");
                                } else {
                                    //若是改正了，那么就把对应的错误提示清空了。
                                    $(this).next("span").html("");
                                }
                            },
                            error: function () {
                                alert("系统错误");
                            }
                        });
                    }
                }
            });

            //失去焦点校验
            $("#form111").find("[reg1]").blur(function () {
                var tip = $(this).attr("tip");
                var regStr = $(this).attr("reg1");
                /*拿到js校验的对象*/
                var reg = new RegExp(regStr);
                var value = $.trim($(this).val());
                /*若是用户填了数据，那么就须要按照规则*/
                if (value != null && value != "") {
                    if (!reg.test(value)) {
                        /*把错误的信息填充到span中*/
                        $(this).next("span").html("<font color='red'>" + tip + "</font>");
                    } else {
                        //若是改正了，那么就把对应的错误提示清空了。
                        $(this).next("span").html("");
                    }
                }
            });