全栈Django和React项目教程

全栈Django和React项目教程

Full-stack-Django-and-ReactFull-stack Django and React, published by Packt项目地址:https://gitcode.com/gh_mirrors/fu/Full-stack-Django-and-React

项目目录结构及介绍

Full-stack-Django-and-React/
├── backend/
│   ├── manage.py
│   ├── backend/
│   │   ├── __init__.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   ├── wsgi.py
│   ├── app/
│   │   ├── __init__.py
│   │   ├── models.py
│   │   ├── views.py
│   │   ├── urls.py
│   │   ├── serializers.py
├── frontend/
│   ├── public/
│   │   ├── index.html
│   │   ├── favicon.ico
│   ├── src/
│   │   ├── App.js
│   │   ├── index.js
│   │   ├── components/
│   │   ├── pages/
│   │   ├── styles/
├── README.md

目录结构说明

• backend/：Django后端项目的根目录。
  • manage.py：Django项目的命令行工具。
  • backend/：Django项目的配置目录。
    • settings.py：Django项目的配置文件。
    • urls.py：Django项目的URL路由配置。
    • wsgi.py：Django项目的WSGI应用。
  • app/：Django应用目录，包含模型、视图、URL和序列化器等。
• frontend/：React前端项目的根目录。
  • public/：包含公共资源，如index.html和favicon.ico。
  • src/：包含React应用的源代码。
    • App.js：React应用的主组件。
    • index.js：React应用的入口文件。
    • components/：React组件目录。
    • pages/：React页面目录。
    • styles/：样式文件目录。

项目的启动文件介绍

后端启动文件

• manage.py：Django项目的命令行工具，用于启动开发服务器、迁移数据库等操作。

python manage.py runserver

前端启动文件

• src/index.js：React应用的入口文件，负责渲染App组件到index.html中的root元素。

npm start

项目的配置文件介绍

后端配置文件

• backend/settings.py：Django项目的配置文件，包含数据库配置、静态文件配置、中间件配置等。

# 部分配置示例
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

STATIC_URL = '/static/'

前端配置文件

• package.json：包含React项目的依赖和脚本配置。

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

以上是全栈Django和React项目的目录结构、启动文件和配置文件的介绍。希望对您有所帮助！

Full-stack-Django-and-ReactFull-stack Django and React, published by Packt项目地址:https://gitcode.com/gh_mirrors/fu/Full-stack-Django-and-React