python笔记三 react + django 实现前后端分离

python笔记一 django搭建服务器全栈开发
python笔记二 django自带后台管理系统、模版渲染以及使用mysql数据库
python笔记三 react + django 实现前后端分离
python笔记四 REST Framework 实现 restful api
python笔记五 django headers带jwt实现自动登录，密码加密存储

前端不局限于react，vue、jquery、纯手撸也可以，用什么不重要，重要的是前后端分离。服务端只提供接口。

一、项目初始化

1、前端

脚手架怎么装就不说了，直接开始初始化。

create-react-app site
cd site
npm install
npm start

image.png

2、服务端

在项目根目录下

django-admin startproject service
cd service
python manage.py startapp server
python manage.py makemigrations
python manage.py migrate
python manage.py runserver

跑起来，访问127.0.0.1:8000

image.png

至此前后端项目已完成初始化。

二、前后端交互

1、前端部分

进入site文件夹下
这里发送请求用axios，需要npm安装

npm install axios --save

打开site > src > App.js，修改如下

image.png

加了两个input两个button

image.png

2、服务端部分

修改配置

需要安装django-cors-headers，允许跨域请求。

pip3 install django-cors-headers

修改settings.py

image.png

image.png

在settings.py加上这一部分

image.png

django-cors-headers的具体配置看这里：https://github.com/ottoyiu/django-cors-headers

建表

image.png

同步数据库

image.png

添加到后台管理

目的是交互之后写到数据库便于查看，也可以用命令行看，这个随意。

image.png

接口

post

server > views.py

image.png

service > urls.py

image.png

写好之后试一下。

image.png

write之后看一下打印

image.png

status是200，数据也没有问题。
接下来看一下后台管理，数据库里新增的那条数据
创建一个管理账号

python manage createsuperuser

自己设好账号密码，访问 http://127.0.0.1:8000/admin

image.png

输入刚创建好的账号密码登录，看到Person这个表

image.png

点进去，里边有一条刚插入的数据

image.png

get

server > views.py

image.png

service > urls.py

image.png

接下来测试，点页面上的read按钮，看一下打印

image.png

可以看到get数据也没有问题，但是有时候我们调用get接口的时候需要参数，从数据库中查找特定的某一条数据，现在有三条数据。

image.png

修改前端请求，加一个参数

image.png

修改server > views.py

image.png

重新read一下

image.png

只取出了name = a的那条数据。

至此实现了django只做接口，react写前端的前后分离，当然还有很多细节需要处理，这里就不细说了，关于sqllite的语句，还有uuid的生成这些网上都有很多文章。如果不想要自带的后台管理，自己写一个，调用接口就可以了。