一、异步请求
1.1 概述
(1)同步请求
当浏览器请求服务器的时候,必须要先等待服务器的响应。在服务器响应之前,用户会一直处于等待状态,而且在浏览器上是看不到任何东西的。但是这样有个问题,如果服务器处理的时间很长,那么对于用户的体验就非常不好。
(2)异步请求
页面的加载和数据的获取是不同步的。例如:用户在页面上填写数据,然后把数据提交给服务器。如果是使用异步请求方式提交数据,那么在提交数据的过程中,用户无需等待服务器的回应,可以继续执行其他操作。
1.2 ajax异步请求
- 使用原生的JS发送异步请求的步骤:
第一步:创建XMLHttpRequest对象;
第二步:连接服务器;
第三步:发送请求;
第四步:接收响应数据;
<script>
//第一步:创建XMLHttpRequest对象;
var xhr = new XMLHttpRequest();
//第二步:连接服务器;
xhr.open('GET', "${pageContext.request.contextPath}/getText.do");
//第三步:发送请求;
xhr.send();
//第四步:接收响应数据;
xhr.onreadystatechange = function() {
//readyState:xhr对象的状态,4代表已经完成了HTTP响应的接收
//status:响应状态,200代表响应成功
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
</script>
1.3 JQuery发送异步请求
$.post(url, data, fn):发送post请求。
$.get(url, date, fn):发送get请求。
$.getJson(url, data, fn):使用Get请求加载JSON数据。该方法只能够接收服务器返回的JSON格式的数据。
$.getJSON("${pageContext.request.contextPath}/getText.do", //请求URL
{id:'110',name:'小宝'}, //请求参数
function(jsonData) { //回调函数
alert(jsonData.msg);
}
);
后台实现:
(1)返回JSON格式字符串。
@RequestMapping(value="/getText2.do", produces="application/json;charset=utf-8")
@ResponseBody
public String getText2(String id, String name) throws Exception {
return "{'msg', '响应成功'}";
}
(2)返回Map集合。
第一步:引入jackson相关的jar包;
第二步:定义控制器方法,该方法可以返回一个Map集合。
@RequestMapping(value="/getText.do", produces="application/json;charset=utf-8")
@ResponseBody
public Map<String, Object> getText(String id, String name) throws Exception {
System.out.println("id = " + id + ", name = " + name);
Map<String, Object> map = new HashMap<String, Object>();
map.put("msg", "响应成功");
return map;
}
1.4 异步文件上传
1.4.1 前端页面
如果要实现表单的异步提交,我们可以使用jquery.form插件。
第一步:导入jquery.form插件;
第二步:定义文件上传表单;
<!-- 文件上传表单 -->
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="pic"/>
<input type="submit" value="提交"/>
</form>
<!-- 显示上传文件 -->
<div id="imgs"></div>
第三步:获取表单对象,然后调用ajaxForm方法初始化表单;
$("#uploadForm").ajaxForm({
url: "${pageContext.request.contextPath}/upload.do", // 请求URL
type: "post", // 请求方式
dataType: "text", // 响应回来的数据类型
async: true, // 异步
success: function(data){ // 请求成功
alert(data);
var imgUrl = "${pageContext.request.contextPath}" + data;
$("<img/>").attr("src", imgUrl).width(200).height(200).appendTo("#imgs");
},
error: function(){ // 请求失败
alert("数据加载失败!");
}
});
1.4.2 后台实现
@Controller
public class UploadController {
@RequestMapping(value="/upload.do")
@ResponseBody
public String upload(HttpServletRequest request
, @RequestParam(value="pic") MultipartFile file) throws Exception {
//获取保存文件的真实路径
String savePath = request.getServletContext().getRealPath("/uploads");
//获取上传的文件名
String fileName = file.getOriginalFilename();
//创建File对象
File targetFile = new File(savePath, fileName);
//保存文件
file.transferTo(targetFile);
//返回上传文件的路径
return "/uploads/" + fileName;
}
}
文件上传成功后,返回上传文件的URL。
二、SpringMVC表单标签
使用SpringMVC表单标签最大的好处就是它支持数据绑定。
首先,我们需要导入标签库文件。
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
然后,使用SpringMVC标签库中定义了的标签构建表单。
<form:form action="${pageContext.request.contextPath}/regist.do"
method="post" modelAttribute="user"><br/>
用户名:<form:input path="userName" /><br/>
密 码:<form:password path="userPass" /><br/>
性 别:<form:radiobutton path="gender" value="male"/>男
<form:radiobutton path="gender" value="female"/>女<br/>
兴趣爱好:<form:checkbox path="favors" value="eat"/>吃
<form:checkbox path="favors" value="drink"/>喝
<form:checkbox path="favors" value="play"/>玩<br/>
所在地:<form:select path="city">
<form:option value="GZ">广州</form:option>
<form:option value="ZS">中山</form:option>
<form:option value="ZH">珠海</form:option>
</form:select><br/>
自我介绍:<form:textarea path="introduce"/><br/>
<input type="submit" value="提交"/>
</form:form>
上面form:form标签的commandName属性用于指定绑定到后台JavaBean对象的名字。该JavaBean一定要在request等属性里面有,否则页面会报错的。
除此以外,springmvc为每一个表单标签都提供了对应的标签。例如:
标签名 | 作用 |
---|---|
<form:form> | 定义一个表单 |
<form:input> | 定义一个单行的文本输入框 |
<form:password> | 定义一个密码输入框 |
<form:radiobutton> | 定义一个单选按钮 |
<form:checkbox> | 定义一个复选框 |
<form:select> | 定义一个列表框 |
<form:option> | 定义一个列表框的选项 |
<form:textarea> | 定义一个多行的文本框 |
三、SpringMVC数据校验
3.1 JSR-303概述
JSR是Java Specification Requests的缩写,中文意思是Java规范要求。因为JAVA的功能和版本在不断的更新,JSR就是用来规范这些功能和接口。
制定JSR是由在JAVA业界有重要贡献的个人、组织或者公司,例如IBM,Google, Apache等等。
Bean Validation(JSR-303)是一个Java的数据验证规范,2009 年 12月伴随着Java EE 6一起发布。从SpringMVC 3开始提供了JSR-303验证框架的支持,JSR 303 的发布使得在数据自动绑定和验证变得简单。JSR-303通过注解方式对Java Bean 中字段的值进行验证。具体可以参考它的官方网站:http://beanvalication.org。
目前Bean Validation最新版本是2.0(JSR-380),它除了支持通过注解方式为对象模型添加约束之外,还支持自定义校验规则、分组验证等功能。
3.2 JSR303规范相关的注解
3.3 Hibernate Validator
Hibernate Validator 提供了JSR -303规范中所有内置 constraint 的实现,除此以外,它还在JSR-303的基础上附加了一些额外的constrainst。
3.4 数据校验
第一步:下载Hibernate Validator压缩包(http://hibernate.org/validator)
下载完成后解压缩,然后把hibernate-validator-6.0.17.Final.jar文件拷贝到项目中。另外,还要把dist/lib/required文件夹下的所有依赖的jar包也要拷贝到项目中。
第二步:对需要添加约束的JavaBean属性指定约束规范;
第三步:在控制器方法参数添加@Valid或@Validated注解;
第四步:在JSP页面中导入springmvc标签库,并且使用form:errors标签显示错误信息。
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
...
<form:form commandName="user">
<form:errors path="*" classStyle="color:red"></form:errors>
<form:errors path="age" cssStyle="color:red"></form:errors>
</form:form>
上面form:form标签中的commandName属性用于指定需要进行验证的JavaBean。form:errros标签中的path属性用于指定对user对象的哪个属性进行数据校验。星号*代表所有属性。
四、SSM整合
4.1 准备环境
第一步:下载压缩包,解压缩后拷贝jar包到项目中;
- spring
- mybatis
- mybatis-spring
- aopalliance
- aspectjweaver
- common-logging
- jackson-annotations
- jackson-core
- jackson-databind
- 数据库驱动包
下载地址:https://pan.baidu.com/s/1q75ST52jThA74SdbKRlA-Q
第二步:创建数据库表;
create table user(
id int primary key auto_increment,
name varchar(255) not null default '',
age int not nul default 0
);
第三步:创建实体;
package ssmtest.beans;
public class User {
private Integer id;
private String name;
private Integer age;
// 省略了setters和getters方法...
}
第四步:定义映射接口;
@Repository
public interface UserMapper {
}
第五步:新建业务接口和实现类,并且在业务类中注入映射接口;
业务接口:
package ssmtest.service;
public interface IUserService {
}
实现类:
package ssmtest.service.impl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import ssmtest.mapper.UserMapper;
import ssmtest.service.IUserService;
@Service
public class UserServiceImpl implements IUserService {
@Autowired
private UserMapper userMapper;
}
第六步:新建一个控制器类,并且把业务类注入到该控制器中;
package ssmtest.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import ssmtest.service.IUserService;
@Controller
public class UserController {
@Autowired
private IUserService userService;
}
第七步:在src目录下创建spring配置文件,名称为applicationContext.xml,并启用注解和包扫描功能;
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<!-- 启动注解功能 -->
<mvc:annotation-driven/>
<!-- 启用报扫描功能 -->
<context:component-scan base-package="ssmtest" />
</beans>
第八步:在web.xml文件中配置springmvc核心控制器和spring容器;
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
id="WebApp_ID" version="3.1">
<!-- 指定Spring配置文件路径 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 加载Spring容器 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- springmvc核心控制器 -->
<!-- 配置Spring的核心控制器 -->
<servlet>
<servlet-name>SpringMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>
</web-app>
上面配置指定springmvc配置文件的路径与spring配置文件路径相同。
4.2 整合SSM
第一步:配置数据源;
<bean id="dataSource"
class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
<property name="url" value="jdbc:mysql://localhost:3306/test"></property>
<property name="username" value="root"></property>
<property name="password" value="root"></property>
</bean>
第二步:配置SqlSessionFactory;
<bean name="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
</bean>
第三步:配置Mapper扫描器;
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property>
<property name="basePackage" value="ssmtest.mapper"></property>
</bean>
第四步:配置事务管理器;
<bean id="transactionManager"
class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" />
</bean>
<!-- 开启事务注解功能 -->
<tx:annotation-driven transaction-manager="transactionManager"/>
上面开启事务注解功能的时候使用了tx命名空间下的annotation-driven标签,所以需要引入该命名空间。
第五步:配置视图解析器;
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
4.3 测试
第一步:修改Mapper接口,定义一个addUser方法,然后在注解上指定添加用户的sql命令;
@Insert("insert into user(name, age) values(#{name}, #{age})")
void addUser(User user);
第二步:在Service接口中提供addUser方法,然后在Service实现类中实现该方法;
// 定义接口方法
void addUser(User user);
// 在实现类中实现该方法
@Override
public void addUser(User user) {
userMapper.addUser(user);
}
第三步:在UserController中定义一个方法,该方法调用Service的addUser方法,实现添加用户功能。
@RequestMapping(path="/saveUser", produces={"text/html;charset=utf-8"})
@ResponseBody
public String saveUser() {
System.out.println("saveUser...");
User user = new User();
user.setName("jacky");
user.setAge(18);
userService.addUser(user);
return "添加成功";
}
第四步:启动服务器,然后在浏览器输入地址localhost:8080/ssmtest/saveUser。如果运行后控制台没有出现错误提示,而且查看数据库表中也有新增用户的记录,代表整合成功。
五、实现登录认证
这里结合之前学习过的aop技术来实现登录认证功能。实现思路如下:
1)定义一个注解,注解名字为LoginFilter;
2)在需要拦截的方法上使用该注解;
3)定义一个切面类,然后在切面类中定义一个通知方法,并指定@Around类型的通知,该通知指定对使用了@LoginFilter注解的方法进行切入;
4)实现该方法。首先从session中获取登录用户,如果登录用户为空,代表用户还没登录,提示用户。如果用户不为空,则调用目标方法,并返回该方法的返回值;
5)在spring配置文件中启用aop功能;
下面详解介绍具体如何实现登录认证功能。
5.1 定义@LoginFilter
package ssmtest.annotation;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.METHOD,ElementType.TYPE})
public @interface LoginFilter {
String name() default "";
}
上面代码定义了一个名为LoginFilter的注解,该注解可以在犯法上使用,也可以在类上使用。
5.2 使用@LoginFilter注解
假如需要对UserController的saveUser方法进行登录认证,所以在该方法上使用@LoginFilter注解。
@LoginFilter
@RequestMapping(path="/saveUser", produces={"text/html;charset=utf-8"})
@ResponseBody
public String saveUser() {
System.out.println("saveUser...");
User user = new User();
user.setName("jacky");
user.setAge(18);
userService.addUser(user);
return "添加成功";
}
5.3 定义切面类
该切面类相当于Servlet的过滤器,当执行@LoginFilter标注的方法时候,会先执行该切面类中定义的方法。
package ssmtest.aspect;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.ResponseBody;
@Component
@Aspect
public class LoginAspect {
@Autowired
private HttpServletRequest request;
// 在执行@LoginFilter注解的控制器方法的时候,该方法都会被执行
// 该方法用于判断用户是否已经登录,只有用户已经登录,才执行目标方法
@Around("@annotation(ssmtest.annotation.LoginFilter)")
public Object checkUserLoginStatus(ProceedingJoinPoint pjp) throws Throwable {
HttpSession session = request.getSession();
Object o = session.getAttribute("loginUser");
// 判断session中是否有登录用户信息
if (o == null) {
return "请先登录";
} else {
// 返回目标方法的返回值
return pjp.proceed(pjp.getArgs());
}
}
}
@annotation(注解类名)表示对指定注解类型所标注的方法方法进行增强处理。
5.4 启用aop功能
修改spring配置文件,并加入以下配置内容:
<aop:aspectj-autoproxy/>
上面使用了aop命名空间下的aspectj-autoproxy标签,所以需要引入aop命名空间。
5.5 测试
第一步:新建一个控制器,并提供登录方法。
package ssmtest.controller;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class SysController {
@RequestMapping(path="/login", produces={"text/html;charset=utf-8"})
@ResponseBody
public String login(HttpSession session) {
session.setAttribute("loginUser", "jacky");
return "登录成功";
}
}
第二步:启动服务器,然后按照下面步骤进行测试。
首先,在浏览器中先访问localhost:8080/ssmtest/saveUser,界面显示如下:
然后,访问localhost:8080/ssmtest/login,默认用户登录的行为:
最后,重新访问localhost:8080/ssmtest/saveUser,这时候显示“添加成功”。