前言

该项目用SQLite作为数据库，Django作为后端，React作为前端，REST和axios用作前后端的交互，实现了一个简单的Web Application。如果你对React和Django有所了解，并想知道怎么把它们使用在一起，那么希望这篇不算教程的教程可以帮到你 ：）

这个项目的灵感来自于

www.digitalocean.com/community/t…

Demo

思路

交互图中的物体各自起到什么作用？

sqlite3 - Django自带数据库，存有一个table，定义如下

Serializer - 用来把数据库中的object转换成json格式，然后发送给REST API。或者把REST API发送过来的json格式转换回object，然后存入数据库

REST framework - 用来生成api，使前端和数据库可以用该api来交互

CORS(Cross-origin resource sharing) - 学名跨域资源共享，简单来说就是，如果没有CORS的话，浏览器会阻止前端访问REST api

axios - 前端使用axios来访问REST api

后端的数据如何在前端显示？

1. React 向 axios 请求数据 (现在我们在前端)
2. axios 向 REST api 请求数据 (现在我们到了后端)
3. REST api 和 Django 说，我要某某数据
4. Django 从 database 中拿到数据，给 Serializer
5. Serializer 把数据转换成 json格式， 给REST api
6. REST api 把数据给 axios (回到了前端)
7. axios 把数据给 React，至此数据被显示在屏幕上

安装环境与依赖库

安装环境与依赖库

• python 3.5.2
• Django 2.2.2
• create-react-app
• package.json

    "dependencies": {
    "axios": "^0.19.0",
    "react": "^16.8.6",
    "react-datepicker": "^2.7.0",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "react-select": "^3.0.4",
    "reactjs-popup": "^1.4.1"
  }
  

• requirement.txt

    Django==2.2.2
    django-cors-headers==3.0.2
    djangorestframework==3.9.4
    pytz==2019.1
    sqlparse==0.3.0
  

项目地址

github.com/Kaiwenkevin…