实战项目Day2

全国人民
110 阅读2分钟

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

Request body is missing

问题描述： 我想要新增一个菜品，但是在断点测试时，却一直报错，我采用postmapping,参数也加了@RequestBody,但是一直报错说：“required request body is missing”，百思不得其解，放图如下： image.png

解决方法： 好吧，写法是没有问题，但是我前端穿后端的数据没有封装成JSON，导致数据报错，又是记录自己愚蠢的一天

图片上传后端报错

问题描述： 前端使用Element UI的upload，beforeUpload有正常执行，但是后端报错：The field file exceeds its maximum permitted size of 1048576 bytes.] with root cause 大致的意思应该是表达我上传的图片文件太大1.05 MB (1,107,382 字节)，超过了可允许的最大范围 image.png

image.png 前端使用Element UI的upload代码：

// 上传图片前执行
beforeUpload (file) {
  if (file) {
    const suffix = file.name.split('.')[1]
    const size = file.size / 1024 / 1024 < 2
    if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
      this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
      this.$refs.upload.clearFiles()
      return false
    }
    if (!size) {
      this.$message.error('上传文件大小不能超过 2MB!')
      return false
    }
    return file
  }
},

解决方法： 在面向百度编程的过程中，发现spring/servlet/multipart的max-file-size用来设置允许上传文件的大小和max-request-size用来设置允许上传最大文件大小。找到了问题接下来就解决问题

// application.yml中spring下添加下面这段话，问题就解决了
spring:
  servlet:
    multipart:
      enabled: true #允许上传文件
      max-file-size: 3MB #允许上传文件的大小，默认1MB
      max-request-size: 3MB #允许上传最大文件大小，默认1MB

table里面type="selection"移动问题

问题描述： 当点击选中该列时，选择的方块会自己跑掉

peo.gif 在查看了网页源码后，我并未发现有什么特别的如位移、after伪类增加了什么之类的。

// 部分表格的前端代码
<el-table
          stripe
          :data="list"
          class="tableBox">
          <el-table-column type="selection" width="25" align="center"></el-table-column>
          <el-table-column label="菜品名称" prop="name"></el-table-column>
          <el-table-column label="图片" prop="image">
            <template slot-scope="{ row }">
            <el-image style="width: auto; height: 40px; border:none;cursor: pointer;"
            :src="getImage(row.image)"
            :preview-src-list="[ `/common/download?name=${row.image}` ]" >
            <div slot="error" class="image-slot">
              <img src="@/assets/noImg.png"  style="width: auto; height: 40px; border:none;" >
            </div>
          </el-image>
          </template>
          </el-table-column>
</el-table>

解决方法： 后来我仔细看了一下，这一列用来选择的单选框，它的结构是一个class名为cell的div包裹着el-checkbox

image.png

而受我们鼠标点击和选择的部分是el-checkbox_inner

image.png 而它的展现是一个行内块inline-block,在MDN中对于inline-block是这么解释的该元素生成块级元素盒，如果它是一个单独的内联盒，它将盒周围的内容一起流动（行为类似于替换元素）。 image.png

我就在想，如果把它的表现形式换成一个盒模型，默认子元素撑开，这样点击的时候就不会自己移动了，即将el-checkbox_inner的display由原来的inline-block改成block。 结果令人惊喜，它不移动了。很棒，但是我又有一个疑问，如果我之后遇到另一个需要行内块表现的el-checkbox怎么办？

进一步解决方法： 找到它的一个祖先元素，可以很好的发现，这些单选框都是在第一列，所以在需要设置为display: block;的el-checkbox加上：

.el-table_1_column_1 .el-checkbox__inner {
    display: block;
}

最后的展现效果：大家如果有不一样或者更好的方法，请在评论区交流讨论，我都会看滴

sol.gif

ScreenToGif

之前在掘金记录自己的一些文章时，一直找不到很好的可以描述问题的方法，录视频太麻烦，放图片又怕表达不清楚，所以后面想来想去还是找找可以搞动图的，这个还挺好用的，感兴趣可以试试。

avatar
文章
阅读
粉丝