您好,登錄后才能下訂單哦!
前言
我們將會選擇使用一些 vue 周邊的庫vue-cli, vue-router,axios,moment,Element-ui搭建一個前端項目案例,后端數(shù)據(jù)接口,會使用json-server快速搭建一個本地的服務,方便對數(shù)據(jù)的增刪改查,
利用以上技術我們會搭建一個vue案例,效果展示圖:
以上就是我們最終要實現(xiàn)的全部效果,我會一塊一塊的講解,關于腳手架安裝和json-server搭建,在本次博客中,不會講解,如果想看的話,在小編的博客中,也有講解關于腳手架搭建和json-server搭建,如果想學習的話,可以看一下。
1.項目結構展示
左邊第一個是前端項目結構,第二個為json-server服務端
2.頁面搭建
在本次案例中,小編采用Element-ui快速搭建前端頁面,以提高效率。如果不了解的話,可以去官網(wǎng)看一下
2.1安裝element-ui
通過npm install element-ui -S 安裝前端ul框架,安裝完之后,并在main.js引入
import 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布局,把整體建構頁面布局完成,
<h2>用戶信息管理界面</h2> <el-row> <el-col :span="20" :push='2'> <div> <el-form :inline="true"> <el-form-item label="查詢用戶信息:"> <el-input v-model="keyUser" placeholder="查詢所需要的內(nèi)容......"></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 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="狀態(tài)" 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頁面數(shù)據(jù)獲取并展示
通過axios請求本地搭建的服務數(shù)據(jù),把得到的數(shù)據(jù)展示到頁面當中。
也是通過cnpm install axios --save安裝并在main.js中引入
import axios from 'axios' Vue.prototype.$axios = axios
我們需要在方法methods中定義一個getUserInfo方法,用于請求數(shù)據(jù)
data () { return { tableData: [], 用于存放數(shù)據(jù) } }
getUserInfo() { this.$axios.get('http://localhost:3000/data').then(res => { this.tableData = res.data }) },
這是時候,數(shù)據(jù)是請求到了,但是頁面并為展示,這就關系到vue的生命周期。如果對vue生命周期不是很了解的話,可以官網(wǎng)仔細看一遍,
我們只需要在created這個生命周期鉤子中,調(diào)用我們請求數(shù)據(jù)的方法就可以把數(shù)據(jù)展示到頁面中。這樣我們就完成第一步了,頁面數(shù)據(jù)請求展示created:在模板渲染成html前調(diào)用,即通常初始化某些屬性值,然后再渲染成視圖。
3.添加數(shù)據(jù)
剛才我們已經(jīng)完成第一步,把后臺的數(shù)據(jù)展示到前端頁面中,接下來我們對數(shù)據(jù)進行添加,頁面全部都是用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="狀態(tài)" 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,
<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> //使用這個組件, import AddUser from './AddUserInfo.vue' //引入組件 components:{ //注冊 AddUser, }
3.3通過點擊父組件的添加按鈕觸發(fā)子組件彈出框
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子組件需要接受父組件傳遞的方法.并請求數(shù)據(jù)。實現(xiàn)添加
<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'); 子組件數(shù)據(jù)發(fā)生改變了,父組件視圖卻沒有更新,這時候通過子創(chuàng)父,this.$emit,想父組件發(fā)送子組件傳遞的方法,
<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> @update="getUserInfo" //接受子組件傳遞過來的方法去更新視圖
4.實現(xiàn)刪除
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
刪除數(shù)據(jù)需要根據(jù)id去刪除,使用es6模板字符串進行拼接
handleDelete(index,row) { // 刪除用戶信息 this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{ this.$message({ type:"success", message:"刪除信息成功" }) this.getUserInfo() //刪除數(shù)據(jù),更新視圖 }) },
5.實現(xiàn)編輯功能
在這里添加彈出框內(nèi)容和編輯彈出框內(nèi)容一模一樣,可以選擇進行封裝,封裝成一個組件,添加和編輯共同使用這一個組件,根據(jù)自定義一個字段來判斷點擊 的是添加還是編輯按鈕。在本次案例中,沒有封裝,如果想封裝的話,可以自己嘗試封裝組件,來提高效率。
5.1頁面搭建EditUser.vue組件,也是當做一個子組件,在父組件中去引入這個子組件,并把獲取的數(shù)據(jù)展示到頁面中。
<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="狀態(tài)" 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>
在父組件中定義好需要傳遞的數(shù)據(jù)字段
dialogAdd:{ //編輯彈出框,默認是false show:false }, form:{ //編輯信息 date:'', name:'', email:'', title:'', evaluate:'', state:'' },
5.2也是在方法中點擊編輯按鈕,在編輯中,點擊拿一行,需要獲取那一行的字段數(shù)據(jù),并把獲取的數(shù)據(jù)傳遞給子組件顯示到彈出框中,需要肯據(jù)row,來獲取每一行的數(shù)據(jù)。
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button> <el-button<br> 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的是,就是點擊哪一行的編輯按鈕,對應的數(shù)據(jù)就好打印出來,這時候我們只需要把得到的數(shù)據(jù)傳遞給子組件就行
5.3父組件得到的數(shù)據(jù),子組件通過props接受,和添加數(shù)據(jù)幾乎一樣
<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') //更新父組件數(shù)據(jù)視圖 }) } else { console.log('error submit!!'); return false; } }) } } } </script>
6查詢數(shù)據(jù)
<el-form-item label="查詢用戶信息:"> <el-input v-model="keyUser" placeholder="查詢所需要的內(nèi)容......"></el-input> </el-form-item>
6.1需要定義一個查詢方法,通過filter對數(shù)組進行過濾,并返回一個新的數(shù)據(jù),最后通過es6中includes方法,判斷查詢的條件是否包含,includes如果包含就返回true,如果不包含就返回false
searchUserinfo(keyUser) { return this.tableData.filter((user) => { if(user.name.includes(keyUser)) { return user } }) }
把定義好的方法,綁定到data,因為這個方法會返回一個新的數(shù)組
7.時間格式化
寫到這個案例已經(jīng)基本寫完了,還是一些細節(jié)需要修改,比如我我們添加日期,頁面顯示并不是我們想要的。我門只想要右邊的效果.
這時候推薦一個日期格式化插件moment.js,可以快速幫我們解決這個問題
7.1通過npm install moment --save下載
在main.js引入
import moment from 'moment'
我們定義一個全局過濾的filter,無論在那個組件都可以使用,主要調(diào)用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"> <h2>用戶信息管理界面</h2> <el-row> <el-col :span="20" :push='2'> <div> <el-form :inline="true"> <el-form-item label="查詢用戶信息:"> <el-input v-model="keyUser" placeholder="查詢所需要的內(nèi)容......"></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 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="狀態(tài)" 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() //刪除數(shù)據(jù),更新視圖 }) }, 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> h2{ 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="狀態(tài)" 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="狀態(tài)" 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,在過程中有些說的不是很好,請見諒,如果喜歡,請多多關注
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。