仿真项目---知识点总结

1.取对象中的值

例如：取f_assessment_task.f_assessment_task_name字段形式
写法：

JSON.parse(record)["f_assessment_task"]["f_assessment_task_name"]

由上图可知：JSON.parse(record)是一个对象，JSON.parse(record)["f_assessment_task"]也是一个对象，因此，取对象中的值，也可以这样写JSON.parse(record)["f_assessment_task"].f_assessment_task_name，不能直接这样写JSON.parse(record)["f_assessment_task.f_assessment_task_name"]。

2.字段拼接

2.1分页查询

接口文档上的要求：

实现：

let data = JSON.parse(JSON.stringify(this.superData));
this.baceInfo.queryList = {
    f_assessment_task: {f_assessment_task_name : data.f_assessment_task_name}
};
if(this.superData.time){
    this.baceInfo.queryList = {
        startTime : this.getDataTime(data.time[0]) + " 00:00:00",
        endTime : this.getDataTime(data.time[1]) + " 23:59:59"
    };
}

2.2下拉选框或者多选树结构

2.2.1对象形式

接口文档要求：

实现：
写样式： 需要使用到labelInValue属性，使该字段变成一个对象形式。

<a-form-item label = "目录">
    <a-tree-select
        v-decorator = "[
            'f_special_document_catalog',
            {
                rules: [
                    {
                        required: true,
                        message: '请选择目录',
                    },
                ],
            },
        ]"
        labelInValue
        :treeData = "f_specialities"
        placeholder = "请选择目录"
        :maxLength = "32"
        @change = "onChangeOffice"
        :disabled = "shows"
    >
        <span style = "color: #08c" slot = "title" slot-scope = "{ key, value }">{{ value }}</span>
    </a-tree-select>
</a-form-item>

获取表单数据： 需要按字段的对象形式（label和value）拼接

formValues.f_special_document_catalog.value = res.data.data.f_special_document_catalog.f_special_document_catalog_id;
formValues.f_special_document_catalog.label = res.data.data.f_special_document_catalog.f_special_document_catalog_name;

提交表单数据： 需要按接口需求（id和name）拼接

let data = JSON.parse(JSON.stringify(values)); //保护原有数据
data.f_special_document_catalog.f_special_document_catalog_id = data.f_special_document_catalog.value;
data.f_special_document_catalog.f_special_document_catalog_name = data.f_special_document_catalog.label;
delete data.f_special_document_catalog.value;
delete data.f_special_document_catalog.label;

2.2.2字典类型

写样式：

<a-form-item label="性别">
	<a-radio-group
		v-decorator="[
                     'sex',
                     is_add
                         ? {
                               initialValue: sex[0].value,
                               rules: [{ required: false, message: '请选择性别' }],
                           }
                         : {
                               rules: [{ required: false, message: '请选择性别' }],
                           },
                 ]"
	 	:disabled="shows">
		<a-radio v-for="(item, index) in sex" :value="item.value" :key="index">{{ item.dictValueName }}</a-radio>
	</a-radio-group>
</a-form-item>

获取表单数据：

// 类型转换，方便表单显示
if (formValues.sex != null && !isNaN(formValues.sex)) {
    formValues.sex = formValues.sex.toString();
}

提交表单数据：

this.sex.forEach((item) => {
	if (item.value === values.sex) {
		values.sexValue = item.dictValueName;
	}
});

############# 那么后台什么时候分别需要什么格式呢？##############
mysql数据库使用的是只需前端传value值即可，MongoDB数据库使用的都需要前端拼接成label和value组成的对象形式，
因为若是前端直接传value值，后台需要先查找再拼接，如此，数据加载的时间会增加。

3.等号

if (res.data.httpStatus == "200")

if (res.data.httpStatus === 200)

3.1“==”

== equality 等同；
==， 两边值类型不同的时候，要先进行类型转换，再比较。
略等(类型转换成布尔后值相等)

判断规则：
1、如果两个值类型相同，进行 === 比较。
2、如果两个值类型不同，他们可能相等。
根据下面规则进行类型转换再比较：
a、如果一个是null、一个是undefined，那么[相等]。
b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说（比较麻烦，我也不大懂）
e、任何其他组合，都[不相等]。

