# BLOCK NOTE（vue3 + elementUI + Django）

**Repository Path**: penguink3/block_note

## Basic Information

- **Project Name**: BLOCK NOTE（vue3 + elementUI + Django）
- **Description**: vue3 + elementUI + Django 学习项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-09-28
- **Last Updated**: 2024-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 部署需要修改的地方
## OSS 相关配置修改
1. 在 django 项目中 "utils/oss.py" 修改成部署使用的 OSS 仓库

```python
bucketName = 'test-penguink3'
# bucketName = 'penguink3-block'
```

2. vue3 项目中 "utils/oss.js" 也是如此

```js
    bucket: 'test-penguink3',
    // bucket: 'penguink3-block',
```

## Django 链接数据库地址修改

1. 以下操作在 settings.py 中修改 database 相关配置
  - 数据库地址修改
  - 数据库账户名密码修改

```python
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'block',  # mysql中数据库名
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': '127.0.0.1',  # mysql所在地址
        'PORT': '3306',  # mysql所在端口
        # 远程连接属性，就写数据库的存储引擎和字符集
        'OPTIONS': {'init_command': 'SET default_storage_engine=INNODB;', 'charset': 'utf8mb4'}
    }
}
```

2. 以下操作在 settings.py 中修改 cache 相关配置
    - 如果使用 mysql 的表作为 cache 则不用修改
    - 使用 redis 则修改成部署的服务器上的 redis 即可

```python
CACHES = {
    "default": {
        "BACKEND": "django_redis.cache.RedisCache",		# 使用django-redis的缓存
        "LOCATION": "redis://127.0.0.1:6379/1",			# redis数据库的位置
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
            "CONNECTION_POOL_KWARGS": {"max_connections": 100},
            "DECODE_RESPONSES": True,			# 自动将byte转成字符串
            "PASSWORD": "",						# 设置密码
        }
    }
}
```

## vue 项目后端 IP 配置修改
1. 注释掉生产环境的 IP，在 vite.config.js 中

```js
    server: {
        host: '0.0.0.0',
        port: 3001,
        proxy: {
          '/api': {
            // target: 'http://localhost:8001',	// 本地请求地址
            // target: 'http://8.134.209.231',  // 部署请求地址
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, '/api')
          },
        }
    },
```

2. 在 "utils/request.js" 中配置生产环境后端 IP

```js
const service = axios.create({
    // 后端实际地址
    baseURL : "http://8.134.209.231",
    timeout: 5000,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

```

### 关于请求路径“前缀”：后端和前端对应关系

1. 首先后端一般都要配置后端请求路由前缀，我的 Django 后端就简单配置了路由前缀为 'api'，在后端项目 './block/urls.py' 中配置

```python
# url
baseUrl = 'api/'

urlpatterns = [
    path(baseUrl + 'admin/', admin.site.urls),
    # Test: http://127.0.0.1:8000/api/test
    path(baseUrl + 'test/', views.test_return_json),
    # User: http://127.0.0.1:8000/user
    path(baseUrl + 'user/', include('User.urls')),
    # Note: http://127.0.0.1:8000/note
    path(baseUrl + 'note/', include('Note.urls')),
    ... ...
]
```

2. 在 Vue 前端中要对应请求后端，需要配置 request.js 中的后端请求路由前缀（需要跟后端一致）

```js
const apiUrl = "api/"
```

# 最近的开发日志

## 2023/5/8 更新了 django-ratelimit 包，这让引入这个工具的时候应该使用如下语句

```bash
pip install --upgrade django-ratelimit
```

```python
# 项目 Django 项目的 view 文件中都有引用 django-ratelimit，注意修改
from django_ratelimit.decorators import ratelimit
```

> 注意，部署服务器时，所有 ratelimit 相关的引用统一修改为如下

```python
from ratelimit.decorators import ratelimit
```

## 2024/5/13 更新了 Note 相关内容，加入了锁定机制

1. 锁定的文档不是自己的账号不能查看，也不会在 list 中出现
2. 数据库中note加入了字段 is_lock
3. 编辑页面加入了对应的选择 checkbox

## 2024/5/24 新增图片分类功能

1. 现在可以新建分类，修改分类名，删除分类
2. 默认分类会显示所有的图片，暂时无法移动图片至别的分类
3. USER 应用中的 ORM model 新增 PicClass