版权声明：本文为博主原创文章，未经博主允许不得转载。博主地址：http://blog.csdn.net/freewebsys https://blog.csdn.net/freewebsys/article/details/81112630
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81112630
博主地址是：http://blog.csdn.net/freewebsys
1，关于vue + element
一直使用 jquery + aceadmin 开发系统，习惯了刷页面。
最近这半年，有个想法，需要跟进下技术。学习 vue + element 发现对于后端同学非常友好，不是啥搞不可攀的技术，很简单，自动编译啊，刷新啊，都非常方便。
开发前端不是问题了，开发复杂的系统也非常简单了。
2，在一个页面做CRUD
使用vue做开发还是非常快速的。
需要使用几个组件：
el-form 做表单。
里面使用 el-form-item 做每一个组件布局。
在里面是
<el-input v-model="filters.nickName" placeholder="昵称"></el-input>使用table 做data的数据展示
<el-table :data="dataList" v-loading="loading" style="width: 100%;">
<el-table-column prop="id" label="id" />
<el-table-column prop="userName" label="用户" />
......
<el-table-column label="操作" width="150">
<template slot-scope="scope"><el-button-group>
<el-button type="primary" size="mini" @click="editFunc(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="deleteFunc(scope.$index, scope.row)">删除</el-button>
</el-button-group></template>
</el-table-column>
</el-table>分页组件：
<el-pagination @current-change="pageChangeFunc" background="" layout="prev, pager, next" :total="totalCount">
</el-pagination> 分页就一个 totalCount 参数，就可以展示分页。
<!--编辑弹出页面-->
<el-dialog title="用户编辑" :visible.sync="dialogVisible">
<el-form label-width="100px" :model="dataForm" :rules="dataFormRules" ref="dataForm">
<el-input v-model="dataForm.id" placeholder="id" type="hidden"/>
<el-form-item label="用户名" prop="userName">
<el-input v-model="dataForm.userName" placeholder="用户名" />
</el-form-item>
......
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveFunc">确 定</el-button>
</span>
</el-dialog>同时对于CRUD的接口实现：
this.$axios.get('/userInfo/get?id=' + row.id)
this.$axios.post('/userInfo/save?' + data)
this.$axios.delete('/userInfo/delete?id=' + row.id)
this.$axios.get('/userInfo/list?page=' + this.currentPage + query)
数据：
filters: {
loading: false,
dataForm: {//编辑界面数据
dataFormRules: {//编辑界面校验规则
dialogVisible: false,
dataList: [], //列表数据
totalCount: 0,
currentPage: 13，全部代码
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-button type="primary" @click="editFunc">新建</el-button>
</el-form-item>
<el-form-item>
<el-input v-model="filters.id" placeholder="id"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="filters.userName" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="filters.password" placeholder="密码"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="filters.nickName" placeholder="昵称"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="filters.role" placeholder="角色"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="filters.status" placeholder="状态"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="filters.type" placeholder="类型"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="listFunc">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<template>
<el-table :data="dataList" v-loading="loading" style="width: 100%;">
<el-table-column prop="id" label="id"/>
<el-table-column prop="userName" label="用户名"/>
<el-table-column prop="password" label="密码"/>
<el-table-column prop="nickName" label="昵称"/>
<el-table-column prop="type" label="类型"/>
<el-table-column prop="createTime" label="创建时间"/>
<el-table-column prop="updateTime" label="更新时间"/>
<el-table-column label="操作" width="150">
<template slot-scope="scope"><el-button-group>
<el-button type="primary" size="mini" @click="editFunc(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="deleteFunc(scope.$index, scope.row)">删除</el-button>
</el-button-group></template>
</el-table-column>
</el-table>
</template>
<el-col style="text-align:right;padding-top: 30px;">
<el-pagination @current-change="pageChangeFunc" background="" layout="prev, pager, next" :total="totalCount">
</el-pagination>
</el-col>
<!--编辑弹出页面-->
<el-dialog title="用户编辑" :visible.sync="dialogVisible">
<el-input v-model="dataForm.id" placeholder="id" type="hidden"/>
<el-form label-width="100px" :model="dataForm" :rules="dataFormRules" ref="dataForm">
<el-form-item label="用户名" prop="userName">
<el-input v-model="dataForm.userName" placeholder="用户名" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="dataForm.password" placeholder="密码" />
</el-form-item>
<el-form-item label="昵称" prop="nickName">
<el-input v-model="dataForm.nickName" placeholder="昵称" />
</el-form-item>
<el-form-item label="角色" prop="role">
<el-input v-model="dataForm.role" placeholder="角色" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-input v-model="dataForm.status" placeholder="状态" />
</el-form-item>
<el-form-item label="类型" prop="type">
<el-input v-model="dataForm.type" placeholder="类型" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveFunc">确 定</el-button>
</span>
</el-dialog>
</section>
</template>
<script>
export default {
data() {
return {
filters: {
id: '',
userName: '',
password: '',
nickName: '',
role: '',
status: '',
type: '',
},
loading: false,
dataForm: {//编辑界面数据
id: '',
userName: '',
password: '',
nickName: '',
role: '',
status: '',
type: '',
createTime: '',
updateTime: '',
},
dataFormRules: {//编辑界面校验规则
userName: [{required: true, message: '请输入用户名', trigger: 'blur' } ],
password: [{required: true, message: '请输入密码', trigger: 'blur' } ],
nickName: [{required: true, message: '请输入昵称', trigger: 'blur' } ],
role: [{required: true, message: '请输入角色', trigger: 'blur' } ],
status: [{required: true, message: '请输入状态', trigger: 'blur' } ],
type: [{required: true, message: '请输入类型', trigger: 'blur' } ],
},
dialogVisible: false,
dataList: [], //列表数据
totalCount: 0,
currentPage: 1
}
},
methods: {
editFunc: function(index, row) {//新建&编辑
if (row == undefined) {
this.dataForm.id = ''
this.dataForm.userName = ''
this.dataForm.password = ''
this.dataForm.nickName = ''
this.dataForm.role = ''
this.dataForm.status = ''
this.dataForm.type = ''
this.dialogVisible = true
} else {
this.$axios.get('/userInfo/get?id=' + row.id)
.then(resp => {
this.dataForm = resp.data.data
}).finally(() => {
this.loading = false
this.dialogVisible = true
})
}},
saveFunc: function() {
this.$refs['dataForm'].validate((valid) => {
console.log(valid)
if (!valid) { return false }
let data = ""
data += "&id=" + this.dataForm.id
data += "&userName=" + this.dataForm.userName
data += "&password=" + this.dataForm.password
data += "&nickName=" + this.dataForm.nickName
data += "&role=" + this.dataForm.role
data += "&status=" + this.dataForm.status
data += "&type=" + this.dataForm.type
this.$axios.post('/userInfo/save?' + data)
.finally(() => {
this.dialogVisible = false
this.listFunc()
})
})
},
deleteFunc: function(index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.$axios.delete('/userInfo/delete?id=' + row.id)
.finally(() => {
this.listFunc()
})
})
},
listFunc: function() {
this.loading = true
let query = ""
query += "&userName=" + this.filters.userName
query += "&password=" + this.filters.password
query += "&nickName=" + this.filters.nickName
query += "&role=" + this.filters.role
query += "&status=" + this.filters.status
query += "&type=" + this.filters.type
this.$axios.get('/userInfo/list?page=' + this.currentPage + query)
.then(resp => {
this.dataList = resp.data.data
this.totalCount = resp.data.totalCount
}).finally(() => {
this.loading = false
})
},
pageChangeFunc: function(idx) {
this.currentPage = idx
this.listFunc()
}
},
created: function() {
this.listFunc()
}
};
</script>
显示效果：
4，总结
今年刚开始熟悉使用vue 进行开发后台系统。开始都是使用jquery。
慢慢的发现，这个真的比 jquery 好用多了。封装的组件，像写 xml 一样方法规整。反而看了 jquery 的 $ 觉得特别乱了，比较原始了。
代码写的非常优美，非常精简。
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81112630
博主地址是：http://blog.csdn.net/freewebsys