Bug汇总—Day03

一、项目运行报错

二、项目运行Bug

1、问题描述：Vue前端项目运行后台管理平台订单管理页面下的三个子页面出现点击不同的路由还是会出现相同的页面，导致页面和数据不匹配

解决办法：

• 在监听器中添加状态来根据路由地址变化的时候来调用数据getDataList()

//监听订单表参数是否变化，从而调取接口
  watch: {
  '$route' (to, from) { //监听路由是否变化
    if(this.$route.params.status){//判断状态是否有值
      // console.log("路由辩护")
      let url = to.path.substring(9,11)
      this.getDataList();
    this.contentStyleChange()
      // console.log(url) 
      // console.log(this.$route.params.status)
      // if (url == '申请'){
      //   this.getDataList();
      //   this.contentStyleChange()
      // }     
      // if (url == '发货' && this) {

      // }    
      // if (url == '完成') {

      // }     
    }
  }
  },

• 在getDataList()方法中添加逻辑判断

.then(({ data }) => {
        if (data && data.code === 0) {
          console.log(this.$route.params.status)
          if (this.$route.params.status == '已申请'){
            console.log(data.data.list)
            if (data.data.list.some(this.isFieldValidShengqing)){
              this.dataList = data.data.list;
              this.totalPage = data.data.total;
            }
          }
          if (this.$route.params.status == '已发货'){
            if (data.data.list.some(this.isFieldValidFaHuo)){
              this.dataList = data.data.list;
              this.totalPage = data.data.total;
            }
          }
          if (this.$route.params.status == '已完成'){
            // if (data.data.list.some(this.isFieldValidWanCheng)){
            //   this.dataList = data.data.list;
            //   this.totalPage = data.data.total;
            // }
          }
   
        } 

上述办法都不管用，点击不同的路由导航，显示的页面数据还是不变

分析上述原因可能是因为订单的页面都是一个导致的

• 将已发货和已完成的订单页面都分开，分别创建两个页面，因分店那边的页面操作也和管理员这边的操作不一样，故此会想到直接一次性全部创建好
• 在上述功能完成的基础上开始完成各个页面的数据获取
  • 管理员已申请页面：此页面不在需要任何数据获取逻辑判断了，只是要对发货按钮进行功能添加
  • 管理员已发货页面：拦截已申请但是未发货的的数据获取到数据，这里可以通过加逻辑判断发货字段拦截获取数据来实现**(这里的管理员不需要做操作，也是只是看就行)**
  • 管理员已完成页面：和已发货页面一样，需要拦截已申请但未发货、未完成，同时需要拦截已申请已发货但是未完成的数据
  • 前台已申请页面：和管理员展示的数据一样，但是操作不同只是能看就行
  • 前台已发货页面：拦截已申请但是未发货的数据，这里的数据是已申请&&已发货的数据，点击了收货按钮以后会在前台和管理员页面出现已完成的数据显示
  • 前台已完成页面：拦截数据(已申请&&已发货&&已完成)

上述的功能只需要操作状态字段前端获取数据的时候添加逻辑判断，按钮只是修改状态字段的状态。

• 实现前端Vue拦截获取到的后台数据符合的数据可以使用filter方法(其余方法类似)

then(({ data }) => {
        if (data && data.code === 0) {
          console.log("完成页面")
          console.log(data.data.list)
          this.dataList = data.data.list.filter(item => item.shenqingstatus === '已申请' && item.fahuostatus === '已发货' && item.wanchengstatus === '已完成');
          this.totalPage = data.data.total;
        } 

2、问题描述：按照之前思路操作以后，在管理员页面的已发货订单和已完成订单页面军不显示任何数据

原因分析：在复制的之前的页面中存在v-if的条件语句

成功了！！

3、问题描述：点击发货按钮以后，触发的报错信息是400

解决思路：将fahuo(scope.row.id)传过来的id中的形参去掉this.

this.$http({
          url: `orders/fahuo/${fahuoInfo}`,
          method: 'post',
        }).then(res => {

4、问题描述：在点击了发货按钮之后，在原来已申请页面还显示，他的发货状态是’已发货’，后边还能发货呢?同样的道理，在分店收货之后，在原来已发货页面也还能看到已完成的数据，都已经完成了的订单还能收货呢?

解决思路:在前端获取数据的时候，将之前的条件加强

• 管理员已申请页面:只接收’已申请’、‘未发货’、‘未完成’
• 管理员已发货页面:只接收’已申请’、‘已发货’、‘未完成’
• 管理员已完成页面：只接收’已申请’、‘已发货’、‘已完成’
• 分店已申请页面：只接收’已申请’、‘未发货’、‘未完成’
• 分店已发货页面：只接收’已申请’、‘已发货’、‘未完成’
• 分店已完成页面：只接收’已申请’、‘已发货’、‘已完成’

5、ECharts调用后台获取数据后遍历的时候发生错误

**解决思路：**后台接收到的数据字段不匹配

三、项目环境问题

arts调用后台获取数据后遍历的时候发生错误

[外链图片转存中…(img-1IawQCyy-1712741479007)]

**解决思路：**后台接收到的数据字段不匹配

[外链图片转存中…(img-ygFEeDhy-1712741479008)]

三、项目环境问题