前言:
前面我們一直都是用工具來(lái)測(cè)試的，接下來(lái)我們?cè)陧?yè)面上展示

1.導(dǎo)入靜態(tài)資源

直接復(fù)制黏貼沒(méi)啥好說(shuō)的

image.png

配置資源映射

image.png

為了解決靜態(tài)資源被攔截而無(wú)法訪問(wèn)的問(wèn)題蚣抗，我們?cè)趕pringmvc.xml文件中配置下資源映射（也相當(dāng)于制定好訪問(wèn)規(guī)則）如上圖所示，我們之所以只配置了css瓮下、images翰铡、js的資源映射，而沒(méi)有配置jsp的映射是由于我們并不會(huì)直接去訪問(wèn)jsp資源文件讽坏，而是會(huì)經(jīng)過(guò)Controller接口锭魔，返回邏輯視圖，通過(guò)邏輯視圖去springmvc.xml文件中的視圖解析器配置（如上圖“視圖解析器配置”）當(dāng)中去匹配要訪問(wèn)的資源文件路呜，視圖解析器會(huì)自動(dòng)幫我們?cè)诜祷氐倪壿嬕晥D后面加上".jsp"迷捧，而且指定路徑就在WEB-INF/jsp/目錄下织咧，因此我們的jsp文件一定要放在WEB-INF下（除非你配置的視圖解析器的位置是別的目錄）

2.實(shí)現(xiàn)登錄，注冊(cè)頁(yè)面的跳轉(zhuǎn)

• 功能分析
  請(qǐng)求的url：
  登錄：/page/login
  注冊(cè)：/page/register
  參數(shù)：無(wú)
  返回結(jié)果：邏輯視圖String

@Controller
public class PageController {

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

• 測(cè)試
  
  image.png
  
  
  image.png
  
  PS:
  1.頁(yè)面里面的某些跳轉(zhuǎn)還有很多不完善的漠秋，我改了一部分笙蒙，直接拿過(guò)去用就好了。如果還有一些跳轉(zhuǎn)到404就改成正確的地址就好了
  2.登錄的時(shí)候可能會(huì)提示說(shuō)XXXXXXX為空庆锦，那是因?yàn)闆](méi)有判斷token為空捅位，加上這句代碼就好了
  
  image.png

• 測(cè)試
  啟動(dòng)taotao-manager、taotao-content搂抒、taotao-search艇搀、taotao-manager-web、taotao-portal-web求晶、taotao-search-web焰雕、taotao-item-web、taotao-sso芳杏、taotao-sso-web工程
  輸入賬號(hào)密碼矩屁。我們可以看到跳轉(zhuǎn)到了首頁(yè)。

  
  
  image.png
  
  
  image.png
  
  

  觀察上面首頁(yè)爵赵，可以看到我們的登錄狀態(tài)是已經(jīng)登錄的狀態(tài)

3.JS跨域問(wèn)題

登錄的時(shí)候我們把token寫(xiě)到了cookie當(dāng)中档插，登錄成功后，我們查看Cookie信息亚再，如下圖所示郭膛，發(fā)現(xiàn)是有token信息的。

image.png

我們回到登錄頁(yè)面氛悬，可以看到token信息则剃。如下圖所示∪缤保可以看到與淘淘商城首頁(yè)的token信息是完全一致的棍现。

image.png

1、域名不同
2镜遣、域名相同端口不同己肮。
接著說(shuō)下什么是jsonp？
jsonp不是新技術(shù)悲关，它只是一種解決方案谎僻，使用js的特性繞過(guò)跨域請(qǐng)求，利用的特性便是js可以跨域加載js文件Ｔ⑷琛艘绍！舉個(gè)非常常見(jiàn)的例子，我們?cè)趆tml頭部一般都會(huì)引入很多js秫筏，甚至我們直接引用在線的js诱鞠，比如我們引用官方網(wǎng)站的jQuery路徑加載進(jìn)來(lái)也是可以的挎挖。JQuery的官方域名與我們的工程所在的域名肯定是不一樣的，但是不影響使用航夺，這就是我們所說(shuō)的js可以跨域請(qǐng)求js文件蕉朵！
跨域的特點(diǎn)是什么呢？我們可以在"Network"一欄看到請(qǐng)求的token信息阳掐，在Headers當(dāng)中發(fā)現(xiàn)服務(wù)端已經(jīng)正常響應(yīng)了始衅，如下圖所示。

image.png

image.png

image.png

image.png

image.png

我們刷新下淘淘商城首頁(yè)，可以看到請(qǐng)求中自動(dòng)為我們加上了回調(diào)函數(shù)捧杉，而且隨機(jī)為我們添加了函數(shù)名為"jQuery3257776"的函數(shù)陕见。

image.png

    //獲取用戶信息
    @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);
    }

• 測(cè)試
  測(cè)試的結(jié)果如上圖所示（我們可以到admin已經(jīng)登錄的信息）

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