vue 前后端交互(解决新手的尴尬)

  • Post author:
  • Post category:vue




前后端交互


一、请求时,要求携带参数或者请求头怎么写

二、获取后端数据,如何按照格式获取


一、



1.1

每个

请求都要求携带上token, 位置:请求头


那么可以进行全局配置,在上次的

博客

中有详细说到如何配置。


1.2

个别

请求要求携带userId, 位置:请求头


一般来说,userId都是在登录成功的时候,存放在localStorage中,那么我们去那里提取就好啦~

      let userId = localStorage.getItem('userId')
      let config = {
        headers: { 'userId': userId }
      }



注意:携带的是请求头的时候不管是get还是post,都直接把变量名用逗号隔开写在尾部,如:{…,config}


1.3 携带必填参数, 位置:body


获取数据的方法中:

1)、创建一个变量,如 let data = {


today: 1, scppe:‘d’

}

2)、在连接后端数据的时候,把变量名用逗号隔开写到尾部 如:

const { data: res } = await this.$http.get('api接口', { params: data })



注意:get请求带上params,post不用带。get请求:(…,{params:data}) post请求:(…,data)


1.4在地址的中间带上参数的(拼接地址)

1.5 在地址的尾部带上参数名和值的


例子写一块啦~

const { data: res } = await this.$http.get(
          `categories/${this.cateId}/attributes`,
          {
            params: { sel: 'many' }
          }
        )


1.6,get请求一般多放在地址后面拼接,此刻请求参数不能是数组,可以用逗号分隔代替数组;post等放在body上的请求体则可以使用任何格式的参数


二、



2.1、后端数据为数组格式,前端data已有固定的一个属性名,那么获取数据方式为直接赋值,因为是数组,因此赋值时要写上[0]



案列:


后端数据格式:

{
    "code": 20000,
    "message": "deserunt velit aliquip proident",
    "data": [
        {
            "frieMsg": 83,
            "leave": 74,
            "date": "1975-12-12",
            "malfunction": 82
        }
    ]
}

前端中的data写法:

today: {
        frieMsg: 0,
        malfunction: 0,
        leave: 0
      }

存储数据方法:

        this.today.frieMsg = res.data[0].emg
        this.today.malfunction = res.data[0].Battery
        this.today.leave = res.data[0].offState


2.2、后端数据为数组格式,前端data只给出了一个空数组,属性名和属性值都没写



步骤:


1)、创建一个空数组,用于存放获取的数据

2)、把后端数据push进空数组

3)、把填充好的数组的值赋给data


案例:


后端数据格式

{
"code":20000
"message":"业务请求成功"
"data":{
    "data":[
        0:{
           "latitude":23.04678
           "longitude":113.736929
           "code":"441988106"
           "name":"啦啦镇"
           "value":2
           }
        1:{...}
        2:{...}
       ]
   }
}

前端的要求格式:

captals:[{
        'name': '北京市',
        'center': [116.407394, 39.904211]
      },....]

前端的data写法:

capitals:[]

存储数据方法:

 let _this = this
      let formData = []
      res.data.data.forEach(function (elem, index) {
        let data = {
          name: elem.name,
          center: [elem.longitude, elem.latitude]
        }
        formData.push(data)
      })
      _this.capitals = formData


2.3、后端数据传过来的是对象,但是前端的格式要求为数组(由于用了第三方插件的硬性规定)



需求:把从后端拿来的对象替换掉前端数组里面原有的数据



案列:


后端数据格式(此是后台打印的):

{
    adImageName: "adve/11.jpg"
	adLink: "www.baidu.com"
	adName: "11.jpg"
	adOrder: 5
	adType: 1
	idBanner: 51
}

前端格式要求:

fileList: [{........}]

前端的data写法:

fileList: []

存储数据方法:

 let _this = this
 let { data: res } = await this.$http.get(`/ban/${url}`)
 data.push({
              url: `图片地址`,
              name: res.data.adName,
              link: res.data.adLink,
              order: res.data.adOrder,
              banner: res.data.idBanner,
              type: res.data.adType
            })
  _this.fileList = data


2.4、 后端数据:后端返回来的为数组,内含多个对象,对象里面又包含多个对象,具体描述如下代码:

前端要求:把里面的多对象拆开,并分别合并到外层的共同数组中,具体描述如下代码:


后端数据格式:

 "list":[
        {
            "maintainId":"订单",
            "hitchInfo":"说明",
            "addressPhone":"手机",
            "provinceCode":"行政码",
            "cityCode":"行政码",
            "countyCode":"行政码",
            "townCode":"行政码",
            "maintainHitchList":[
                {
                    "hitchId":"1342376174348464130",
                    "hitchType":"类型",
                    "productName":"SD",
                    "maintainId":"20201225N337C6BB2"
                },{
                    "hitchId":"1342376174348464130",
                    "hitchType":"类型",
                    "productName":"TM",
                    "maintainId":"20201225N337C6BB2"
                }
            ]
        }, {
            "maintainId":"订单2",
            "hitchInfo":"说明2",
            "provinceCode":"行政码",
            "cityCode":"行政码",
            "countyCode":"行政码",
            "townCode":"行政码",
            "maintainHitchList":[
                {
                    "hitchId":"1342376174348464130",
                    "hitchType":"类型",
                    "productName":"SD",
                    "maintainId":"20201225N337C6BB2"
                },{
                    "hitchId":"1342376174348464130",
                    "hitchType":"类型",
                    "productName":"SD",
                    "maintainId":"20201225N337C6BB2"
                }
            ]
        },
    ],


