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',  # 跨域设置
]

在这里插入图片描述

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

DATABASES = {
    # 'default': {
    #     'ENGINE': 'django.db.backends.sqlite3',
    #     'NAME': BASE_DIR / 'db.sqlite3',
    # }
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'demo',
        'USER': 'root',
        'PASSWORD': '11111111',
        'HOST': 'localhost',
        'PORT': '3306'

    }
}

在这里插入图片描述

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

import pymysql

pymysql.install_as_MySQLdb()

在这里插入图片描述

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

from django.db import models


# Create your models here.
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"

在这里插入图片描述

下面定义序列化器:
我们在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__"

在这里插入图片描述

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

class LybViewSet(viewsets.ModelViewSet):
    '''
    查询公司所有员工的职位信息
    '''
    queryset = Lyb.objects.all().order_by('-posttime')  # 以上传时间倒叙排列
    serializer_class = LybSerializer

在这里插入图片描述

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

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


# 把view注册到路由里面去
router = routers.DefaultRouter()
router.register(r'lyb', LybViewSet)


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

在这里插入图片描述

还要将rest_framework注册才行

在这里插入图片描述

这样就可以了,但是后端的数据传到前端,我们还需要一个跨域问题,我们之前装了一个django-cors-headers模块,接下来配置一下,也是在settings.py这个文件下
‘corsheaders.middleware.CorsMiddleware’,
在这里插入图片描述
在这里插入图片描述
CORS_ORIGIN_ALLOW_ALL = True # 跨域请求全部允许

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

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

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

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

然后去数据库中查询看一下数据是否已经存储
在这里插入图片描述

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
很高兴为你提供一个Django+Vue3+ElementPlus前后端分离的demo。 ## 后端部分 首先,我们需要创建一个Django项目。在命令行中输入以下命令: ``` django-admin startproject project_name ``` 然后,我们需要创建一个应用程序。在命令行中输入以下命令: ``` python manage.py startapp app_name ``` 接下来,我们需要安装一些必要的库。在命令行中输入以下命令: ``` pip install djangorestframework django-cors-headers ``` 接下来,我们需要在`settings.py`文件中添加以下代码: ```python INSTALLED_APPS = [ ... 'rest_framework', 'corsheaders', 'app_name', ] MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ] CORS_ORIGIN_ALLOW_ALL = True ``` 现在,我们已经完成了后端部分的设置。我们可以开始编写API。 在`app_name`中创建一个名为`api.py`的文件,并编写以下代码: ```python from rest_framework.decorators import api_view from rest_framework.response import Response @api_view(['GET']) def hello_world(request): return Response({"message": "Hello, World!"}) ``` 这是一个简单的API,当我们向`/api/hello`发送GET请求时,它将返回一个JSON响应,其中包含“Hello, World!”消息。 最后,在`urls.py`文件中添加以下代码: ```python from django.urls import path from . import api urlpatterns = [ path('api/hello', api.hello_world), ] ``` 现在,我们已经完成了后端部分的设置。我们可以在终端中运行`python manage.py runserver`命令来启动服务器。 ## 前端部分 首先,我们需要安装Vue CLI。在命令行中输入以下命令: ``` npm install -g @vue/cli ``` 然后,我们需要创建一个Vue项目。在命令行中输入以下命令: ``` vue create project_name ``` 接下来,我们需要安装ElementPlus。在命令行中输入以下命令: ``` npm i element-plus -S ``` 接下来,我们需要在`main.js`文件中添加以下代码: ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(ElementPlus).mount('#app') ``` 现在,我们已经完成了前端部分的设置。我们可以开始编写页面。 在`src`中创建一个名为`HelloWorld.vue`的文件,并编写以下代码: ```vue <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { data() { return { message: '' } }, created() { fetch('http://localhost:8000/api/hello') .then(response => response.json()) .then(data => this.message = data.message) } } </script> ``` 这是一个简单的页面,它将从我们的API中获取消息并显示在页面上。 最后,在`App.vue`文件中添加以下代码: ```vue <template> <HelloWorld /> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { components: { HelloWorld } } </script> ``` 现在,我们已经完成了前端部分的设置。我们可以在终端中运行`npm run serve`命令来启动前端服务器。 现在,我们可以在浏览器中访问`http://localhost:8080`,应该可以看到一个页面,其中包含“Hello, World!”消息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值