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)
})
这样就解决了