二.4vue展示用户数据及用户组操作以及给用户组添加额外字段

一.用户列表

 1.新建(1)views/users/index.vue:

<template>
  <div class="user-list-container">
    用户列表
  </div>
</template>

<script>
  import { getUserList } from '@/api/users'
  export default {
    data() {
      return {
        userList: []
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getUserList(this.params).then(res => {
          console.log(res)
        })
      }
    }
  }

</script>

(2)views/users/groups.vue:

2.配置路由src/router/index.js

  {
    path: '/users',
    component: Layout,
    name: '用户管理',
    meta: { title: '用户管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '用户列表',
        component: () => import('@/views/users/index'),
        meta: { title: '用户列表' }
      }
    ]
  },

3.src/views/login/index.vue

 4.写api接口sr/api/users.js

import request from '@/utils/request'

export function getUserList(params) {
  return request({
    url: '/users/',
    method: 'get',
    params
  })
}

效果如下图拿到数据了:

 6.让数据在页面展示views/users/index.vue

<template>
  <div class="user-list-container">
    {{ userList }}
  </div>
</template>

<script>
  import { getUserList } from '@/api/users'
  export default {
    data() {
      return {
        userList: []
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getUserList(this.params).then(res => {
          this.userList = res.results
        })
      }
    }
  }

</script>

7.让数据格式化展示及分页views/users/index.vue:

(1)https://element.eleme.io/#/zh-CN/component/table  拿带边框tablle模版代码

(2)https://element.eleme.io/#/zh-CN/component/pagination#slot 拿带背景的分页

(3)实现点击某页码时出现对应页面数据--事件

<template>
  <div class="user-list-container">
    <el-table
      :data="userList"
      border
      style=" 100%">
      <el-table-column
        prop="id"
        label="id">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮件地址">
      </el-table-column>
    </el-table>
    <center>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="totalNum">
    </el-pagination>
    </center>
  </div>
</template>

