vue2.0+Element-ui 实战案例
前⾔
我们将会选择使⽤⼀些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui 搭建⼀个前端项⽬案例，后端数据接⼝，会使⽤json-server 快速搭建⼀个本地的服务，⽅便对数据的增删改查，
利⽤以上技术我们会搭建⼀个vue 案例，效果展⽰图：
以上就是我们最终要实现的全部效果，我会⼀块⼀块的讲解，关于脚⼿架安装和json-server 搭建，在本次博客中，不会讲解，如果想看的话，在⼩编的博客中，也有讲解关于脚⼿架搭建和json-server 搭建，如果想学习的话，可以看⼀下。
1.项⽬结构展⽰
左边第⼀个是前端项⽬结构，第⼆个为json-server 服务端
2.页⾯搭建
在本次案例中，⼩编采⽤Element-ui 快速搭建前端页⾯，以提⾼效率。如果不了解的话，可以去官⽹看⼀下
2.1安装element-ui
通过npm install element-ui -S 安装前端ul 框架，安装完之后，并在main.js 引⼊
12import ElementUI from 'element-ui'<br>
import 'element-ui/lib/theme-chalk/index.css'<br><br>Vue.use(ElementUI)
2.2页⾯布局UserInfo.vue
直接通过element-ui 中table 布局，把整体建构页⾯布局完成，
1
2
3
4
5
6
7
8
9101112131415161718192021222324<h1>⽤户信息管理界⾯</h1>
<el-row>
<el-col :span="20" :push='2'>
<div> <el-form :inline="true"> <el-form-item label="查询⽤户信息:"> <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input> </el-form-item>
<el-form-item >
<el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
</el-form-item>
</el-form> </div> <div class="table"> <el-table
:data="searchUserinfo(keyUser)"
border > <el-table-column
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 type="index"
label="序号"
align="center"
width="60">
</el-table-column>
<el-table-column
label="⽇期"
align="center"
width="120">
<template slot-scope="scope">
<span>{{ w.date | moment}}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
align="center"
width="100">
<template slot-scope="scope">
<span>{{ w.name }}</span>
</template>
</el-table-column>
<el-table-column
label="邮箱"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ ail }}</span>
</template>
</el-table-column>
<el-table-column
label="标题"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ w.title }}</span>
</template>
</el-table-column>
<el-table-column
label="评价"
align="center"
width="200">
<template slot-scope="scope">
<span>{{ w.evaluate }}</span>
</template>
</el-table-column>
<el-table-column
label="状态"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ w.state }}</span>
</template>
</el-table-column>
<el-table-column label="操作"fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, w)">编辑</el-button> <el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, w)">删除</el-button> </template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
2.3页⾯数据获取并展⽰
通过axios请求本地搭建的服务数据，把得到的数据展⽰到页⾯当中。
也是通过cnpm install axios --save安装并在main.js中引⼊
1 2 3import axios from 'axios' Vue.prototype.$axios = axios
我们需要在⽅法methods中定义⼀个getUserInfo⽅法，⽤于请求数据data () {
return {
tableData: [], ⽤于存放数据
}
}
1 2 3 4 5getUserInfo() {
this.$('localhost:3000/data').then(res => { this.tableData = res.data
})
},
1这是时候，数据是请求到了，但是页⾯并为展⽰，这就关系到vue的⽣命周期。如果对vue ⽣命周期不是很了解的话，可以官⽹仔细看⼀遍，
1我们只需要在created这个⽣命周期钩⼦中，调⽤我们请求数据的⽅法就可以把数据展⽰到页⾯中。这样我们就完成第⼀步了，页⾯数据请求展⽰<br>created：在模板渲染成html前调⽤，即通常初始化某些属性值，然后再渲染成视图。
1 2 3created(){
3.添加数据
刚才我们已经完成第⼀步，把后台的数据展⽰到前端页⾯中，接下来我们对数据进⾏添加，页⾯全部都是⽤element搭建
elementui登录界面3.1页⾯结构搭建，把AddUserInfo.vue组件当成⼀个⼦组件，在⽗组件中引⼊这个⼦组件，点击添加按钮，弹出这个添加对话框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<template>
<div class="hello">
<el-dialog title="添加⽤户信息":visible.sync="dialogAdd.show">
<el-form :model="formDate"ref="formdong"label-width="100px":rules="formrules"> <el-form-item label="⽇期"prop="date">
<el-date-picker
v-model="formDate.date"
type="date"
placeholder="选择⽇期">
</el-date-picker>
</el-form-item>
<el-form-item label="姓名"prop="name">
<el-input v-model="formDate.name"></el-input>
</el-form-item>
<el-form-item label="邮箱"prop="email">
<el-input v-model="ail"></el-input>
</el-form-item>
<el-form-item label="标题"prop="title">
<el-input v-model="formDate.title"></el-input>
</el-form-item>
<el-form-item label="评价"prop="evaluate">
<el-input v-model="formDate.evaluate"></el-input>
</el-form-item>
<el-form-item label="状态"prop="state">
<el-input v-model="formDate.state"></el-input>
</el-form-item>
</el-form>
<div slot="footer"class="dialog-footer">
<el-button @click="dialogAdd.show = false">取消</el-button>
<el-button type="primary"@click="dialogFormAdd('formdong')">确定</el-button> </div>
</el-dialog>
</div>
</template>
3.2我们在⽗组件UserInfo中引⼊⼦组件AddUserInfo.vue,
3.<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> //使⽤这个组件，
1. import AddUser from'./AddUserInfo.vue'//引⼊组件
2. components:{ //注册
AddUser,
}
3.3通过点击⽗组件的添加按钮触发⼦组件弹出框
1dialogAdd是我们在⽗组件定义的的，需要传递给⼦组件，
1 2 3 4 5 6 7 8 9 10 11<el-button type="primary"size="small"icon="el-icon-edit-outline"@click="hanlde
Add()">添加</el-button><br>在data定义⽤于是否弹出添加弹出框，默认false不弹出，只有点击添加按钮的时候才弹出弹出框dialogAdd:{
show:false
},
methods⽅法中
hanldeAdd(){ //添加
this.dialogAdd.show = true; //弹出对话框
},
3.4⼦组件需要接受⽗组件传递的⽅法.并请求数据。实现添加1
2
3
4
<script>
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 46export default{
name: 'AddUser',
props:{
dialogAdd:Object
},
data () {
return{
formDate:{
date:'',
name:'',
email:'',
title:'',
evaluate:'',
state:''
},
formrules:{
date:[{required:true,message:"⽇期不能为空",trigger:"blur"}],
name:[{required:true,message:"⽤户名不能为空",trigger:"blur"}],
email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
}
}
},
methods:{
dialogFormAdd(formdong) {
this.$refs[formdong].validate((valid) => {
if(valid) {
this.$axios.post('localhost:3000/data',this.formDate).then(res => { this.$message({
type:"success",
message:"添加信息成功"
})
this.dialogAdd.show = false;
this.$emit('update');
})
this.formDate = ""
} else{
console.log('error submit!!');
return false;
}
})
}
}
}
</script>
1this.$emit('update'); ⼦组件数据发⽣改变了，⽗组件视图却没有更新，这时候通过⼦创⽗，this.$emit，想⽗组件发送⼦组件传递的⽅法，1<AddUser :dialogAdd="dialogAdd"@update="getUserInfo"></AddUser>
1@update="getUserInfo"//接受⼦组件传递过来的⽅法去更新视图
4.实现删除
1 2 3 4<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, w)">删除</el-button>
删除数据需要根据id去删除，使⽤es6模板字符串进⾏拼接1
2 3 4 5 6 7 8 9 10handleDelete(index,row) {
// 删除⽤户信息
this.$axios.delete(`localhost:3000/data/${row.id}`).then(res =>{ this.$message({
type:"success",
message:"删除信息成功"
})
})
},
5.实现编辑功能
在这⾥添加弹出框内容和编辑弹出框内容⼀模⼀样，可以选择进⾏封装，封装成⼀个组件，添加和编辑共同使⽤这⼀个组件，根据⾃定义⼀个字段来判断点击的是添加还是编辑按钮。在本次案例中，没有封装，如果想封装的话，可以⾃⼰尝试封装组件，来提⾼效率。
5.1页⾯搭建EditUser.vue组件，也是当做⼀个⼦组件，在⽗组件中去引⼊这个⼦组件，并把获取的数据
展⽰到页⾯中。
1
2
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<template>
<div class="hello">
<el-dialog title="编辑⽤户信息":visible.sync="dialogEdit.show">
<el-form :model="form"ref="formEdit"label-width="100px":rules="formrules"> <el-form-item label="⽇期"prop="date">
<el-date-picker
v-model="form.date"
type="date"
placeholder="选择⽇期">
</el-date-picker>
</el-form-item>
<el-form-item label="姓名"prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="邮箱"prop="email">
<el-input v-model="ail"></el-input>
</el-form-item>
18192021222324252627282930313233
34
<el-form-item label="标题" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="评价" prop="evaluate"> <el-input v-model="form.evaluate"></el-input> </el-form-item> <el-form-item label="状态" prop="state"> <el-input v-model="form.state"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogEdit.show = false">取 消</el-button> <el-button type="primary" @click="dialogFormEdit('formEdit')">确 定</el-button> </div> </el-dialog> </div>
</template>
在⽗组件中定义好需要传递的数据字段
1
234567891011
dialogAdd:{ //编辑弹出框，默认是false
show:false
}, form:{ //编辑信息 date:'', name:'',
email:'',
title:'', evaluate:'', state:'' },
5.2也是在⽅法中点击编辑按钮，在编辑中，点击拿⼀⾏，需要获取那⼀⾏的字段数据，并把获取的数据传递给⼦组件显⽰到弹出框中，需要肯据row ，来获取每⼀⾏的数据。
1
23456789101112131415
16
<el-button size="mini"@click="handleEdit(scope.$index, w)">编辑</el-button>
<el-button<br>
handleEdit(index,row){ //编辑
this.dialogEdit.show = true; //显⽰弹 this.form = { date:row.date,
name:row.name,
ail,
title:row.title, evaluate:row.evaluate, state:row.state,
id:row.id
}
}, 当我门打印row
的是，就是点击哪⼀⾏的编辑按钮，对应的数据就好打印出来，这时候我们只需要把得到的数据传递给⼦组件就⾏
5.3⽗组件得到的数据，⼦组件通过props 接受，和添加数据⼏乎⼀样
1
2
3
4567891011121314151617181920212223242526<script>
export default {
name: 'HelloWorld',
props:{ dialogEdit:Object, form:Object },
data () {
return {
formrules:{ date:[{required:true,message:"⽇期不能为空",trigger:"blur"}], name:[{required:true,message:"⽤户名不能为空",trigger:"blur"}], email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
}
} }, methods:{ dialogFormEdit(formEdit) {
this.$refs[formEdit].validate((valid) => {
if (valid) {
this.$axios.put(`localhost:3000/data/${this.form.id}`,this.form).then(res => {
this.$message({ type:"success", message:"编辑信息成功"
})
console.log(res)
this.dialogEdit.show = false;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论