vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

声明一下,此次开发使用的是macOS系统,以下所有操作实例都是在macOS中进行
一、后端开发
(1)使用了python比较著名的一个web开发框架-Django框架,在接口设计中使用了Django下的restframework框架
需要安装的模块:
第一步:我的电脑装的是pyton3以及pip3,所在在终端安装django使用如下命令 pip3 install django
第二步:pip3 install djangorestframework. //序列化使用,为了将对象转化为json数据传给前端使用
https://www.django-rest-framework.org/tutorial/quickstart/#urls restframework快速开始教程)
第三步:pip3 install django-cors-headers
安装这个模块是为了解决前端访问后端跨域问题
上面三个模块安装完成之后,接下来就是开始创建项目
(2)项目创建
我们先在终端敲如下命令:
mkdir backends
cd backends
django-admin startproject backends //创建名为backends的django项目
cd backends
django-admin startapp lyb //创建名为lyb的应用
cd …

使用pycharm打开这个项目目录,接下来就在setting.py文件中将应用lyb激活,这一步也有的叫做注册应用,不管怎么叫,知道意思就行,即在INSATLLED_APPS 这个列表中最后加入’lyb’,如下图所示:

NSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'lyb',
    'corsheaders',
]

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

还有一点需要注意,此次开发后端数据库使用的是mysql数据库,而django框架中默认的数据库是sqlite数据库,所以我们要修改一下数据库配置先,我的数据库已经安装好,而且也新建好了库,这里我就不再意义赘述数据库安装和建库流程,不会的可以百度一下或者留言给我,我看到后会详细回复.

DATABASES = {

    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'demo',
        'USER': 'root',
        'PASSWORD': '11111111',
        'HOST': 'localhost',
        'PORT': '3306'

    }
}

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

数据库设置好,我们还有一步操作不能忘记
在lyb目录下的__init__.py文件,然后在里面写入两行代码:

import pymysql

pymysql.install_as_MySQLdb()

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

接下来,我们要写模型,模型其实简单理解就是数据库中的表
新建一个类名为Lyb,定义变量以及变量的数据类型(其实就是新建数据库的表中字段以及类型),给数据库表名取名为d_lyb.

from django.db import models

class Lyb(models.Model):

    title = models.CharField(max_length=100)
    author = models.CharField(max_length=50)
    content = models.TextField()
    posttime = models.DateTimeField(auto_now_add=True)

    class Meta:
        db_table = "d_lyb"

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

下面定义序列化器:
我们在lyb目录新建一个serializer.py文件,并在文件中写入以下代码,其中的model就是我们新建的模型中的类名

from rest_framework import serializers
from .models import Lyb
from django.http import JsonResponse

class LybSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Lyb
        fields = "__all__"

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

创建视图:打开lyb目录下的views.py文件

class LybViewSet(viewsets.ModelViewSet):
    '''
    查询公司所有员工的职位信息
    '''
    queryset = Lyb.objects.all().order_by('-posttime')
    serializer_class = LybSerializer

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

创建路由,打开backends目录下的urls.py文件:

from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from lyb.views import LybViewSet

router = routers.DefaultRouter()
router.register(r'lyb', LybViewSet)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(router.urls)),
  ]

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

还要将rest_framework注册才行

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

这样就可以了,但是后端的数据传到前端,我们还需要一个跨域问题,我们之前装了一个django-cors-headers模块,接下来配置一下,也是在settings.py这个文件下
‘corsheaders.middleware.CorsMiddleware’,

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发
vue3+django+elementplus 前后端分离项目开发实例(上):后端开发
CORS_ORIGIN_ALLOW_ALL = True # 跨域请求全部允许

配置着三项之后就可以了,以后前端写好就不要再次配置了。

我们需要生成迁移文件后再执行迁移就能够看到后端的一个后台界面
python3 manage.py makemigrations //当看到终端打印出Create model Lyb后继续执行迁移
python3 manage.py migrate //执行成功之后我们就可以启动项目了
python3 manage.py runserver //启动后端服务

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

启动成功说明没有问题,我们打开http://127.0.0.1:8000/api/lyb(因为主页面路由已经被我们修改了,所以要用修改后的这个url才能访问)

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

页面打开成功,可以通过向Title、Author、Content中输入数据,然后点击右下方post按钮向后端发送数据并由后端数据库存储

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

然后去数据库中查询看一下数据是否已经存储

vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

Original: https://blog.csdn.net/weixin_44028181/article/details/123022392
Author: 撒哈拉拉倒吧
Title: vue3+django+elementplus 前后端分离项目开发实例(上):后端开发

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/732874/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球