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

最新推荐文章于 2022-10-11 15:11:26 发布

weixin_34378767

最新推荐文章于 2022-10-11 15:11:26 发布

阅读量4.5k

点赞数 11

文章标签： javascript 后端前端 ViewUI

原文链接：https://segmentfault.com/a/1190000015834632

版权

本文介绍了使用Vue2、axios和ElementUI来实现前端增删改查功能的步骤。重点包括安装相关依赖，如axios、elementUI和loader模块，配置webpack和main.js，以及在table.vue中实现基本操作。遇到的问题是后台接收不到前端数据，解决方法是在main.js中设置axios的Content-Type，并使用URLSearchParams传递参数。

摘要由CSDN通过智能技术生成

最近尝试使用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（目前实现了增、删两个功能）

<template>
  <section>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0; text-align: left">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.author" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getUsers">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--为了实现分页bookData.slice((currentPage-1)*pageSize,currentPage*pageSize)-->
    <el-col :span="24" style="background: #ff0">
      <el-table border
        :data="bookData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :loading="listLoading"
        @selection-change="selectionRowsChange"
        style="width: 100%; text-align: left;">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="#" width="60"></el-table-column>
        <el-table-column prop="author" label="作者" width="200"></el-table-column>
        <el-table-column prop="title" label="书名" width="200"></el-table-column>
        <el-table-column prop="price" label="单价" width="120"></el-table-column>
        <el-table-column prop="publish" label="出版社" width="200"></el-table-column>
        <el-table-column prop="publishDate" label="出版日期"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <!--由elementui提供，scope.$index和scope.row是为了方便与后台进行数据交互，后面的删除函数中会用到-->
            <el-button size="mini">编辑</el-button>
            <el-button size="mini" type="danger"
              @click="removeUser(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>

    <el-col :span="24" style="margin-top: 20px; text-align: left">
      <el-button type="danger" @click="batchesRemove">
        批量删除