JSONP跨域访问实现数据校验

1 创建单点登录系统

1.1 创建项目

在这里插入图片描述

1.2 添加继承/依赖/插件

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


    <!--添加jar包文件依赖-->
    <dependencies>
        <dependency>
            <groupId>com.jt</groupId>
            <artifactId>jt-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>

    <!--所有业务系统,必须添加build标签-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

1.3 完成jt-sso项目创建

在这里插入图片描述

1.4 实现反向代理

1).修改hosts文件
在这里插入图片描述
2). 编辑nginx.conf文件
在这里插入图片描述

1.5 测试效果展现

在这里插入图片描述

2 用户数据校验

2.1 业务说明

说明:当用户输入内容之后,当鼠标离焦时,应该发起Ajax请求去后端服务器JT-SSO校验数据是否存在. 如果数据存在应该提示用户,如果数据不存在则告知用户该数据可以使用.
在这里插入图片描述

2.2 页面分析

在这里插入图片描述

2.3 业务接口文档说明

包含的内容:
1).业务场景,业务功能属性等…
2).业务端调用的细节. web-sso
3).明确请求路径 url地址
4).明确请求的参数信息 几个 类型 作用
5).明确返回值结果 void xxxx 属性 对象
注意事项:
你以为的不一定是你以为的… 当需求不明确时 弄清业务之后在动手…
在这里插入图片描述

2.4 页面JS分析

1).定位哪些是写死的部分 http://sso.jt.com/user/check/
2).检索所有的代码 搜索需要的内容
在这里插入图片描述
在这里插入图片描述

2.5 编辑JT-SSO UserController

package com.jt.controller;

import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.service.UserService;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/getMsg")
    public String getMsg(){

        return "单点登录系统测试完成";
    }

    /**
     *  JSONP
     * 实现用户数据校验
     * url:http://sso.jt.com/user/check/{param}/{type}
     * 参数: /{param} 用户需要校验的数据
     *      /{type}   校验的字段.
     * 返回值: SysResult对象(true/false)
     */
    @RequestMapping("/check/{param}/{type}")
    public JSONPObject checkUser(@PathVariable String param,
                                 @PathVariable Integer type,
                                 String callback){

        //查询数据库获取响应信息.
        boolean flag = userService.checkUser(param,type);
        SysResult sysResult = SysResult.success(flag);
        return new JSONPObject(callback, sysResult);
        //callback(JSON结构)
    }

}

2.6 编辑JT-SSO UserService

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;

@Service
public class UserServiceImpl implements UserService{

    private static Map<Integer,String> paramMap = new HashMap<>();
    static {
        paramMap.put(1,"username");
        paramMap.put(2,"phone");
        paramMap.put(3,"email");
    }
    @Autowired
    private UserMapper userMapper;


    /**
     * 根据用户传递的参数,获取数据库记录
     * @param param
     * @param type
     * @return
     */
    @Override
    public boolean checkUser(String param, Integer type) {
        String column = paramMap.get(type);
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq(column,param);
        int count = userMapper.selectCount(queryWrapper);
        //return count>0?true:false;
        return count>0;
    }
}


2.7 页面效果展现

在这里插入图片描述

3 优化JSONP调用

3.1 优化页面JS

在这里插入图片描述

3.2 编辑全局异常处理机制

在这里插入图片描述

3.3 页面效果展现

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_36844475/article/details/111149465
今日推荐