第四阶段day16

1.实现用户模块的跳转
需求说明
当用户点击登录注册按钮时需要跳转到指定的页面中

url地址1:http://www/jt.com/user/regist...
2:http://www.jt.com/user/login....

实现代码如下
1.编辑UserController
@Controller //需要进行页面跳转
@RequestMapping("/user")
public class UserController {

/**
 * 实现用户模块页面跳转
 * url1: http://www.jt.com/user/login.html     页面:login.jsp
 * url2: http://www.jt.com/user/register.html  页面:register.jsp
 * 要求:实现通用页面跳转
 * restFul方式: 1.动态获取url中的参数,之后实现通用的跳转.
 */
@RequestMapping("/{moduleName}")
public String module(@PathVariable String moduleName){

    return moduleName;
}

}
页面展示效果

创建单点登录项目
jt-sso项目创建
1.添加继承依赖插件

<packaging>jar</packaging>

<parent>
    <artifactId>jt</artifactId>
    <groupId>com.jt</groupId>
    <version>1.0-SNAPSHOT</version>
</parent>

<!--2.添加依赖信息-->
<dependencies>
    <!--依赖实质依赖的是jar包文件-->
    <dependency>
        <groupId>com.jt</groupId>
        <artifactId>jt-common</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
</dependencies>

<!--3.添加插件-->
<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

</project>
2.编辑User的POJO对象
@TableName("tb_user")
@Data
@Accessors(chain = true)
public class User extends BasePojo{

@TableId(type = IdType.AUTO)//设定主键自增
private Long id;            //用户ID号
private String username;    //用户名
private String password;    //密码 需要md5加密
private String phone;       //电话号码
private String email;       //暂时使用电话代替邮箱

}
3.测试JT-SSO项目
用户通过sso.jt.com/findUserAll获取user表中的信息json返回
编辑UserController
@RestController
public class UserController {

@Autowired
private UserService userService;

/**
 * 完成测试按钮
 * 1.url地址 :findUserAll
 * 2.参数信息: null
 * 3.返回值结果: List<User>
 *
 */
@RequestMapping("/findUserAll")
public List<User> findUserAll(){

    return userService.findUserAll();
}

}
4.编辑UserService
@Service
public class UserServiceImpl implements UserService{

@Autowired
private UserMapper userMapper;

@Override
public List<User> findUserAll() {

    return userMapper.selectList(null);
}

}
5.修改nginx配置

**跨域实现
跨域访问测试
1.同域测试
分析:
1.浏览器地址 http://manage.jt.com/test.html
2.ajax请求地址
http://manage.jt.com/test.json
结论
当浏览器地址与ajax请求的地址(协议://域名:端口)相同时可以实现正常的业务调用

JSON跨域请求测试
1.跨域测试
分析
1.浏览器地址 http://www.jt.com/test.html
2.ajax请求地址 http://manage.jt.com/test.json
结论如果请求地址(协议://域名:端口)不相同则导致请求调用失败
2.浏览器-同源策略说明
说明浏览器规定发起ajax请求时如果请求协议/域名/端口号如果3者有一个与当前的浏览器的地址不相同时则违反了同源策略的规定则浏览器不予解析返回值
跨域问题违反同源策略的规定就是跨域请求

跨域1--JSONP

1.JSONP的跨域原理
1.利用JavaScript中的src属性实现跨域请求
2.自定义回调函数function callback(xxx);
3.将返回值结果进行特殊的格式封装 callback(json);
4.由于利用src属性进行调用所以只能支持get请求类型

封装返回值
hello({"id":"1","name":"tom"})

页面js的编辑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JSON跨域问题</title>

<script type="text/javascript">
    /*JS是解释执行的语言  */
    /*定义回调函数  */
    function hello(data){
        alert(data.name);
    }
</script>
<!--该json一直保存到浏览器中等待调用,但是没有函数名称无法调用  -->
<script type="text/javascript" src="http://manage.jt.com/test.json"></script>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>

</head>
<body>

<h1>JS跨域问题</h1>

</body>
</html>

JSONP

JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题,由于同源策略一般来说位于 server1.example.com的网页无法与不是server1.example.com的服务器沟通

JSONP的优化

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP测试</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">

$(function(){
    alert("测试访问开始!!!!!")
    $.ajax({
        url:"http://manage.jt.com/web/testJSONP",
        type:"get",                //jsonp只能支持get请求
        dataType:"jsonp",       //dataType表示返回值类型
        jsonp: "callback",    //指定参数名称
        jsonpCallback: "hello",  //指定回调函数名称
        success:function (data){   //data经过jQuery封装返回就是json串
            console.log(data);
        }
    });    
})

</script>
</head>
<body>

<h1>JSON跨域请求测试</h1>

</body>
</html>

编辑后端Controller

@RestController
public class JSONPController {

/**
 * 实现JSONP跨域请求
 * url地址: http://manage.jt.com/web/testJSONP?callback=xxxxxx
 * 参数:    暂时没有可以不接
 * 返回值:  callback(JSON);
 */
 @RequestMapping("/web/testJSONP")
 public String testJSONP(String callback){
     ItemDesc itemDesc = new ItemDesc();
     itemDesc.setItemId(1000L).setItemDesc("JSONP测试!!!");
     String json = ObjectMapperUtil.toJSON(itemDesc);
     return callback+"("+json+")";
 }

}
控制台输出

JSONPObject说明

@RequestMapping("/web/testJSONP")

public JSONPObject testJSONP(String callback){
    ItemDesc itemDesc = new ItemDesc();
    itemDesc.setItemId(1000L).setItemDesc("JSONP测试!!!");
    return new JSONPObject(callback, itemDesc);
}

cors的跨域方式

实现cors调用
代码如下
@Configuration //标识我是一个配置类
public class CorsConfig implements WebMvcConfigurer {

//在后端 配置cors允许访问的策略
@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedMethods("GET","POST") //定义允许跨域的请求类型
            .allowedOrigins("*")           //任意网址都可以访问
            .allowCredentials(true) //是否允许携带cookie
            .maxAge(1800);                 //设定请求长链接超时时间.
}

}

cors调用响应头解析