Python Web 前后端分离 后台管理系统 Django+vue（完整代码）

1.前后端分离的架构

在前后端分离的架构中，前端和后端分别作为独立的项目进行开发和部署。前端项目通过API与后端项目进行通信。

• 前端：使用Vue.js构建用户界面，调用后端提供的RESTful API获取和发送数据。
• 后端：使用Django构建API，处理业务逻辑和数据存储

  2.创建django项目及vue项目

  创建app的时候需要进入项目的目录下  win10 cd xmmc

  django-admin startproject xmmc
  django-admin startapp app01

  以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹

   

  vue create vueproject

  然后按自己的需求选择，可以去专门搜一下创建vue的教程

  3.配置setting

  （1）配置数据库

  DATABASES = {
      'default': {
          'ENGINE': 'django.db.backends.mysql',  # 加载mysql引擎
          'NAME': 'db_goods',  # 数据库名称
          'USER': 'root',  # mysql账户名
          'PASSWORD': '123456',  # mysql账户密码
          'PORT': 3306,  # 端口号
          'HOST': 'localhost'
      }
  }

  （2）配置模板文件

  TEMPLATES = [
      {
          'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': [os.path.join(BASE_DIR, 'templates')],
          'APP_DIRS': True,
          'OPTIONS': {
              'context_processors': [
                  'django.template.context_processors.debug',
                  'django.template.context_processors.request',
                  'django.contrib.auth.context_processors.auth',
                  'django.contrib.messages.context_processors.messages',
              ],
          },
      },
  ]

  （3）配置静态文件

  STATIC_URL = 'static/'
  STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

  （4）注册app(使用创建 django-admin startapp app名称)

  

  （5）解决跨域问题

  

  MIDDLEWARE = [
      'django.middleware.security.SecurityMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'corsheaders.middleware.CorsMiddleware',  # 跨域，一定要写在第三行
      'django.middleware.common.CommonMiddleware',
      # 'django.middleware.csrf.CsrfViewMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',
      'django.middleware.clickjacking.XFrameOptionsMiddleware',
  ]
  

  CORS_ORIGIN_ALLOW_ALL = True
  CORS_ALLOW_CREDENTIALS = True
  # 允许所有的请求头
  CORS_ALLOW_HEADERS = ('*')
  

  4.查看目录结构

  web_django/
  ├── static/
  ├── templates/
  ├── user/
  │   ├── migrations/
  │   ├── __init__.py
  │   ├── admin.py
  │   ├── apps.py
  │   ├── models.py
  │   ├── tests.py
  │   ├── urls.py
  │   ├── views.py
  ├── web_django/
  │   ├── __init__.py
  │   ├── asgi.py
  │   ├── settings.py
  │   ├── urls.py
  │   ├── wsgi.py
  ├── webapp/
  │   ├── migrations/
  │   ├── views/
  │   ├── __init__.py
  │   ├── admin.py
  │   ├── apps.py
  │   ├── models.py
  │   ├── tests.py
  │   ├── urls.py
  │   ├── views.py
  

  5.前后端实现登录

  （1）编写登录的前端（完整代码）

    
      
        
          
  登录
          
            
              
            
            
              
            
          
          
            登录
            重置
            
              注册
            
          
        
      
    
  
  
  import axios from 'axios';
  export default {
    data() {
      return {
        ruleForm: {
          uname: "",
          password: "",
        },
        rules: {
          uname: [
            { required: true, message: "用户名不能为空！", trigger: "blur" },
          ],
          password: [
            { required: true, message: "密码不能为空！", trigger: "blur" },
          ],
        },
      };
    },
    methods: {
      async submitForm(formName) {
        try {
          const response = await axios.post('http://127.0.0.1:8005/user/login/', this.ruleForm);
          // 在这里处理后端响应
          console.log(response.data);
          if (response.data.success) {
            sessionStorage.setItem('username', JSON.stringify(response.data))
            // 登录成功，跳转到 Index 页面
            this.$router.push('/components/News');
          } else {
            // 登录失败，显示错误消息或其他处理
            console.error('登录失败:', response.data.message);
          }
        } catch (error) {
          console.error('提交表单时发生错误:', error);
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
  };
  
  
  .login-background {
    background-image: url('https://pic4.zhimg.com/v2-b730c73ebd78bd5f22293aab0d343f4b_r.jpg?source=1940ef5c');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box-card {
    width: 400px;
  }
  .login-form {
    margin: auto;
  }
  .btn-group {
    margin-top: 20px;
  }
  
  

  登录效果图

  

  （2）编写登录后端views(视图文件)

  from django.http import JsonResponse
  from django.contrib.auth import authenticate, login
  from django.contrib.auth.models import User
  import json
  def login_view(request):
      # if request.method == 'GET':
      if request.method == 'POST':
          js = request.body.decode('utf8')
          data = json.loads(js)
          username = data['uname']
          password = data['password']
          # 使用 Django 自带的 authenticate 方法验证用户身份
          user = authenticate(request, username=username, password=password)
          if user is not None:
              # 登录成功，将用户添加到当前会话中
              login(request, user)
              print(user)
              return JsonResponse({'code': 200, 'success': True, 'message': '登录成功', 'username': str(user)})
          else:
              # 登录失败，返回错误消息
              return JsonResponse({'code': 500, 'success': False, 'message': '用户名或密码错误', })
      # 如果不是 POST 请求，则返回错误消息
      return JsonResponse({'success': False, 'message': '只支持 POST 请求'})
  def register_view(request):
      if request.method == 'POST':
          # 从请求体中获取JSON数据
          js = request.body.decode('utf8')
          data = json.loads(js)
          print(data)
          username = data['uname']
          password = data['password']
          # 检查用户名是否已经存在
          if User.objects.filter(username=username).exists():
              return JsonResponse({'code': 400, 'success': False, 'message': '用户名已存在'})
          # 创建用户
          user = User.objects.create_user(username=username, password=password)
          # 返回成功消息
          return JsonResponse({'code': 200, 'success': True, 'message': '注册成功', 'username': username})
      # 如果不是 POST 请求，则返回错误消息
      return JsonResponse({'code': 405, 'success': False, 'message': '只支持 POST 请求'})
  

  （3）子视图文件（在user app中创建一个urls）

  from . import views
  from django.urls import path, re_path
  urlpatterns = [
      path('login/', views.login_view, name='login'),
      path('register/', views.register_view, name='register'),
  ]
  

  （4）在主路由中配置user app（主路由跟setting在同一个文件夹）

  

  6.管理页面的前后端完整代码

  （1）管理页面前端代码（业务范围页面）

    
      
        
          新增
        
      
      
        
          
            
          
          
            
          
          
            
          
          
            
          
        
        
          取 消
          确 定
        
      
      
        
          
            
          
          
            
          
          
            
          
          
            
          
        
        
          取 消
          确 定
        
      
      
        
        
        
        
        
        
          
            编辑
            删除
          
        
      
      
        
      
    
  
  
  import axios from "axios";
  import { MessageBox } from "element-ui";
  export default {
    name: "app",
    data() {
      return {
        currentPage: 1, // 默认显示页面为1
        pagesize: 5, // 每页的数据条数
        tableData: [], // 需要 data 定义一些，tableData 定义一个空数组，请求的数据都是存放这里面
        addDialogVisible: false,
        activeIndex2: "1",
        addFormData: {
          title: "",
          image_url: "",
          content: "",
          details_image_url: ""
        },
        addFormRules: {
          title: [{ required: true, message: "请输入标题", trigger: "blur" }],
          image_url: [
            { required: true, message: "请输入图片地址", trigger: "blur" }
          ],
          content: [{ required: true, message: "请输入内容", trigger: "blur" }],
          details_image_url: [
            { required: true, message: "请输入图片详情", trigger: "blur" }
          ]
        },
        editDialogVisible: false,
        editFormData: {
          id: null,
          title: "",
          image_url: "",
          content: "",
          details_image_url: ""
        },
        editFormRules: {
          title: [{ required: true, message: "请输入标题", trigger: "blur" }],
          image_url: [
            { required: true, message: "请输入图片地址", trigger: "blur" }
          ],
          content: [{ required: true, message: "请输入内容", trigger: "blur" }],
          details_image_url: [
            { required: true, message: "请输入图片详情", trigger: "blur" }
          ]
        }
      };
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        axios.get(" http://127.0.0.1:8005/web_drf/coreBusinessView/").then(
          response => {
            console.log(response.data);
            this.tableData = response.data;
          },
          error => {
            console.log("error");
          }
        );
      },
      handleSizeChange(size) {
        this.pagesize = size;
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
      },
      showAddDialog() {
        this.addDialogVisible = true;
      },
      submitAddForm() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            axios
              .post(
                " http://127.0.0.1:8005/web_drf/coreBusinessView/",
                this.addFormData
              )
              .then(response => {
                console.log("新增成功", response.data);
                this.addDialogVisible = false;
                this.getData();
                this.addFormData = {
                  title: "",
                  image_url: "",
                  content: "",
                  details_image_url: ""
                };
              })
              .catch(error => {
                console.error("新增失败", error);
              });
          }
        });
      },
      confirmDelete(book) {
        MessageBox.confirm("确定删除该条记录吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.deleteBook(book);
          })
          .catch(() => {
            // 取消删除操作
          });
      },
      deleteBook(book) {
        const url = ` http://127.0.0.1:8005/web_drf/coreBusinessView/${book.id}/`;
        console.log(book.id);
        axios
          .delete(url)
          .then(response => {
            console.log("删除成功");
            this.getData();
          })
          .catch(error => {
            console.error("删除失败", error);
          });
      },
      editBook(book) {
        this.editFormData = { ...book };
        this.editDialogVisible = true;
      },
      submitEditForm() {
        this.$refs.editForm.validate(valid => {
          if (valid) {
            const url = ` http://127.0.0.1:8005/web_drf/coreBusinessView/${this.editFormData.id}/`;
            axios
              .put(url, this.editFormData)
              .then(response => {
                console.log("编辑成功", response.data);
                this.editDialogVisible = false;
                this.getData();
              })
              .catch(error => {
                console.error("编辑失败", error);
              });
          }
        });
      }
    }
  };
  
  
  .pagination {
    margin-top: 20px;
    text-align: center;
  }
  
  

  业务范围管理页面效果图

  

  （2）业务范围管理系统后端代码views

  from rest_framework.response import Response
  from rest_framework.views import APIView
  from rest_framework import serializers
  from webapp.models import CoreBusiness
  class coreBusinessSerializers(serializers.ModelSerializer):
      class Meta:
          model = CoreBusiness
          fields = '__all__'
  class coreBusinessView(APIView):
      def get(self, request):
          coreBusiness = CoreBusiness.objects.all()
          ser = coreBusinessSerializers(instance=coreBusiness, many=True)
          print(ser.data)
          return Response(ser.data)
      def post(self, request):
          ser = coreBusinessSerializers(data=request.data)
          if ser.is_valid():
              CoreBusiness.objects.create(**ser.validated_data)
              return Response(ser.validated_data)
          else:
              return Response(ser.errors)
  class coreBusinessdetailview(APIView):
      def get(self, request, pk):
          coreBusiness = CoreBusiness.objects.get(pk=pk)
          ser = coreBusinessSerializers(instance=coreBusiness, many=False)
          return Response(ser.data)
      def put(self, request, pk):
          ser = coreBusinessSerializers(data=request.data)
          if ser.is_valid():
              CoreBusiness.objects.filter(pk=pk).update(**ser.validated_data)
              return Response(ser.validated_data)
          else:
              return Response(ser.errors)
      def delete(self, request, pk):
          CoreBusiness.objects.get(pk=pk).delete()
          return Response('删除成功')
  

  （3）配置子路由

  

  （4）在主路由中配置该app（主路由跟setting在同一个文件夹）

  

  7.创建数据库表

  在任意一个models中都可以创建数据库表

  from django.db import models
  # 联系我们表
  class Contact(models.Model):
      id = models.AutoField(primary_key=True)
      company_name = models.CharField(max_length=100, verbose_name='公司名称')
      phone = models.CharField(max_length=20, verbose_name='电话')
      address = models.CharField(max_length=200, verbose_name='地址')
      email = models.CharField(max_length=255, verbose_name='邮箱')
      class Meta:
          db_table = 'contact'
  

  创建表完成之后进行数据库的迁移，在项目的根目录下的控制台进行

  python manage.py makemigrations
  python manage.py migrate

  8.启动vue项目

  npm run dev

  

  9.打开浏览器访问http://localhost:8080/#/user/login/ 即可登录