<script>
  import { getUserList } from '@/api/users'
  export default {
    data() {
      return {
        userList: [],
        totalNum: 0,
        params: {
          page: 1
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getUserList(this.params).then(res => {
          this.userList = res.results
          this.totalNum = res.count
        })
      },
      handleCurrentChange(val) {
        this.params.page = val
        this.fetchData()
      }
    }
  }

</script>

这样就实现效果了，如下图

 二.用户页增加搜索功能

 1.devops/apps/users/filters.py:

import django_filters
from django.contrib.auth import get_user_model
User = get_user_model()

class UserFilter(django_filters.FilterSet):
    username = django_filters.CharFilter(field_name="username", lookup_expr='contains')

    class Meta:
        model = User
        fields = ['username']

2.src/views/users/index.vue

定义一变量保存用户搜索的内容，并给搜索一事件.

给搜索加回车事件.

https://element.eleme.io/#/zh-CN/component/input拿复合型输入框

<template>
  <div class="user-list-container">
    <div>
      <el-col :span="6">
        <el-input placeholder="搜索" v-model="params.username" @keyup.enter.native="searchClick">
          <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
        </el-input>
      </el-col>
    </div>
    <el-table
      :data="userList"
      border
      style=" 100%">
      <el-table-column
        prop="id"
        label="id">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮件地址">
      </el-table-column>
    </el-table>
    <center>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="totalNum">
    </el-pagination>
    </center>
  </div>
</template>

<script>
  import { getUserList } from '@/api/users'
  export default {
    data() {
      return {
        userList: [],
        totalNum: 0,
        params: {
          page: 1,
          username: ''
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getUserList(this.params).then(res => {
          this.userList = res.results
          this.totalNum = res.count
        })
      },
      handleCurrentChange(val) {
        this.params.page = val
        this.fetchData()
      },
      searchClick() {
        this.params.page = 1
        this.fetchData()
      }
    }
  }
</script>

效果如图

 三.创建用户组

1.创建用户组后端实现:

(python36env) [vagrant@CentOS apps]$ django-admin startapp groups

(1)settings.py

...
'groups.apps.UsersConfig',
..

(2)序列化groups/serilaizers.py

from django.contrib.auth.models import Group
from rest_framework import serializers

class GroupSerializer(serializers.ModelSerializer):
    class Meta:
        model = Group
        fields = ("id", "name")

(3)group/views.py

from rest_framework import viewsets
from django.contrib.auth.models import Group
from .serializers import GroupSerializer


class GroupViewset(viewsets.ModelViewSet):
    queryset = Group.objects.all()
    serializer_class = GroupSerializer

(4)apps/groups/router.py:

在groups app下建一router文件(作用是把此app下所有的viewset全部作了一映射)，

from rest_framework.routers import DefaultRouter
from .views import GroupViewset

group_router = DefaultRouter()
group_router.register(r'Groups', GroupViewset, basename="Groups")

(5)devops/urls.py:把app下的router关联进来

from groups.router import group_router
route.registry.extend(group_router.registry)

效果如图，并手动创建几条数据

 (6)给它做搜索groups/fileter.py

import django_filters
from django.contrib.auth.models import Group

class GroupFilter(django_filters.FilterSet):
    name = django_filters.CharFilter(lookup_expr="icontains")
    class Meta:
        model = Group
        fields = ["name"]

views.py中引入:

from rest_framework import viewsets
from django.contrib.auth.models import Group
from .serializers import GroupSerializer
from .filter import GroupFilter

class GroupViewset(viewsets.ModelViewSet):
    queryset = Group.objects.all()
    serializer_class = GroupSerializer
    filter_class = GroupFilter
    filter_fields = ("name",)

2.用户组前端对接--用户组的查询

(1)src/api/groups.js

import request from '@/utils/request'

// 获取用户组列表
export function getGroupList(params) {
  return request({
    url: '/Groups/',
    method: 'get',
    params
  })
}

(2)src/views/users/groups.vue

<template>
  <div class="group-list-container">
    <div>
      <el-col :span="6">
        <el-input placeholder="搜索" v-model="params.name" @keyup.enter.native="searchClick">
          <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
        </el-input>
      </el-col>
    </div>
    <el-table
      :data="groupList"
      border
      style=" 100%">
      <el-table-column
        prop="id"
        label="id">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
    </el-table>
    <center>
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="totalNum">
      </el-pagination>
    </center>
  </div>
</template>

<script>
  import { getGroupList } from '@/api/groups'
  export default {
    data() {
      return {
        groupList: [],
        totalNum: 0,
        params: {
          page: 1,
          name: ''
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getGroupList(this.params).then(res => {
          this.groupList = res.results
          this.totalNum = res.count
        })
      },
      handleCurrentChange(val) {
        this.params.page = val
        this.fetchData()
      },
      searchClick() {
        this.params.page = 1
        this.fetchData()
      }
    }
  }
</script>

效果如下:

 3.实现用户组的添加--增加数据需要用到模态框

 https://element.eleme.io/#/zh-CN/component/dialog拿自定义框(打开嵌套表单的 Dialog)模版

https://element.eleme.io/#/zh-CN/component/button拿基础button

https://element.eleme.io/#/zh-CN/component/form  form表单

https://element.eleme.io/#/zh-CN/component/pagination--显示总数

(1)views/users/groups.vue

(2)加表单验证用于提交添加的用户组数据

<template>
  <div class="group-list-container">
    <div>
      <el-col :span="8">
        <el-input placeholder="搜索" v-model="params.name" @keyup.enter.native="searchClick">
          <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
        </el-input>
      </el-col>
      <el-col :span="16" style="text-align: right">
        <el-button type="primary" @click="handleAddGroupBtn">添加用户组</el-button>
      </el-col>
    </div>
    <el-table
      :data="groupList"
      border
      style=" 100%">
      <el-table-column
        prop="id"
        label="id">
      </el-table-column>
      <el-table-column
        prop="name"
        label="组名">
      </el-table-column>
    </el-table>
    <center>
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :total="totalNum">
      </el-pagination>
    </center>
    <el-dialog title="添加用户组" :visible.sync="addGroupFormVisible">
      <el-form :model="addGroupForm" :rules="addGroupFormRule" ref="addGroupFormRule" >
        <el-form-item label="组名" :label-width="addGroupFormLabelWidth" prop="name">
          <el-input v-model="addGroupForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addGroupFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddGroupSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getGroupList, createGroup } from '@/api/groups'
  export default {
    data() {
      return {
        groupList: [],
        totalNum: 0,
        params: {
          page: 1,
          name: ''
        },
        addGroupFormVisible: false,
        addGroupFormLabelWidth: '120px',
        addGroupForm: {
          name: ''
        },
        addGroupFormRule: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getGroupList(this.params).then(res => {
          this.groupList = res.results
          this.totalNum = res.count
        })
      },
      handleCurrentChange(val) {
        this.params.page = val
        this.fetchData()
      },
      searchClick() {
        this.params.page = 1
        this.fetchData()
      },
      handleAddGroupBtn() {
        this.addGroupFormVisible = true
      },
      handleAddGroupSubmit() {
        createGroup(this.addGroupForm).then(res => {
          this.$message({
            message: '创建用户组成功',
            type: 'success'
          })
          this.addGroupFormVisible = false
          this.$refs['addGroupForm'].resetFields()
          this.fetchData()
        })
      }
    }
  }
</script>

(3)src/api/groups.js

import request from '@/utils/request'

// 获取用户组列表
export function getGroupList(params) {
  return request({
    url: '/Groups/',
    method: 'get',
    params
  })
}

// 创建用户组
export function createGroup(data) {
  return request({
    url: '/Groups/',
    method: 'post',
    data
  })
}

效果如下

 4.实现用户组的修改与删除

 (1)src/api/groups.js

import request from '@/utils/request'

// 获取用户组列表
export function getGroupList(params) {
  return request({
    url: '/Groups/',
    method: 'get',
    params
  })
}

// 创建用户组
export function createGroup(data) {
  return request({
    url: '/Groups/',
    method: 'post',
    data
  })
}

// 修改用户组
export function updateGroup(id, data) {
  return request({
    url: '/Groups/' + id + '/',
    method: 'patch',
    data
  })
}

// 删除用户组
export function deleteGroup(id) {
  return request({
    url: '/Groups/' + id + '/',
    method: 'delete'
  })
}

(2)src/views/users/groups.vue

https://element.eleme.io/#/zh-CN/component/button并给button加事件

<template>
  <div class="user-group-container">
    <div>
      <el-col :span="8">
        <el-input placeholder="搜索" v-model="params.name" @keyup.enter.native="searchClick">
          <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
        </el-input>
      </el-col>
      <el-col :span="16" style="text-align: right">
        <el-button type="primary" @click="handleAddGroupBtn">添加用户组</el-button>
      </el-col>
    </div>
    <el-table
      :data="groupList"
      border
      style=" 100%">
      <el-table-column
        prop="id"
        label="id">
      </el-table-column>
      <el-table-column
        prop="name"
        label="用组">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="warning" icon="el-icon-edit" circle @click="handleModifyGroupClick(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="handleDeleteGroupClick(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <center>
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :total="totalNum">
      </el-pagination>
    </center>

    <el-dialog title="添加用户组" :visible.sync="addGroupFormVisible">
      <el-form  :model="addGroupForm" :rules="addGroupFormRule" ref="addGroupForm" >
        <el-form-item label="用户组" :label-width="addGroupFormLabelWidth" prop="name">
          <el-input v-model="addGroupForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addGroupFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddGroupSubmit" >确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改用户组" :visible.sync="groupModifyFormVisible">
      <el-form  :model="groupModifyForm" :rules="addGroupFormRule" ref="groupModifyForm" >
        <el-form-item label="用户组" :label-width="addGroupFormLabelWidth" prop="name">
          <el-input v-model="groupModifyForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="groupModifyFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleGroupModifySubmit" >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { getGroupList, createGroup, updateGroup, deleteGroup } from '@/api/groups'
  export default {
    data() {
      return {
        groupList: [],
        totalNum: 0,
        params: {
          page: 1,
          name: ''
        },
        addGroupFormVisible: false,
        addGroupFormLabelWidth: '120px',
        addGroupForm: {
          name: ''
        },
        addGroupFormRule: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
          ]
        },
        groupModifyFormVisible: false,
        groupModifyForm: {
          id: 0,
          name: ''
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getGroupList(this.params).then(res => {
          this.groupList = res.results
          this.totalNum = res.count
        })
      },
      handleCurrentChange(val) {
        this.params.page = val
        this.fetchData()
      },
      searchClick() {
        this.params.page = 1
        this.fetchData()
      },
      handleAddGroupBtn() {
        this.addGroupFormVisible = true
      },
      handleAddGroupSubmit() {
        createGroup(this.addGroupForm).then(res => {
          this.$message({
            message: '创建用户组成功',
            type: 'success'
          })
          this.addGroupFormVisible = false
          this.$refs['addGroupForm'].resetFields()
          this.fetchData()
        })
      },
      handleModifyGroupClick(obj) {
        this.groupModifyForm = obj
        this.groupModifyFormVisible = true
      },
      handleGroupModifySubmit() {
        updateGroup(this.groupModifyForm.id, this.groupModifyForm).then(res => {
          this.$message({
            message: '修改用户组成功',
            type: 'success'
          })
          this.groupModifyFormVisible = false
          this.$refs['groupModifyForm'].resetFields()
          this.fetchData()
        })
      },
      handleDeleteGroupClick(id) {
        this.$confirm('是否确认删除用户组?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteGroup(id).then(() => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.fetchData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }

</script>

效果如图:

 5.给用户组添加额外字段

给用户组加一用户组的成员数，如下图用户组接口中只有两字段

 (1)后端apps/groups/serilaizers.py:

from django.contrib.auth.models import Group
from rest_framework import serializers

class GroupSerializer(serializers.ModelSerializer):
    def to_representation(self, instance):
        ret = super(GroupSerializer, self).to_representation(instance)
        ret["users"] = instance.user_set.count()
        return ret
    class Meta:
        model = Group
        fields = ("id", "name")

 (2)前端中添加views/users/groups.vue

 效果如图: