PC side, the mobile terminal page adaptation scheme

　　Foreword

　　Page adaptive PC side, the mobile terminal can be divided into two types:

　　1, the adaptive layout with a page, usually using CSS3  @media media queries implemented

　　2, two sets of pages, unified fit in the back end, UA returns the corresponding page depending on the browser

 

　　This article documents on PC at the back end java, mobile end page adaptation program

 

　　Engineering structure

　　Want to achieve back-end unified adaptation, we must first standardize good engineering structures

　　Back-end code, with almost before, viewName channel response, starting directly from the service module, adapted to work AOP; two page, the corresponding service module, respectively, on the two directory

　　

 

　　aop adapter

　　The adaptation work to a unified aspects that surround aop, ideas are as follows:

　　1, the first entry point is the controller for all modules

　　2, if is determined, the method returns a value only needs to be processed ModelAndView

　　3, the browser acquires the UA determination, modify the return value of ModeAndView viewName

　　　　PC端ua：windows nt、macintosh

　　　　Moving end ua: iphone, ipod, android

 

　　Now UA logo judgment also too simple, and does not fully cover the market for all the PC side, the mobile side, the need to supplement their own

/ ** 
 * the PC side, the mobile phone terminal adapter page 
 * / 
@Aspect 
@Component 
@ SLF4J 
public  class ComputerOrMobileAdapterAspect { 

    / ** 
     * Pointcut pointcut 
     * packet controller matches all of the following methods 
     * / 
    @Pointcut (value = "Execution (public * cn.huanzi.qch.springbootuniappmui. *. Controller. *. * (..)) " )
     public  void the pointcut () { 
    } 

    / ** 
     * surround notification 
     * / 
    @Around (value =" the pointcut () " )
     public Object around (ProceedingJoinPoint PJP) {
         // Request objects 
        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" ; 
                } the else { 
                    Adapter = "Computer" ; 
                } 
                log.info ( "the PC side, the mobile phone terminal adapter page:" + Adapter); 

                // strong modification 
                ModelAndView ModelAndView = (ModelAndView) O; 
                String viewName = modelAndView.getViewName (); 
                modelAndView.setViewName (Adapter + "/" + viewName); 
                O = ModelAndView; 
            } 

            return O; 
        }the catch (Throwable the Throwable) {
             // return unified error page 
            log.error (the Throwable.getMessage ());
             return  new new ModelAndView ( "Common / error / 500" ); 
        } 
    } 
}

 

　　Testing and results

　　Since we have standardized engineering structures, storage path of the HTML file is first divided the PC side, the mobile terminal two large directories, each directory is a large concrete block business directory, so viewName our controller set directly from the business module directory to start on it, in front of two large directory aop to adapt and add unity

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

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

    @GetMapping("getData")
    public String getData(){
        return "获取数据接口";
    }
}

 

　　Demonstration effect

　　You can see, we have been able to respond to different HTML pages depending on the UA, at the same time, only the controller, in response to the value of ModeAndView aop adapter will work

　　At the same time, the browser's url directly from the service module is the beginning, not the path adapter modified after aop

 

　　postscript

　　In the back-end java on PC, mobile end page adaptation of the program for the time being to this record, the follow-up to be supplemented

 

　　Open Source Code

　　Open source code has been hosting to my GitHub, the code says:

　　GitHub：https://github.com/huanzi-qch/springBoot

　　码云：https://gitee.com/huanzi-qch/springBoot