使用Vue+ElementUI+axios开发好看的单页应用

最近Vue已然比较火，公司后台系统的前端也在逐渐改造成Vue。
Vue一个渐进式JavaScript框架，官网：Vue.js；

ElementUI：饿了么开源的前端UI组件库，里面很多组件可以直接拿来使用，很方便，有了它，后端程序猿也能开发出好看的页面了！

官网： Element - The world’s most popular Vue UI framework

axios：易用、简洁且高效的http库，官网：axios中文网|axios API 中文文档 | axios。

接下来，使用Vue、ElementUI、axios来开发一个简单小应用。

先上代码index.html：

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html>
 
<head>
    <title>Vue + ElementUI + axios 开发单页应用</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
 
<body>
    <div id="app" v-cloak>
        <el-tabs type="border-card">
            <el-tab-pane label="用户列表">
                <el-form :inline="true" ref="form" :model="searchForm" label-width="80px">
                    <el-form-item label="姓名:">
                        <el-input v-model="searchForm.fullName" size="small" style="width: 150px" />
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" size="small" icon="el-icon-search" @click="search">查询</el-button>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="info" size="small" icon="el-icon-delete" @click="clearSearch">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="searchList" border>
                    <el-table-column prop="id" label="id" width="80">
                    </el-table-column>
                    <el-table-column prop="account" label="账户" width="120">
                    </el-table-column>
                    <el-table-column prop="fullName" label="姓名">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别">
                    </el-table-column>
                    <el-table-column prop="mobile" label="手机号">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="90">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status | statusFilter">
                                {{ scope.row.status == 1 ? '正常' : '禁用' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间">
                        <template slot-scope="scope">{{ scope.row.createTime | dateFormat }}</template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status == 0" type="success" icon="el-icon-view" size="mini"
                                @click="updateUserStatus(scope.row.id, 1)">启用</el-button>
                            <el-button v-if="scope.row.status == 1" type="danger" icon="el-icon-video-pause" size="mini"
                                @click="updateUserStatus(scope.row.id, 0)">禁用</el-button>
                            <el-button icon="el-icon-edit" size="mini" @click="editUserDialog(scope.row)">修改
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
 
            </el-tab-pane>
        </el-tabs>
 
 
        <el-dialog :visible.sync="editDialogVisible" title="修改用户信息" @close="closeEditDialog" width="500px" center>
            <el-form ref="form" :model="userInfo" label-width="120px">
                <el-form-item label="账户:">
                    <el-input v-model="userInfo.account" style="width:260px;" size="small" :disabled="true" />
                </el-form-item>
                <el-form-item label="姓名:">
                    <el-input v-model="userInfo.fullName" style="width:260px;" size="small" />
                </el-form-item>
                <el-form-item label="手机号:">
                    <el-input v-model="userInfo.mobile" style="width:260px;" size="small" />
                </el-form-item>
                <el-form-item label="性别:">
                    <el-select v-model="userInfo.sex" placeholder="请选择">
                        <el-option v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" size="small" @click="updateUser">确认</el-button>
                    <el-button type="primary" size="small" @click="closeEditDialog">取消</el-button>
                </span>
            </template>
        </el-dialog>
 
    </div>
 
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
 
        Vue.filter("dateFormat", function (dateStr) {
            var date = new Date(dateStr);
            var year = date.getFullYear();
            // 不足2位， 前面补0
            var month = (date.getMonth() + 1).toString().padStart(2, "0");
            var day = date.getDay().toString().padStart(2, "0");
            var hour = date.getHours().toString().padStart(2, "0");
            var minute = date.getMinutes().toString().padStart(2, "0");
            var second = date.getSeconds().toString().padStart(2, "0");
            return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
        });
        var vm = new Vue({
            el: '#app',
            filters: {
                statusFilter(status) {
                    const statusMap = {
                        1: 'success',
                        0: 'danger'
                    }
                    return statusMap[status]
                }
            },
            data: {
                list: [
                    {
                        "id": 1,
                        "account": 'admin',
                        "fullName": "管理员",
                        "sex": "男",
                        "mobile": "17766665555",
                        "status": 1,
                        "createTime": "2021-10-15T03:10:10.000+0000"
                    },
                    {
                        "id": 2,
                        "account": 'zhangsan',
                        "fullName": "张三",
                        "sex": "男",
                        "mobile": "17633335555",
                        "status": 0,
                        "createTime": "2021-10-09T03:40:20.000+0000"
                    },
                    {
                        "id": 3,
                        "account": 'lucy',
                        "fullName": "露西",
                        "sex": "女",
                        "mobile": "15600997788",
                        "status": 1,
                        "createTime": "2021-10-11T03:40:10.000+0000"
                    },
                    {
                        "id": 4,
                        "account": 'lily',
                        "fullName": "莉莉",
                        "sex": "女",
                        "mobile": "13122225555",
                        "status": 1,
                        "createTime": "2021-09-10T04:20:10.000+0000"
                    }
                ],
                sexOptions: [
                    {
                        label: '男',
                        value: '男'
                    },
                    {
                        label: '女',
                        value: '女'
                    }
                ],
                searchList: [],
                editDialogVisible: false,
                userInfo: {
                    id: '',
                    account: '',
                    fullName: '',
                    sex: '',
                    mobile: ''
                },
                searchForm: {
                    fullName: ''
                }
            },
            methods: {
                getList(params) {
                    // axios.get("/user/list", {
                    //     params
                    // })
                    // .then(response => {
                    //         this.list = response.data
                    //     }, err => {
                    //         console.log(err);
                    //     })
                    this.searchList = this.list.filter(item => {
                        return item.fullName.indexOf(this.searchForm.fullName) > -1
                    })
                    console.log(this.searchList)
                },
                search() {
                    this.getList(this.searchForm)
                },
                clearSearch() {
                    this.searchForm = {
                        fullName: ''
                    }
                    this.searchList = this.list
                },
                updateUserStatus(id, status) {
                    const msg = status == 1 ? '已开启' : '已禁用'
                    // 这里使用axios调用后端接口更新状态,然后给出消息提示
                    this.$message({
                        type: 'success',
                        message: msg
                    })
                },
                editUserDialog(item) {
                    this.editDialogVisible = true
                    Object.assign(this.userInfo, {
                        id: item.id,
                        account: item.account,
                        fullName: item.fullName,
                        mobile: item.mobile,
                        sex: item.sex
                    })
                },
                closeEditDialog() {
                    this.editDialogVisible = false
                },
                updateUser() {
                    // 这里可以使用axios调用后端接口更新用户信息
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                    this.getList()
                    this.closeEditDialog()
                }
            },
            created() {
                this.getList();
            }
        });
    </script>
</body>
 
</html>

谷歌浏览器直接打开即可访问，效果如下：

ElementUI组件效果看起来蛮清爽的。

本文只介绍简单的vue入门级小应用，算是学习vue基础的项目， 如果做企业级开发，还有很多东西要学，如ES6，Webpack、Vue-Router、Vuex等。

Web前端
#Vue #ElementUI #JavaScript #axios
使用Vue+ElementUI+axios开发好看的单页应用
https://river106.cn/posts/ab834076.html
作者
river106
发布于
2021年10月16日
许可协议