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）编写登录的前端（完整代码）

登录效果图

（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）管理页面前端代码（业务范围页面）

业务范围管理页面效果图

（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/ 即可登录