本文共 6564 字，大约阅读时间需要 21 分钟。

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>

就是传统的从接口获取数据，在进行布局 - 数据的渲染 - 样式的美化，
接下来的就是数据的增删改查，分页 搜索