广州企业网站设计制作广州网站公司制作网站

当前位置： 首页 > news >正文

广州企业网站设计制作,广州网站公司制作网站,宣传片制作公司简介,网站建设公司排名前十适用阅读对象#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©[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