解决spring mvc跨域的问题

java开发网站是很繁琐的事情,特别是写前端,每次运行都需要进行编译,所以需要配置跨域访问:

服务端

首先要创建一个CrossDomainFilter类,类继承了Servlet Filter接口,如下代码:

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by alan.luo on 2017/9/5.
 */
public class CrossDomainFilter extends Compact implements Filter {


    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {

        try {
            HttpServletRequest httpRequest = (HttpServletRequest) request;
            HttpServletResponse httpResponse = (HttpServletResponse) response;

            // 跨域
            String origin = httpRequest.getHeader("Origin");
            if (origin == null) {
                httpResponse.addHeader("Access-Control-Allow-Origin", "http://localhost/");

            } else {
                httpResponse.addHeader("Access-Control-Allow-Origin", origin);
            }
            httpResponse.addHeader("Access-Control-Allow-Headers", "Origin, x-requested-with, Content-Type, Accept,X-Cookie");
            httpResponse.addHeader("Access-Control-Allow-Credentials", "true");
            httpResponse.addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS,DELETE");
            if ( httpRequest.getMethod().equals("OPTIONS") ) {
                httpResponse.setStatus(HttpServletResponse.SC_OK);
                return;
            }
            filterChain.doFilter(request, response);
        } catch (Exception e) {
            e.printStackTrace();
            throw e;
        }
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void destroy() {
    }
}

类方法主要是配置response的响应信息,告诉客户端,可以传递什么及使用什么方法过来。

接下来就是配置xml文件,打开web.xml文件,在过滤代码中加入以下代码:

<!-- 允许跨域 -->
<filter>
    <filter-name>CrossDomainFilter</filter-name>
    <filter-class>com.test.com.CrossDomainFilter</filter-class>
    <init-param>
        <param-name>targetFilterLifecycle</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CrossDomainFilter</filter-name>
    <url-pattern>/*</url-pattern><!-- 配置允许跨域访问的的url-pattern -->
</filter-mapping>

到这里服务器就已经配置完毕了。

客户端

客户端直接使用ajax发起请求就可以:

  /**
   * 发起ajax请求
   * @param url 请求地址
   * @param data 请求参数(object)对象
   * @param fnScuss 成功回调的函数
   * @param fnError 失败回调的函数
   * @returns {{get: get, post: post}}
   */
  ajax: function (url, data, fnScuss, fnError) {
      
      var _cacheKey = app.md5(url+JSON.stringify(data));
      var _cache = null;
      var _isCanCache = app.isCanCache(url);
      url = this.constant.DOMAIN + url;

      var http = function (method,header) {
          if (method == null){
              method = "POST";
          }
          if(header == null){
              header = new Object();
          }
     
          $.ajax({
              url: url,
              data: data,
              dataType: "json",
              type: method,
              headers: header,
      beforeSend: function(xhr) {
         xhr.withCredentials = true;
      },
      crossDomain:true,
              success: function (e) {

                  if (typeof fnScuss == "function") {
                      //储存缓存
                      if (e.code == "1" && _isCanCache == true){
                          //app.cache.set(_cacheKey,e)
                      }
                      fnScuss(e);
                  }
              },
              error: function (e) {
                  if (typeof fnError == "function") {
                      fnError(e);
                  }
              }

          })
      };

      return {
          get: function () {
              //缓存判断
              if (_isCanCache == true){
                  _cache = app.cache.get(_cacheKey)
                  if (_cache != null && typeof fnScuss == "function"){
                      fnScuss(_cache);
                      return true;
                  }
              }

              http("GET");
          },
          post: function (isJson) {
              //缓存判断
              if (_isCanCache == true){
                  _cache = app.cache.get(_cacheKey)
                  if (_cache != null && typeof fnScuss == "function"){
                      fnScuss(_cache);
                      return true;
                  }
              }
              var header = new Object();
              if (isJson == true){
                  header['Content-Type'] = "application/json";
              }
              http("POST",header);
          },
          delete:function () {
              http("DELETE");
          },
          put:function () {
              http("PUT");
          }
      }

  },

 

app.event("#getToken", "click", function () {
    app.ajax("/project/api/getToken", {type:"1"}, function (e) {
        app.log(e);
        if (e.code == 1) {
            
        }
    }).post();
});

java web原始的图片上传示例

1.表单上传;

先获取到part对象,然后在通过part对象读取输入流(inputStream),最后把文件写到特定的目录上即可;

表单上传的前端代码:

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    resp.setContentType("text/html");
    resp.setCharacterEncoding("utf-8");
    resp.getWriter()
            .append("<html>")
            .append("<head>")
            .append("</head>")
            .append("<body>")
            .append("<h1>")
            .append("文件上传示例")
            .append("</h1>")
            .append("<div style='padding: 20px;width: 300px;box-shadow: 0 0 10px #999;'>" +
                    "<form action='/' method='post' enctype='multipart/form-data'>")
            .append("<p><input type='file' name='file' value=\"\"></p>")
            .append("<p><input type='submit' value='提交'></p>")
            .append("</form></div>")
            .append("</body>")
            .append("</html>");

}

