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>