vue修改数据连接数据库_vue实现数据的增删改查
在管理員的一些后臺頁面里，個人中心里的數(shù)據(jù)列表里，都會有對這些數(shù)據(jù)進行增刪改查的操作。比如在管理員后臺的用戶列表里，我們可以錄入新用戶的信息，也可以對既有的用戶信息進行修改。在vue中，我們更應該專注于對數(shù)據(jù)的操作和處理。
比如我們有一個這樣的頁面：
我們把這些用戶信息保存到list的數(shù)組中，然后增刪改查就在這個數(shù)組上進行：
list: [
{
username: 'aaaaa',
email: '123@qq.com',
sex: '男',
province: '北京市',
hobby: ['籃球', '讀書', '編程']
},
{
username: 'bbbbb',
email: 'bbbbbbb@163.com',
sex: '女',
province: '河北省',
hobby: ['彈琴', '讀書', '插畫']
}
// ...
]
設置這些數(shù)據(jù)主要也是復習一下vue對表單的處理操作，這里面的表單有：文本輸入框，單選按鈕，select選擇框，復選框等。
1. 展示數(shù)據(jù)
我們的數(shù)據(jù)都放在數(shù)組list中，但是這里并不直接對list對循環(huán)輸出，而是先把list中的數(shù)據(jù)給一個數(shù)組slist，對slist進行循環(huán)輸出。因為我們在后面的查詢功能中需要對數(shù)據(jù)進行過濾，數(shù)組list一直保存著原始數(shù)據(jù)(包括新增、修改后或已刪除后)，而數(shù)組slist只負責展示。
在vue中提供一個setSlist方法，將需要展示的數(shù)據(jù)給了數(shù)組slist：
// 獲取需要渲染到頁面中的數(shù)據(jù)
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
}
然后在html中使用v-for把slist數(shù)組渲染出來：
{{index+1}}{{item.username}}{{item.email}}{{item.sex}}{{item.province}}{{item.hobby.join(' | ')}}修改 | 刪除在操作這一欄中，給修改和刪除操作綁定上事件。
2. 增加和刪除功能
把增加功能和刪除合并到一起，是這兩個功能相對來說都比較簡單。
增加用戶時使用push方法，把用戶的信息添加到list數(shù)組的最后：
this.list.push({
username: 'ffff',
email: 'fffffff@163.com',
sex: '女',
province: '河南省',
hobby: ['彈琴', '插畫']
});
這樣就能添加一位ffff的用戶了。
刪除用戶時，通過splice(index, 1)，可以刪除index位置的數(shù)據(jù)，頁面上的數(shù)據(jù)自動就會更新。
3. 修改功能
當我們想要修改某個元素時，可以把這個位置上的數(shù)據(jù)取出來放到彈層里(或者其他某個位置)，在彈層里的信息可以取消或者修改后進行保存。
假設我們彈層里的數(shù)據(jù)是selectedlist，那么每次修改時，把index位置的數(shù)據(jù)給了selectedlist，然后在彈層中修改selectedlist。我們也能看到修改數(shù)據(jù)的類型： 文本框(用戶名，郵箱)，單選按鈕(性別)，select選擇框(所在省份)，多選框(愛好)，這里我們主要練習的是表單處理(https://cn.vuejs.org/v2/guide/forms.html)。彈層是否顯示用變量isActive來控制：
// 修改數(shù)據(jù)
modifyData(index) {
this.selected = index; // 修改的位置
this.selectedlist = this.list[index];
this.isActive = true;
}
有沒有發(fā)現(xiàn)一個問題，當修改彈層中的信息時，表格中的數(shù)據(jù)也同步更新了。可是我們本身是希望當點擊保存按鈕時，才把彈層中的數(shù)據(jù)保存到表格里。問題的根源就出在這里：
this.selectedlist = this.list[index];
因為list[index]是個Object類型的數(shù)據(jù)，若使用=賦值，則賦值操作為淺度拷貝(把數(shù)據(jù)的地址賦值給對應變量，而沒有把具體的數(shù)據(jù)復制給變量，變量會隨數(shù)據(jù)值的變化而變化)，selectedlist與list[index]使用相同的數(shù)據(jù)地址，互相引起數(shù)據(jù)值的變化。因此這里我們需要進行深度拷貝：
this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先轉(zhuǎn)換為字符串，然后再轉(zhuǎn)換
當用戶修改數(shù)據(jù)后，selectedlist就會發(fā)生變化，點擊保存按鈕時，將數(shù)據(jù)重新保存到index位置：
/*
this.list 數(shù)據(jù)數(shù)組
this.selected 剛才修改的位置
this.selectedlist 需要保存的數(shù)據(jù)
*/
Vue.set(this.list, this.selected, this.selectedlist);
4. 查詢功能
在第1小節(jié)中我們已經(jīng)說過，在頁面表格中展示的是slist中的數(shù)據(jù)，就是為了方便執(zhí)行查詢操作：
// 獲取需要渲染到頁面中的數(shù)據(jù)
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
}
每次根據(jù)某些條件將過濾后的數(shù)據(jù)賦值給slist數(shù)組，展示出查詢后的數(shù)據(jù)。這里我們的查詢實現(xiàn)了兩個小功能：
用戶在輸入某個字符后，自動在輸入框下方用列表展示出用戶可能要查詢的詞語(如用戶名等)
同步更新表格中的數(shù)據(jù)
這里我們通過用戶名和郵箱進行查詢，因此在過濾數(shù)據(jù)時，需要檢測用戶名和郵箱是否含有查詢的單詞。我們先給輸入框綁定一個input事件，同時用datalist展示用戶可能要查詢的詞語：
search功能的實現(xiàn)，searchlist為在輸入框下方展示的可能要搜索的詞語，ss數(shù)組則保存過濾后的數(shù)據(jù)，當循環(huán)完畢后，設置調(diào)用setSlist方法修改slist數(shù)組：
// 搜索
search(e) {
var v = e.target.value,
self = this;
self.searchlist = [];
if (v) {
var ss = [];
// 過濾需要的數(shù)據(jù)
this.list.forEach(function (item) {
// 檢測用戶名
if (item.username.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.username) == -1) {
self.searchlist.push(item.username);
}
ss.push(item);
} else if (item.email.indexOf(v) > -1) {
// 檢測郵箱
if (self.searchlist.indexOf(item.email) == -1) {
self.searchlist.push(item.email);
}
ss.push(item);
}
});
this.setSlist(ss); // 將過濾后的數(shù)據(jù)給了slist
} else {
// 沒有搜索內(nèi)容，則展示全部數(shù)據(jù)
this.setSlist(this.list);
}
}
每當用戶輸入或者刪除一個字符時都會調(diào)用search方法，執(zhí)行查詢操作，當用點擊展示詞語列表時，也會調(diào)用search方法。
5. 將彈層獨立為組件
其實我們應該發(fā)現(xiàn)，修改功能(或新增功能)從代碼和樣式上相對來說比較獨立，我們把彈層獨立為組件的形式，把需要修改的數(shù)據(jù)通過props傳遞給該組件(新增數(shù)據(jù)時，可以給組件傳遞一個空數(shù)據(jù))，當用戶點擊保存時，再通過$emit給了父組件(子組件不能直接父級的數(shù)據(jù)，需要用data或者computed生成一個局部變量，然后再使用$emit方法把這個局部數(shù)據(jù)再傳遞上去)：
// 彈層組件
Vue.component('model', {
props: ['list', 'isactive'],
template: `
新增 | 修改
/* 省略 */
`,computed: {
modifylist() {
return this.list;
}
},
methods: {
changeActive() {
this.$emit('change'); // 關(guān)閉彈層，修改isactive值
},
modify() {
this.$emit('modify', this.modifylist); // 將修改后的數(shù)據(jù)傳遞給父組件
}
}
});
父組件，在父組件中截取change和modify事件，再用changeOverlay和modify來實現(xiàn)：
轉(zhuǎn)自：https://www.xiabingbao.com/vue/2017/07/10/vue-curd.html? 侵刪
總結(jié)
以上是生活随笔為你收集整理的vue修改数据连接数据库_vue实现数据的增删改查的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于python语言和人工智能哪个说法不
- 下一篇： vs中没有fstream_vs++201