前端要求的数据格式:

 "list":[
        {
            "maintainId":"订单",
            "hitchInfo":"说明",
            "addressPhone":"手机",
            "provinceCode":"行政码",
            "cityCode":"行政码",
            "countyCode":"行政码",
            "townCode":"行政码",
            "hitchId":"1342376174348464130",
            "hitchType":"类型",
            "productName":"SD",
            "maintainId":"20201225N337C6BB2"       
        },{
        	"maintainId":"订单",
            "hitchInfo":"说明",
            "addressPhone":"手机",
            "provinceCode":"行政码",
            "cityCode":"行政码",
            "countyCode":"行政码",
            "townCode":"行政码",
            "hitchId":"1342376174348464130",
            "hitchType":"类型",
            "productName":"TM",
            "maintainId":"20201225N337C6BB2"
        },
        ....
    ],


具体实现:

 repairMaintain(formdata).then(response => {
        this.list = response.data.list; //把后端获取到的数据保存到list中
        const lists = []
        for (let i = 0; i < this.list.length; i++) {  
          for (let n = 0; n < this.list[i].maintainHitchList.length; n++) {
              const saveMsg = {
                maintainId: this.list[i].maintainId,
                hitchInfo: this.list[i].hitchInfo,
                clientName: this.list[i].clientName,
                addressPhone: this.list[i].addressPhone,
                addressDetailed: this.list[i].addressDetailed,
                updateTime: this.list[i].updateTime,
                createTime: this.list[i].createTime,
                hitchType: this.list[i].maintainHitchList[n].hitchType,
                productName: this.list[i].maintainHitchList[n].productName
              }
              lists.push(saveMsg)
          }
        }
        this.list = lists
        console.log(this.list, 'listlistlistlistlistlistlist')


2.5 需要把拿到的后端数据,放在对象里面的对象里,如:

  list:[
     a:1,
     b:2,
     c:{
     	c1:3,
     	c2:5
       }
   ]


具体实操:

   repairMaintain(formdata).then(response => {
        this.list = response.data.list; //从后端获取的数据存储再list中
        const lists = []
        for (let i = 0; i < this.list.length; i++) {
          for (let n = 0; n < this.list[i].maintainHitchList.length; n++) {
              const saveMsg = {
                maintainId: this.list[i].maintainId,
                hitchInfo: this.list[i].hitchInfo,
                clientName: this.list[i].clientName,
                selected: {    //这里可以直接嵌入对象的哦
                  province: this.list[i].provinceCode + '',
                  city: this.list[i].cityCode + '',
                  area: this.list[i].countyCode + '',
                  town: this.list[i].townCode + ''
                },
              }
              lists.push(saveMsg)
          }
        }
        this.list = lists
      });


2.5 后端的数据为对象里面包含多个数组,前端需要拿取每个数组里面的两个值,组合成键值对,放在一个对象里,具体如下


后端返回的数据为:

[
	{
	 productName: "TD"
	 profileImages: "["product/TD.png"]"
	 }
	 {
	 productName: "SD"
	 profileImages: "["product/SD.png"]"
	 }
	 {
	 productName: "ID"
	 profileImages: "["product/ID.png"]"
	 }
]

前端要求整合成:

let obj = {
			TD: product/TD.png,
			SD: product/SD.png,
			ID: product/ID.png
 		}

实现如下:

  let myImg = await getProduct();
          if (myImg.code === 200) {
            let b = {}
            myImg.data.forEach((e) => {
              b[e.productName] = e.profileImages
            })
            console.log(b, 6666);
          }


2.5 将多层的信息整合成一层,将同一属性名的属性值使用 , 分隔开,具体如下:

原数据为:

date2: "2020.5.15"
clientName: "迎冬"
addressPhone: "15788562369"
list: [{
	hitchInfo: '111',
    hitchTypes: '11111',
    productNames: '111111'},{
	hitchInfo: '222',
    hitchTypes: '22222',
    productNames: '222222'
	}
]

要求整合成:

date2: "2020.5.15"
clientName: "迎冬"
addressPhone: "15788562369"
hitchInfo: '111','222'         //使用逗号隔开
hitchTypes: '11111','22222'
productNames: '111111','222222'

实现方式如下:

  let b = {
        hitchInfo: '',
        hitchTypes: '',
        productNames: ''
      }
      this.form.list.forEach((key) => {
        for (let i in key) {
          //转换成json格式,去掉双引号,将空的数据使用null代替
          let data = key[i] && JSON.stringify(key[i]) !== '{}' ? JSON.stringify(key[i]).replace(/\"/g, "") : 'null'   
          //合并
           b[i] = b[i].length ? b[i].concat(`,${data}`) : b[i].concat(`${data}`)
        }
      })
  console.log(b)