vue后台管理系统遇到的问题(持续更新）_vue require-atomic-updates

proxy代理：

 有统一前缀：dev-api

proxy: {
      '/dev-api': {
        target: 'http://localhost:8081',
        pathRewrite: { '^/dev-api': '' }
      }
    }

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000
})

export function login(data) {
  return request({
    url: '/wx/admin/api/loginAdmin',
    method: 'post',
    data
  })
}

后台需要JSON格式的数据：

const ar = { themeId: 1, articleContent: 'hello world' }
      const js = JSON.stringify(ar)
      console.log(js)
'
运行
运行

本人以为要使用JSON.stringify()把js的对象数据转换为JSON格式数据，但一直报错

{"themeId":1,"articleContent":"hello world"}

结果不用，通过axios直接传javascript对象就行了，搞了好久哈哈哈哈

获取两个对象相同的属性：

for (const a in result.data) {
          for (const b in this.updateForm) {
            if (a === b) {
              this.updateForm[b] = result.data[a]
            }
          }
        }

这样就可以把获取两个对象共同的属性，就能把新属性的值赋给另一个对象

后台给的图片是乱码怎么办:

 先在请求接口加上responseType：

export const getPhoto = (goodsPhotos) => request({ url: `/wx/sechandGoods/getPhoto?goodsPhotos=${goodsPhotos}`, method: 'get', responseType: 'arraybuffer' })

之后显示的不是乱码，而是一个数组:

 再把这个数组转换为base64格式就行了

 // 获取图片
    async getGoodsPhoto() {
      const result = await this.$http.sale.getPhoto('2023/04/07/微信图片_20230407215128_20230407215232A001.png')
      this.img = `data:image/png;base64,${btoa(new Uint8Array(result).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
    }

注意：new Uint8Array(result)中的result是后端返回的数据

然后就可以成功显示图片了

给vue添加响应式数据:

本人想给后端传过来的数据新加一个imgUrl属性,刚开始想到的是forEach循环遍历添加新属性

 async getAllGoods() {
      this.loading = true
      const result = await this.$http.sale.getGoodsList(this.currentPage, this.pageSize)
      if (result.code === 200) {
        result.data.list.forEach(async item => {
          const result = await this.$http.sale.getPhoto(item.goodsPhotos)
          const img = `data:image/png;base64,${btoa(new Uint8Array(result).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
          // eslint-disable-next-line require-atomic-updates
          item.imgUrl = img
        })
        this.tableGoodsData = result.data.list
        this.total = result.data.total
        this.loading = false
       }

但发现他的图片并没有获得src属性 ,而且也没有imgUrl属性，并且要通过按f12才能获得imgUrl和src属性

这个时候图片也能显示出来，这个时候本人开始查阅资料，使用了v-if发现并没有效果，经过不断的折腾，我想到了这并不是响应式数据，不能通过这种方式给data的响应式对象添加新属性，而是要用vue给的 this.$set添加响应式数据

 this.$set(this._data,”key”,value')
      对象：第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值。

  result.data.list.forEach(async item => {
          const result = await this.$http.sale.getPhoto(item.goodsPhotos)
          const img = `data:image/png;base64,${btoa(new Uint8Array(result).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
          this.$set(item, 'imgUrl', img)
        })

这样就解决了