SpringMVC-02-Ajax,拦截器,文件上传下载

文章目录

      • 八:Ajax研究
        • 1. 什么是Ajax?
        • 2. 一个Ajax示例
      • 九:拦截器
        • 1.拦截器实现
        • 2. 自定义登陆过滤拦截器
        • 3. 在springmvc-config配置文件中声明自己写的拦截器,在interceptor下可以配置多个拦截器,每个拦截器配置需要拦截那些控制层请求路径。
        • 4. 编写简单的控制层进行测试,如果用户名不为空则进行登录,同时将用户名存入session中,注销时移除此属性即可。
      • 十:文件上传下载
        • 1. 前端表单
        • 2. SpringMVC中对于文件上传的配置
        • 3. 前端Controller编写,定义文件上传路径等
        • 4. 下载文件

SSM完整笔记

  • Mybatis-01-配置详解
  • Mybatis-02-日志,注解和分页,一对多,多对一,缓存
  • Spring详解-01-依赖注入等方式
  • Spring详解-02-注解,面向切面编程等
  • Spring详解-03-整合Mybatis,事务配置
  • SpringMVC-01-第一个SpringMVC程序,注解开发,Restful风格
  • SpringMVC-02-Ajax,拦截器,文件上传下载
  • SSM项目整合-完整流程一览
  • 笔记相关代码:https://gitee.com/chelsea_h/ssm-integration

官网文档

  • Spring文档:https://docs.spring.io/spring-framework/docs/5.2.9.RELEASE/spring-framework-reference/core.html#spring-core
  • Mybatis文档:http://www.mybatis.org/mybatis-3/zh/index.html
  • SpringMVC文档:https://docs.spring.io/spring-framework/docs/current/reference/html/web.html

八:Ajax研究

1. 什么是Ajax?
  • AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
  • Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
  • 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。
  • AJAX业务场景:注册时输入用户名自动检测用户是否存在,登陆时提示用户名密码错误等。
  • AJAX优点:传统请求需要重新加载整个网页,使用此技术,可实现小部分数据交互,节省服务器资源,对用户也更加友好。
2. 一个Ajax示例
  • 功能:前端输入用户名信息,异步检测用户名是否正确或已存在
  • 前端构建两个输入框,并绑定失去焦点事件
<body>
    <p>
        用户名:<input type="text" id="name" onblur="a1()">
        <span id="userInfo">span>
    p>
    <p>
        密码:<input type="text" id="pwd" onblur="a2()">
        <span id="pwdInfo">span>
    p>
body>
  • 失去焦点事件内部,发送ajax请求,此时默认为post请求,否则要使用$.ajax,内部提供方法参数。使用ajax需要引入JQuery,下载链接:https://jquery.com/download/
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"name":$("#name").val()},
                success:function (data) {
                    if (data.toString()==="ok"){
                        $("#userInfo").css("color","green");
                    }else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            })
        }
        function a2() {
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"pwd":$("#pwd").val()},
                success:function (data) {
                    if (data.toString()==="ok"){
                        $("#pwdInfo").css("color","green");
                    }else {
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            })
        }
  • 后端写两个请求方法接收ajax请求,由于此控制类写了@RestController注解,所以不会走视图解析器,也就没再用@ResponseBody注解了。此处后端数据验证只是简单的判断,真是代码场景中需要完整的逻辑处理。
@RequestMapping("/a3")
public String a3(String name,String pwd){
    String msg = "";
    if(name!=null){
        if("admin".equals(name)){
            msg="ok";
        }else {
            msg="error";
        }
    }
    if(pwd!=null){
        if("password".equals(pwd)){
            msg="ok";
        }else {
            msg="error";
        }
    }
    return msg;
}
  • 前端输入数据失去焦点后,会自动在旁边弹出ok或error

九:拦截器

  • 拦截器是MVC框架中所拥有的概念,类似于Servlet开发中的过滤器Filter
  • 拦截器默认静态资源过滤,只会拦截访问的控制器方法
1.拦截器实现
  • 对于SpringMVC来说,要实现一个拦截器,在自定义类中实现HandlerInterceptor 接口即可。
public class MyInterceptor implements HandlerInterceptor {
    /*return true 就放行*/
    /*return false 不执行下一个拦截器*/
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        System.out.println("处理前========================");
        return true;
    }
    /*可以写拦截日志,后续这两个没用*/
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        System.out.println("处理后========================");
    }
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        System.out.println("清理==========================");
    }
}
2. 自定义登陆过滤拦截器
  • 当用户没有进行登陆的时候,点击main界面会自动跳转到login界面
  • 此处对于是否登录的验证是判断session中是否有userLogin属性(用户登录时会自动添加此属性,登出时会自动删除此属性)
public class LoginInterceptor implements HandlerInterceptor {
    /*登陆过滤器*/
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        HttpSession session = request.getSession();
        /*如果已经在登录页面 则放行*/
        if(request.getRequestURI().contains("Login")){
            System.out.println("页面放行");
            return true;
        }
        /*如果已登陆,则毫无影响*/
        if(session.getAttribute("userLogin")!=null){
            return true;
        }
        /*否则进行拦截,跳转到登陆页面*/
        request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request,response);
        return false;
    }
}
3. 在springmvc-config配置文件中声明自己写的拦截器,在interceptor下可以配置多个拦截器,每个拦截器配置需要拦截那些控制层请求路径。

