demo项目开发笔录（web和mobile）

笔者在demo里使用的样式文件是w3.css，支持响应式，但笔者前端能力有限，并不能一次编写统一使用，于是对访问作了判断，并删减了移动端页面的部分内容。

一、判断是移动端还是PC端的请求：

package com.gcc.modules.untils;

/**
 * Created by gcc on 2018/5/4.
 */
public class IsMobileUtil {
    private final static String[] agent = { "Android", "iPhone", "iPod","iPad", "Windows Phone", "MQQBrowser" }; //定义移动端请求的所有可能类型
    /**
     * 判断User-Agent 是不是来自于手机,false则是web
     * @param ua
     * @return
     */
    public static boolean checkAgentIsMobile(String ua) {
        boolean flag = false;
        if (!ua.contains("Windows NT") || (ua.contains("Windows NT") && ua.contains("compatible; MSIE 9.0;"))) {
            // 排除 苹果桌面系统
            if (!ua.contains("Windows NT") && !ua.contains("Macintosh")) {
                for (String item : agent) {
                    if (ua.contains(item)) {
                        flag = true;
                        break;
                    }
                }
            }
        }
        return flag;
    }
}

二、判断后，修改view

    /**
     * 首页
     * @param model
     * @return
     */
    @RequestMapping("index")
    public String index(Model model, HttpServletRequest request){

        String userAgent = request.getHeader("User-Agent");
        String view = "modules/frontstage/index";
        if(IsMobileUtil.checkAgentIsMobile(userAgent)){
            view="modules/frontstage/mobile/indexMobile";
        }

        String typeId = request.getParameter("typeId");
//        String id = request.getParameter("id");
        String pagination = request.getParameter("pagination");
        String flag = request.getParameter("flag");
        Map<String,Object> commentMap=indexService.getList(typeId,pagination,flag);
        model.addAttribute("articleList",commentMap.get("articleList"));
        model.addAttribute("pagination",commentMap.get("pagination"));
        List<ArticleType> articleTypeList=articleTypeService.getTypeList();
        model.addAttribute("articleTypeList",articleTypeList);
        model.addAttribute("typeId",typeId);
        return view;
    }

注：userAgent值示例：

三、微调页面比例，结果如下：

web：

mobile：