持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情

前言

最近这不是在做WhiteHole嘛，同时也是大三在做自己的其他的很多事情，所以比较忙，加上大二下学期基本上都在玩机器学习，暑假打比赛做课题。所以在web开发的领域还是有点生疏了。那么刚好也趁现在做一个小结吧，现在的话我们已经开始走向正轨，基本上比较难的点已经有了解决的方案。往里面写接口就好了。那么咱们的这个小结也是从多个方面来说吧。

前端问题

页面刷新失效

首先我们来看到前端我所遇到的问题，首先说明一下的 是我使用的是vue，在版本的选择上还是vue2，因为当时装的就是vue2懒得重新搞了，加上当时有以前用vue2写的一些代码，所以的话就没有换。 那么问题是这样的： 首先的话我这里有一个主的页面，之后一个页面里面嵌套了很多子页面。就比如这个： 主页面其实就是侧边导航，其他的都是子页面。

那么问题就是，当我们的页面进行刷新的时候，就是按住浏览器的刷新按钮的时候呢，我们的子页面的数据不会渲染，严格意义上来说是，我们的页面压根没有初始化（子页面）。

所以为了解决这个问题的话，我这边是强制让组件刷新。 方案很简单： 首先在router-view这里 我们这里定义了一个update变量：

  data() {
    return {
      update: true
    }
  },

之后有这个方法来控制这个参数

  methods: {
    reload() {
      // 移除组件
      this.update = false
      // 在组件移除后，重新渲染组件
      // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
      this.$nextTick(() => {
        this.update = true
      })
    }
  },

然后我们把这个方法放在了周期函数里面。 我这里是放在了create里面

axios异步问题

这个axios的话其实是异步的，默认。其实和我们的java里面我complatefuter是类似的，那么这个时候就有点问题了，有时候我们需要做到同步，那么这里有两个解决方案。第一个直接这样： 方法二就是使用异步编排 Promise 这里的话，我的这个代码是和element图片上传的组件混合使用的，没有办法演示。 但是可以看看这个是咋写的：

 beforeUpload(file) {
      let _self = this;
      return new Promise((resolve, reject) => {
        // 请求后端（请求地址和后端访问地址一样）
        axios
          .get('/third-part/oss/policy')
          .then(response => {
            response = response.data;
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessid;
            _self.dataObj.key = response.data.dir +getUUID()+"_${filename}";
            _self.dataObj.dir = response.data.dir;
            _self.dataObj.host = response.data.host;
            resolve(true);
          })
          .catch(function (error) {
            alert(error)
            console.log("出错了...",err)
            reject(false);
          })
      });
    },

缩放比例

电脑缩放比

首先我们来看到正常的页面 我是使用我自己的笔记本开发的，所以缩放比是125% 所以虽然说在浏览器里面显示的是100%但是实际上和系统是一样的都是自己缩放到了125%。所以这导致了一个问题，那就是咱们的页面只有在缩放比为125%的时候才正常。如果切换为100%，或者150%这样的屏幕上直接裂开。

限制缩放

由于在前期的时候没有好好考虑到这个问题，所以的话，很难直接进行完整的修改，这里有不少的解决方案，但是通过使用之后都没达到我想要的效果。 所以既然我在125%下面的显示是没有问题的，那么我为什么不可以直接限制浏览器静止对页面进行缩放捏。

感谢万能的搜素引擎。

我们只需要监听一下页面的缩放事件然后禁止它，让我们的缩放比例始终保持在我们预期的比例内。

/**
 * @description 校正windows页面在系统进行缩放后导致错乱的问题
 * **/

class DevicePixelRatio {
  constructor() {
    //this.flag = false;
  }
  //获取系统类型
  _getSystem() {
    let flag = false;
    var agent = navigator.userAgent.toLowerCase();
    //		var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
    //		if(isMac) {
    //			return false;
    //		}
    //现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
    if(agent.indexOf("windows") >= 0) {
      return true;
    }
  }
  //获取页面缩放比例
  //	_getDevicePixelRatio() {
  //		let t = this;
  //	}
  //监听方法兼容写法
  _addHandler(element, type, handler) {
    if(element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if(element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  }
  //校正浏览器缩放比例
  _correct() {
    let t = this;

    document.getElementsByTagName('body')[0].style.zoom = 1.25 / window.devicePixelRatio;
  }
  //监听页面缩放
  _watch() {
    let t = this;
    t._addHandler(window, 'resize', function() { //注意这个方法是解决全局有两个window.resize
      //重新校正
      t._correct()
    })
  }
  //初始化页面比例
  init() {
    let t = this;
    if(t._getSystem()) { //判断设备，目前只在windows系统下校正浏览器缩放比例
      //初始化页面校正浏览器缩放比例
      t._correct();
      //开启监听页面缩放
      t._watch();
    }
  }
}
export default DevicePixelRatio;

重点是这句话：

 document.getElementsByTagName('body')[0].style.zoom = 1.25 / window.devicePixelRatio;

我的电脑是125%比例缩放，所以这里取值是1.25，如果你的电脑是在100%下的话，你取值为1.0即可。

之后再你想要的页面这样：

import DevicePixelRatio from "xx/xxx/./DevicePixelRatio";
  created() {
    new DevicePixelRatio().init();
  },

我的话是全部都禁止，所以的话我是在App.vue里面写。那么这个是这个的解决方案。

后端

后端的话主要是参数校验的问题，这里的话问题比较多，但是最重要的问题我觉得可以说一下的就是分页问题。关于分页传递参数的问题。

分页问题

问题重述

这个问题的话，不太好描述，总结来说就是这样的，有这样的一组参数： ” 我们这一组参数的话，我们会通过feign进行远程调用，那么调用的话其实就是调用对面服务的一个分页处理，所以我们这里看到有page，limit参数。这里面的话我们调用的就是mybatis-plus的分页。 对面服务重写的是这个方法。

之后的话，类似的服务过程当中，也是使用类似的参数，但是在处理逻辑上是这样的：

他是直接用自己本地的一个服务的。但是此时会报错，就是page和limit参数解析不出来，原因是无法进行类型转换。

问题原理

之所以会出现这个问题其实很简单（当然我也是看了mp的源码才反应过来的）。 当我们进行远程调用的时候，page和limit这种简单类型换转化为String类型。 源码的话，我这里忘记在哪里了，但是处理的手段很简单，人家就是直接把String重新转化为Long类型的。

所以通过feign没有问题，因为此时Page和Limit是String类型，但是如果直接传递的话，那么问题就大了他是Object转化不了。

那么解决方案就是：