简单的企业网站的主页,wordpress防止ddos插件,短视频营销定义,wordpress 维护页面文章目录 SpringMVC - 06一、Ajax1. 概述2. Ajax 异步加载数据1. 单个数据2. 对象 3. 实践4. 总结 二、拦截器1. 概述2. 实现3. 实践4. 总结 三、文件上传#xff1a;Upload1. 准备工作2. 步骤3. 效果 四、文件下载#xff1a;Download1. 步骤2. 效果3. 总结 注意#xff1a… 文章目录 SpringMVC - 06一、Ajax1. 概述2. Ajax 异步加载数据1. 单个数据2. 对象 3. 实践4. 总结 二、拦截器1. 概述2. 实现3. 实践4. 总结 三、文件上传Upload1. 准备工作2. 步骤3. 效果 四、文件下载Download1. 步骤2. 效果3. 总结 注意 SpringMVC - 06
一、Ajax
1. 概述
AjaxAsynchronous Javascript And XML异步 JavaScript 和 XML 使用 Ajax 技术网页能够快速地将增量更新呈现在用户界面上而不需要刷新整个页面这使得程序能够更快地回应用户的操作 Ajax 不是一种新的编程语言而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术 使用 Ajax 的最大优点就是能在不更新整个页面的前提下维护数据即在不需要刷新页面的情况下就可以产生局部刷新的效果。
需要用到 jQuery 实现 Ajax它是一个快速、简洁的 JavaScript 框架具有 js 的大量函数引入 jQuery 的方法
进入 jQuery 官网点此进入找到 [Download the uncompressed, development jQuery 3.7.0] 点击链接出现 js 代码通过 Ctrl S 保存到下载的位置在 web 文件夹新建 static 文件夹将下载好的 jQuery 框架导入。 2. Ajax 异步加载数据 使用格式
%-- 引入 jQuery 框架 --%
script src${pageContext.request.contextPath}/static/jquery-3.7.0.js/scriptscriptfunction xxx() {$.post({url:${pageContext.request.contextPath}/请求地址,data:{后端参数名:$(#前端参数名).val()},success:function (data) {成功之后执行的回调函数;}, error:function (data) {失败之后执行的回调函数;}})}
/script注意 script 标签必须成对并且放在 body 的最后$.post() 相当于 jQuery.post() 使用时一定要提前引入 jQuery 框架$.post 要放在函数内其中的参数有 url 请求地址data 前端要发送给后端的数据没有数据时可以省略success 成功之后执行的回调函数注意这里回调函数中参数 data 与上面的 data 不是同一个这里是指后端传递给前端的数据error 失败之后执行的回调函数。 之前是由后端控制转发或重定向完成视图的跳转而现在是由前端 Ajax 来控制后端只需要提供数据JSON 字符串即可Ajax 把主动权交给前端。 1. 单个数据
举例当用户输入一个信息后进行弹窗提示。
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitle测试/titlescript src${pageContext.request.contextPath}/static/jquery-3.7.0.js/scriptscriptfunction a() {$.post({url:${pageContext.request.contextPath}/mon/a1,data:{name:$(#username).val()},success:function (data) {alert(data);}})}/script
/head
body
h1%-- 失去焦点时发起一个请求携带信息到后台 --%用户名input typetext idusername οnblura()
/h1
/body
/html注意 前端向后端传递单个数据时data 必须是键值对JSON 字符串的形式这里的 name 为后端的参数名username 为前端的参数名在 Ajax 中前端参数的值例如用户输入的信息可以通过 $(#前端参数名).val() 的方式取到console.log 可以在控制台输出信息alert 代表弹窗onblur 代表失去焦点时执行函数该代码可以执行的操作是在前端页面中用户输入用户名信息失去焦点时执行函数 a() 发起 /mon/a1 请求并携带前端数据给后端后端执行成功success后执行回调函数此时回调函数的参数 data 为后端返回的数据进行 alert 弹窗。 后端控制层代码
// 控制层中所有返回的字符串都不会经过视图解析器而是直接返回字符串
RestController
RequestMapping(/mon)
public class AjaxController {RequestMapping(/a1)public String a1(String name) {System.out.println(name);if (Sun3285.equals(name)) {return true;} else {return false;}}
}执行 2. 对象
举例当用户点击【加载数据】按钮时加载后台中的数据。
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitle测试/titlescript src${pageContext.request.contextPath}/static/jquery-3.7.0.js/scriptscript$(function () {$(#btn).click(function () {$.post({url:${pageContext.request.contextPath}/mon/a2,success:function(data) {console.log(data);var obj JSON.parse(data);console.log(obj);var html ;for (let i 0; i obj.length; i) {html tr td obj[i].id /td td obj[i].name /td td obj[i].sex /td /tr;}$(#content).html(html);}})})})/script
/head
body
input typebutton value加载数据 idbtn
tabletrtd编号/tdtd姓名/tdtd性别/td/trtbody idcontent%-- 后台数据 --%/tbody
/table
/body
/html注意 重点看 Ajax 部分因为前端不给后端传递数据因此省略了 data后端传递给前端的数据 data 为 JSON 字符串因此要先通过 JSON.parse(data) 解析为 JavaScript 对象可以通过 console.log 来看到解析前后的结果该代码可以执行的操作是在前端页面中用户点击【加载数据】按钮时通过 $(#btn).click 可以捕捉到然后执行函数发起 /mon/a2 请求给后端后端执行成功success后执行回调函数此时回调函数的参数 data 为后端返回的数据即一个 JSON 字符串经过前端处理后在页面中显示信息。 后端控制层代码
RestController
RequestMapping(/mon)
public class AjaxController {RequestMapping(/a2)public String a2() throws JsonProcessingException {ArrayListStudent studentList new ArrayListStudent();Student s1 new Student(1, Sun1234, 男);Student s2 new Student(2, Sun3285, 男);Student s3 new Student(3, Sun4399, 女);Collections.addAll(studentList, s1, s2, s3);// 后端传递给前端的是一个 JSON 字符串return new ObjectMapper().writeValueAsString(studentList);}
}执行 3. 实践
需求输入用户名和密码时动态显示输入信息是否正确。
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitle登录/titlescript src${pageContext.request.contextPath}/static/jquery-3.7.0.js/scriptscriptfunction login1() {$.post({url:${pageContext.request.contextPath}/mon/login1,data:{username:$(#username).val()},success:function (data) {console.log(data);if (data OK) {$(#usernameInfo).css(color, green);} else {$(#usernameInfo).css(color, red);}$(#usernameInfo).html(data);}})}function login2() {$.post({url:${pageContext.request.contextPath}/mon/login2,data:{username:$(#username).val(), password:$(#password).val()},success:function (data) {console.log(data);if (data OK) {$(#passwordInfo).css(color, green);} else {$(#passwordInfo).css(color, red);}$(#passwordInfo).html(data);}})}/script
/head
body
p用户名input typetext idusername οnblurlogin1()span idusernameInfo/spanbr密 码input typetext idpassword οnblurlogin2()span idpasswordInfo/span
/p
/body
/html后端控制层代码
RestController
RequestMapping(/mon)
public class AjaxController {RequestMapping(/login1)public String login1(String username) {if (Sun3285.equals(username)) {return OK;} else {return 用户名输入有误;}}RequestMapping(/login2)public String login2(String username, String password) {String result login1(username);if (OK.equals(result)) {if (123456.equals(password)) {return OK;} else {return 密码输入有误;}} else {return result;}}
}注意判断密码是否正确的前提是先要判断用户名是否正确。 执行 4. 总结
js 中三个等号为严格等于指数据类型和值都要相等之前是由后端控制转发或重定向完成视图的跳转而现在是由前端 Ajax 来控制后端只需要提供数据JSON 字符串即可Ajax 把主动权交给前端前后端之间交互数据是以 JSON 字符串的形式标签中 id 和 name 的区别 id 一般用于 css 和 js 中引用name 用于表单提交只有加了 name 属性的标签元素才会提交到服务器id 是唯一的标识符不允许有重复值可以通过它的值来获得对应的 html 标签对象相当于人的身份证具有唯一性name 是控件的名字当需要把控件所关联的数据传递到数据库时就必须要设置 name 属性相当于人的姓名可以重名用 value 可以设置控件的默认值。 二、拦截器
1. 概述
拦截器是 AOP 思想的具体应用拦截器拦截的是请求不拦截静态资源。
功能用于对 SpringMVC 处理器进行预处理和后处理可以自己定义一些拦截器来实现特定的功能。
过滤器和拦截器的区别 过滤器 是 servlet 规范中的一部分任何 JavaWeb 工程中都可以使用在 url-pattern 中配置了 /* 之后可以对所有要访问的资源进行过滤在 web.xml 中进行配置。 拦截器 拦截器是 SpringMVC 框架的只有使用了 SpringMVC 框架的工程才能使用拦截器只会拦截访问的控制器方法控制类中的方法如果访问的是 jsp/html/css/image/js 是不会进行拦截的在 Spring 配置文件中进行配置因为拦截器是 SpringMVC 框架独有的。
2. 实现
实现拦截器的步骤
自定义一个拦截器实现 HandlerInterceptor 接口重写方法在 Spring 配置文件中配置拦截器包括使用的拦截器以及要拦截的请求。
// 第一步自定义一个拦截器 MyInterceptor实现 HandlerInterceptor 接口重写方法
public class MyInterceptor implements HandlerInterceptor {// 处理前public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {return false;}// 处理后public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {}// 清理public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {}
}注意preHandle 方法中返回值为 true表示执行下一个拦截器放行返回值为 false表示不执行下一个拦截器拦截。 !-- 第二步在 Spring 配置文件中对拦截器进行配置 --
mvc:interceptorsmvc:interceptor!-- /** 表示所有请求都会经过拦截器 --mvc:mapping path/**/!-- 指定使用的拦截器 --bean classcom.Sun3285.config.MyInterceptor//mvc:interceptor
/mvc:interceptors3. 实践 需求登录判断验证如果进行了登录操作并且用户名和密码正确才可以进入首页否则不能直接进入首页。 拦截前可以进入登录界面进行登录操作输入正确的用户名和密码进入主界面也可以在首页上直接点击超链接进入主界面。 点击【主页面】时使用拦截器拦截拦截的依据是是否在 Session 中存放了指定的信息因为只有登录成功才会在 Session 中存放指定信息 usernameID。
第一步自定义拦截器如果 Session 中存放了指定的信息进行了登录操作就放行否则跳转到登录页面。
public class LoginInterceptor implements HandlerInterceptor {public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {HttpSession session request.getSession();if (session.getAttribute(usernameID) ! null) {return true;}request.getRequestDispatcher(/WEB-INF/jsp/login.jsp).forward(request, response);return false;}
}第二步在 Spring 配置文件中配置拦截器在首页点击【主页面】超链接时进行拦截。
!-- 拦截器配置 --
mvc:interceptorsmvc:interceptormvc:mapping path/toMain/bean classcom.Sun3285.config.LoginInterceptor//mvc:interceptor
/mvc:interceptors运行结果
当没有进行登录操作直接在首页点击【主页面】时拦截器拦截并跳转到登录页面。 当进行了登录再在首页点击【主页面】时可以直接跳转到主页面因为此时 Session 中存放了指定的信息拦截器放行。 此时关闭浏览器重新打开再在首页点击【主页面】时拦截器拦截并跳转到登录页面因为此时拦截器得到的 session 为新的 session其中没有存放指定的信息 usernameID。
4. 总结
在 WEB-INF 下的所有页面或者资源只能通过 controller 或 servlet 进行访问请求转发可以访问 WEB-INF 下的所有页面或者资源重定向不可以可以在控制类的方法参数中直接拿到一些对象如HttpSession session、HttpServletRequest request、HttpServletResponse response 等然后在方法内进行进一步操作。 三、文件上传Upload
1. 准备工作
如果想使用 Spring 的文件上传功能需要在上下文中配置 MultipartResolver。
为了能够上传文件前端表单要求
必须将表单的 method 设置为 POST将 enctype 设置为 multipart/form-data这样浏览器才会把用户选择的文件以二进制数据发送给服务器。
后端要求
导入依赖commons-fileupload
!-- 文件上传 --
dependencygroupIdcommons-fileupload/groupIdartifactIdcommons-fileupload/artifactIdversion1.3.3/version
/dependency2. 步骤
文件上传的步骤
导入依赖编写前端页面建立表单编写控制类实现文件上传在 Spring 配置文件中配置文件上传。
前端页面 控制类 Controller
public class FileController {// RequestParam(file) 将 namefile 控件得到的文件封装为 CommonsMultipartFile 对象RequestMapping(/upload)public String uplode(RequestParam(file) CommonsMultipartFile file,HttpServletRequest request) throws IOException {// 获取文件名String uploadFilename file.getOriginalFilename();// 上传路径保存设置String path request.getServletContext().getRealPath(/upload);File realPath new File(path);if (!realPath.exists()) {realPath.mkdir();// realPath.mkdirs();}// 输出上传文件地址System.out.println(上传文件保存地址 realPath);// 通过 CommonsMultipartFile 的方法直接写文件file.transferTo(new File(realPath / uploadFilename));return redirect:/index.jsp;}
}注意这部分代码可以直接使用只需要按需求改一下上传路径 path 即可其中 upload 为新创建的文件夹存放上传的文件。这里也可以把上传路径 path 直接用一个字符串表示。 配置文件上传
!-- 在 Spring 配置文件中配置文件上传 --
bean idmultipartResolver classorg.springframework.web.multipart.commons.CommonsMultipartResolver!-- 请求的编码格式 --property namedefaultEncoding valueutf-8/!-- 上传文件大小上限可以省略单位为字节1MB1048576字节 --property namemaxUploadSize value10485760/
/bean3. 效果 文件上传后控制台输出上传文件的地址并且可以找到已上传的文件 四、文件下载Download
1. 步骤
固定代码
Controller
public class FileController {RequestMapping(/download)public String download(HttpServletRequest request,HttpServletResponse response) throws IOException {// 要下载的文件地址和文件名String path request.getServletContext().getRealPath(/files);String fileName 导入的依赖总结.txt;File file new File(path, fileName);// 设置 response 响应头response.reset(); // 设置页面不缓存清空 bufferresponse.setCharacterEncoding(utf-8); // 字符编码response.setContentType(multipart/form-data); // 二进制传输数据// 设置下载文件response.setHeader(Content-Disposition,attachment;fileName URLEncoder.encode(fileName, utf-8));// 读取文件输入流InputStream is new FileInputStream(file);InputStream bis new BufferedInputStream(is);// 写出文件输出流OutputStream os response.getOutputStream();OutputStream bos new BufferedOutputStream(os);// 下载操作读取、写出byte[] buffer new byte[1024];int len 0;while ((len bis.read(buffer)) ! 0) {bos.write(buffer, 0, len);bos.flush();}// 关闭资源bos.close();bis.close();return null;}
}注意 这部分代码可以直接使用只需要按需求改一下要下载的文件地址和文件名其中 被下载文件的地址这里是放在了 web 文件夹下的 files 文件夹中最后会在生成的 out 文件夹下的子项目中文件名被下载的文件名。 记得最后要关闭资源后开先关。 2. 效果 无法下载文件但后端代码执行成功 判断应该是浏览器阻止了下载更换浏览器再次尝试可以下载成功 3. 总结
上传路径 path 和被下载的文件地址 path 也都可以直接用一个字符串表示 上传路径 path 一般通过 request.getServletContext().getRealPath(/upload) 来将文件上传到服务器生成的 out 目录下的子项目中的 upload 包如果没有 upload 包会自动新建中下载时要提前在服务器中准备好被下载的文件可以在 web 包下建立 files 包用来存放被下载的文件此时被下载的文件地址 path 可以由 request.getServletContext().getRealPath(/files) 得到。 上传是用户通过前端表单操作将文件上传到服务器下载是用户点击前端超链接将服务器中的文件下载到浏览器客户端本地文件。 注意
jQuery 官网https://jquery.com/download/需要将 JavaScript 的版本变为 6方法如下 拦截器和文件上传的配置都是在 Spring 的配置文件中因为都是基于 SpringMVC 框架的。搭建完环境要先测试一下能不能运行环境是否有问题。删除项目中的子模块方法选中子模块右键选择 Remove Module 移除模块然后再右键删除文件夹注意要在父模块的 pom.xml 中删除对应的子模块。
