实际项目中封装工具类,获取操作系统

项目需求:客户要求在客户端首页,添加一个小程序的链接图片,要求不同的客户点击的时候,记录IP地址和操作系统,做一个计数的功能,(PS:我自己还负责运营端的VUE代码,包括创建菜单和画页面,下面只展示这个需求自己开发遇到的问题)
(后端)
1.先创造一个工具类,获取操作系统,说白了就是http请求

package com.vteam.mssme.util;

import lombok.extern.slf4j.Slf4j;

import javax.servlet.http.HttpServletRequest;
import java.io.BufferedReader;
import java.io.IOException;

/**
 * Reques处理工具类 .
 *
 * @author leo.xie
 * @date 2019/4/8 0008 下午 2:56
 */
@Slf4j
public class RequestUtils {

    /**
     * 操作系统枚举 .
     *
     * @date 2020/5/11 15:36
     */
    public enum OS {
        OS_WINDOWS,
        OS_MACOS,
        OS_LINUX,
        OS_ANDROID,
        OS_IPHONE,
        OS_UNKNOWN
    }

    /**
     * 获取请求客户端的操作系统名称 .
     *
     * @param request
     * @return java.lang.String
     * @date 2020/5/11 15:30
     */
    public static OS getOs(HttpServletRequest request) {
        String userAgent = request.getHeader("User-Agent");

        OS os = OS.OS_UNKNOWN;
        if (userAgent.toLowerCase().indexOf("windows") >= 0) {
            os = OS.OS_WINDOWS;
        } else if (userAgent.toLowerCase().indexOf("mac") >= 0) {
            os = OS.OS_MACOS;
        } else if (userAgent.toLowerCase().indexOf("x11") >= 0) {
            os = OS.OS_LINUX;
        } else if (userAgent.toLowerCase().indexOf("android") >= 0) {
            os = OS.OS_ANDROID;
        } else if (userAgent.toLowerCase().indexOf("iphone") >= 0) {
            os = OS.OS_IPHONE;
        } else {
            os = OS.OS_UNKNOWN;
        }

        return os;
    }
} 

2.储存接口

    /**
     * 新增统计
     *
     * @param
     * @return com.vteam.vtarm.api.RespEntity
     * @date 2020/5/9 上午 11:12
     */
    @PostMapping(value = "/doSavePalmtopLoglist")
    public RespEntity doSavePalmtopLoglist(HttpServletRequest request) {

    // 获取客户端操作系统
    RequestUtils.OS os = RequestUtils.getOs(request);

    String osValue = null;

    if (RequestUtils.OS.OS_WINDOWS.equals(os)) {
    osValue = GlobalConstants.EnglishAlphabet.A;
    } else if (RequestUtils.OS.OS_MACOS.equals(os)) {
    osValue = GlobalConstants.EnglishAlphabet.B;
    }

                                              -------这样调用

        FlogZzbMVo flogZzbMVo = new FlogZzbMVo();
        flogZzbMVo.setClientIp(RequestStore.getIpAddress());
        flogZzbMVo.setClientOs(os);
        flogZzbMVo.setCreateDate(LocalDateTime.now());
        flogZzbMVo.setClientPlace(RequestStore.getLocation());
        flogZzbMService.save(flogZzbMVo);
        return RespEntity.ok();
    }

二.如果不想封装工具类

      // userAgent中有很多获取请求信息的方法

     UserAgent userAgent = UserAgent.parseUserAgentString(request.getHeader("User-Agent"));   ---------这里是没有封装过的工具类的获取操作系统的方法(这个方法是能准确的定位你的系统型号)
      // 获取客户端操作系统
     String os = userAgent.getOperatingSystem().getName();
     

(前端)
1.

<div id="body">
  <el-table
    :data="self.logList"
    v-loading="loading" size="small" row-class-name="success-row" highlight-current-row stripe>
    <el-table-column align="center" :label="$t('序号')" width="70">
      <template slot-scope="scope">
        <span>{{(page.pageNum - 1) * page.pageSize +scope.$index + 1}}</span>     ------主要是这个序号自增的问题
      </template>
    </el-table-column>
    <el-table-column :label="$t('客户端IP')" show-overflow-tooltip>
      <template slot-scope="scope">
        <span>{{ scope.row.clientIp }}</span>
      </template>
    </el-table-column>
    <el-table-column :label="$t('客户端操作系统')"  show-overflow-tooltip>
      <template slot-scope="scope">
        <span>{{ getApiType(scope.row.clientOs) }}</span>
      </template>
    </el-table-column>
    <el-table-column :label="$t('操作时间')"  show-overflow-tooltip>
      <template slot-scope="scope">
        <span>{{ scope.row.createDate }}</span>
      </template>
    </el-table-column>
    <el-table-column :label="$t('客户端地点')" width="200" show-overflow-tooltip>
      <template slot-scope="scope">
        <span>{{ scope.row.clientPlace }}</span>
      </template>
    </el-table-column>
  </el-table>
</div>

methods: {
  getPageData() {
    this.loading = true;
    if (this.dateList && this.dateList.length) {
      this.params.createDateStart = this.dateList[0];
      this.params.createDateEnd = this.dateList[1];
    } else {
      this.params.createDateStart = "";
      this.params.createDateEnd = "";
    }
    // 组装查询条件
    let data = {
      data: this.params,
      pageNum: this.page.pageNum,
      pageSize: this.page.pageSize
    };
    // 查询数据
    palmtopLog.findPalmtopLogPage(data).then(
      res => {
        this.loading = false;
        this.self = {
          logList: res.data.logList,
          total: res.totalCount
        };
      },
      error => {
        this.loading = false;
      }
    );
  },

  getApiType(type){             --------------这里是一个类型的转化,我们数据库存的类型是 A和B

    if (type !=''){
      if (type =='A'){
        return "Windows"
      } else{
        return "Mac OS"
      }
    }
  },
}

这个是运营端的页面效果