<mvc:interceptors>
    <mvc:interceptor>
        
        <mvc:mapping path="/**"/>
        <bean class="com.chelsea.interceptor.MyInterceptor"/>
    mvc:interceptor>
    <mvc:interceptor>
        <mvc:mapping path="/user/**"/>
        <bean class="com.chelsea.interceptor.LoginInterceptor"/>
    mvc:interceptor>
mvc:interceptors>
4. 编写简单的控制层进行测试,如果用户名不为空则进行登录,同时将用户名存入session中,注销时移除此属性即可。
@Controller
@RequestMapping("/user")
public class LoginController {

    @RequestMapping("/Login")
    public String login(String username, String password, HttpSession session, Model model){
        //把用户信息放入session
        session.setAttribute("userLogin",username);
        model.addAttribute("username",username);
        return "main";
    }

    @RequestMapping("/main")
    public String main(){
        return "main";
    }

    @RequestMapping("/goLogin")
    public String goLogin(){
        return "login";
    }

    @RequestMapping("/logout")
    public String goOut(HttpSession session){
        /*如果是这种方式注销session,用户浏览器没有关闭,还有其他请求,会频繁创建销毁session效率极低*/
        //session.invalidate();
        /*这种方法退出最好,已经达到了退出登陆的功能*/
        session.removeAttribute("userLogin");
        return "main";
    }

}

十:文件上传下载

  • 文件上传下载是很常规的操作,SpringMVC对文件的上传有很好的支持,但需要提前进行显式配置
  • 为了能成功上传文件,必须将表单的method设置为POST,并且将表单的enctype属性设置为multipart/form-data。只有在这样的情况下,浏览器才会把用户选择的文件以二进制数据发送给服务器。
1. 前端表单
<form action="/upload" enctype="multipart/form-data" method="post">
    <input type="file" name="file">
    <input type="submit" name="upload">
form>
2. SpringMVC中对于文件上传的配置

<bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" id="multipartResolver">
    
    <property name="defaultEncoding" value="utf-8"/>
    
    <property name="maxUploadSize" value="10485760"/>
    <property name="maxInMemorySize" value="40960"/>
bean>
3. 前端Controller编写,定义文件上传路径等
//@RequestParam("file") 将name=file控件得到的文件封装成CommonsMultipartFile 对象
//批量上传CommonsMultipartFile则为数组即可
@RequestMapping("/upload")
public String fileUpload(@RequestParam("file") CommonsMultipartFile file , HttpServletRequest request) throws IOException {

    //获取文件名 : file.getOriginalFilename();
    String uploadFileName = file.getOriginalFilename();

    //如果文件名为空,直接回到首页!
    if ("".equals(uploadFileName)){
        return "redirect:/index.jsp";
    }
    System.out.println("上传文件名 : "+uploadFileName);

    //上传路径保存设置
    String path = request.getServletContext().getRealPath("/upload");
    //如果路径不存在,创建一个
    File realPath = new File(path);
    if (!realPath.exists()){
        realPath.mkdir();
    }
    System.out.println("上传文件保存地址:"+realPath);

    InputStream is = file.getInputStream(); //文件输入流
    OutputStream os = new FileOutputStream(new File(realPath,uploadFileName)); //文件输出流

    //读取写出
    int len=0;
    byte[] buffer = new byte[1024];
    while ((len=is.read(buffer))!=-1){
        os.write(buffer,0,len);
        os.flush();
    }
    os.close();
    is.close();
    return "redirect:/index.jsp";
}
  • 另一种方法:使用CommonsMultipartFile类方法进行保存上传的文件,更加简单。
/*
 * 采用file.Transto 来保存上传的文件
 */
@RequestMapping("/upload2")
public String  fileUpload2(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request) throws IOException {

    //上传路径保存设置
    String path = request.getServletContext().getRealPath("/upload");
    File realPath = new File(path);
    if (!realPath.exists()){
        realPath.mkdir();
    }
    //上传文件地址
    System.out.println("上传文件保存地址:"+realPath);

    //通过CommonsMultipartFile的方法直接写文件(注意这个时候)
    file.transferTo(new File(realPath +"/"+ file.getOriginalFilename()));

    return "redirect:/index.jsp";
}
  • 此时在前端点击上传文件即可。
4. 下载文件
  • 第一种方式:在前端直接编写一个a标签,连接到本地资源即可
<a href="${pageContext.request.contextPath}/static/1.jpg">a>
  • 第二种方法:编写后端业务进行下载(一般第一种方式就够用了)
@RequestMapping(value="/download")
public String downloads(HttpServletResponse response , HttpServletRequest request) throws Exception{
    //要下载的图片地址
    String  path = request.getServletContext().getRealPath("/upload");
    String  fileName = "基础语法.jpg";

    //1、设置response 响应头
    response.reset(); //设置页面不缓存,清空buffer
    response.setCharacterEncoding("UTF-8"); //字符编码
    response.setContentType("multipart/form-data"); //二进制传输数据
    //设置响应头
    response.setHeader("Content-Disposition",
            "attachment;fileName="+ URLEncoder.encode(fileName, "UTF-8"));

    File file = new File(path,fileName);
    //2、 读取文件--输入流
    InputStream input=new FileInputStream(file);
    //3、 写出文件--输出流
    OutputStream out = response.getOutputStream();

    byte[] buff =new byte[1024];
    int index=0;
    //4、执行 写出操作
    while((index= input.read(buff))!= -1){
        out.write(buff, 0, index);
        out.flush();
    }
    out.close();
    input.close();
    return null;
}

前端调用请求即可(适用于固定文件)

<a href="/download">点击下载a>

你可能感兴趣的:(JavaEE,springmvc)