<四>用户页面增删改查接口对接

本文主要是介绍<四>用户页面增删改查接口对接，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、先来实现一下用户的增删改查。

1、改一下固定的菜单之前先看看左边菜单栏是从sidebar这个页面加载的。那我们打开这个vue界面看看

 2、很明显这个菜单侍从官路由哪里加载过来的。那就简单了，到路由的index.js下把table名字改一下，改成 用户，相关访问接口也改一下

 3、修改完以后如下图所示，

4、在view文件夹新建一个user文件夹，然后新建一个index.vue文件.

<template>
  <div class="app-container">
      <el-row>
        <div>
        <el-input v-model="tabledata.searchname" placeholder="请输入名称"  prefix-icon="el-icon-search" style="width:320px"></el-input>
        <el-button type="primary" icon="el-icon-search"  @click="handleSearch()">查询</el-button>
        <el-button type="success" icon="el-icon-plus"  @click="handleCreate()">新增</el-button>
        </div>
      </el-row>
        <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        >
         <el-table-column align="center" prop="id" label="用户id" width="95" v-if="false" >
          </el-table-column>
        <!-- <el-table-column type="selection" align="center" /> -->
        <el-table-column align="center" prop="name" label="名称" width="95">
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime">
          </el-table-column>
        <el-table-column  label="操作">
         <template slot-scope="scope">
           <el-button type="info" icon="el-icon-edit"  @click="handleUpdate(scope.row)" size="small">编辑</el-button>
           <el-button type="danger" icon="el-icon-delete"  @click="handleDelete(scope.row)" size="small">删除</el-button>
        </template>
        </el-table-column>
        </el-table>
      <el-pagination
      background
      :page-size="tabledata.pagesize"
      layout="total, prev, pager, next"
      :total="tabledata.records"
      :current-page.sync="tabledata.currentpage"
      @current-change="handleCurrentChange">
    </el-pagination>

    <add-user v-on:remoteClose="remoteEditColse" :pagedata="pagedata" :formdata="formdata"/>

  </div>
</template>
<script>
import { getInfo,getUserInfoById,deleteuser} from '@/api/user'
import edit from '../user/edit.vue'

export default {
  components: {
      'add-user': edit,
    },
  data() {
    return {
      tabledata:{
          searchname:null,
          pagesize:10,
          currentpage:1,
          sidx:'Id',
          sord:'asc',
        //  total:0,
          records:0,
      },
      list: null,
      listLoading: true,
      pagedata:{
        title:"编辑",
        visible:false,
      },
      formdata:{
        id:' ',
        name:' ',
        password:' '
      }
    }
  },
  created() {
    this.fetchData(this.tabledata)
  },
  methods: {
    fetchData(value) {
      this.listLoading = true
      getInfo(value).then(response => {
        console.log(response.data)
        this.list = response.data.users
        this.tabledata.records=response.data.records
        this.listLoading = false
      })
    },
    handleCreate() {
      this.formdata.id="0"
      this.pagedata.visible=true
      this.pagedata.title="新增"
    },
    handleUpdate(row){
        this.formdata.id=row['id']
        getUserInfoById(this.formdata.id).then(response => {
        if(response.code===200)
        {
           this.formdata.name= response.data.name
        }
        })
      this.pagedata.visible=true
      this.pagedata.title="编辑"
    },

    handleDelete(row){
        this.formdata.id=row['id']
        deleteuser(this.formdata).then(response => {
        alert(response.message)
        if(response.code===200)
        {
           this.fetchData(this.tabledata)
        }
        })
    },
    remoteEditColse(){
      this.formdata.id='0'
      this.pagedata.visible=false
      this.fetchData(this.tabledata)
    },
    handleCurrentChange(val)
    {
      this.tabledata.currentpage=val
      this.fetchData(this.tabledata)
    },
    handleSearch()
    {
      this.fetchData(this.tabledata)
    }
  }
}
</script>

5、再在同一个文件夹下新增一个文件edit.vue

<template>
  <el-dialog :title="pagedata.title" :visible.sync="pagedata.visible"  width="400px" :before-close="handleClose">
      <el-form ref="formdata" label-width="120px">
          <el-form-item label="用户名" prop="name">
            <el-input
              v-model="formdata.name"
              placeholder="请输入用户名"
              clearable
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="formdata.password"
              placeholder="请输入用户密码"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm" size="mini">确定</el-button>
            <el-button size="mini" @click="handleClose">取消</el-button>
          </el-form-item>
      </el-form>
  </el-dialog>
</template>

<script>
import { adduser,updateuser, } from '@/api/user'
export default{
  props: {
    pagedata:{type:Object,
      default:function(){
         return {
        visible:{
          type:Boolean,
          default:false
        },
        title:{
          type:String,
          default:''
        },
      }
      }
    },
    formdata:{type:Object,
      default:function(){
        return {
        id:{
          type:String,
          default:' '
        },
        name:{
          type:String,
          default:' ',
          require
        },
        password:{
          type:String,
          default:' ',
          require
        }
        }
      }
    }
  },
  methods:{
    submitForm(){
      if(this.formdata.id==="0") //新增
      {
        this.listLoading = true
        adduser(this.formdata).then(response => {
        alert(response.message)
        if(response.code===200)
        {
          this.$emit('remoteClose')
        }
        this.listLoading = false
      })
      }
      else
      {
        this.listLoading = true
        updateuser(this.formdata).then(response => {
        alert(response.message)
        if(response.code===200)
        {
          this.$emit('remoteClose')
        }
        this.listLoading = false
      })
      }
    },
    handleClose(){
      this.$emit('remoteClose')
    }
  }
}
</script>

6、补上相关接口的定义后界面显示如下

这篇关于<四>用户页面增删改查接口对接的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！