DRF_Vue3_ElementPlus_TypeScript部署搭建

最新推荐文章于 2024-05-11 16:15:24 发布

qq_41821091

最新推荐文章于 2024-05-11 16:15:24 发布

阅读量2.1k

点赞数 1

文章标签： python django vue

本文链接：https://blog.csdn.net/qq_41821091/article/details/123709501

版权

后端开发环境

后端开发环境为：

Win 10（64位）
Python 3.7.2
Django 3.1.3
djangorestframework 3.12.2

安装Django

在虚拟环境下，输入命令 pip install django==3.1.3：

(venv) E:\drf> pip install django==3.1.3

Collecting django==3.1.3
  Using cached 
  ...
  ...
Successfully installed django-3.1.3

系统打印出以上文字表示 Django 安装成功了。（提示符以 (venv) 开头）

由于国内复杂的网络环境， Pip 的下载可能非常缓慢甚至失败。国内用户请更换国内的镜像下载源。

创建Django项目

还是在虚拟环境下，在drf文件夹中创建一个叫 drf_vue_blog 的Django项目：

(venv) E:\drf> django-admin startproject drf_vue_blog

查看drf文件夹，发现多了drf_vue_blog文件夹，其结构应该是这样：

drf_vue_blog
│  manage.py
│
└─drf_vue_blog
    │  settings.py
    │  urls.py
    │  wsgi.py
    └─ __init__.py

这就是我们刚创建出来的项目了。

运行Django服务器

Django 自带一个轻量的 Web 开发服务器，被叫做 runserver。

开发服务器是为了让你快速开发Web程序，通过它可以避开配置生产环境的服务器的繁琐环节。

开发服务器会自动的检测代码的改变，并且自动加载它，因此在修改代码后不需要手动去重启服务器，非常的方便。

要运行这个服务器，首先要进入drf_vue_blog文件夹，即含有manage.py文件的那个：

(venv) E:\drf> cd drf_vue_blog
(venv) E:\drf\drf_vue_blog>

输入命令python manage.py runserver：

(venv) E:\drf\drf_vue_blog> python manage.py runserver
Performing system checks...
...
Django version 3.1.3, using settings 'drf_vue_blog.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

系统打印出这些信息，说明服务器启动成功了。

打开 Chrome 浏览器，输入http://127.0.0.1:8000/ ，网页中看到一个绿色的小火箭，恭喜你，项目已经正常运行了。

Django切换Mysql数据库

1、安装MySQL数据库

2、在项目的settings.py文件中修改数据库设置

DATABASES = {
‘default’: {
‘ENGINE’: ‘django.db.backends.mysql’,
‘NAME’: ‘dbname’,
‘USER’:‘root’,
‘PASSWORD’:‘123456’,
‘HOST’:‘127.0.0.1’,
‘PORT’:‘3306’,
}
}

3、安装mysql python库

pip install PyMySQL

# 网络原因安装不上的话用这个命令
pip install pymysql -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com

4、然后在项目的init.py文件下输入

import pymysql
pymysql.install_as_MySQLdb()pymysql.install_as_MySQLdb()

5、然后运行就不会出错了

python3 manage.py makemigrations
python3 manage.py migrate

drf 开发预备

首先在命令行创建博客文章的 App：

(venv) > python manage.py startapp article

创建一个简单的博客文章模型：

# article/models.py

from django.db import models
from django.utils import timezone

# 博客文章 model
class Article(models.Model):
    # 标题
    title = models.CharField(max_length=100)
    # 正文
    body = models.TextField()
    # 创建时间
    created = models.DateTimeField(default=timezone.now)
    # 更新时间
    updated = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.title

前后端分离中涉及到一个重要的概念：序列化（后面讲解）。Django 有一个非常优秀的库 djangorestframework（后称 DRF）。它可以帮我们封装好序列化的底层实现，让开发者专注于业务本身。

安装 DRF 及其他依赖库：