3.2“===”

=== identity 恒等；
===，不做类型转换，类型不同的一定不等。
全等(类型，值相等)

判断规则:
1、如果类型不同，就[不相等]
2、如果两个都是数值，并且是同一个值，那么[相等]；
(！例外)的是，如果其中至少一个是NaN，那么[不相等]。
（判断一个值是否是NaN，只能用isNaN()来判断）
3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；
否则[不相等]。
4、如果两个值都是true，或者都是false，那么[相等]。
5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
6、如果两个值都是null，或者都是undefined，那么[相等]。

4.isNaN() 函数用于检查其参数是否是非数字值

虽然网站上说isNaN()函数用于检查其参数是否是非数字值，即如果参数值为NaN或字符串、对象、undefined等非数字值则返回true, 否则返回 false。
实际上，它是判断一个值能否被 Number() 合法地转化成数字，即若能合法地转化为数字就返回false，否则返回true。
这中间有什么区别呢，主要提现在一些特别的情况如下：
（1）数字形式的字符串。例如 “123”、"-3.14"，虽然是字符串型，但被 isNaN() 判为数，返回 false。（“12,345,678”，“1.2.3” 这些返回 true）
（2）空值。 ==> null、空字符串""、空数组[]，都可被Number()合法的转为0，于是被isNaN认为是数，返回false。（undefined、空对象{}、空函数等无法转数字，返回true）
（3）布尔值。 ==> Number(true)=1,Number(false)=0，所以isNaN对布尔值也返回false。
（4）长度为 1 的数组。 ==> 结果取决于其中元素，即：isNaN([a])=isNaN(a)，可递归。例如isNaN([[“1.5”]])=false。
（5）数字特殊形式。 ==> 例如"0xabc"、“2.5e+7”，这样的十六进制和科学计数法，即使是字符串也能转数字，所以也返回false。
可能还有其他情况，一时想不到了。
总之，很多时候不能用单纯用 isNaN() 取判断。
比如一个空值或者数组，甚至是包含字母和符号的字符串，它都有可能告诉你这是数值。还是要结合具体情况使用。

5.解决赋值有延迟问题

1.setTimeout(() => {}, 500);

===> setTimeout用来解决第一次查看表单没有赋值成功问题

2.this.$nextTick(() => {});

===> 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

//等DOM加载完之后再给表单赋值
this.$nextTick(() => {
	this.$refs.modelForm.form.setFieldsValue(formValues);
})

3.注意

数据获取有延迟时使用：setTimeout(() => {}, 500);
DOM加载有延迟时使用：this.$nextTick(() => {});

6.文件上传格式限制

如下图所示：

代码实现：

<a-upload accept=".png, .jpg, .jpeg" 
    name="file" :multiple="false" :before-upload="beforeUpload" 
    :customRequest="data=>customRequest(data,'left')"
    :show-upload-list="false">
	<i class="iconfont iconedit-fill"></i>
</a-upload>

格式具体时：accept=".png, .jpg, .jpeg"；
格式为变量时：:accept= "fileFormat"；

7.内容显示

7.1问题现象

7.2代码修改

在样式中加word-break: break-all;

7.3改后样式

8.鼠标hover现象

8.1实现效果描述

例如：当鼠标hover到参数值时，参数值的背景色改变，该列的其他数据背景色不变，同时展示出参数值的取值范围。

8.2原现象描述

一开始没有单独做限制，使用的组件默认样式；后来对table的样式进行重写，但还是不能兼容实现要求的现象，要么只能实现鼠标hover到参数值时只改变参数值的背景，此时当鼠标再hover到其他数据时背景色都不会改变了；要么鼠标hover到参数值时，不仅参数值背景色改变，该行的其他数据的背景色也改变。

8.3代码实现

使用jquery实现，并且要同时在分页方法和拉取数据方法中也要加上样式改变的代码。

//实现鼠标hover到参数值处，只改变参数值的背景色；鼠标hover其他数值的地方，行数据的背景色为默认值；
setTimeout(() => {
     $(".value-style").hover(function() {
         $(this).parents("tr").find("td").attr({
             style:"background: white !important;"
         });
     },function() {
         $(this).parents("tr").find("td").removeAttr("style");
     })
 }, 0)