PC端、移動端頁面適配方案

　　前言

　　頁面自適應PC端、移動端大體上可以分為兩種：

　　1、在同一個頁面進行自適應布局，通常使用CSS3 @media 媒體查詢器實現

　　2、兩套頁面，在后端進行統一適配，根據不同的瀏覽器UA返回對應的頁面

　　本文記錄在java后端進行PC端、移動端頁面適配的方案

　　工程結構

　　想要實現后端統一適配，首先要規范好工程結構

　　后端代碼，跟之前差不多，響應的viewName路徑，直接從業務模塊開始，適配工作交給aop；兩套頁面，對應的業務模塊，分別放在兩個目錄下面

　　aop適配器

　　統一的適配工作交由aop環繞切面進行，思路如下：

　　1、首先切入點是所有模塊的controller

　　2、if判斷，方法返回值為ModelAndView才需要進行處理

　　3、獲取瀏覽器UA進行判斷，修改返回值ModeAndView的viewName

　　　　PC端ua：windows nt、macintosh

　　　　移動端ua：iphone、ipod、android

　　現在的UA標識判斷還過於簡單，並沒有完全覆蓋市面上所有的PC端、移動端，這個需要自行補充

/**
 * PC端、手機端頁面適配器
 */
@Aspect
@Component
@Slf4j
public class ComputerOrMobileAdapterAspect {

    /**
     * Pointcut 切入點
     * 匹配controller包下面的所有方法
     */
    @Pointcut(value = "execution(public * cn.huanzi.qch.springbootuniappmui.*.controller.*.*(..))")
    public void pointcut() {
    }

    /**
     * 環繞通知
     */
    @Around(value = "pointcut()")
    public Object around(ProceedingJoinPoint pjp) {
        //request對象
        HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.currentRequestAttributes()).getRequest();

        try {
            //獲取返回值
            Object o = pjp.proceed();

            //攔截返回值為ModelAndView即可
            if("org.springframework.web.servlet.ModelAndView".equals(o.getClass().getName())){
                 /*
                PC端ua：windows nt、macintosh
                移動端ua：iphone、ipod、android
             */
                String adapter;
                String ua = request.getHeader("user-agent").toLowerCase();
                if (ua.contains("iphone") || ua.contains("ipod") || ua.contains("android")) {
                    adapter = "mobile";
                } else {
                    adapter = "computer";
                }
                log.info("PC端、手機端頁面適配器：" + adapter);

                //強勢修改
                ModelAndView modelAndView = (ModelAndView) o;
                String viewName = modelAndView.getViewName();
                modelAndView.setViewName(adapter + "/" + viewName);
                o = modelAndView;
            }

            return o;
        } catch (Throwable throwable) {
            //返回統一錯誤頁面
            log.error(throwable.getMessage());
            return new ModelAndView("common/error/500");
        }
    }
}

　　測試與效果

　　由於我們已經規范了工程結構，HTML文件的存放路徑是先分PC端、移動端兩個大目錄，每個大目錄下面才是具體的業務模塊目錄，因此我們的controller中設置的viewName直接從業務模塊目錄開始就可以了，前面的兩個大目錄又aop去適配統一添加

@RestController
@RequestMapping("/index/")
public class IndexController {

    @GetMapping("index")
    public ModelAndView index(){
        return new ModelAndView("index/index");
    }

    @GetMapping("getData")
    public String getData(){
        return "獲取數據接口";
    }
}

　　效果演示

　　可以看到，已經能根據不同的UA響應不同的HTML頁面，同時，只有controller中，響應值為ModeAndView的aop適配器才會進行工作

　　同時，瀏覽器的url是直接從業務模塊開始，而不是在aop適配器修改后的路徑