欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

实战！用Python 3和Django 3搭配Vue.js搭建前后端分离的Web开发平台

最编程 2024-01-14 21:09:46
...

1. 前言


本篇将基于Python 3.7+Django 3.0结合Vue.js前端框架，为大家介绍如何基于这三者的技术栈来实现一个前端后离的Web开发项目。为了简化，方便读者理解，本文将以开发一个单体页面应用作为实战演示。



2. 先搞清楚什么是前后端分离


在正式开始实战示例之前，我们有必要先弄清楚一个概念：什么是前后端分离?


前后端分离目前已成为互联网项目开发的业界标准使用方式，在聊前后端分离之前，相信也有很多读者，对如何区分前端还是后端，还搞不清楚（是不是让我戳中了你的痛处了）。本着“致良知”，先科谱一下知识。


通常情况下，我们说的前端，大多是指浏览器这一端，一般是用Html+CSS+JS来实现的，所以通常会引申为用Html+CSS+JS写的大部分程序都是前端，包括App，小程序，H5等。


PS: 在NodeJS出现之后，用NodeJS写的后端部分，也会被人归类为前端，为了区分之前的前端，就给他们起了一个名字，叫做“大前端”。


久而久之，人们习惯把Html+CSS+JS，运行在浏览器端执行的，称之为前端。

而Java，C，Python，PHP这些运行在服务器端的，统一称之为后端。


但，这种以语言为分界点去区分前后端，真的合理么？显然不合理！


前后端的定义，不应该是以语言来定义，而是应该以它的运行环境，如果是在服务器端，就应该被称之为后端，代表着你看不见，摸不着。而如果运行在用户端，就应该被称之为前端，代表你是可以看得到的。


在不分前后端的时候，无论是Java还是JS，全都是一个人来写。

为什么现在很多互联网公司在项目开发时，都建议要进行前后端分离，或者说前后端分离能带来哪些优势？（好处多多，这里仅提两个点）

  • 第一个，并行开发、独立部署、实现前后端解耦，前后端的进度互不影响，在过去，前后端不分离的情况下，项目代码耦合严重相互影响，且前后端人员工作量分布不均。


  • 第二个，术业有专攻（开发人员分离），以前的JavaWeb项目大多数都是Java程序员又当爹又当妈，又搞前端，又搞后端。前后端分离之后，前端工程师只管前端的事情，后端工程师只管后端的事情。



我们先看看一个 Web 系统，在前后端不分离时架构设计是什么样的。

微信图片_20220523225135.png

用户在浏览器上发送请求，服务器端接收到请求，根据 Header 中的 token 进行用户鉴权，从数据库取出数据，处理后将结果数据填入 HTML 模板，返回给浏览器，浏览器将 HTML 展现给用户。



而采用前后端分离之后，分离的是人员职责，人员职责分离了，因此架构也发生变化。

微信图片_20220523225206.png



前后端分离后，前端人员和后端人员约定好接口，前端人员不用再关心业务处理是怎么回事，他只需要把界面做好就可以了，后端人员也不用再关系前端界面是什么样的，他只需要做好业务逻辑处理即可。


小结一下，前后端分离是什么？

前后端分离是一种架构模式，或者说是最佳实践，它主张将前端开发人员和后端开发人员的工作进行解耦，尽量减少他她们之间的交流成本，帮助他她们更能专注于自己擅长的工作。



PS: 本篇实战示例，使用Vue.js作为前端框架，代替Django本身自带的模板引擎，Django则作为服务端提供API接口，从而实现前后端分离。



3. 环境准备


本实战示例，基础环境对应安装版本如下：

  • Python 3.7.4
  • Mysql 5.7
  • Pycharm （建议专业版）
  • Node


PS: 其中Python、Mysql、Pycharm、Node安装过程皆较为简单，不是本文介绍重点，读者可直接参考官网安装方法。


4. 新建独立的虚拟开发环境


1、创建一个用于Django项目开发的独立虚拟环境，切换到本地开发目录，输入如下命令：


python3 -m venv venv


2、创建完成后，目录结构如下：

➜  venv tree -L 2
.
├── bin
│   ├── activate
│   ├── activate.csh
│   ├── activate.fish
│   ├── easy_install
│   ├── easy_install-3.7
│   ├── pip
│   ├── pip3
│   ├── pip3.7
│   ├── python -> python3
│   └── python3 -> /usr/local/bin/python3
├── include
├── lib
│   └── python3.7
└── pyvenv.cfg

4 directories, 11 files


3、进入到bin目录，输入命令source activate 命令，激活虚拟环境。

微信图片_20220523225332.png



4、虚拟环境激活后，如上图所示。接下来，在虚拟环境安装Django库。


安装Django （最新版本为3.0）


(venv) ➜  pip install Django


Django 项目源码：

https://github.com/django/django



Django3.0 版本特性可查阅官网：

https://docs.djangoproject.com/en/3.0/releases/3.0/


5、安装完成后，可检查一下版本信息：

(venv) ➜  python
Python 3.7.4 (default, Jul  9 2019, 18:15:00)
[Clang 10.0.0 (clang-1000.11.45.5)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> import django
>>> print(django.get_version())
3.0

可以发现，在虚拟环境中已经成功安装好了Django 3.0。



5. 创建Django后端项目


1、创建Django项目，采用Pycharm或者命令行创建皆可。此处，以命令行方式作为演示，项目名为django_vue。


(venv) ➜ django-admin startproject django_vue

2. Django项目创建完成后，目录结构如下所示。


├── django_vue
│   ├── django_vue
│   │   ├── __init__.py
│   │   ├── asgi.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   └── manage.py


3、执行同步数据库文件(Django默认数据库为db.sqlite3)，执行同步过程如下：


(venv) ➜  python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying sessions.0001_initial... OK


4、启动Django Server ，验证默认配置是否正常。

(venv) ➜   python manage.py runserver 0.0.0.0:8000
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
December 15, 2019 - 08:36:28
Django version 3.0, using settings 'django_vue.settings'
Starting development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.

5、打开浏览器，访问http://localhost:8000，一切正常的话，可见到如下界面。

微信图片_20220523225701.png



6. 将Django数据库更换为Mysql


1、假设在前面，我们已经安装配置好了Mysql，输入如下命令进入到Mysql。


mysql -u root -p


2、创建数据库，数据库取名为django_vue_db，并设置字符集为utf-8。

mysql> CREATE DATABASE django_vue_db CHARACTER SET utf8;
Query OK, 1 row affected (0.01 sec)


3、安装myslqclient库


(venv) ➜  pip install mysqlclient


4、配置settings.py文件，配置Mysql数据库引擎。


```python

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'django_vue_db',
        'USER': 'root',
        'PASSWORD': 'xxxxxxx',
        'HOST': '127.0.0.1',
    }
}
```

5、执行同步操作，将数据迁移到Mysql。


python manage.py migrate


6、验证是否切库成功，进入到Mysql客户端，查看django初化表是否有生成。

mysql> use django_vue_db;
Database changed
mysql> show tables;
+----------------------------+
| Tables_in_django_vue_db    |
+----------------------------+
| auth_group                 |
| auth_group_permissions     |
| auth_permission            |
| auth_user                  |
| auth_user_groups           |
| auth_user_user_permissions |
| django_admin_log           |
| django_content_type        |
| django_migrations          |
| django_session             |
+----------------------------+

						

							上一篇：							
								JavaScript遍历JSON对象及其相关操作技巧							
						

						

							下一篇：							
								Java对象和集合数据如何转换为JSON格式？

推荐阅读