pip install djangorestframework==3.12.2
pip install markdown==3.3.3
pip install django-filter==2.4.0

然后将 App 注册列表：

# drf_vue_blog/settings.py

INSTALLED_APPS = [
    ...

    'rest_framework',
    'article',
]

接着还需要添加 DRF 的登录视图，以便 DRF 自动为你的可视化接口页面生成一个用户登录的入口：

后续开发出接口页面后试着把这行代码删掉，看看会有什么不同。

# drf_vue_blog/urls.py

...
from django.urls import include

urlpatterns = [
    ...
    path('api-auth/', include('rest_framework.urls')),
]

最后记得数据迁移：

(venv) > python manage.py makemigrations
(venv) > python manage.py migrate

准备工作就做好了。

序列化与Django

前后端分离的核心思想之一，就是两端交互不通过模板语言，而只传输需要的数据。因此问题就来了。

在 Django 程序的运行过程中，变量都是存储在服务器的内存中；更要命的是，后端 Django 程序中存储的是 Python 变量，而前端的浏览器中是 Javascript 变量，这两者是无法直接通过你家的网线进行传递和交流的。因此需要规定一个“标准格式”，前后端都根据这个标准格式，对资源进行保存、读取、传输等操作。

JSON 就是这种标准格式之一。它很轻量，表示出来就是个字符串，可以直接被几乎所有的语言读取，非常方便。

举个例子，把 Python 对象转换为 JSON ，这被称为序列化（serialization）：

>>> import json
>>> person = dict(name='Trump', age=82)
>>> json.dumps(person)
# 这是个字符串
'{"age": 82, "name": "Trump"}'

把 JSON 转换为 Javascript 对象，被称为反序列化：

>>> json_str = '{"age": 82, "name": "Trump"}'
>>> json.loads(json_str)
# 这是个 js 对象
{
   'age': 82, 'name': 'Trump'}

总之，把变量从内存中变成可存储或传输的过程称之为序列化，反过来把变量内容从序列化的对象重新读到内存里称之为反序列化。

回顾 Django 传统流程对一个网络请求的处理：

def a_list(request):
    articles = Article.objects.all()
    return render(..., context={
   'articles': articles})

视图函数将数据作为上下文返回，通过模板引擎将上下文渲染为页面中的数据。

Restful 的处理流程仅增加了一步，即对数据序列化的处理：

def a_list(request):
    articles = Article.objects.all()
    # 序列化数据
    serializer = Serializer(articles, many=True)
    return JsonResponse(serializer.data, safe=False)

数据被序列化为 Json 字符串，直接交由前端处理。

这就是前后端分离的雏形：

后端提供数据；
前端专注于操作数据、渲染页面。

这里又出现了与前后端分离联系很紧密的新概念：Rest（表现层状态转化）和 Restful。Restful 架构是指客户端和服务器之间的交互、操作符合 Rest 规范，即：每一个URI代表一种资源；客户端和服务器之间，传递资源的表现层；客户端通过四个HTTP动词，对服务器端资源进行操作，实现"表现层状态转化"。有点难理解，推荐读物阮一峰的博客和知乎文章。

Hello World

按照这个思路，我们来写一个文章列表接口吧。

article 模型在前面已经写好了，接下来写视图：

# article/views.py

from django.http import JsonResponse
from article.models import Article
# 这个 ArticleListSerializer 暂时还没有
from article.serializers import ArticleListSerializer

def article_list(request):
    articles = Article

最低0.47元/天解锁文章

qq_41821091

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DRF_Vue3_ElementPlus_TypeScript部署搭建

后端开发环境后端开发环境为：Win 10（64位）Python 3.7.2Django 3.1.3djangorestframework 3.12.2安装Django在虚拟环境下，输入命令 pip install django==3.1.3：(venv) E:\drf> pip install django==3.1.3Collecting django==3.1.3 Using cached ... ...Successfully installed djan
复制链接

扫一扫