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

订阅专栏
最近Vue已然比较火，公司后台系统的前端也在逐渐改造成Vue。

Vue一个渐进式JavaScript框架，官网：Vue.js；

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

官网： https://element.eleme.cn/#/zh-CN/component/installationElement - The world's most popular Vue UI framework

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

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

先上代码index.html：

<!DOCTYPE html>
<html>

<head>
<title>Vue + ElementUI + axios 开发单页应用</title>

<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>

<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>

原文链接：https://blog.csdn.net/mhx3008557816/article/details/121660773