vue2.0+Element-ui實戰案例
前言javascript
咱們將會選擇使用一些 vue 周邊的庫vue-cli, vue-router,axios,moment,Element-ui搭建一個前端項目案例，後端數據接口，會使用json-server快速搭建一個本地的服務，方便對數據的增刪改查，
利用以上技術咱們會搭建一個vue案例，效果展現圖：html
以上就是咱們最終要實現的所有效果，我會一塊一塊的講解，關於腳手架安裝和json-server搭建，在本次博客中，不會講解，若是想看的話，在小編的博客中，也有講解關於腳手架搭建和json-server搭建，若是想學習的話，能夠看一下。前端
1.項目結構展現vue
左邊第一個是前端項目結構，第二個爲json-server服務端java
2.頁面搭建ios
在本次案例中，小編採用Element-ui快速搭建前端頁面，以提升效率。若是不瞭解的話，能夠去官網看一下es6
2.1安裝element-uivue-router
經過npm install element-ui -S 安裝前端ul框架，安裝完以後，並在main.js引入vue-cli
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
2.2頁面佈局UserInfo.vue
直接經過element-ui中table佈局，把總體建構頁面佈局完成，
<h1>用戶信息管理界面</h1>
<el-row>
<el-col :span="20" :push='2'>
<div>
<el-form :inline="true">
<el-form-item style="float: left" label="查詢用戶信息:">
<el-input v-model="keyUser" placeholder="查詢所須要的內容......"></el-input>
</el-form-item>
<el-form-item style="float: right">
<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
style="width: 100%">
<el-table-column
type="index"
label="序號"
align="center"
width="60">
</el-table-column>
<el-table-column
label="日期"
align="center"
width="120">
<template slot-scope="scope">
<span>{{ scope.row.date | moment}}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
align="center"
width="100">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
label="郵箱"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.email }}</span>
</template>
</el-table-column>
<el-table-column
label="標題"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column
label="評價"
align="center"
width="200">
<template slot-scope="scope">
<span>{{ scope.row.evaluate }}</span>
</template>
</el-table-column>
<el-table-column
label="狀態"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.state }}</span>
</template>
</el-table-column>
<el-table-column label="操做" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
2.3頁面數據獲取並展現
經過axios請求本地搭建的服務數據，把獲得的數據展現到頁面當中。
也是經過cnpm install axios --save安裝並在main.js中引入
import axios from 'axios' Vue.prototype.$axios = axios
咱們須要在方法methods中定義一個getUserInfo方法，用於請求數據
data () { return { tableData: [], 用於存放數據 }
}
getUserInfo() {
this.$axios.get('http://localhost:3000/data').then(res => {
this.tableData = res.data
})
},
這是時候，數據是請求到了，可是頁面併爲展現，這就關係到vue的生命週期。若是對vue生命週期不是很瞭解的話，能夠官網仔細看一遍，
咱們只須要在created這個生命週期鉤子中，調用咱們請求數據的方法就能夠把數據展現到頁面中。這樣咱們就完成第一步了，頁面數據請求展現
created:在模板渲染成html前調用，即一般初始化某些屬性值，而後再渲染成視圖。
created(){
this.getUserInfo()
},
3.添加數據
剛纔咱們已經完成第一步，把後臺的數據展現到前端頁面中，接下來咱們對數據進行添加，頁面所有都是用element搭建
3.1頁面結構搭建，把AddUserInfo.vue組件當成一個子組件，在父組件中引入這個子組件，點擊添加按鈕，彈出這個添加對話框
<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="formDate.email"></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經過點擊父組件的添加按鈕觸發子組件彈出框
dialogAdd是咱們在父組件定義的的，須要傳遞給子組件，
<el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
在data定義用因而否彈出添加彈出框，默認false不彈出，只有點擊添加按鈕的時候才彈出彈出框 dialogAdd:{ show:false }, methods方法中 hanldeAdd(){ //添加 this.dialogAdd.show = true; //彈出對話框 },
3.4子組件須要接受父組件傳遞的方法.並請求數據。實現添加
<script>
export 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('http://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>
this.$emit('update'); 子組件數據發生改變了，父組件視圖卻沒有更新，這時候經過子創父，this.$emit,想父組件發送子組件傳遞的方法，
<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser>
@update="getUserInfo" //接受子組件傳遞過來的方法去更新視圖
4.實現刪除
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
刪除數據須要根據id去刪除，使用es6模板字符串進行拼接
handleDelete(index,row) {
// 刪除用戶信息
this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{
this.$message({
type:"success",
message:"刪除信息成功"
})
this.getUserInfo() //刪除數據，更新視圖
})
},
5.實現編輯功能
在這裏添加彈出框內容和編輯彈出框內容如出一轍，能夠選擇進行封裝，封裝成一個組件，添加和編輯共同使用這一個組件，根據自定義一個字段來判斷點擊 的是添加仍是編輯按鈕。在本次案例中，沒有封裝，若是想封裝的話，能夠本身嘗試封裝組件，來提升效率。
5.1頁面搭建EditUser.vue組件，也是當作一個子組件，在父組件中去引入這個子組件，並把獲取的數據展現到頁面中。
<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="form.email"></el-input>
</el-form-item>
<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>
在父組件中定義好須要傳遞的數據字段
dialogAdd:{ //編輯彈出框，默認是false
show:false
},
form:{ //編輯信息
date:'',
name:'',
email:'',
title:'',
evaluate:'',
state:''
},
5.2也是在方法中點擊編輯按鈕，在編輯中，點擊拿一行，須要獲取那一行的字段數據，並把獲取的數據傳遞給子組件顯示到彈出框中，須要肯據row，來獲取每一行的數據。
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button> <el-button
handleEdit(index,row){ //編輯 this.dialogEdit.show = true; //顯示彈 this.form = { date:row.date, name:row.name, email:row.email, title:row.title, evaluate:row.evaluate, state:row.state, id:row.id } },
當我門打印row的是，就是點擊哪一行的編輯按鈕，對應的數據就好打印出來，這時候咱們只須要把獲得的數據傳遞給子組件就行
5.3父組件獲得的數據，子組件經過props接受，和添加數據幾乎同樣
<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(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {
this.$message({
type:"success",
message:"編輯信息成功"
})
console.log(res)
this.dialogEdit.show = false;
this.$emit('updateEdit') //更新父組件數據視圖
})
} else {
console.log('error submit!!');
return false;
}
})
}
}
}
</script>
6查詢數據
<el-form-item style="float: left" label="查詢用戶信息:"> <el-input v-model="keyUser" placeholder="查詢所須要的內容......"></el-input> </el-form-item>
6.1須要定義一個查詢方法，經過filter對數組進行過濾，並返回一個新的數據，最後經過es6中includes方法，判斷查詢的條件是否包含，includes若是包含就返回true，若是不包含就返回false
searchUserinfo(keyUser) {
return this.tableData.filter((user) => {
if(user.name.includes(keyUser)) {
return user
}
})
}
把定義好的方法，綁定到data,由於這個方法會返回一個新的數組
7.時間格式化
寫到這個案例已經基本寫完了，仍是一些細節須要修改，好比我咱們添加日期，頁面顯示並非咱們想要的。我門只想要右邊的效果.
這時候推薦一個日期格式化插件moment.js,能夠快速幫咱們解決這個問題
7.1經過npm install moment --save下載
在main.js引入
import moment from 'moment'
咱們定義一個全局過濾的filter,不管在那個組件均可以使用，主要調用moment
//獲取年份
Vue.filter('moment', function (value, formatString) {
formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
return moment(value).format("YYYY-MM-DD"); // value能夠是普通日期 20170723
});
8.所有代碼
8.1UserInfo.vue組件代碼
<template>
<div class="info">
<h1>用戶信息管理界面</h1>
<el-row>
<el-col :span="20" :push='2'>
<div>
<el-form :inline="true">
<el-form-item style="float: left" label="查詢用戶信息:">
<el-input v-model="keyUser" placeholder="查詢所須要的內容......"></el-input>
</el-form-item>
<el-form-item style="float: right">
<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
style="width: 100%">
<el-table-column
type="index"
label="序號"
align="center"
width="60">
</el-table-column>
<el-table-column
label="日期"
align="center"
width="120">
<template slot-scope="scope">
<span>{{ scope.row.date | moment}}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
align="center"
width="100">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
label="郵箱"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.email }}</span>
</template>
</el-table-column>
<el-table-column
label="標題"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column
label="評價"
align="center"
width="200">
<template slot-scope="scope">
<span>{{ scope.row.evaluate }}</span>
</template>
</el-table-column>
<el-table-column
label="狀態"
align="center"
width="160">
<template slot-scope="scope">
<span>{{ scope.row.state }}</span>
</template>
</el-table-column>
<el-table-column label="操做" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser>
<EditUser :dialogEdit="dialogEdit" :form="form" @updateEdit="getUserInfo"></EditUser>
</div>
</template>
<script>
import AddUser from './AddUser.vue'
import EditUser from './EditUser.vue'
export default {
name: 'info',
data () {
return {
tableData:[],
dialogEdit:{
show:false,
},
dialogAdd:{
show:false
},
keyUser:"",
form:{ //編輯信息
date:'',
name:'',
email:'',
title:'',
evaluate:'',
state:''
},
}
},
methods:{
getUserInfo() {
this.$axios.get('http://localhost:3000/data').then(res => {
console.log(res)
this.tableData = res.data
})
},
hanldeAdd(){ //添加
this.dialogAdd.show = true;
},
handleEdit(index,row){ //編輯
this.dialogEdit.show = true; //顯示彈
this.form = {
date:row.date,
name:row.name,
email:row.email,
title:row.title,
evaluate:row.evaluate,
state:row.state,
id:row.id
}
console.log(row)
},
handleDelete(index,row) {
// 刪除用戶信息
this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{
this.$message({
type:"success",
message:"刪除信息成功"
})
this.getUserInfo() //刪除數據，更新視圖
})
},
searchUserinfo(keyUser) {
return this.tableData.filter((user) => {
if(user.name.includes(keyUser)) {
return user
}
})
}
},
created(){
this.getUserInfo()
},
components:{
AddUser,
EditUser
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
font-size: 30px;
color: #333;
text-align: center;
margin: 0 auto;
padding-bottom: 5px;
border-bottom: 2px solid #409EFF;
width: 300px
}
</style>
8.2AddUserInfo.vue組件
<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="formDate.email"></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>
<script>
export 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('http://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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
8.3EditUser.vue編輯組件
<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="form.email"></el-input>
</el-form-item>
<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>
<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(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {
this.$message({
type:"success",
message:"編輯信息成功"
})
console.log(res)
this.dialogEdit.show = false;
this.$emit('updateEdit')
})
} else {
console.log('error submit!!');
return false;
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
以上此次所有的案例deom,在過程當中有些說的不是很好，請見諒，若是喜歡，請多多關注
相關文章
- 1. kaggle案例實戰
- 2. Flume 實戰案例
- 3. Storm案例實戰
- 4. Flume實戰案例
- 5. seo實戰案例
- 6. JavaScript8：實戰案例
- 7. Centos7 實戰Vsftp服務-實戰案例
- 8. Flink開發實戰二 ——實戰案例
- 9. mysql 多實例案例實戰
- 10. hive綜合案例實戰
- 更多相關文章...
- • XML DOM 實例 - XML DOM 教程
- • XML 實例 - XML 教程
- • Docker容器實戰(一) - 封神Server端技術
- • Docker容器實戰(八) - 漫談 Kubernetes 的本質
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. kaggle案例實戰
- 2. Flume 實戰案例
- 3. Storm案例實戰
- 4. Flume實戰案例
- 5. seo實戰案例
- 6. JavaScript8：實戰案例
- 7. Centos7 實戰Vsftp服務-實戰案例
- 8. Flink開發實戰二 ——實戰案例
- 9. mysql 多實例案例實戰
- 10. hive綜合案例實戰