【前端报错】前端发送请求到后端status错误问题记录一

1** 信息，服务器收到请求，需要请求者继续执行操作
2** 成功，操作被成功接收并处理
3** 重定向，需要进一步的操作以完成请求
4** 客户端错误，请求包含语法错误或无法完成请求
5** 服务器错误，服务器在处理请求的过程中发生了错误

1-1 前端发送请求到后端报400错误问题

1-1-1 解决方法

报400，必然前端的问题呀！自己看着请求里面的参数字段看了一上午，qiao！

• 一段时间无法解决要去问后端，看后端报错历史记录。不是只有500才能问

1. 报400是由于前后端json对象中的属性名与后端接收请求的实体类的属性名不对应（完全相同）引起的。

2. 排除400错误的方法如下：

   • 前端发送的属性名和后端实体类的属性名不对应

     • 解决方法：检查前端发送的Json对象中的属性名与后端接收请求参数的实体类对象的属性名是否对应（名称必须相同）
     • 前端发送的JSON对象的属性值后端实体类的属性中必须有
     • 实体类中的属性可以比JSON中属性多，但是不能比JSON对象中的属性少

   • 前端发送的属性名和后端实体类的属性名都对应

     • 解决方法：这种情况下报400是由于实体类中的属性名中有首字母大写的变量存在，切记接收请求的实体类中的属性中不能有首字母大写的变量名存在，否则也会报400错误

1-1-2 问题记录

1. • JSON对象的属性值 expire过期时间…格式问题
   • 非空实体类的属性不能为null
2. 贴出utils中的时间格式转换函数

	// 将中国标准时间转换为年月日 2099-01-01 00:00:00
export function transformDate(date) {
  var d = new Date(date)
  var datetime = d.getFullYear().toString().padStart(4, '0') + '-' + (d.getMonth() + 1).toString().padStart(2, '0') + '-' + d.getDate().toString().padStart(2, '0') + ' ' + d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0') + ':' + d.getSeconds().toString().padStart(2, '0')
  return datetime
}

// // 将中国标准时间转换为 00:00:00
export function transformTime(date) {
  var d = new Date(date)
  var datetime = d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0') + ':' + d.getSeconds().toString().padStart(2, '0')
  return datetime
}

3. js动态网对象添加数据

第一种方法
let obj ={"name":"tom","age":16}
let key = "id";
let value = 2
obj[key] = value;
console.log(obj)
 
第二种方法，利用扩展运算符,简单又实用
var obj1={"vue":300,"jquery":200};
var obj2={"react":500};
var obj3={
    ...obj1,
    ...obj2
}
console.log(obj3)
 
第三种办法
let obj4 = {a:"1"};
let obj5 = {b:"2"};
let obj6 = {c:"3"};
Object.assign(obj4,obj5,obj6);
console.log(obj4)

5. HTTP Status 400 (HTTP400状态码）

1-2 npm ERR! code ERESOLVE

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: eladmin-web@2.6.0
npm ERR! Found: codemirror@5.65.12
npm ERR! node_modules/codemirror
npm ERR!   codemirror@"^5.49.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer codemirror@"6.x" from vue-codemirror@6.1.1
npm ERR! node_modules/vue-codemirror
npm ERR!   vue-codemirror@"*" from the root project

3. 

解决方法

4. codemirror下载@4

1-3 vue弹出框组件关闭并销毁

传入不同参数显示不同的弹出框，但是数据的切换需要通过@change事件触发

• 需要销毁之前的弹出框组件🤔

1-3-1

1. • 步骤一：第一次打开页面，打开弹出框，一切正常。
     • 关掉弹出框，再打开，还是正常。
   • 步骤二：打开别的菜单，别的菜单正常显示
   • 步骤三：重复步骤一的操作，此时弹出框不再正常。

2. 是缓存导致的。

3. 解决办法：

   • <dialog-component :show.sync=“dialogShow” v-if=“dialogShow”/>
   • 说明：v-if=“dialogShow”就可以让页面在弹出框关闭的时候销毁弹出框，从而清理缓存。

1-4 el-table中遍历生成el-radio列，选中单项触发change事件

   <el-table
      v-loading="listLoading"
      :data="list"
      border
      style="margin-top: 20px;"
      empty-text="暂无数据"
    >
      <el-table-column
        label="选择"
        width="180"
      >
        <template slot-scope="{ row }">
          <el-radio v-model="version" :label="row.version" @change="compareV(row)">选中点击</el-radio>
        </template>
      </el-table-column>
      </el-table>