狼雨的网站,网站建设怎么插图片,网站建设平台硬件要求,wordpress 密码忘记了适用阅读对象#xff1a;需要兼顾前端的C#后端开发人员#xff08;基础笔记#xff09;
目录
一、后端交互-获取实体数据
二、变量
1.声明
2.作用域
三、字符串的处理
四、数组(列表)的处理
1.数组中的SELECT语法#xff08;提取特定字段到新数组#xff09;
2.数…适用阅读对象需要兼顾前端的C#后端开发人员基础笔记
目录
一、后端交互-获取实体数据
二、变量
1.声明
2.作用域
三、字符串的处理
四、数组(列表)的处理
1.数组中的SELECT语法提取特定字段到新数组
2.数组中的foreach语法
【字符串转化】
【数组中的for】
【数组字段的重命名整理】map语法
3.数组的Length语法
4.数组的First语法
5.数组的Where语法
6.数组的Add语法
百、VUE3易犯错误 一、后端交互-获取实体数据
后端返回结构
{msg: null,result: {operationSituation: {stationName: xxxx}}
}
【想法】获取到stationName,代码写法如下
定义 //data中先定义列表loadData data() { return { loadData: null, searchUrl1: /xxx,//后端api } 赋值 const request1 axios.getData(this.searchUrl1, param)//请求接口 Promise.all([request1])//等待1个接口响应 .then( (res) { this.loadData res[0].result//获取result1序号是0返回的结果的result对象 this.loading false } 渲染到前端注意空判断 div classreport-item-title v-ifloadData 站点名称是{{ loadData.operationSituation.stationName }} /div 【如何获取更深的实体例如直接获取OperationSituation】 data中定义 loadData: null, operationSituation:null Promise中写法注意加this this.loadData res[0].result this.operationSituation this.loadData.operationSituation html写法 div classreport-item-title {{ operationSituation.stationName }} /div 二、变量
1.声明
var str 123
var nums 123
var array [] //数组例如 arr:[{ name:susu,age:15},{ name:linlin,age:18}]
var obejct null //对象例如 obj:{ name:susu,age:15}
var bool true
this变量需要在data中声明其余可以在方法中直接使用var等关键字声明
2.作用域
Method() {const d 0; // 声明的变量 d 在最近一层的花括号内部有效let a 1; // 声明的变量 a 在最近一层的花括号内部有效var b 2; // 声明的变量 b 整个方法有效即在 Method 方法内部有效this.c 3; // 使用 this.c如果 c 已经在 data 对象中声明它是全局对象的一个属性因此在整个程序中都是有效的
}
三、字符串的处理
var str abcde
var b str.includes(de) //true
var c str.split(c)[0] //ab
var sub str.substring(1, 4); // bcd
var trimmed str.trim(); // abcde 去除空格let num 123 //数字转化为字符串
let str2 num.toString() // 使用 toString() 方法注意是大写S
四、数组(列表)的处理
【情景须知】后端返回的结构如下
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.数组中的foreach语法
【字符串转化】
调用一个方法将上面获得的结果扔进去
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){changeA号站点}else if (nameArray[i]BBB){changeB号站点}else{changenameArray[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
}
【数组中的for】 列表
for (let i 0; i list.length; i) // 使用for循环遍历列表
{var item list[i].name //访问列表中的name实体var jtem list[i].value
}普通数组;
for (let i 0; i array.length; i) // 使用for循环遍历数组
{var item array[i] //访问数组里面的数据
}
【数组字段的重命名整理】map语法
A-整理字段名
【需求】后端返回的结构中包含一个数组Listdetails 包含name value Time我想提取name和value字段到前端中提取成Listnewdetails 包含: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})
)
B-整理字段内容
本例遍历alarmtime字段并且做一个字符串替换
var dataarray tablesource.map(item ({
...item, // 保留原始对象的其它字段
alarmTime: item.alarmTime.replace(T, ) // 替换 T 为空格
}))3.数组的Length语法
//输出数组长度
const nameArrayLength nameArray.length;
4.数组的First语法
【情景】后端传入一个数组存入list(id name)中如何获取id30的name的值呢
const entity list.find(x x.id 30)
if (entity) {console.log(entity.name) // 输出Charlie
} else {console.log(未找到匹配的 id)
}
5.数组的Where语法
//获取列表details数组中的name字段包含xxx字符串的数组
const filteredDetails this.details.filter(item item.name.includes(xxx))
6.数组中的Contais语法
//包含字符A筛选
dataarray dataarray.filter(item newVal.includes(A))//includes方法支持数组筛选注意是mainarray.inculudes(secondearray)
dataarray dataarray.filter(item newarray.includes(item.alarmType))
7.数组的Add语法
//假设Data是一个有数据的数组
Data.push(30) //加入数字相当于Listobject
Data.push({name: 123,value: 30]}) //加入实体相当于ListModel Model包含两个字段 百、VUE3易犯错误
1.一个方法调用另外一个方法没用this 2.变量没在data()声明 3.代码修改保存后忘记F5刷新页面一般来讲修改html css保存后不需要刷新网页修改js保存后需要刷新网页 4.如果进入不了debugger 就是在这之前报错了F12调试一下吧
5.const定义常量不可以再赋值若想再次修改请用var或let声明。以下写法是错的应该改为var
const name 123
if (flagfalse)
{name 456
}
6.如果你的父级元素设置了某些样式你可以在子元素的 style 属性中直接覆盖这些样式因为内联样式优先级更高
div stylemargin-left: 100px; idvdrBarChart classBarcharts/div
