Es6中的拓展运算符参数解构在实际项目当中应用

# Es6中的拓展运算符参数解构在实际项目当中应用

# 快速导航

# 前言

扩展操作符 … 是ES6中引入的，将可迭代对象展开到其单独的元素中,常见的应用场景有:拷贝数组对象,合并数组,参数传递,数组去重,字符串转字符数组,解构变量等

单纯的学习某个技术知识点,很容易的,但是能在实际项目中运用进去,那就不简单了的

单纯的学习某个语言的语法,都相类似,但是多种技术融合起来,那就复杂了的

# 应用场景

解构参数,传递参数
向后端接口传递参数,拼接参数传递给后端

<template>
    <div>
       <div class="movie-item">
          <el-select
            class="move-item"
            v-model="videoForms.ztid"
            placeholder="视频专题"
            clearable
            size="small"
          >
                <el-option
                v-for="(item, index) in videoZhuanTiOptions"
                :key="index"
                :label="item.label"
                :value="item.ztid"
                >
                </el-option>
            </el-select>
          </div>
           <div class="movie-select">
                <el-select
                    class="move-item"
                    v-model="videoForms.zd"
                    placeholder="视频名称"
                    clearable
                    size="small"
                >
                    <el-option
                    v-for="(item, index) in videoSelectOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.zd"
                    >
                    </el-option>
                </el-select>
                <el-input
                    size="small"
                    v-model="videoForms.key"
                    placeholder="请输入关键字"
                 >
           </div>
        <div>
          <el-button type="primary" size="small" @click="handleSearch">搜 索</el-button>
        </div>
    </div>    
</template>
<script>
    export default {
        name: 'resetParams',
        data() {
            return {
                data: [],  // 电影列表数据,初始化
                // 把form表单接口条件相关联的放置到一个对象下面管理,便于接口字段的管理
                page:1,  // 默认第一页
                limit: 20, // 默认返回20条数据
                total: '', // 分页总数据
                videoForms: {
                    ztid: '',  // 视频专题
                    zd: '',    // 视频筛选
                    key:'',  // 视频输入框关键字
                    year: '', // 年份
                    area: '',  // 地区
                    lang: '', // 语言
                    pay: '1',  // 1,免费,2收费,后端接口定义,默认免费
                    reco: '1',// 1,不轮播,2轮播
                    app: '', // app端是否展示
                    order: '', // 排序方式
                    kstime:'', // 开始时间
                    jstime: '' // 结束时间
                },
                videoZhuanTiOptions: [
                    {
                    label: "精品电影",
                    ztid: "6",          // ztid: '1',  视频专题,1代表精品国漫
                    },
                    {
                      label: "好莱坞电影",
                      ztid: "5",
                    },
                    {
                      label: "盗墓影视",
                      ztid: "4",
                    },
                    {
                      label: "鬼片大王",
                      ztid: "3",
                    },
                     {
                       label: "星爷电影",
                       ztid: "2",
                    },
                    {
                      label: "精品国漫",
                      ztid: "1",
                    },
                ],

                videoSelectOptions: [
                    {
                    label: "视频ID",
                    zd: "id",         //  zd: '', 视频筛选
                    },
                    {
                      label: "视频导演",
                      zd: "director",
                    },
                    {
                      label: "视频主演",
                      zd: "actor",
                    },
                ],
            }
        },

        methods: {
            // 获取影视列表接口数据
            async getVideoList() {
                try {    // 这里使用了try..cartch
                    let params = {   // 向后端请求的实参数
                       page:this.page,
                       limit: this.limit,
                       ...this.videoForms,
                    }
                    // Ajax请求接口，第一个参数是接口地止,第二个就是具体的参数,这里使用的是axios发送get请求数据
                    let res = await this.$axios.get(Interface.getVideoList,{ params });
                    if(res.code == 0) { // 说明成功
                       const { data }  = res.data;
                       this.data = data;  // 表格需要渲染的数据
                       this.total = res.data.count;
                    }
    
                } catch (err) {
                    // 如果请求接口报错,则扔出一个异常
                    console.log(err);
                }
                
            },
            // 搜索,查询影视列表接口
            handleSearch() {
                this.getVideoList();  // 调用请求影视列表查询接口
            }  
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

对象解构如下所示

var videoForms = {
    ztid: '',
    zd: '',
    key:'',  
    area: '',  
    lang: '', 
    pay: '1',  
    reco: '1',
    app: '',
    order: '', 
    kstime:'', 
    jstime: ''
}

var params = {
    page:1,
    limit: 20,
    ...videoForms
}
console.log(params);