Web开发：Vue3+C# WebAPI 的基础笔记

适用阅读对象：需要做前端的后端开发人员（基础笔记）

目录

一、后端交互-获取实体数据

二、数组的处理

1.数组中的SELECT语法（提取特定字段到新数组）

2.数组中的for遍历和转化（字符串转化）

3.数组的长度求法

4.数组字段的重命名整理

5.数组的Where语法

零、VUE3易犯错误：

---

一、后端交互-获取实体数据

后端返回结构

{"msg": null,"result": {"operationSituation": {"stationName": "xxxx"}}
}

【想法】获取到stationName,代码写法如下：

定义

//data中先定义列表loadData：
data() {
    return {
      loadData: null,
      searchUrl1: '/xxx',//后端api

    }

赋值

Promise.all([request1])//等待1个接口响应
          .then(
            (res) => {

              this.loadData = res[0].result//获取result1（序号是0）返回的结果的result对象
              this.loading = false

            }

渲染到前端（注意空判断）

<div class="report-item-title"  v-if="loadData" >
            站点名称是：{{ loadData.operationSituation.stationName }}
</div>

【如何获取更深的实体（例如直接获取OperationSituation）】

data中定义：
        loadData: null,
        operationSituation:null

Promise中写法（注意加this）：
        this.loadData = res[0].result
        this.operationSituation = this.loadData.operationSituation

html写法：
<div class="report-item-title"  >
            {{ operationSituation.stationName }}
</div>

二、数组的处理

【情景须知】后端返回的结构如下：

details": [{"name": "AAA","value": 123,"Time": null},{"name": "BBB","value": 456,"Time": null}
]

假设前端已经定义了一个数组this.details，并且将后端的数据赋值给它。

1.数组中的SELECT语法（提取特定字段到新数组）

【需求】提取所有 name 属性到一个新数组

const nameArray = this.details.map(item => item.name)

2.数组中的for遍历和转化（字符串转化）

调用一个方法，将上面获得的结果扔进去

var newArray = this.GetNew(nameArray)

方法如下(if语句)：

GetNew(nameArray){    const newArray = []         // 创建一个空数组，用于存放处理后的结果          for (let i = 0; i < nameArray.length; i++) // 使用for循环遍历nameArray{var change =''//每次循环都创建一个变量存储if (nameArray[i]=='AAA'){change='A号站点'}else if (nameArray[i]=='BBB'){change='B号站点'}else{change=nameArray[i] //其余的直接返回}newArray.push(change)}return newArray
}

也可以写成switch语法：

GetNew(nameArray){    const newArray = []         // 创建一个空数组，用于存放处理后的结果          for (let i = 0; i < nameArray.length; i++) // 使用for循环遍历nameArray{var change =''//每次循环都创建一个变量存储switch (nameArray[i]) {case 'AAA':change = 'A号站点'breakcase 'BBB':change = 'B号站点'breakdefault:change = nameArray[i] // 其余的直接返回}newArray.push(change)}return newArray
}

3.数组的长度求法

//输出数组长度
const nameArrayLength = nameArray.length; 

4.数组字段的重命名整理

【需求】后端返回的结构中，包含一个数组List<details> 包含：name value Time，我想提取name和value字段到前端中，提取成List<newdetails> 包含:Newname Newvalue，取值来自于后端的name value。

【后端返回】

details": [{"name": "AAA","value": 123,"Time": null},{"name": "BBB","value": 456,"Time": null}
]

【实现代码】用map遍历并且创建数组（this.details是后端返回的）

const newarray = this.details.map(item => 
({ Newname: item.name,Newvalue: item.value})
)

5.数组的Where语法

//获取列表：details数组中的name字段包含xxx字符串的数组
const filteredDetails = this.details.filter(item => item.name.includes('xxx'))

零、VUE3易犯错误：

1.调用方法没用this
2.变量没在data()声明
3.代码修改保存后，忘记F5刷新页面
4.如果进入不了debugger 就是在这之前报错了