20240123收获

写代码的时候突然出现失误，这里总结一下

1.我们传给后端的数据，我们需要明明白白的写出来数据结构，而我们拿来渲染的数据，因为是从后端拿来的数据，然后为了工作方便，我们不需要写明白数据结构，直接用一个数组或者对象接受就好了，因为我们渲染页面的时候往往只用一部分数据，所以我们只用关心我们要渲染哪些到页面上，渲染方式根据使用的UI框架即可，这样省力，所以不要预设数据结构。很多操作，尤其是往往到了工作中的时候，都是为了省力。很多设计和优化的目的也是为了省力。

2.像这种错误，通常都是因为import或者export出问题的，一种是export default但是import {}，还有export {},但是import xx 都可能会出这个问题。再就是from的文件路径错误或者模块的名字错误。一个个回去找，通常就能解决。

3.最简单的elementUI分页需要两属性一方法，属性分别是最大页码page-size和总数total，方法则是跳转方法current-change。

4.在html中，路由跳转省略this，依然是$router.push的写法。

5.像上传这种操作，我们应该单独写在一个文件里面，可以命名为common.js，通用操作，上传文件，可以分为两步，第一步调用上传文件接口，将数据发送给后端，这里要注意，用了formData，然后第一步会得到响应，第二步就是表单提交的时候，将响应的需要的数据传输给后端即可。这里我思考过为什么需要两步，一步不行吗？我想了下，第一步主要是将文件传输给后端，后端存在minio之类的地方，然后后端会返回给我们这个操作后文件存放的地址。第二步是将我们上传的文件的地址上传给 后端，这里是为了让后端将文件和我们的操作关联起来，因为第二步的时候我们会上传表单里的其他信息，这样才算一次完整的表单提交。即包含一次文件的上传，获取文件存放的路径，然后再提交全部的数据。再一个，存在场景，用户在前端提交了文件，但是又删除了这次提交，然后用户传了另一个文件。如果我们没有将整个表单提交和文件做关联，而是交给后端的话，后端会无法知道用户究竟这个操作是要上传哪个文件，这是因为删除文件的操作是由我们前端完成的，后端并没有参与其中，所以这一步就导致了信息的不对等。再有一种场景，如果同一时间有其他用户也在上传文件，那么如果没有将文件与提交做关联，更加无法分清提交的时候究竟是谁上传的文件了。所以上传文件单独一个接口，目的是为了节省用户等待的时间，先把耗时的操作给做了，而有文件上传的表单提交分两次调接口则是为了确保数据的准确性。这是我目前的理解。

6.然后关于formData,这里主要是一个数据传输格式的知识点，简言之，文件上传，包括图片上传都要用到formData,和普通的json格式的上传做区分即可。axios默认的数据传输格式是json，但是其会根据我们上传的数据类型自动修改格式，所以不用我们手动设置Content-Type,而且就算手动设置了，数据格式不对，axios是不会听我们设置的格式的。