【无标题】

数据操作的前端设计

vue简介

首先了解vue是什么？
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
同时它有两个核心功能：
声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

页面设计

首先数据展示需要先设计一个页面，页面模版可以在element的组件板块中寻找，里面包含了众多模版，如表单，按钮等，我的使用的组件如下：

<el-table :data="dataList" border  v-loading="dataListLoading"
      @selection-change="selectionChangeHandle" style="width: 100%">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="ID"
      >
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="accountBalance" label="余额(元)" align="center">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="completionStatus"
        header-align="center"
        align="center"
        label="用户状态"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.completionStatus === 1" size="small"
            >正常</el-tag
          >
          <el-tag v-else size="small" type="danger">冻结</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button v-if="isAuth('sys:userinfo:save')" type="primary" @click="addOrUpdateHandle(scope.row.id)"  icon="el-icon-edit" circle></el-button>
          <el-button v-if="isAuth('sys:userinfo:delete')" type="danger" @click="deleteHandle(scope.row.id)" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

方法定义

里面设计了一个表单，提交的字段与后端数据库的字段相对应，其中prop代表与数据库的字段互相绑定，必须与字段名一致，否则会获取不到数据。
定义好样式后就要在scrip中定义对应的增删查改方法，展示方法：

getDataList() {
      // 表示正在加载数据
      this.dataListLoading = true;
      this.$http({
        //与后端进行交互
        url: this.$http.adornUrl("/sys/userinfo/list"),
        // 什么是get
        //方式为get，即发送get请求
        method: "get",
        // 什么是adornParams
        //get请求携带参数
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          name: this.dataForm.name,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
          if(this.dataList.length<=0 && this.pageIndex>1){
            this.pageIndex = this.pageIndex-1
            this.getDataList()
          }
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        // 表示加载完成
        this.dataListLoading = false;
      }).catch(error => {
        this.dataListLoading = false;
        console.error(error);
      })
    },

删除方法：

   deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        // 弹出对话框
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            // 向后端发送请求，请求方式是post
            url: this.$http.adornUrl('/sys/userinfo/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  // 刷新用户列表信息
                  this.getDataList()
                }
              })
            } else {
              // 返回错误信息
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {})
      }

其原理为先判断id是一个还是多个，多个则为批量删除，单个则是单个删除。
增添和修改可以使用同一个方法，但要添加一个前提条件，先判断id是否存在，如果存在则进行修改，如果不存在则进行新增

    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },

查询方法则是根据名字进行查询

    return {
      // 表单数据对象
      dataForm: {
        name: "",
      },
      // 数据列表
      dataList: [],
      // 当前页面，为1
      pageIndex: 1,
      // 每页显示数据为5
      pageSize: 5,
      // 数据总页数默认为0
      totalPage: 0,
      dataListLoading: false,
      // 表示数据列表中选中的项，初始值为空数组，表示没有选中任何项
      dataListSelections: [],
      // 表示添加或更新表单的显示状态，初始值为 false，表示添加或更新表单未显示。
      addOrUpdateVisible: false,
    };

    search() {
      this.pageIndex = 1;
      this.getDataList();
    },

大致过程如上，完成后即可得到数据。