往期

从0到1完成一个Vue后台管理项目（一、创建项目）

从0到1完成一个Vue后台管理项目（二、使用element-ui）

从0到1完成一个Vue后台管理项目（三、使用SCSS/LESS，安装图标库）

从0到1完成一个Vue后台管理项目（四、引入axios、配置路由）

从0到1完成一个Vue后台管理项目（五、登录页（表单校验的使用和封装））

从0到1完成一个Vue后台管理项目（五、登录页，mock，token，axios封装）

从0到1完成一个Vue后台管理项目（六、404页）

从0到1完成一个Vue后台管理项目（七、Header、Footer、页面布局）

从0到1完成一个Vue后台管理项目（八、Menu改造完善、子组件创建、配置路由）

从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）

从0到1完成一个Vue后台管理项目（十、列表API封装、Table列表渲染、表格数据转换）

从0到1完成一个Vue后台管理项目（十一、前端分页实现）

从0到1完成一个Vue后台管理项目（十二、学生table列表删除、查询、重置）

从0到1完成一个Vue后台管理项目（十三、信息列表页面实现：对话框新增、DateTimePicker 日期时间选择器）

加上校验规则

新增接口

封装新增api

这里我们安装一下qs模块

这里是因为后端的数据问题需要处理，如果不需要处理的话是不需要下的

cnpm i qs -D

引入qs

封装接口

使用

封装查询api

使用

修改

我们怎么确定是新增还是修改
给一个状态：state

然后我们判断一下

修改接口

使用

bug修复

此页代码

