vue通用后台管理——用户页面管理功能与form 组件1

vue通用后台管理——用户页面管理功能与form 组件

完成此功能需要使用到的Element 组件分别是 form table Pagination

form表单
table标签页
Pagination分页

以及在进行新增信息时的弹窗页面 也可以使用组件库完成

Dialog 对话框

具体实现：

此功能的布局如下所示

主要的逻辑思想就是：通过新增按钮将新增用户页面弹出，然后进行输入的处理，判断当前输入的是否合法，前面带*号的均是必填项，对于取消和确定按钮也有与之对应的逻辑

页面html部分代码：

里面使用了Element 中的 dialog对话框 form 表单 button 按钮

<template>
  <div class="manage">
    <el-dialog
      title="新增用户"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <!-- 用户的表单信息 -->
      <!-- 关于el-form 的使用，在进行在页面中输入数据的时候，内部存在一个v-model的双向绑定，可以与data里面定义的form对象同步 -->
      <!-- rules 用来检验输入是否合法 -->
      <el-form
        ref="form"
        :inline="true"
        :rules="rules"
        :model="form"
        label-width="80px"
      >
        <!-- 定义相关表单域的内容 -->
        <!-- 如果想在一行上进行显示 可以使用inline 属性进行设置 将表单变为行内表单 -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker
            v-model="form.birth"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button @click="dialogVisible = true" type="primary">
        + 新增
      </el-button>
    </div>
  </div>
</template>

js代码

在data里面的form数据 主要是通过el-input里面存在v-model进行双向绑定，rules 是form 表单的验证功能，

export default {
  name: "User",
  data() {
    return {
      // 是否显示该弹框
      dialogVisible: false,
      form: {
        name: "",
        age: "",
        sex: "",
        birth: "",
        addr: "",
      },
      /** Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，
       *  并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
       */
      rules: {
        name: [{ required: true, message: "请输入姓名" }],
        age: [{ required: true, message: "请输入年龄" }],
        sex: [{ required: true, message: "请选择" }],
        birth: [{ required: true, message: "请选择出生日期" }],
        addr: [{ required: true, message: "请输入地址" }],
      },
    };
  },
  methods: {
    // 提交用户表单
    submit() {
      // 判断当前用户是否通过校验 通过使用 validate
      /**
       * validate	对整个表单进行校验的方法，参数为一个回调函数。
       * 该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。
       * 若不传入回调函数，则会返回一个 promise
       */
      //this.$refs.form获取表单 调用validate()方法
      this.$refs.form.validate((valid) => {
        // console.log(valid); // 当通过校验 为true，反之为false
        if (valid) {
          // 为真，对后续表单数据进行处理
          console.log(this.form, "form");

          // 可以直接调用方法
          // this.handleClose();

          // 成功之后 关闭弹窗
          this.$refs.form.resetFields();
          this.dialogVisible = false;
        }
      });
    },
    // 此方法被调用，意为弹窗已经关闭
    // 此时存在的问题就是在表单中输入的数据还存在
    // 解决办法 使用resetFields
    // resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
    // before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

    handleClose() {
      // console.log(this.$refs.form);
      // 清空表单
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    cancel() {
      // 点击取消的时候，调用关闭方法
      this.handleClose();
    },
  },
};

table 数据的展示部分

通过引入element 组件库中的 table表格来实现
table 表格

从后端进行获取数据

配置的拦截器

import axios from 'axios'


const http = axios.create({
    // 通用请求的地址前缀
    baseURL: '/api',
    timeout: 10000, // 超时时间
})

// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default http

用mock 进行模拟后端返回的数据 代码如下

import Mock from 'mockjs'

// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj (url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse(
    '{"' +
    decodeURIComponent(search)
      .replace(/"/g, '\\"')
      .replace(/&/g, '","')
      .replace(/=/g, '":"') +
    '"}'
  )
}

let List = []
const count = 200

for (let i = 0; i < count; i++) {
  List.push(
    Mock.mock({
      id: Mock.Random.guid(),
      name: Mock.Random.cname(),
      addr: Mock.mock('@county(true)'),
      'age|18-60': 1,
      birth: Mock.Random.date(),
      sex: Mock.Random.integer(0, 1)
    })
  )
}

export default {
  /**
   * 获取列表
   * 要带参数 name, page, limt; name可以不填, page,limit有默认值。
   * @param name, page, limit
   * @return {{code: number, count: number, data: *[]}}
   */
  getUserList: config => {
    console.log(config, 'config')
    const { name, page = 1, limit = 20 } = param2Obj(config.url)
    console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
    const mockList = List.filter(user => {
      if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
      return true
    })
    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
    return {
      code: 20000,
      count: mockList.length,
      list: pageList
    }
  },
    return {
      code: 20000,
      data: {
        message: '编辑成功'
      }
    }
  }
}

然后在mock.js文件中进行设置要拦截的方法

// 用户列表的数据
// 新增
Mock.mock('/api/user/add','post',user.createUser)
// 编辑
Mock.mock('/api/user/edit','post',user.updateUser)
// 删除
Mock.mock('/api/user/del','post',user.deleteUser)
// 整个table 列表
Mock.mock('/api/user/getUser',user.getUserList)

之后在index.js 进行对外暴露

export const getUser =(params)=>{
    // 返回用户列表
    return http.get('/user/getUser',params)
}

// 新增
export const addUser = (data) =>{
    return http.post('/user/add',data)
}

// 编辑
export const editUser = (data) =>{
    return http.post('/user/edit',data)
}

// 删除
export const delUser = (data) =>{
    return http.post('/user/del',data)
}

最后在需要使用数据的页面的mounted声明周期中进行数据的处理

 mounted() {
    // 获取列表数据 通过调用mock 进行数据的获取
    getUser().then(({ data }) => {
      console.log(data);
    });
  },

将上述数据进行处理，显示在页面上

html部分 修改前

 <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="sex" label="性别">
          <!-- 使用自定义来进行  slot-scope作用域插槽-->
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.sex === 1 ? "男" : "女"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄"> </el-table-column>
        <el-table-column prop="birth" label="出生日期"> </el-table-column>
        <el-table-column prop="addr" label="地址"> </el-table-column>
        <!-- 操作栏 也需要使用 插槽进行 -->
        <el-table-column prop="addr" label="地址">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

js逻辑部分

mounted() {
    // 获取列表数据 通过调用mock 进行数据的获取
    getUser().then(({ data }) => {
      // console.log(data);
      // 将获取到的数据进行赋值
      this.tableData = data.list;
    });
  },

页面的布局方面以及新增、编辑和删除功能的实现

新增功能的逻辑代码

当点击确定的时候，将表格的数据显示在表格中

对于新增和编辑来说 共用一个页面 对于增加来说，里面没有数据，对于编辑来说，里面是有数据的

定义一个字段 用来判断是增加还是编辑 modelType:0 //0 表示 新增的弹窗 1 表示编辑的弹窗

当点击确定按钮的时候，触发下面的操作 进行判断当前的 modelTypes是 0还是1 ，然后根据不同的接口进行处理，然后调用 getList 方法进行重新渲染表格

if (modelType === 0) {
            // 调用新增接口的逻辑 传入的数据 是表单的数据
            addUser(this.form).then(() => {
              // 先调用新增的接口，然后在调用获取的接口
              this.getList();
            });
          } else {
            // 调用编辑接口的逻辑
            editUser(this.form).then(()=>{
              this.getList();
            })
          }
// 获取列表的收据
    getList() {
      // 获取列表数据 通过调用mock 进行数据的获取
      getUser().then(({ data }) => {
        // console.log(data);
        // 将获取到的数据进行赋值
        this.tableData = data.list;
      });
    },

之后的操作是 如何判断当前的modelTypes是 0还是1 ，通过 给当前点击的按钮绑定的事件，进行处理

对于增加的点击事件

  handleAdd() {
      // 当进行点击新增的时候将当前的 modelType 赋值为0
      this.modelType = 0;
      // 同时打开弹窗
      this.dialogVisible = true;
    },

对于编辑的点击事件

  // 编辑 可以获取到当前的数据
    handleEdit(row) {
      console.log(row);
      // 当进行点击编辑的时候将当前的 modelType 赋值为1
      this.modelType = 1;
      // 编辑的逻辑 也需要进行打开弹窗
      this.dialogVisible = true;
      // 同时需要将点击的那一栏数据显示在弹窗里面
      // 不能这样写
      // this.form = row;
      // 需要对当前行数据进行深拷贝，否则会出错
      this.form = JSON.parse(JSON.stringify(row));
    },

最后对于删除操作的实现

需要使用到 element ui里面的另一个组件
MessageBox 弹框

遇到的问题 关于进行增加操作的时候性别全是女

解决方法：

将进行设置性别的地方 value前面加上动态

错误的代码

<!-- 原来的代码 错误的地方在 value 那里 -->
 <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>

正确的代码

<el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
</el-select>

错误2

//原来的代码
 delUser(row.id).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //  重新进行获取列表的接口
            this.getList();
          });
        })

传递的参数应该传入对象类型

 delUser({ id: row.id }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //  重新进行获取列表的接口
            this.getList();
          });

错误3 关于日历只能选择第一个的问题

在进行代码格式化的时候，引入DatePicker 日期选择器 ，里面有一个格式化年月日的，其中注意，里面的天数应该用小写的 d ，而不能用大写的D ，不然就在进行选择日期的时候，报错

错误的代码

 <el-date-picker
                        v-model="form.birth"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-DD">
                    </el-date-picker>

应该改为

 <el-date-picker
            v-model="form.birth"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>