axios封装

axios封装

import axios from "axios";
var instance = axios.create({
    baseURL: 'https://lianghj.top:8888/api/private/v1/',
});

instance.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token
        // 如果存在，则统一在http请求的header都加上token，
        // 这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
        localStorage.token && (config.headers.Authorization = localStorage.token)
        return config
    },
    error => {
        return Promise.error(error)
    })
// 形参采用'对象解构赋值的形式'为其添加默认值
export const http = ({ path, params = {},method = "get",data = {} }={}) => {
    return new Promise((resolve, reject) => {
        instance({
            url: path,
            method, 
            data,
            params
        })
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
    })
}

##
import {http} from '@/http/http'
// 获取表格信息http
export const getTable = (path,params) => http({path,params})
// 增加用户http
export const addUser = ({ path="",data={}}) => http({path,method:'post',data}) 
// 删除用户
export const delUser = (path)=> http({path,method:"delete"})

后台项目搜索功能

<el-row>
      <el-button @click="drawer = true">添加用户</el-button>
      // 绑定下输入的username
      <el-input style="width: 300px" v-model="username"></el-input>
      <el-button @click="search">搜索</el-button>
    </el-row>
    
 #js   
  search() {
      // 还是采用获取用户信息请求，只是将其携带的参数添加query:id
      this.getTableData();
    }
  
   getTableData() {
      getTable("users", {
        pagenum: this.currentChange,
        pagesize: this.SizeChange,
        // 增加查询参数
        query: this.username,
      }).then((res) => {
        console.log("res", res);
        let { meta, data } = res.data;
        if (meta.status == 200) {
          this.tableData = data.users;
          this.total = data.total;
        } else {
          this.$message.error(meta.msg);
        }
      });
    },
  },

后台项目用户删除

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          // 采用作用域插槽获取整行数据 
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="del(scope.row)"
            v-model="delId"
            >删除</el-button
          >
        </template>
      </el-table-column>

//发送请求
del(row) {
      console.log(row.id);
      delUser("users/" + row.id)
        .then((res) => {
          let {meta:{status,msg}} = res.data
          if(status==200){
            this.$message.success(msg)
            this.getTableData()
          }else{
            this.$message.error(msg)
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

keep alive

针对不想每次路由跳转后重新获取数据刷新组件

为不想每次路由跳转后重新获取数据的组件的路由的`Meta`属性添加 keepAlive：true
meta:{title:"用户管理",menutitle:"用户列表", keepAlive: true,},

通过判断开启KeePAlive
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if=" !$route.meta.keepAlive”></router-view>