vue 用户列表的增删

vue之用户列表增删

mock模拟后端数据

// 创建一个数组用来接收模拟的数据
const mocklist = []
const count = 5;

for (let i = 0; i < count; i++) {
    mocklist.push(Mock.mock({
        id: '@id',
        name: '@cname',
        'phone|1': /^1[0-9]{10}$/,
        email: '@email',
        'education|1': ['本科', '大专', '硕士', '博士', '中专'],
        'graduationschool|1': ['西南财经', '北京交通大学', '重庆工商大学', '清华大学', '西南大学', '上海复旦大学'],
        'profession|1': ['教授', '律师', '医生', '公务员', '大学老师', '警察', '白领'],
        profile: '@cparagraph'
    }))
}

// 获取用户信息列表
function getList() {
    // 若 localStorage 没有数据，则将 Mock 的数据存入
    if (!localStorage.getItem('userlist')) {
        localStorage.setItem('userlist', JSON.stringify(mocklist))
    }
    // 每次获取数据时，再从 localStorage 中拉取数据
    var userlist = JSON.parse(localStorage.getItem('userlist'))
    return userlist
}

// 删除用户信息
function deleteUser(options) {
    // 先从 localStorage 中拉取数据
    var userlist = JSON.parse(localStorage.getItem('userlist'))
    // 根据传递的 id 删除 用户
    for (let index in userlist) {
        if (userlist[index].id === options.body) {
            userlist.splice(index, 1)
            localStorage.setItem('userlist', JSON.stringify(userlist))
        }
    }
    return {
        data: '用户删除成功'
    }
}

// 添加用户信息
function addUser(options) {
    // 先从 localStorage 中拉取数据
    var userlist = JSON.parse(localStorage.getItem('userlist'))
    // 获取传入用户信息对象，是一个字符串，需要转化为对象
    var user = JSON.parse(options.body)
    // 使用 mock 随机生成一个 id
    user.id = Random.id()
    // 将 user 插入到 userlist 中
    userlist.unshift(user)
    // 重新将 userlist 存入 localStorage 中
    localStorage.setItem('userlist', JSON.stringify(userlist))
    return {
        data: '用户添加成功'
    }
}

// 制作各个接口
Mock.mock('/getlist', 'get', getList)
Mock.mock('/deleteuser', 'post', deleteUser)
Mock.mock('/adduser', 'post', addUser)
// 最后将 Mock 导出
export default Mock

获取数据在页面展示

 <!-- 用户数据 -->
    <el-row>
      <el-col :sapn="24">
        <el-table :data="mainTabs" style="width: 100%"  border>
          <!-- 返回的数据没有对应的属性名，把prop删掉 -->
          <!-- 增加type="index"，会设置排序 -->
          <el-table-column label="#" width="47" type="index" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" width="70" align="center"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="147" align="center"></el-table-column>
          <el-table-column prop="phone" label="电话" width="115" align="center"></el-table-column>
          <el-table-column prop="education" label="学历" width="60" align="center"></el-table-column>
          <el-table-column prop="graduationschool" label="毕业院校" width="80" align="center"></el-table-column>
          <el-table-column prop="profession" label="职位" width="65" align="center"></el-table-column>
          <el-table-column prop="profile" label="简介" width="350" align="center"></el-table-column>
          <el-table-column prop="mg_state" label="用户状态" width="75" align="center">
            <!-- slot-scope 废弃，已经被v-slot代替，为插槽传入 prop 的时候使用 -->
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.mg_state"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="190" align="center">
            <template scope="scope">
              <el-button type="primary" plain size="mini" icon="el-icon-edit"></el-button>
              <el-button type="danger" plain size="mini" icon="el-icon-check"></el-button>
              <el-button type="warning" plain size="mini" icon="el-icon-delete" @click="delOne(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

用户信息展示，增加用户页面跳转，删除信息方法

<script>
import axios from "axios";
import mock from "@/mock/modules/user.js";

export default {
  data() {
    return {
      mainTabs: [],
    };
  },
  metaInfo: {
    title: "用户菜单",
  },

  mounted() {
    // 页面一加载完成就执行getList方法
    this.getList();
  },
  methods: {
    getUser() {
      axios.get("/getlist").then((res) => {
        console.log(res.data);
      });
    },
    getList() {
      axios.get("/getlist").then((res) => {
        this.mainTabs = res.data;
        console.log(res.data);
      });
    },

    //跳转用户增加页面
    addUserpath(){
      this.$router.push({path:'/add'})
    },

    //依据传入的id进行删除用户
    delOne(row) {
      // console.log(row);
      let id = row.id;
      //弹出提示框 提示用户
      this.$confirm("此操作将永久删除用户，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "danger",
      })
        .then(async () => {
          //确定
          console.log(id);
          axios.post("/deleteuser",id).then(res =>{
            console.log(res);
            this.getList();  //重新获取用户数据
          });          
        })
        .catch(() => {
          //取消
        });
    },
  },
};
</script>

添加用户页面

添加用户页面方法

<template>
  <div id="adduser" class="box">
    <!-- 添加用户的对话框 -->

    <!-- label-position控制label名的显示位置，注意要设置label-width才能生效 -->
    <!-- 表单数据验证要加form上添加:rules="rules"属性 -->
    <!-- 表单提交验证要加ref="userForm"属性,并将userForm传给提交按钮 -->
    <el-form :model="form" :rules="rules" ref="userForm" label-position="left" label-width="70px">
      <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <!-- 添加type="password"属性，让密码不明文显示 -->
        <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学历">
        <el-input v-model="form.education" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="毕业院校">
        <el-input v-model="form.graduationschool" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="职业">
        <el-input v-model="form.profession" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="form.profile" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <!-- 记住这边的userForm要加单引号 -->
      <el-button type="primary" @click="submitForm('userForm')">确 定</el-button>
    </div>
  </div>
</template>

<script>

import axios from 'axios'
import mock from '@/mock/modules/user.js'

export default {
  name: "user",
  data() {
    return {
     
      form: {
        name: "",
        password: "",
        email: "",
        phone: "",
        education: "",
        graduationschool: "",
        profession: "",
        profile: "",

      },
      //表单验证规则
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    async submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //验证成功
          //调用接口
         
          axios.post("/adduser", this.form).then(res =>{
               console.log(res);
               this.$router.push({path:'/home'});
          });
        } else {
          //验证失败
          this.$message.error("请您输入正确的信息");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.box {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 100px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>>