vue2.0+axios+elementUI实现增删改查

rollback 发布于2019-08-23 10:33 / 1553人阅读

最近尝试使用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);
})

其实，实现增删改查最重要的是在找到正确的参数，并将参数传递给后台，功能的实现主要是后台，前端只负责数据展示。
增删改查功能全部实现。

专线服务混合云实现增删改查登录增删改查 thinkphp增删改查 xml增删改查

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96452.html

vue2.0-基于elementui换肤[自定义主题]

摘要：直接上预览链接基于换肤自定义主题项目增加主题组件在项目的下添加文件夹文件获取地址项目增加自定义主题自定义添加主题下载地址项目引入和使用选择你想要随主题改变的元素在里面，不希望随主题改变的可以注释掉选择皮肤之后把记录存在里面。 0. 直接上预览链接 [vue2.0-基于elementui换肤[自定义主题]](https://mgbq.github.io/vue-pe... 1. ...

lx1036 2019-08-29 15:17 评论0 收藏0
vue2.0-基于elementui换肤[自定义主题]

摘要：直接上预览链接基于换肤自定义主题项目增加主题组件在项目的下添加文件夹文件获取地址项目增加自定义主题自定义添加主题下载地址项目引入和使用选择你想要随主题改变的元素在里面，不希望随主题改变的可以注释掉选择皮肤之后把记录存在里面。 0. 直接上预览链接 [vue2.0-基于elementui换肤[自定义主题]](https://mgbq.github.io/vue-pe... 1. ...

scwang90 2019-08-26 11:53 评论0 收藏0
vue2.0-基于elementui换肤[自定义主题]

摘要：直接上预览链接基于换肤自定义主题项目增加主题组件在项目的下添加文件夹文件获取地址项目增加自定义主题自定义添加主题下载地址项目引入和使用选择你想要随主题改变的元素在里面，不希望随主题改变的可以注释掉选择皮肤之后把记录存在里面。 0. 直接上预览链接 [vue2.0-基于elementui换肤[自定义主题]](https://mgbq.github.io/vue-pe... 1. ...

tianhang 2019-08-05 13:45 评论0 收藏0
Vue国际化处理 vue-i18n 以及项目自动切换中英文

摘要：直接上预览链接国际化处理以及项目自动切换中英文环境搭建命令进入项目目录，执行以下命令安装国际化插件项目增加国际化翻译文件在项目的下添加文件夹增加中文翻译文件以及英文翻译文件，里面分别存储项目中需要翻译的信息。 0. 直接上预览链接 Vue国际化处理 vue-i18n 以及项目自动切换中英文 1. 环境搭建命令进入项目目录，执行以下命令安装vue 国际化插件vue-i18n...

wangtdgoodluck 2019-08-26 11:51 评论0 收藏0
一个完整的增删改查模块（以我们的项目‘危化品库管理’模块为例）

摘要：父组件列表页面危化品库管理添加搜索危化品名称号危化品类型请选择危化品类型别名查询导出列表展示序号父组件列表页面 ...

Carl 2019-08-02 16:07 评论0 收藏0