SSM 单体框架 - 前端开发：用户和权限模块

用户管理

分页 & 条件查询用户数据

查询条件

1. 用户手机号
2. 注册时间,包含开始日期和结束日期

日期选择器组件

在查询条件中使用了 Element UI 中的日期选择器：https://element.eleme.cn/#/zh-CN/component/date-picker#mo-ren-xian-shi-ri-qi

在测试项目中创建一个 TestDate.vue 组件，复制代码到页面

<template>
  <div>
    <div class="block">
      <span class="demonstration">带快捷选项</span>
      <el-date-picker
        v-model="dateTime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      ></el-date-picker>
      <el-button type="primary" @click="getDate">查询</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      dateTime: ""
    };
  },
  methods: {
    getDate() {
      const params = {};
      params.startCreateTime = this.dateTime[0];
      params.startCreateTime.setHours(0);
      params.startCreateTime.setMinutes(0);
      params.startCreateTime.setSeconds(0);
      params.endCreateTime = this.dateTime[1];
      params.endCreateTime.setHours(23);
      params.endCreateTime.setMinutes(59);
      params.endCreateTime.setSeconds(59);
      console.log(params);
    }
  }
};
</script>

功能实现

Users.vue

数据部分

// 数据部分
return {
   
    pickerOptions, // 日期选择器选项设置
    total: 0, // 总条数
    size: 10, // 每页显示条数
    page: 1, // 当前页
    filter,
    users: [],
    loading: false,
    allocAdminId: "",
    allocDialogVisible: false,
    allocRoleIds: [],
    allRoleList: []
};

JS 部分

created() {
   
    // 初始化用户数据
    this.loadUsers();
}
// 方法 1: 加载用户数据
loadUsers() {
   
    this.loading = true;
    // 设置参数
    const params = {
    currentPage: this.page, pageSize: this.size };
    // 过滤条件
    if (this.filter.username) params.username = this.filter.username;
    // 设置日期参数
    if (this.filter.resTime) {
   
        params.startCreateTime = this.filter.resTime[0];
        params.startCreateTime.setHours(0);
        params.startCreateTime.setMinutes(0);
        params.startCreateTime.setSeconds(0);

        params.endCreateTime = this.filter.resTime[1];
        params.endCreateTime.setHours(23);
        params.endCreateTime.setMinutes(59);
        params.endCreateTime.setSeconds(59);
    }
    // 请求后台接口
    return axios.post("/user/findAllUserByPage", params)
        .then((res) => {
   
        // 用户数据
        this.users = res.data.content.list;
        this.total = res.data.content.total;
        this.loading = false;
    }).catch((err) => {
   
        this.$message("获取数据失败! ! !");
    });
},

用户状态设置

状态按钮

<el-button size="mini" type="text" @click="handleToggleStatus(scope.row)">{
  { scope.row.status == "ENABLE" ? "禁用" : "启用" }}</el-button>

JS 部分

// 修改用户状态
handleToggleStatus(item) {
   
    return axios
        .get("/user/updateUserStatus", {
   
        params: {
   
            id: item.id,
            status: item.status
        }
    })
        .then(res => {
   
        // debugger;
        console.log(res.data.content);
        item.status = res.data.content;
    })
        .catch(err => {
   
        this.$message.error("状态修改失败! ! !");
    });
},

权限管理

角色管理

展示 & 查询角色列表

角色组件是 Roles.vue，在该组件中对角色信息进行管理

功能实现

1. 数据部分

data() {
   
    return {
   
        listQuery: {
    name: "" },
        list: null,
        listLoading: false,
        dialogVisible: false,
        role: Object.assign({
   }, defaultRole),
        isEdit: false
    };
},

2. 钩子函数，调用 loadRoles，获取角色数据

created() {
   
    // 获取角色列表
    this.