二.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="width: 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="">
<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="width: 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="">
<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="width: 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="">
<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="" style="text-align: right">
<el-button type="primary" @click="handleAddGroupBtn">添加用户组</el-button>
</el-col>
</div>
<el-table
:data="groupList"
border
style="width: 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="">
<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="" style="text-align: right">
<el-button type="primary" @click="handleAddGroupBtn">添加用户组</el-button>
</el-col>
</div>
<el-table
:data="groupList"
border
style="width: 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
效果如图:
二.4vue展示用户数据及用户组操作以及给用户组添加额外字段的更多相关文章
- 04: Form 验证用户数据 & 生成html
目录:Django其他篇 01:Django基础篇 02:Django进阶篇 03:Django数据库操作--->Model 04: Form 验证用户数据 & 生成html 05:Mo ...
- 在已有数据的表中添加id字段并且自增
各位大牛,小弟在开发过程中,遇到了这样一个问题,由于新功能的增加需要使原有的一张表的结构作出调整,需要添加一个id主键字段,但是因为表里有很多数据了,所以,怎样才能添加这个字段,并且使原有的数据也能够 ...
- Entity Framework 程序设计入门二 对数据进行CRUD操作和查询
前一篇文章介绍了应用LLBL Gen生成Entity Framework所需要的类型定义,用一行代码完成数据资料的读取, <LLBL Gen + Entity Framework 程序设计入门& ...
- 一、JDBC的概述 二、通过JDBC实现对数据的CRUD操作 三、封装JDBC访问数据的工具类 四、通过JDBC实现登陆和注册 五、防止SQL注入
一.JDBC的概述###<1>概念 JDBC:java database connection ,java数据库连接技术 是java内部提供的一套操作数据库的接口(面向接口编程),实现对数 ...
- MYSQL初级学习笔记二：数据表相关操作及MySQL存储引擎！（视频序号：初级_5,7-22|6)
知识点三:数据表相关操作(5,7-22) --------------------------------整型--------------------------------- --测试整型 CREA ...
- Saiku设置展示table数据不隐藏空的行数据信息（二十六）
Saiku设置展示table数据不隐藏空的行数据信息 saiku有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...
- Saiku控制页面展示的数据过长自动换行(二十四)
Saiku控制页面展示的数据过长自动换行 目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦 首先我们使用谷歌浏览器 inspect ...
- python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改、删除操作
python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改.删除操作 项目目录: ├── flask_redis_news.py ├── forms.py ├ ...
- [Swift实际操作]七、常见概念-(10)使用UserDefaults和归档方式存取用户数据实际操作
在项目开发之中,你会经常需要将一些数据存储在本地,以便记录用户生产的数据或操作习惯.在项目文件夹上带点击鼠标右键.弹出右键菜单.本文将为你演示,存储用户数据的两种常用方式. 选择菜单中的创建新文件选项 ...
随机推荐
- Java实现 LeetCode 509 斐波那契数
509. 斐波那契数 斐波那契数,通常用 F(n) 表示,形成的序列称为斐波那契数列.该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和.也就是: F(0) = 0, F(1) = 1 ...
- Java实现 LeetCode 482 密钥格式化
482. 密钥格式化 给定一个密钥字符串S,只包含字母,数字以及 '-'(破折号).N 个 '-' 将字符串分成了 N+1 组.给定一个数字 K,重新格式化字符串,除了第一个分组以外,每个分组要包含 ...
- Java实现 LeetCode 283 移动零
283. 移动零 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 示例: 输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 说明: 必 ...
- 栈 & 队列
栈 先进者后出,后进者先出,LIFO,典型的"栈"结构 从栈的操作特性上来看,栈是一种"操作受限"的线性表,只允许在一段插入和删除数据. 在功能上来说,数组和链 ...
- 数据结构与算法-python描述-单链表
# coding:utf-8 # 单链表的相关操作: # is_empty() 链表是否为空 # length() 链表长度 # travel() 遍历整个链表 # add(item) 链表头部添加元 ...
- ModelAndView的部分回顾
ModelAndView的部分回顾 //@RestController @Controller //@SessionAttributes("user") //把modelandvi ...
- 构建自己的jar包上传至Mvaen中央仓库和版本更新
构建自己的jar包上传至Mvaen中央仓库和版本更新 一直羡慕别人制造轮子,开源项目,供别人使用:我也想这样,可以自己才疏学浅,本次就将自己写小工具上传到Maven的中央仓库. 一步一步详细教程演示如 ...
- 手写网页扫雷之js部分(vue)
var vm = new Vue({ el:"#ui", data(){ return{ num:0, saoleiStyle:{ width: "0px", ...
- （十）自动化测试pom完整文件
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- Mysql 视图用途、使用场景、性能问题及使用注意事项
原文:https://blog.csdn.net/chuangxin/article/details/84574557 <SQLite权威指南>中作者是这么定义视图的:视图即是虚拟表,也称 ...