前言

我們將會選擇使用一些 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引入

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

2.2頁面布局UserInfo.vue

直接通過element-ui中table布局，把整體建構頁面布局完成，

用戶信息管理界面

添加

:data="searchUserinfo(keyUser)"

border

style="width: 100%">

type="index"

label="序號"

align="center"

width="60">

label="日期"

align="center"

width="120">

{{ scope.row.date | moment}}

label="姓名"

align="center"

width="100">

{{ scope.row.name }}

label="郵箱"

align="center"

width="160">

{{ scope.row.email }}

label="標題"

align="center"

width="160">

{{ scope.row.title }}

label="評價"

align="center"

width="200">

{{ scope.row.evaluate }}

label="狀態"

align="center"

width="160">

{{ scope.row.state }}

size="mini"

@click="handleEdit(scope.$index, scope.row)">編輯

size="mini"

type="danger"

@click="handleDelete(scope.$index, scope.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前調用，即通常初始化某些屬性值，然后再渲染成視圖。

3.添加數據

剛才我們已經完成第一步，把后臺的數據展示到前端頁面中，接下來我們對數據進行添加，頁面全部都是用element搭建

3.1頁面結構搭建，把AddUserInfo.vue組件當成一個子組件，在父組件中引入這個子組件，點擊添加按鈕，彈出這個添加對話框

v-model="formDate.date"

type="date"

placeholder="選擇日期">

取 消

確 定

3.2我們在父組件UserInfo中引入子組件AddUserInfo.vue,

//使用這個組件，

import AddUser from './AddUserInfo.vue' //引入組件

components:{ //注冊

AddUser,

}

3.3通過點擊父組件的添加按鈕觸發子組件彈出框

dialogAdd是我們在父組件定義的的，需要傳遞給子組件，

添加

在data定義用于是否彈出添加彈出框，默認false不彈出，只有點擊添加按鈕的時候才彈出彈出框

dialogAdd:{

show:false

},

methods方法中

hanldeAdd(){ //添加

this.dialogAdd.show = true; //彈出對話框

},

3.4子組件需要接受父組件傳遞的方法.并請求數據。實現添加

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;

}

})

}

}

}

this.$emit('update'); 子組件數據發生改變了，父組件視圖卻沒有更新，這時候通過子創父，this.$emit,想父組件發送子組件傳遞的方法，

@update="getUserInfo" //接受子組件傳遞過來的方法去更新視圖

4.實現刪除

size="mini"

type="danger"

@click="handleDelete(scope.$index, scope.row)">刪除

刪除數據需要根據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組件，也是當做一個子組件，在父組件中去引入這個子組件，并把獲取的數據展示到頁面中。

v-model="form.date"

type="date"

placeholder="選擇日期">

取 消

確 定

在父組件中定義好需要傳遞的數據字段

dialogAdd:{ //編輯彈出框，默認是false

show:false

},

form:{ //編輯信息

date:'',

name:'',

email:'',

title:'',

evaluate:'',

state:''

},

5.2也是在方法中點擊編輯按鈕，在編輯中，點擊拿一行，需要獲取那一行的字段數據，并把獲取的數據傳遞給子組件顯示到彈出框中，需要肯據row，來獲取每一行的數據。

size="mini"

@click="handleEdit(scope.$index, scope.row)">編輯

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接受，和添加數據幾乎一樣

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;

}

})

}

}

}

6查詢數據

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組件代碼

用戶信息管理界面

添加

:data="searchUserinfo(keyUser)"

border

style="width: 100%">

type="index"

label="序號"

align="center"

width="60">

label="日期"

align="center"

width="120">

{{ scope.row.date | moment}}

label="姓名"

align="center"

width="100">

{{ scope.row.name }}

label="郵箱"

align="center"

width="160">

{{ scope.row.email }}

label="標題"

align="center"

width="160">

{{ scope.row.title }}

label="評價"

align="center"

width="200">

{{ scope.row.evaluate }}

label="狀態"

align="center"

width="160">

{{ scope.row.state }}

size="mini"

@click="handleEdit(scope.$index, scope.row)">編輯

size="mini"

type="danger"

@click="handleDelete(scope.$index, scope.row)">刪除

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

}

}

h1{

font-size: 30px;

color: #333;

text-align: center;

margin: 0 auto;

padding-bottom: 5px;

border-bottom: 2px solid #409EFF;

width: 300px

}

8.2AddUserInfo.vue組件

v-model="formDate.date"

type="date"

placeholder="選擇日期">

取 消

確 定

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;

}

})

}

}

}

8.3EditUser.vue編輯組件

v-model="form.date"

type="date"

placeholder="選擇日期">

取 消

確 定

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;

}

})

}

}

}

以上這次全部的案例deom,在過程中有些說的不是很好，請見諒，如果喜歡，請多多關注

總結

以上是生活随笔為你收集整理的html整合vue elementui,vue2.0结合Element-ui实战案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。