表单上传的后台处理代码:

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    resp.setContentType("application/json");
    resp.setCharacterEncoding("utf-8");

    Part part = req.getPart("file");

    String file = "{";
    file += "\"name\":\"" + part.getName()+"\",\n";
    file += "\"contentType\":\"" + part.getContentType()+"\",\n";
    file += "\"size\":\""+part.getSize()+"\",\n";
    file += "\"url\":\"/upload/"+part.getSubmittedFileName()+"\",\n";
    file += "\"submitFileName\":\""+part.getSubmittedFileName()+"\"}";

    BufferedInputStream bufferedInputStream = new BufferedInputStream(part.getInputStream());
    FileOutputStream outputStream = new FileOutputStream("d:/tmp/"+part.getSubmittedFileName());
    int read;
    while ((read = bufferedInputStream.read()) != -1){
        outputStream.write(read);
    }
    outputStream.close();
    bufferedInputStream.close();


    resp.getWriter()
            .append(file);

}

 

2.js上传;

可以把图片通过FileReader对象读取转换成base64的文字,然后通过ajax上传到服务器,这个稍微简单很多.

服务器获取到上传的文本,通过分割及解密的方式,输出到存储目录中即可.

下面是base64处理的方法:

public void uploadBase64(String fieldName){
   String savePath = "d:/tmp/";
   String base64Data = this.request.getParameter(fieldName);
   this.fileName = "test.jpg";
   this.url = savePath + this.fileName;
   BASE64Decoder decoder = new BASE64Decoder();
   try {
      File outFile = new File(this.getPhysicalPath(this.url));
      OutputStream ro = new FileOutputStream(outFile);
      byte[] b = decoder.decodeBuffer(base64Data);
      for (int i = 0; i < b.length; ++i) {
         if (b[i] < 0) {
            b[i] += 256;
         }
      }
      ro.write(b);
      ro.flush();
      ro.close();
      this.state=this.errorInfo.get("SUCCESS");
   } catch (Exception e) {
      this.state = this.errorInfo.get("IO");
   }
}

 

java web开发图片上传&虚拟目录配置

最近使用java开发一个APP应用的管理系统后台,涉及到编辑信息上传图片的功能,这里使用了UE编辑器,国产的;

UE上传图片的功能集成在了一个叫做image.js的文件中:

/*
 * 本地上传
 * */
var Upload = {
    showCount: 0,
    uploadTpl: '<div class="edui-image-upload%%">' +
        '<span class="edui-image-icon"></span>' +
        '<form class="edui-image-form" method="post" enctype="multipart/form-data" target="up">' +
        '<input style=\"filter: alpha(opacity=0);\" class="edui-image-file" type="file" hidefocus name="upfile" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"/>' +
        '</form>' +

        '</div>',
    init: function (editor, $w) {
        var me = this;

        me.editor = editor;
        me.dialog = $w;
        me.render(".edui-image-local", 1);
        me.config(".edui-image-upload1");
        me.submit();
        me.drag();

        $(".edui-image-upload1").hover(function () {
            $(".edui-image-icon", this).toggleClass("hover");
        });

        if (!(UM.browser.ie && UM.browser.version <= 9)) {
            $(".edui-image-dragTip", me.dialog).css("display", "block");
        }


        return me;
    },
    render: function (sel, t) {
        var me = this;

        $(sel, me.dialog).append($(me.uploadTpl.replace(/%%/g, t)));

        return me;
    },
    config: function (sel) {
        var me = this,
            url=me.editor.options.imageUrl;

        url=url + (url.indexOf("?") == -1 ? "?" : "&") + "editorid="+me.editor.id;//初始form提交地址;

        $("form", $(sel, me.dialog)).attr("action", url);

        return me;
    },
    uploadComplete: function(r){
        var me = this;
        //这里使用一个过滤的方法,java后台返回的是json数据,但是到这里发现有<pre>的标签;
        log(r)
        if(r.indexOf("</pre>") > 0){
            var _start = r.indexOf(">") + 1;
            var _end = r.indexOf("<",_start);
            r = r.substring(_start,_end);
            log(r)
        }
        //过滤结束

        try{
            var json = eval('('+r+')');
            //这里调用了callback的方法,第3个参数是传递过去的图片地址,由服务器返回;
            //第4个参数是服务器返回的状态码
            Base.callback(me.editor, me.dialog, json.data.url, json.code);
        }catch (e){
            var lang = me.editor.getLang('image');
            Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');
        }
    }}

