資訊專欄INFORMATION COLUMN
最近嘗試使用vue+element實現(xiàn)增刪改查功能，在實現(xiàn)的過程中遇到了蠻多問題，現(xiàn)在總結(jié)如下：
首先安裝相關(guān)的插件
1、根據(jù)vue官網(wǎng)推薦，使用axios進行前后臺交互，安裝axios
npm install axios -S
2、安裝elementUI，官網(wǎng)
npm i element-ui -S
3、安裝 loader 模塊
npm install style-loader -D
npm install css-loader -D
接下來進行相關(guān)配置
1、在build目錄下的webpack.base.conf.js文件中添加如下代碼
{
test: /.sass$/, loaders: ["style", "css", "sass"]
}
2、在main.js中引入
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-default/index.css‘
Vue.use(ElementUI)
接下來實現(xiàn)增刪改查功能
貼出table.vue（目前實現(xiàn)了增、刪兩個功能）
查詢 新增 編輯 刪除 批量刪除
上面代碼中最重要的一點是后臺可能接收不到前端數(shù)據(jù)，解決方案代碼中已經(jīng)給出，具體原因沒有寫明，大家想看可以看
https://blog.csdn.net/csdn_yu...
這篇博客寫的比較清楚
我采用的是第一種方法：
在main.js文件中添加
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
然后在調(diào)用接口時使用 URLSearchParams 傳遞參數(shù)，例如獲取用戶數(shù)據(jù)時
let para = new URLSearchParams();
para.append("author", this.filters.author); // append中的author、id、idArray都是要和后臺提供的參數(shù)相同，不然數(shù)據(jù)參數(shù)將傳不過去
this.$ajax({
methods: "post",
url: "http://xxx.xx.xxx.xxx:8099/InfoManage/bookList",
data: para,
}).then(res => {
console.log(res);
}).catch( err => {
console.log(err);
})
其實，實現(xiàn)增刪改查最重要的是在找到正確的參數(shù)，并將參數(shù)傳遞給后臺，功能的實現(xiàn)主要是后臺，前端只負責數(shù)據(jù)展示。
增刪改查功能全部實現(xiàn)。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96452.html
摘要：直接上預覽鏈接基于換膚自定義主題項目增加主題組件在項目的下添加文件夾文件獲取地址項目增加自定義主題自定義添加主題下載地址項目引入和使用選擇你想要隨主題改變的元素在里面，不希望隨主題改變的可以注釋掉選擇皮膚之后把記錄存在里面。 0. 直接上 預覽鏈接 [vue2.0-基于elementui換膚[自定義主題]](https://mgbq.github.io/vue-pe... 1. ...
摘要：直接上預覽鏈接基于換膚自定義主題項目增加主題組件在項目的下添加文件夾文件獲取地址項目增加自定義主題自定義添加主題下載地址項目引入和使用選擇你想要隨主題改變的元素在里面，不希望隨主題改變的可以注釋掉選擇皮膚之后把記錄存在里面。 0. 直接上 預覽鏈接 [vue2.0-基于elementui換膚[自定義主題]](https://mgbq.github.io/vue-pe... 1. ...
摘要：直接上預覽鏈接國際化處理以及項目自動切換中英文環(huán)境搭建命令進入項目目錄，執(zhí)行以下命令安裝國際化插件項目增加國際化翻譯文件在項目的下添加文件夾增加中文翻譯文件以及英文翻譯文件，里面分別存儲項目中需要翻譯的信息。 0. 直接上 預覽鏈接 Vue國際化處理 vue-i18n 以及項目自動切換中英文 1. 環(huán)境搭建 命令進入項目目錄，執(zhí)行以下命令安裝vue 國際化插件vue-i18n...
閱讀 3037·2020-01-08 12:17
閱讀 2004·2019-08-30 15:54
閱讀 1160·2019-08-30 15:52
閱讀 2046·2019-08-29 17:18
閱讀 1056·2019-08-29 15:34
閱讀 2469·2019-08-27 10:58
閱讀 1871·2019-08-26 12:24
閱讀 385·2019-08-23 18:23