<template>
  <div class="infoList">
    <el-form :inline="true" class="demo-form-inline" size="small">
      <el-form-item>
        <el-button type="primary" @click="addStudent">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="sex" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="father" label="父亲" align="center">
      </el-table-column>
      <el-table-column prop="mather" label="母亲" align="center">
      </el-table-column>
      <el-table-column prop="address" label="家庭住址" align="center">
      </el-table-column>
      <el-table-column prop="time" label="入校时间" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="state?'添加学生信息':'修改学生信息'" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
          <el-radio v-model="form.sex" label="1">男</el-radio>
          <el-radio v-model="form.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父亲姓名" :label-width="formLabelWidth" prop="father">
          <el-input v-model="form.father" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="母亲姓名" :label-width="formLabelWidth" prop="mather">
          <el-input v-model="form.mather" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" :label-width="formLabelWidth" prop="address">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入校时间" :label-width="formLabelWidth" prop="time">
          <el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeInfo('form')">取 消</el-button>
        <el-button type="primary" @click="sure('form') ">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { info, getInfo, updateInfo } from '@/api/api.js'
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: '',
        sex: '1',
        age: '',
        father: '',
        mather: '',
        address: '',
        time: '',
        phone: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名' }],
        sex: [{ required: true }],
        age: [{ required: true, message: '请输入年龄' }],
        address: [{ required: true, message: '请输入地址' }],
        time: [{ required: true, message: '请输入入学时间' }],
        phone: [{ required: true, message: '请输入联系方式' }]
      },
      formLabelWidth: '80px',
      state: true,
      total: 0
    }
  },
  created() {
    this.getData()
  },
  methods: {
    edit(row) {
      this.form = { ...row }
      this.state = false
      this.dialogFormVisible = true
    },
    closeInfo(form) {
      this.$refs[form].resetFields()
      this.dialogFormVisible = false
    },
    del() {},
    addStudent() {
      this.form = {
        name: '',
        sex: '1',
        age: '',
        father: '',
        mather: '',
        address: '',
        time: '',
        phone: ''
      }
      // this.$$nextTick(() => {
      //   this.$refs['form'].resetFields()
      // })
      this.state = true
      this.dialogFormVisible = true
    },
    getData() {
      getInfo().then(res => {
        if (res.data.status === 200) {
          this.tableData = res.data.data
          this.total = res.data.total
        }
      })
    },
    sure(form) {
      console.log(form, this.form)
      this.$refs[form].validate(valid => {
        if (valid) {
          if (this.state) {
            info(this.form).then(res => {
              if (res.data.status === 200) {
                this.getData()
                this.dialogFormVisible = false
                this.$message({ type: 'success', message: res.data.message })
              }
            })
          } else {
            updateInfo(this.form).then(res => {
              if (res.data.status === 200) {
                this.getData()
                this.dialogFormVisible = false
                this.$message({ type: 'success', message: res.data.message })
              }
            })
          }
        }
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.infoList {
  .demo-form-inline,
  .el-form-item {
    text-align: left;
  }
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>

删除

接口

使用

api优化

我们发现新增和修改接口差不多，那么我们是不是可以优化一下

增删改查封装复用

utils下建立table.js
table.js下封装

简化

table.js代码

// 获取表格数据
export function getData(root, url, params) {
  root.service.get(url, { params: params || {} }).then(res => {
    if (res.data.status) {
      root.tableData = res.data.data
      root.total = res.data.total
    }
  })
    .catch(err => {
      throw err
    })
}


// 新增和修改方法的封装
import qs from 'qs'
export function changeInfo(root, method, url, form, callback) {
  let data = qs.stringify(form)
  root.service[method](url, data)
    .then(res => {
      if (res.data.status === 200) {
        callback(root, url)
        root.dialogFormVisible = false
        root.$refs['form'].resetFields()
        root.$message({ type: 'success', message: res.data.message })
      }
    })
    .catch(err => {
      throw err
    })
}


// 删除方法
export function delData(root, url, id, callFun) {
  root.$alert('你确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    callback: () => {
      root.service.delete(`${url}/${id}`).then(res => {
        if (res.data.status === 200) {
          callFun(root, url)
          root.$message({ message: res.data.message, type: 'success' })
        }
      })
        .catch(err => {
          throw err
        })
    }
  })
}

infoLists.vue

我们把优化后的代码用在infoLists.vue里

<template>
  <div class="infoMent">
    <el-form :inline="true" class="demo-form-inline" size="small">
      <el-form-item>
        <el-button type="primary" @click="addStudent">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="sex" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="father" label="父亲" align="center">
      </el-table-column>
      <el-table-column prop="mather" label="母亲" align="center">
      </el-table-column>
      <el-table-column prop="address" label="家庭住址" align="center">
      </el-table-column>
      <el-table-column prop="time" label="入校时间" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="state?'添加学生信息':'修改学生信息'" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
          <el-radio v-model="form.sex" label="1">男</el-radio>
          <el-radio v-model="form.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父亲姓名" :label-width="formLabelWidth" prop="father">
          <el-input v-model="form.father" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="母亲姓名" :label-width="formLabelWidth" prop="mather">
          <el-input v-model="form.mather" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" :label-width="formLabelWidth" prop="address">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入校时间" :label-width="formLabelWidth" prop="time">
          <el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeInfo('form')">取 消</el-button>
        <el-button type="primary" @click="sure('form') ">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { getData, changeInfo, delData } from '@/utils/table.js'
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: '',
        sex: '1',
        age: '',
        father: '',
        mather: '',
        address: '',
        time: '',
        phone: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名' }],
        sex: [{ required: true }],
        age: [{ required: true, message: '请输入年龄' }],
        address: [{ required: true, message: '请输入地址' }],
        time: [{ required: true, message: '请输入入学时间' }],
        phone: [{ required: true, message: '请输入联系方式' }]
      },
      formLabelWidth: '80px',
      state: true,
      total: 0
    }
  },
  created() {
    getData(this, '/info')
  },
  methods: {
    edit(row) {
      this.form = { ...row }
      this.state = false
      this.dialogFormVisible = true
    },
    closeInfo(form) {
      this.$refs[form].resetFields()
      this.dialogFormVisible = false
    },
    del(row) {
      // console.log(row)
      // 弹窗提示
      delData(this, '/info', row.id, getData)
    },
    addStudent() {
      this.form = {
        name: '',
        sex: '1',
        age: '',
        father: '',
        mather: '',
        address: '',
        time: '',
        phone: ''
      }
      // this.$$nextTick(() => {
      //   this.$refs['form'].resetFields()
      // })
      this.state = true
      this.dialogFormVisible = true
    },
    sure(form) {
      console.log(form, this.form)
      this.$refs[form].validate(valid => {
        if (valid) {
          // if (this.state) {
          //   changeInfo(this, 'post', '/info', this.form, getData)
          // } else {
          //   changeInfo(this, 'put', '/info', this.form, getData)
          // }
          let methods = ''
          this.state ? (methods = 'post') : (methods = 'put')
          changeInfo(this, methods, '/info', this.form, getData)
        }
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.infoMent {
  .demo-form-inline,
  .el-form-item {
    text-align: left;
  }
}
</style>

封装完毕，很重要，建议反复观看