适用阅读对象：需要兼顾前端的C#后端开发人员（基础笔记）
目录
一、后端交互-获取实体数据
1.post和get请求基本框架
data() {
return {
requestUrl:'/getdata'
}
}
axios.postData(this.requestUrl, {}).then((res) =>
{
//方法体
})
axios.get(this.requestUrl).then((res) =>
{
//方法体
var data = res.result //你获取的json不一定key是"result"，灵活调整
})
2.post-【携带入参】
写法一
axios.post(this.requestUrl, {
id: 1,
name: 'Alice',
list: [1, 2, 3]
}).then((res) => {
// 处理响应数据
});
写法二
const params = {
id: 1,
name: 'Alice',
list: [1, 2, 3]
};
axios.post(this.requestUrl, params)
.then((res) => {
// 处理响应数据
});3.get-【携带入参】
注意：get和post不一样，这里需要加上params:{ { //这里写入参 } }
axios.get(this.requestUrl,params: {
{
id: 1,
name: 'Alice'
}
}).then((res) =>
{
// 处理响应数据
});二、修改全局变量
【传入】DictData 【传出】data第1个元素
当然也可以直接用同步方法处理：
export default {
data() {
return {
dictData: [], // 1.定义变量
formItems: []
};
},
methods: {
initializeData() {
//3.数据注入表单
this.formItems = [
{ id: 1, data: this.dictData },
{ id: 2, data: [2, 3, 4] }
];
}
},
created() {
this.dictData = [ /* 2.获取数据，比如说get请求 */ ];
this.initializeData();
}
};
二、变量
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 = truethis变量需要在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
var num = '123'
var snum = parseInt(num, 10) //字符串转为十进制的int
const Code = 'abc'
console.log(`我的Code是: ${Code}`)//字符串拼接四、数组(列表)的处理
【情景须知】后端返回的结构如下：
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语法
【字符串转化switch】
调用一个方法，将上面获得的结果扔进去
var newArray = this.GetNew(nameArray)代码如下：
GetNew(nameArray){
const newArray = [] // 创建一个空数组，用于存放处理后的结果
for (let i = 0; i < nameArray.length; i++) // 使用for循环遍历nameArray
{
var change =''//每次循环都创建一个变量存储
switch (nameArray[i]) {
case 'AAA':
change = 'A号站点'
break
case 'BBB':
change = 'B号站点'
break
default:
change = nameArray[i] // 其余的直接返回
}
newArray.push(change)
}
return newArray
}【数组中的for循环】
1.基础
列表：
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] //访问数组里面的数据
}2.map/forEach语法
A-整理字段名
【需求】后端返回的结构中，包含一个数组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
})
)B-整理字段内容
本例遍历alarmtime字段，做一个字符串替换后重新赋值回去
var newarray = tablesource.map(item => ({
...item, // 保留原始对象的其它字段
alarmTime: item.alarmTime.replace('T', ' ') // 替换 'T' 为空格
}))
C-添加字段和内容
增加一个score字段，由原字段id决定其值
var newarry =list.map(item =>
({
...item,
score: item.id < 5 ? 90 : 100
})
);【注意】以上的map方法可换成forEach，区别：（是forEach不是foreach）
①forEach 修改原数组。
②map不修改原数组，返回新数组，因此要用var newarray来接修改后的新数组。
D-添加实体
//列表追加实体
var result = []
for (let i = 0; i < list.length; i++) {
item = list[i]
var entity = {} // 初始化 entity 为空对象
entity.id = item.pid
entity.name = item.label
result.push(entity) //列表.add(实体)
}
console.log(result)//打印列表3.数组的Length语法
//输出数组长度
const nameArrayLength = nameArray.length; 4.数组的First语法
【情景】后端传入一个数组，存入list(id name)中，如何获取id=30的name的值呢
【严重警告】前端没有FirstOrDefault方法，获取实体后必须判断其情况！不可直接对象.属性（空引用直接报错）
【正确的例子】
const entity = list.find(x => x.id === 30)
if (entity)
{
console.log(entity.name) // 输出：Charlie
}
else
{
console.log('未找到匹配的 id')
}【错误的例子】
const name = list.find(x => x.id === 30).name
console.log(name) //空引用，不报错，直接不运行后面的代码！
5.数组的Where语法
//获取列表：details数组中的name字段包含xxx字符串的数组
var result = this.details.filter(item => item.name.includes('xxx'))
var result = this.details.filter(item => item.name==='John')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) //加入数字，相当于List<object>
Data.push({name: '123',value: 30]}) //加入实体，相当于List<Model> Model包含两个字段8.数组的Distinct方法
list是一个数组(List<string>)，去重方法：
var unique = [...new Set(list)]
//【备注】Set 自动去重，然后使用扩展运算符 ... 将其转换回数组9.数组的OrderBy方法
【需求】newarray2有很多字段，对value字段进行排序
newarray2.sort((a, b) => a.value.localeCompare(b.value)) //升序
newarray2.sort((a, b) => b.value.localeCompare(a.value)) //降序 五、 字典
const polluCodeMap = { 'CO2': 'CO₂（ppm）', 'N2O': 'N₂O（ppb）', 'CH4': 'CH₄（ppb）', 'CO': 'CO（ppm）', 'SF6': 'SF6（ppb）', 'H2': 'H2（ppb）' }
const title = polluCodeMap[this.polluCode] || '（ppb）'//假设this.polluCode是入参，匹配不到返回'（ppb）'
六、export default中的各个对象的作用
export default {
name:"",
components:{},
data() { return{ } },
watch:{},
created(){},
mounted(){},
methods:{},
computed: {}
}
- name 组件名称 (相当于class xxx)
- components 注册子组件（相当于using xxxx）
- data() 定义变量
- watch 变量的Changed事件
- created() 构造函数（严格来说是生命周期钩子函数，在组件实例被创建后但在挂载前调用）
- methods 定义函数方法
- 计算属性（computed）：data() 中的变量的值发生改变，都会触发一次computed方法
【区别】
| created() | mounted() | Form | Form_Load | |
| 执行顺序 | 先 | 后 | 先 | 后 |
| 区别 | 元素未加载前调用 | 元素加载后调用 | 控件未初始化前调用 | 控件已初始化后调用 |
| 相似情况 | A | B | A | B |
七、其他语法
1.展开运算符（三个点）
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]八、快捷键
1.批量格式化文档
附录一、Vue易犯错误：
1.变量声明和方法调用
| 变量声明 | ① 使用全局变量不在data()声明 ② const定义后不可以再覆盖该值，若想修改用var声明 |
| 方法调用 | ① 方法调用不加this. ② 不等于和等于：请使用双等三等 !== === |
2.静态页面运行和debug调试
| 静态页面 | ① 使用全局变量不在data()声明 ② 元素样式不生效：试试内联样式，优先级最高 |
| debug | ① 不命中断点： 断点之前就报错 更新代码后，新旧代码后行数不对应，要重新刷新 ② 部分页面生效： 修改了前端文件A和B，运行前端情况下，仅保存了文件A，B的修改不会生效（原因：保存只重新编译当前保存文件；解决方案：1.都保存一遍 2.停调前端重新yarn/npm run sever） |
340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
