pc首页布局·页面渲染·获取接口·添加·删除·编辑

左右布局和功能

<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/shoye' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/liebiao">用户列表</a></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <el-input placeholder="请输入内容" v-model="query" class="input-with-select">
      <el-button slot="append" icon="el-icon-search" @click="ass"></el-button>
    </el-input>
    <el-button type="primary" @click="dialogFormVisible = true">主要按钮</el-button>
    <!-- 列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="username" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="mobile" label="手机号" width="180"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column label="状态">
        <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
        </el-switch>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 修改 -->
          <el-button
            size="small"
            type="primary"
            class="el-icon-edit"
            @click="tianj(scope.row)"
          ></el-button>
          <!-- 删除 -->
          <el-button
            size="small"
            type="primary"
            class="el-icon-delete"
            @click="shanchu(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @current-change="cur"
      @size-change="siz"
      :current-page="pagenum"
      :page-sizes="[3, 5, 7, 9, 11]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
    >
    </el-pagination>
    <!-- 添加数据 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="tian" :rules="rules">
        <el-form-item label="用户名称" :label-width="'80px'" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="'80px'">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="'80px'">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="'80px'">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="tianjia('tian')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改数据 -->
    <el-dialog title="添加用户" :visible.sync="FormVisible">
      <el-form :model="form1" ref="tian1" :rules="rules">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="form1.username" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form1.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form1.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="FormVisible = false">取 消</el-button>
        <el-button type="primary" @click="xiugai('tian1')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tableData: [],
      pagenum: 1,
      pagesize: 3,
      query: "",
      totals: 0,
      value: true,
      //添加
      dialogFormVisible: false,
      form: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      //修改
      FormVisible: false,
      form1: {
        username: "",
        email: "",
        mobile: "",
      },
      rules: {
        username: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        password: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        email: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.age();
  },
  methods: {
    //数据接口
    age() {
      this.$axios
        .get(
          `https://www.liulongbin.top:8888/api/private/v1/users?query=${this.query}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`
        )
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.users;
          this.totals = res.data.total;
        });
    },
    siz(pag) {
      this.pagesize = pag;
      this.age();
    },
    cur(num) {
      this.pagenum = num;
      this.age();
    },
    ass() {
      this.age();
    },
    //添加接口  用了for循环
    tianjia(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var arr = [this.form];
          for (var i = 0; i <= 5; i++) {
            arr.push(this.form);
            // console.log(arr);
            for (var j = 1; j <= arr.length; j++) {
              if (i > j) {
                console.log((arr[j].username = j));
              }

              //添加数据
              this.$axios
                .post("https://www.liulongbin.top:8888/api/private/v1/users", this.form)
                .then((res) => {
                  console.log(res);
                  if (res.meta.status == 201) {
                    this.dialogFormVisible = false;
                    this.age();
                  } else {
                    //  this.$message.error(res.meta.msg);
                  }
                });
              this.age();
            }
          }
        } else {
          this.$message.error("错了哦，这是一条错误消息");
          return false;
        }
      });
    },
    //删除接口
    shanchu(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete(`https://www.liulongbin.top:8888/api/private/v1/users/${id}`)
            .then((res) => {
              console.log(res);
              if (res.meta.status == 200) {
                this.$message.success(res.meta.msg);
                this.age();
              } else {
                this.$message.error(res.meta.msg);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改
    tianj(item) {
      (this.form1 = {
        username: item.username,
        email: item.email,
        mobile: item.mobile,
        id: item.id,
      }),
        (this.FormVisible = true);
    },
    xiugai(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .put(
              `https://www.liulongbin.top:8888/api/private/v1/users/${this.form1.id}`,
              { email: this.form1.email, mobile: this.form1.mobile }
            )
            .then((res) => {
              console.log(res);
              if (res.meta.status == 200) {
                this.FormVisible = false;
                this.$message.success(res.meta.msg);
                this.age();
              } else {
                this.$message.error(res.meta.msg);
              }
            });
        } else {
          this.$message.error("错了哦，这是一条错误消息");
          return false;
        }
      });
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.input-with-select {
  margin: 10px;
  width: 300px;
}
.el-form-item {
  margin: 0;
  padding: 0;
}
</style>

```

## 效果图

首页
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210118173639892.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdUJvXzE5OTk=,size_16,color_FFFFFF,t_70)

用户页面
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210118173654187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdUJvXzE5OTk=,size_16,color_FFFFFF,t_70)
添加
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210118173738335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdUJvXzE5OTk=,size_16,color_FFFFFF,t_70)


修改

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210118173716192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdUJvXzE5OTk=,size_16,color_FFFFFF,t_70)