# drf-react

**Repository Path**: yazutang/drf-react

## Basic Information

- **Project Name**: drf-react
- **Description**: 使用django rest framework和react搭建的简单前后端分离项目
- **Primary Language**: Python
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-09-11
- **Last Updated**: 2023-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# drf-react

#### 介绍
使用django rest framework和react搭建的简单前后端分离项目（单人博客项目)

#### 软件架构
软件架构说明


#### 安装教程

```
$ git clone https://gitee.com/yazutang/drf-react.git
$ cd drf-react

$ pipenv install  # 启动虚拟环境并安装依赖包
$ cd myproject
$ python manage.py runserver  # 启动django

$ cd reactapp
$ npm i      # 安装依赖包
$ npm start  # 启动react
$ npm run test # 执行单元测试

# cd myproject
# pytest  # 执行单元测试

```
#### 数据管理
```
$ cd myproject
$ python manange.py dumpdata -o mydata.json # 导出所有数据
$ python mannage.py dumpdata [应用名[.模型名]] -o mydata.json # 导出指定应用或者应用下的模型数据
$ python manange.py flush # 清空数据库
$ python manage.py loaddata mydata.json  # 导入数据
```

#### 第三方库的使用
`$ pipenv install python-decouple`  
在drf-react目录下新建.env文件(添加.env到.gitignore,不上传到网上），定义环境变量,from decouple import config   

config('DEBUG')会自动读取.env文件,例子:    

```js
DB_NAME = 'test01'
DB_HOST = '127.0.0.1'
DB_PORT = 3306
DB_USER = 'root'
DB_PASSWORD = 'root'
```

#### 注意问题

- React启动服务npm start之前，把后端上传的文件目录media,拷贝到reactapp/public目录下，才能   

正常显示图片。  

- 静态文件部署

  React前端执行`npm run build`,在reactapp目录下产生build/static目录，在settings.py中添加配置    

  ```python
  STATICFILES_DIRS = [os.path.join(BASE_DIR, 'reactapp/build/static')]  # 开发时服务的静态文件目录
  STATIC_ROOT = os.path.join(BASE_DIR, '../static')
  ```

  执行`python manage.py collectstatic`命令把前后端的静态文件一同收集到drf-react/static目录下  

  媒体文件配置在drf-react/media下   

  ```python
  MEDIA_ROOT = os.path.join(BASE_DIR, '../media')  # 用户上传文件的目录
  ```

  配置nginx  

  ```bash
  location ~ ^/(media|static)/ {
  	root /path/to/your-project/;  # 这里your-project是drf-react;
  	expires 30d; # 缓存
  }
  ```

#### 使用说明

1. 在Pipfile中修改url为"https://pypi.douban.com/simple" 方便下载第三方包  
2. 在reactapp/package.json中添加上"proxy": "http://127.0.0.1:8000" 代理访问8000端口（后端），规避跨域问题  
3. 使用最新版本(v5)的bootstrap和bootstrap-icons,安装: npm i bootstrap@next bootstrap-icons
4. markdown显示参考: [https://www.jianshu.com/p/442bc083c835](https://www.jianshu.com/p/442bc083c835)


#### 问题
使用 gunicorn myproject.wsgi:application --bind 127.0.0.1:8000 启动项目时报如下错误 
```bash
  File "/home/wolf/.local/share/virtualenvs/drf-react-mD-c0esm/lib/python3.9/site-packages/mdeditor/widgets.py", line 6, in <module>
    from django.utils.encoding import force_text
ImportError: cannot import name 'force_text' from 'django.utils.encoding' (/home/wolf/.local/share/virtualenvs/drf-react-mD-c0esm/lib/python3.9/site-packages/django/utils/encoding.py)
```
解决方案：
打开mdeditor/widgets.py 注释掉 from django.utils.encoding import force_text  
所有使用到force_text函数的地方用str代替（只有一个地方使用到)  

#### 压力测试
```bash
siege -c255 -t15s -v -b 127.0.0.1:8000/api/v1/posts/
```