图片上传成功,调用了callback的方法处理图片,需要作小小的改动:

callback: function (editor, $w, url, code) {
     //这里做了小小的改动,原代码是判断success字符串,由于我的Java返回的是一个类似于{code:1,error:error}对象,所以我改成了int类型作为判断,之后的代码都不需要操作了。
    if (code == 1) {
        //显示图片计数+1
        Upload.showCount++;
        var $img = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),
            $item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").append($img);

        if ($(".edui-image-upload2", $w).length < 1) {
            $(".edui-image-content", $w).append($item);

            Upload.render(".edui-image-content", 2)
                .config(".edui-image-upload2");
        } else {
            $(".edui-image-upload2", $w).before($item).show();
        }

        $img.on("load", function () {
            Base.scale(this, 120);
            Base.close($(this));
            $(".edui-image-content", $w).focus();
        });

    } else {
        currentDialog.showTip( code );
        window.setTimeout( function () {

            currentDialog.hideTip();

        }, 3000 );
    }

    Upload.toggleMask();

}

接下来就是映射tomcat虚拟目录,在tomcat的目录下找到conf目录:

/home/apache-tomcat-8.0.45/conf/Catalina/localhost

在localhost目录下创建一个xml文件,文件的名字会与url的路径同步,所以取名字要注意点,假如你创建了一个

upload.xml的文件,里面的内容是:

<?xml version=”1.0″ encoding=”UTF-8″?>
<!–文件名跟url路径需保持一致–>
<!–如果文件名:upload.xml,那么你访问的url地址应该是:http://ip:port/upload/images…. –>
<!–http://localhost:8081/upload/images/20170901/1504228001551.jpg–>
<Context
docBase=”/upload”
reloadable=”true”>
</Context>

那么你访问这个目录下的资源时,url应该输入:

http://ip:port/upload/resrouce

 

angularJs分页对象实现

首先需要使用指令(directives),然后共享socpe对象即可,html里输入:

<div class="pages">
    <page-html page="{{pageData.page}}" pageTotal="{{pageData.pageTotle}}" method="read"></page-html>
</div>

directives文件中创建pageHtml指令:

.directive("pageHtml",function () {
    return{
        restrict:'EA',
        replace:true,
        link:function (scope,ele,attr,ctrl) {
            scope.initPage = function(){
                scope.pages = [];
                if(typeof scope.pageData == "object" && scope.pageData.pageTotle > 1){
                    var i = scope.pageData.page;
                    i -= 2;
                    if(i < 1){
                        i = 1
                    }
                    for(;i <= scope.pageData.pageTotle; i++){
                        scope.pages.push(i)
                        if(scope.pages.length >= 5){
                            break;
                        }
                    }
                }
            }
            scope.initPage()
        },
        controller: function ($scope, $element, $attrs) {

            var _method = $attrs.method
            $scope.selectPage = function(page){
                if(page == "pre"){
                    if($scope.pageData.page > 1){
                        $scope.pageData.page--;
                        page = $scope.pageData.page;
                    }
                }else if(page == "next"){
                    if($scope.pageData.page < $scope.pageData.pageTotle){
                        $scope.pageData.page++;
                        page = $scope.pageData.page;
                    }
                }else{
                    $scope.pageData.page = page;
                }
                if($scope.pageData.page > 0 && $scope.pageData.page <= $scope.pageData.pageTotle){
                    $scope.initPage()
                    if(typeof _method  == "string"){
                        $scope[_method](page);
                    }else{
                        $scope.read(page);
                    }
                }
            }
        },
        template: '<nav ng-if="pageData.pageTotle > 1"><ul class="pagination">' +
        '<li><a class="disabled cursor-pointer" ng-click="selectPage(\'pre\')"><span aria-hidden="true">上一页</span></a></li>' +
        '<li ng-repeat="(i,n) in pages track by i" ng-click="selectPage(n)" class="cursor-pointer {{n == pageData.page ? \'active\': \'\'}}"><a>{{n}}</a></li>'+
        '<li><a class="Previous cursor-pointer" ng-click="selectPage(\'next\')"><span aria-hidden="true">下一页</span></a></li>' +
        '</ul></nav>'
    }
})

一个简单的分页效果就出来了。

 

 
Copyright © 2008-2021 lanxinbase.com Rights Reserved. | 粤ICP备14086738号-3 |