1、需求場景
用戶可以在某模塊某條數據詳情界面上覆制此詳情的鏈接，並將此鏈接引入到wiki或其他文檔中，其他用戶閱讀文檔時，可通過此鏈接直接查看某模塊某條數據詳情。
2020第一篇，就把某模塊稱爲“新年模塊”吧~~😊
2、功能點
①詳情中新增“複製鏈接”功能，此鏈接中包含新年編號作爲標識。
②用戶在瀏覽器地址欄直接訪問詳情鏈接，系統自動彈出此鏈接對應的新年詳情Dialog。
3、整體思路
因爲左側菜單和右側頁面都是包含在index中，所以可以通過index頁面入手。在index頁面創建隱藏文本框，用來存放新年編號，根據新年編號是否爲空來判斷是否需要彈出詳情框。
4、觸發狀態以及實現方式
根據需求，結合實際場景，此功能的觸發狀態可分爲兩種：用戶已登錄狀態、用戶未登錄狀態。
4.1、用戶已登錄狀態
①Controller中新增與鏈接中請求地址匹配的接口，可通過Get請求直接調用。接口中通過重定向，將請求重定向至/index，重定向過程中通過RedirectAttributes傳遞新年編號參數，在/index中接收新年編號參數，並將其通過ModelMap傳遞給index頁面。（若不用重定向，頁面中地址欄的信息會變成我們粘貼進的鏈接，導致每次使用F5刷新，都會彈出新年詳情）
// 系統首頁
@GetMapping("/index")
public String index(ModelMap mmap)
{
// 取身份信息
SysUser user = ShiroUtils.getSysUser();
// 根據用戶id取出菜單
List<SysMenu> menus = menuService.selectMenusByUser(user);
mmap.put("menus", menus);
mmap.put("user", user);
mmap.put("copyrightYear", Global.getCopyrightYear());
mmap.put("demoEnabled", Global.isDemoEnabled());
//將新年編號傳給頁面
mmap.put("newyearnunmber",mmap.get("newyearnunmber"));
return "index";
}
// 已登陸狀態直接通過鏈接訪問新年詳情
@GetMapping("/system/newyear/detail/link/{id}")
public String indexlink(@PathVariable("id") Long newyearnumber, RedirectAttributes model)
{
model.addFlashAttribute("newyearnunmber",newyearnumber);
return "redirect:/index";
}
②給頁面body添加onload事件，頁面加載完成後，通過判斷新年編號文本框是否有值來判斷是否彈出詳情框。
記得給body綁定onload事件
<input name="newyearnunmber" id="newyearnunmber" type="hidden" th:value="${newyearnunmber}">
//body加載成功後，若newyearnunmber不爲undefined則自動彈出新年詳情
function newyeardetail() {
let val = $("#newyearnunmber").val();
if (val != undefined && val != null & val != "") {
var options = {
title: "新年詳情",
width: 800,
height: ($(window).height() - 50),
url: ctx + "/system/newyear/detail/"+val,
skin: 'layui-layer-gray',
btn: ['關閉'],
yes: function (index, layero) {
layer.close(index);
}
};
$.modal.openOptions(options);
}
$("#newyearnunmber").val('');
}
4.2、用戶未登錄狀態
實現方式與用戶已登錄狀態的大致相同，唯一不同的是用戶未登錄時訪問鏈接，由於未登錄會被攔截，跳轉至登錄頁面，所以在登陸的時候需要記住原請求地址，並在登錄成功後訪問原去請求地址。
所以在登錄接口上要稍作修改：
①登錄接口添加參數，用於重定向時參數傳遞。
②登錄成功後，檢測是否有原請求，若有跳轉至原請求，若沒有則直接跳轉至index。
//直接重定向訪問項目，若直接返回index跳轉，瀏覽器地址欄中會帶着ticket等信息，導致界面無法刷新
//shiro在跳轉前有記錄跳轉前的頁面。前沒有認證的用戶請求需要認證的鏈接時，
//shiro在跳轉前會把跳轉過來的頁面鏈接保存到session的attribute中，
//key的值叫shiroSavedRequest，我們可以能過WebUtils類拿到
SavedRequest savedRequest = WebUtils.getSavedRequest(request);
//若savedRequest ！= null則證明在訪問某請求時檢測到未登錄，而跳轉到登錄界面，登陸後需訪問原請求地址
if(savedRequest != null){
String requestUrl = savedRequest.getRequestUrl();
if(requestUrl.contains("/system/newyear/detail/link")){
String[] split = requestUrl.split("/");
//將newyearnunmber傳遞給下一個請求
model.addFlashAttribute("newyearnunmber",split[split.length-1]);
return "redirect:index";
}
}
4.3、“複製鏈接”功能
複製功能是通過document.execCommand("Copy")來實現的，但是隻針對非hidden的input和textarea。而我不想把鏈接展示在界面上，所以通過追加非hidden的input又給移除的方式實現的。
<p style="text-align: right"><a οnclick="copyUrl()">點擊複製此詳情鏈接</a></p>
function copyUrl() {
var oInput = document.createElement('input');
//協議+域名+請求地址+參數
oInput.value = window.location.protocol+"//"+window.location.host+"/PMDHitchManager/system/hitch/detail/link/"+$("#hitchNumber").val();
$(oInput).css({opacity:'0'});
$(oInput).attr({name:"temp_link_input"});
document.body.appendChild(oInput);
oInput.select(); // 選擇對象
document.execCommand("Copy"); // 執行瀏覽器複製命令
oInput.className = 'oInput';
alert('複製成功');
$("input[name='temp_link_input']").remove();
}
