前言:
前面我们一直都是用工具来测试的，接下来我们在页面上展示

1.导入静态资源

直接复制黏贴没啥好说的

image.png

配置资源映射

image.png
为什么我要配置静态资源呢？
由于web.xml文件当中配置的拦截形式是"/"，这也就意味着它会拦截所有的请求，包括我们的静态资源文件，我们直接访问的话就会报404（找不到资源的错误），可能有些小白跟我一样，对拦截请求不明白，之所以有拦截器就是为了系统的安全，把一些认为不安全的请求给过滤掉，以"/"拦截的话会把所有请求都拦截住，就是说，所有的请求都要经过严格的检查，如果被拦截下来的请求在系统中找不到对应的资源或接口来响应的话，就会出现404的错误。我们见过以"*.html"为过滤条件的情景，这种情况下只有".html"结尾的请求才会被拦截，其它请求不会被拦截。那么小白们可能提出问题了，既然所有请求都被拦截了，那么为何我们可以访问Controller中的接口呢？这是由于我们是以Restful的形式来访问Controller接口的，请求被拦截后，发现Controller中刚好有定义好的请求规则满足要求，于是允许访问Controller的该接口，如果稍微与Controller层所定义请求规则不一致则会报404的错误。同理，我们要访问静态资源，请求被拦截后，如果没有规则告诉SpringMVC我们要访问的静态资源在哪里的话，就会报404的错误，也就是说，总得有个人告诉我我要访问的资源放在哪儿吧（就像Controller那样，告诉请求，我这儿定义好了很多规则，如果你满足我的规则条件，我就让你访问，否则，免谈），只把请求拦截下来，啥也不告诉它，它就蒙圈了，不知道要怎么访问了。

为了解决静态资源被拦截而无法访问的问题，我们在springmvc.xml文件中配置下资源映射（也相当于制定好访问规则）如上图所示，我们之所以只配置了css、images、js的资源映射，而没有配置jsp的映射是由于我们并不会直接去访问jsp资源文件，而是会经过Controller接口，返回逻辑视图，通过逻辑视图去springmvc.xml文件中的视图解析器配置（如上图“视图解析器配置”）当中去匹配要访问的资源文件，视图解析器会自动帮我们在返回的逻辑视图后面加上".jsp"，而且指定路径就在WEB-INF/jsp/目录下，因此我们的jsp文件一定要放在WEB-INF下（除非你配置的视图解析器的位置是别的目录）

2.实现登录，注册页面的跳转

• 功能分析
  请求的url：
  登录：/page/login
  注册：/page/register
  参数：无
  返回结果：逻辑视图String

@Controller
public class PageController {

    @RequestMapping("/page/register")
    public String showRegister() {
        return "register";
    }
    
    @RequestMapping("/page/login")
    public String showLogin() {
        return "login";
    }
}

• 测试
  image.png
  image.png
  PS:
  1.页面里面的某些跳转还有很多不完善的，我改了一部分，直接拿过去用就好了。如果还有一些跳转到404就改成正确的地址就好了
  2.登录的时候可能会提示说XXXXXXX为空，那是因为没有判断token为空，加上这句代码就好了
  image.png

• 测试
  启动taotao-manager、taotao-content、taotao-search、taotao-manager-web、taotao-portal-web、taotao-search-web、taotao-item-web、taotao-sso、taotao-sso-web工程
  输入账号密码。我们可以看到跳转到了首页。

  
  image.png
  image.png
  

  观察上面首页，可以看到我们的登录状态是已经登录的状态

3.JS跨域问题

登录的时候我们把token写到了cookie当中，登录成功后，我们查看Cookie信息，如下图所示，发现是有token信息的。

image.png

我们回到登录页面，可以看到token信息。如下图所示。可以看到与淘淘商城首页的token信息是完全一致的。

image.png
不同的端口就已经属于跨域了
什么是跨域：

1、域名不同
2、域名相同端口不同。
接着说下什么是jsonp？
jsonp不是新技术，它只是一种解决方案，使用js的特性绕过跨域请求，利用的特性便是js可以跨域加载js文件！！举个非常常见的例子，我们在html头部一般都会引入很多js，甚至我们直接引用在线的js，比如我们引用官方网站的jQuery路径加载进来也是可以的。JQuery的官方域名与我们的工程所在的域名肯定是不一样的，但是不影响使用，这就是我们所说的js可以跨域请求js文件！
跨域的特点是什么呢？我们可以在"Network"一栏看到请求的token信息，在Headers当中发现服务端已经正常响应了，如下图所示。

image.png
我们再看下Response一栏，发现没有任何信息，其实流程是这样的，我们使用ajax调用服务端的接口，服务端不管你请求是否是同一个域下，只管响应，于是 我们可以看到服务端响应的头信息，但是当数据经过浏览器时，浏览器判断出js访问的数据来自不同的域，于是便拒绝将数据返给页面。我们拿不到Response信息，也就无法展示内容了。
image.png
那么jsonp是怎样解决跨域问题的呢？流程图如下，图的上半部分展示的是传统跨域请求，这种请求我们是获取不到Response数据的，下半部分是介绍jsonp跨域获取数据的方案的。我们现在要跨域获取信息的js当中添加一个函数，该函数有返回值参数data，发起跨域请求的一端引入服务端定义好的一个js文件，请求的参数中是带callback回调函数的，并且callback=mycall中的"mycall"一定是与我们添加的那个函数的名称一致的，服务端接收到请求，就进行响应，并且判断参数中是否有callback参数，如果有callback参数的话，就对要返回的数据进行处理，加工成一段js代码（很简单，就是把一个json串包装成一个js函数，如下图mycall({id:1,name:z});）然后响应，js本来就是要请求访问服务端的一个js文件，现在返回的也是js代码，于是浏览器将不再进行拦截，由于返回的是js代码，而且js语句有个特点就是，一旦响应到浏览器端便立即执行，我们已经添加了该函数，于是便调用我们添加的那个函数，我们只需把数据做下处理并进行展示就可以了！！！
image.png
下面我们便来实现jsonp请求，上图所介绍的方法是比较复杂的，如果我们用jquery的话，如下图所示
image.png
image.png

我们刷新下淘淘商城首页，可以看到请求中自动为我们加上了回调函数，而且随机为我们添加了函数名为"jQuery3257776"的函数。

image.png
现在我们要做的便是修改服务端的代码，以便能够配合客户端完成整个请求过程，修改的方法如下图所示，我们将原来返回一个Map类型改为返回String类型，而且添加了callback参数，判断下是否有callback参数，如果有就说明是jsonp请求，我们要将result转换成json串并且包装成一个js函数返回。如果不是jsonp请求，那就直接将result转换成json串返回。

    //获取用户信息
    @RequestMapping(value = "/user/token/{token}",method = RequestMethod.GET)
    @ResponseBody
    public String getUserByToken(@PathVariable String token,String callback){
        TaotaoResult result = userService.getUserMessageByToken(token);
        if(StringUtils.isNotBlank(callback)) {
            return callback + "(" + JsonUtils.objectToJson(result) + ");";
        }
        return JsonUtils.objectToJson(result);
    }

• 测试
  测试的结果如上图所示（我们可以到admin已经登录的信息）

参考博文：
https://blog.csdn.net/u012453843/article/details/73033114