API封装与拦截器配置：员工管理实战-优快云博客

API封装

import axios from 'axios'
axios.defaults.baseURL = "http://mengxuegu.com:9999/pro-api/"
export default {
	Member() {
		return axios({
			url: '/member/list',
			method: 'get'
		})
	}
}

拦截器的配置

//3. 设置请求拦截器配置
Server.interceptors.request.use(function(config) { //成功的时候
	console.log(config);
	config.headers.Authorization = sessionStorage.token;
	return config
}, function(error) { //失败
	return Promise.reject(error);
})
 
//4. 配置相应拦截器的信息
Server.interceptors.response.use(function(response) {
	if (response.status == 200) {
		return response.data;
	}
	return response;
}, function(error) { //失败
	return Promise.reject(error);
});

员工管理模块

<template>
  <div>
    <!-- 面包屑 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>
          <span class="span"></span> 员工管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <!-- 内容 -->
    <el-row :gutter="20">
      <el-col :span="3">
        <el-input v-model="userName" placeholder="账号"></el-input>
      </el-col>
      <el-col :span="3">
        <el-input v-model="cname" placeholder="姓名"></el-input>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="searchlist()">查询</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="addUser">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="reset()">重置</el-button>
      </el-col>
    </el-row>
    <!-- table表格 -->
    <el-table :data="memberListData" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="50"></el-table-column>
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="salary" label="薪酬"></el-table-column>
      <el-table-column prop="EntryTime" label="入职时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="addUser(scope.row)">编辑</el-button>
          <el-button type="danger" @click="del()">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="getNowpage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="this.staffsList.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="staffsList.length"
    ></el-pagination>
    <!-- 新增弹框 -->
    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新酬" :label-width="formLabelWidth">
          <el-input v-model="form.salary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入职时间" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker v-model="dateValue" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="resUser(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import staffs from '../../api/staffs'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      userName: "", //会员卡号
      cname: "", //会员姓名
      //支付类型数据
      staffsList: [],//列表数据
      memberListData: [],
      paramUser: {
        pagenum: 1,
        pagesize: 8
      },//用户列表参数配置
      //员工新增信息
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form:{},
      dateValue:''
      //编辑
      
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getTableData() {
      staffs.getStaffsList().then(res => {
        console.log(res);
        this.staffsList = res.data.data.rows;
        console.log(this.staffsList);
        this.getNowpage(1)
      });
    },
    getNowpage(nowpage) {
      var start = (nowpage - 1) * this.paramUser.pagesize;
      var end = start + this.paramUser.pagesize; //所有数据
      console.log(start, end);
      this.memberListData = this.staffsList.slice(start, end); //当前页面的数据、
      console.log(this.memberListData);
    },
    //搜索数据
    searchlist() {
      var arr = [];
      arr = this.staffsList.filter((item, key) => {
        return item.name.includes(this.cname);
      });
      console.log(arr);

      this.memberListData = arr;
      this.getTableData();
      this.getNowpage(1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 删除
    async del() {
     const one= await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(one !== 'confirm'){
          return  this.$message.info("取消删除")
        }
         this.getTableData();
         this.$message.success("删除成功")
        //  location.reload()
    },
    //新增弹框
    addUser(row) {
      console.log(row);
      this.form=row
      this.dialogFormVisible = true
    },
    //点击确定增加用户
     resUser(row) {
      this.dialogFormVisible = false
      staffs.getEbdit(row.id,row.name).then(res=>{
        console.log(res);
      if (res.data.code !== 200) {
        this.$message.error("增加用户失败")
      } else {
        this.$message.success("增加用户成功")
        // location.reload()
        this.getTableData();
        }
      })
    },
    //重置
    reset(){
      this.userName=''
      this.cname=''
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTableData();
    setTimeout(() => {
      this.getNowpage(1);
    }, 100);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },

}
</script>