Django+Vue写一个权限管理系统

简单介绍如何使用Django和Vue.js搭建一个基于RBAC的权限管理系统。

1.环境准备

Python 3.6或更高版本
Node.js和npm
Django 3.1或更高版本
Vue.js 2.x

2.创建Django项目

首先，在命令行中创建一个新的Django项目：
$ django-admin startproject permission_system

然后，进入项目目录并创建一个新的应用程序：
$ cd permission_system
$ python manage.py startapp permission

接下来，将应用程序添加到Django项目的INSTALLED_APPS列表中。
打开 settings.py文件并添加以下行：

INSTALLED_APPS = [
    # ...
    'permission',
]

3.创建Django模型

在Django中，模型是用于与数据库交互的Python对象。我们将创建4个模型来管理用户、角色、权限和权限分配。
在 models.py文件中，添加以下代码：

from django.db import models
from django.contrib.auth.models import User

class Role(models.Model):
    name = models.CharField(max_length=50, unique=True)
    description = models.TextField(blank=True)

    def __str__(self):
        return self.name

class Permission(models.Model):
    name = models.CharField(max_length=50, unique=True)
    description = models.TextField(blank=True)

    def __str__(self):
        return self.name

class UserRole(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    role = models.ForeignKey(Role, on_delete=models.CASCADE)

class RolePermission(models.Model):
    role = models.ForeignKey(Role, on_delete=models.CASCADE)
    permission = models.ForeignKey(Permission, on_delete=models.CASCADE)

在上面的代码中，我们定义了4个模型：
Role：角色模型，用于存储角色信息。
Permission：权限模型，用于存储权限信息。
UserRole：用户角色模型，用于存储用户与角色之间的关系。
RolePermission：角色权限模型，用于存储角色与权限之间的关系。

4.创建Django视图

在Django中，视图处理HTTP请求并返回HTTP响应。我们将创建4个视图，用于管理用户、角色、权限和权限分配。
在 views.py文件中，添加以下代码：

from django.shortcuts import render
from django.contrib.auth.models import User
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse

from .models import Role, Permission, UserRole, RolePermission

def user_list(request):
    users = User.objects.all()
    return render(request, 'user_list.html', {'users': users})

def role_list(request):
    roles = Role.objects.all()
    return render(request, 'role_list.html', {'roles': roles})

def permission_list(request):
    permissions = Permission.objects.all()
    return render(request, 'permission_list.html', {'permissions': permissions})

def role_permission_list(request, role_id):
    role = Role.objects.get(id=role_id)
    permissions = role.rolepermission_set.all()
    return render(request, 'role_permission_list.html', {'role': role, 'permissions': permissions})

@csrf_exempt
def assign_permission(request):
    role_id = request.POST.get('role_id')
    permission_id = request.POST.get('permission_id')
    role = Role.objects.get(id=role_id)
    permission = Permission.objects.get(id=permission_id)
    role_permission = RolePermission(role=role, permission=permission)
    role_permission.save()
    return JsonResponse({'status': 'success'})

在上面的代码中，我们定义了4个视图：

• user_list：用户列表视图，用于显示所有用户。

• role_list：角色列表视图，用于显示所有角色。

• permission_list：权限列表视图，用于显示所有权限。

• role_permission_list：角色权限列表视图，用于显示特定角色的所有权限。

• assign_permission：分配权限视图，用于将权限分配给角色。

5.创建Django URL

在Django中，URL配置指定了哪个视图处理哪个URL。我们将创建5个URL，用于管理用户、角色、权限和权限分配。

在urls.py文件中，添加以下代码：

from django.urls import path

from . import views

urlpatterns = [
    path('users/', views.user_list, name='user_list'),
    path('roles/', views.role_list, name='role_list'),
    path('permissions/', views.permission_list, name='permission_list'),
    path('roles//', views.role_permission_list, name='role_permission_list'),
    path('assign_permission/', views.assign_permission, name='assign_permission'),
]

在上面的代码中，我们定义了5个URL：

• /users/：用户列表URL，用于显示所有用户。

• /roles/：角色列表URL，用于显示所有角色。

• /permissions/：权限列表URL，用于显示所有权限。

• /roles/int:role_id/：角色权限列表URL，用于显示特定角色的所有权限。

• /assign_permission/：分配权限URL，用于将权限分配给角色。

6.创建Vue组件

在Vue.js中，组件是可复用的代码块，用于处理UI元素和行为。我们将创建4个组件，用于管理用户、角色、权限和权限分配。

在src/components目录中，创建以下组件：

• UserList.vue：用户列表组件，用于显示所有用户。

• RoleList.vue：角色列表组件，用于显示所有角色。

• PermissionList.vue：权限列表组件，用于显示所有权限。

• RolePermissionList.vue：角色权限列表组件，用于显示特定角色的所有权限。

• AssignPermission.vue：分配权限组件，用于将权限分配给角色。

在以上组件中，我们将使用Axios库来处理HTTP请求。

在main.js文件中，添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.$http = axios

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在上面的代码中，我们将Axios库添加到Vue原型中，以便在组件中使用。

7.创建Vue路由

在Vue.js中，路由配置指定了哪个组件处理哪个URL。我们将创建5个路由，用于管理用户、角色、权限和权限分配。

在src/router/index.js文件中，添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import UserList from '../components/UserList.vue'
import RoleList from '../components/RoleList.vue'
import PermissionList from '../components/PermissionList.vue'
import RolePermissionList from '../components/RolePermissionList.vue'
import AssignPermission from '../components/AssignPermission.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/users',
    name: 'UserList',
    component: UserList
  },
  {
    path: '/roles',
    name: 'RoleList',
    component: RoleList
  },
  {
    path: '/permissions',
    name: 'PermissionList',
    component: PermissionList
  },
  {
    path: '/roles/:role_id',
    name: 'RolePermissionList',
    component: RolePermissionList
  },
  {
    path: '/assign_permission',
    name: 'AssignPermission',
    component: AssignPermission
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上面的代码中，我们定义了5个路由：

• /users：用户列表路由，用于显示所有用户。

• /roles：角色列表路由，用于显示所有角色。

• /permissions：权限列表路由，用于显示所有权限。

• /roles/:role_id：角色权限列表路由，用于显示特定角色的所有权限。

• /assign_permission：分配权限路由，用于将权限分配给角色。

8.创建Vue组件模板

在Vue.js中，组件模板指定了组件的HTML代码。我们将创建以下组件模板：

• UserList.vue模板

• RoleList.vue模板

• PermissionList.vue模板

• RolePermissionList.vue模板

• AssignPermission.vue模板

在以上模板中，我们将使用Element UI库来处理UI元素。

9.运行应用程序

现在，我们已经完成了Django和Vue.js的配置。让我们运行应用程序并查看结果。

在pycharm里直接运行：

在webstorm里直接运行

完成！！！

由于博主能力有限，博文中提及的方法即使经过试验，也难免会有疏漏之处。希望您能热心指出其中的错误，以便下次修改时能以一个更完美更严谨的样子，呈现在大家面前。同时如果有更好的实现方法也请您不吝赐教。