vue日誌demo，增刪改查的練習
# 安裝
### 1. 確定電腦已裝node和npm
```
node -v
```
```
npm -v
```
出現版本號則說明電腦已經安裝好node和npm
### 2. 創建一個基於webpack的項目
```
vue init webpack dailyrecord
```
### 3. 在項目裏安裝依賴
```
cd dailyrecord
```
```
npm install
```
### 4. 運行
```
npm run dev
```
這樣你的vue就跑起來啦
# 配置路由
為了動態渲染各個頁面的組件，這個是必須的，這些都在router文件夾裏的index.js配置好，新建dailyrecord文件夾在下面新建index.vue
### 1. 導入頁面
```
import Index from ‘@/dailyrecord/Index‘
```
### 2. 配置全局路徑
```
path:‘\‘
component:‘Index‘
```
# Element-UI
使用element-ui編寫頁面樣式，具體操作參照官網
### 1. 安裝
```
npm i element-ui -s
```
### 2. 全局配置
找到main.js文件
```
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘
```
# 頁面
參考element-ui官網做出一些假數據寫出index頁
# 綁定table數據
關於接口傳值必須要知道的，後臺傳的值是數組還是對象。一定要確定好，不然後期很容易傳錯或者接收錯的值，導致數據傳輸不正確，不顯示數據
### 1. 安裝並全局導入axios
```
npm i axios
```
```
Vue.prototype.$axios = axios
```
axios 並不屬於 vue的插件
框架與Http本身沒有必然的歸屬性關系，是要實現了Http標準，都可以在任意框架中使用
想要使用this調用的話，可以綁定到vue.prototype上
### 2. 獲取接口，綁定數據
```
loadlist(){
this.$axios.get(‘‘)
.then(res=》{
this.dateb=res.data
})
}
```
# 新增日誌數據
### 1. 新建新增日誌組件addlog,並且在父組件裏調用
非空驗證（詳情看elementUi form表單驗證）
```
<add-log .....</add-log>
```
```
import AddLog from ‘@/dailyrecord/AddLog‘
```
```
components: {
AddLog
}
```
### 2. 在子組件裏method裏寫新增方法 addlogone()
新增事件：submit-btn-click，取消事件：cancel-dialog一起傳到父組件，在父組件裏寫方法操作
```
@click="$emit(‘cancel-dialog‘)" 子
```
```
@cancel-dialog="addmodel=false" 父
```
```
@submit-btn="addlogl" 父
```
```
this.$emit(‘submit-btn‘, this.formdata) 子
```
1. 新增裏面驗證非空通過就提交model到父組件。
```
addlogone: function () {
this.$refs.forma.validate((val) => {
if (val) {
this.$emit(‘submit-btn‘, this.formdata)
}
})
}
```
2. 父組件寫方法獲取api並傳入model,關閉dialog,清空表單（在子組件寫清空方法然後父組件調用，ref，refs）
```
addlogl (formdata) {
this.$axios.post(‘http://qianjia.space:8000/logs‘, formdata)
.then((res) => {
this.addlog = false
this.loadlist()
this.$refs.form.reset()
})
}
```
3. 賦值到頁面中,再加載一遍頁面
```
this.loadlist()
```
# 刪除日誌
### 寫刪除方法
1. 用element組件的刪除方法，傳入索引和數據
```
@click.native.prevent="deleteRow(scope.$index, datab)"
```
2. 寫刪除方法接收索引，獲取當前數據行的Id，傳入，然後調用api方法刪除數據，最後刪除單元格
```
detleteRow(index,rows){
var id = rows[index]._id.$oid
....
}
```
# 修改日誌
1. 點擊彈出表單，賦值到子組件
:data="formdata"
```
edit (row) {
this.formdata = row
this.editlog = true
}
```
```
<edit :data="formdata"></edit>
```
2. 子組件接收父組件傳值
props,mount初始化數據，watch監聽數據變化<不監聽的話，文本框的值不會變>
```
props: {
data: Object
}
```
```
mounted () {
if (this.data && Object.keys(this.data).length) {
this.setlog()
} else {
this.formdata = this.initModel()
}
}
```
```
watch: {
data: function () {
this.setlog()
}
}
```
3. 點擊提交edita方法將數據傳到父組件
```
@click="edita"
```
```
edita: function () {
this.$refs.hh.validate(valid => {
if (valid) {
console.log(this.formdata)
this.$emit(‘edita‘, this.formdata)
}
})
}
```
4. 父組件頁面接收@edita，並定義方法提交數據到修改的接口（需要看數據是什麽格式的再決定傳入），關閉彈窗
```
edita (model) {
let json = {
‘summary‘: this.formdata.summary,
‘content‘: this.formdata.content,
‘user‘: this.formdata.user
}
this.$axios.put(‘http://qianjia.space:8000/logs‘ + ‘/‘ + model._id.$oid, json)
.then((res) => {
this.editlog = false
})
}
```
5. 合並addlog和editlog
```
mounted () {
if (this.data && Object.keys(this.data).length) {
this.setlog()
} else {
this.formdata = this.initModel()
}
},
watch: {
data: function () {
this.setlog()
}
```
掛載的時候因為add走了Init
edit走了setlog，點擊確定的時候，都傳入了修改的Model，然後到父組件的時候用不同的方法傳遞一下api接口就行了
### 關於綁定數據的問題
##### 1. :data="model"
(1)用於綁定向子組件傳的數據，在父組件data裏必須定義完整
```
data:function(){
model:{
data:‘‘,
user:‘‘,
summary:‘‘,
content:‘‘
}
}
```
(2)用於綁定table數據，寫在el-table最外層，在子組件裏定義類型就可以，做列表顯示用，init裏賦值
```
data:function(){
model:[]
}
```
##### 2. :model="model"
(1)el-from裏綁定的數據，el-form-item
vue日誌demo，增刪改查的練習