資訊專欄INFORMATION COLUMN
最近嘗試使用vue+element實現增刪改查功能，在實現的過程中遇到了蠻多問題，現在總結如下：
首先安裝相關的插件
1、根據vue官網推薦，使用axios進行前后臺交互，安裝axios
npm install axios -S
2、安裝elementUI，官網
npm i element-ui -S
3、安裝 loader 模塊
npm install style-loader -D
npm install css-loader -D
接下來進行相關配置
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)
接下來實現增刪改查功能
貼出table.vue（目前實現了增、刪兩個功能）
查詢 新增 編輯 刪除 批量刪除
上面代碼中最重要的一點是后臺可能接收不到前端數據，解決方案代碼中已經給出，具體原因沒有寫明，大家想看可以看
https://blog.csdn.net/csdn_yu...
這篇博客寫的比較清楚
我采用的是第一種方法：
在main.js文件中添加
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
然后在調用接口時使用 URLSearchParams 傳遞參數，例如獲取用戶數據時
let para = new URLSearchParams();
para.append("author", this.filters.author); // append中的author、id、idArray都是要和后臺提供的參數相同，不然數據參數將傳不過去
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);
})
其實，實現增刪改查最重要的是在找到正確的參數，并將參數傳遞給后臺，功能的實現主要是后臺，前端只負責數據展示。
增刪改查功能全部實現。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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. ...
摘要：直接上預覽鏈接國際化處理以及項目自動切換中英文環境搭建命令進入項目目錄，執行以下命令安裝國際化插件項目增加國際化翻譯文件在項目的下添加文件夾增加中文翻譯文件以及英文翻譯文件，里面分別存儲項目中需要翻譯的信息。 0. 直接上 預覽鏈接 Vue國際化處理 vue-i18n 以及項目自動切換中英文 1. 環境搭建 命令進入項目目錄，執行以下命令安裝vue 國際化插件vue-i18n...
閱讀 3014·2020-01-08 12:17
閱讀 1999·2019-08-30 15:54
閱讀 1156·2019-08-30 15:52
閱讀 2040·2019-08-29 17:18
閱讀 1051·2019-08-29 15:34
閱讀 2466·2019-08-27 10:58
閱讀 1867·2019-08-26 12:24
閱讀 374·2019-08-23 18:23
