发布文章可新增分类，分类名前端进行限制

drf_vue_blog/settings.py

@@ -121,7 +121,7 @@ STATIC_URL = '/static/'
 # 使用django_rest_framework中的分页功能
 REST_FRAMEWORK = {
     'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
-    # 每页5条记录
+    # 每页3条记录
     'PAGE_SIZE': 3,
     # 使用django-filter后端过滤引擎
     'DEFAULT_FILTER_BACKENDS': ['django_filters.rest_framework.DjangoFilterBackend'],

frontend/src/views/ArticleCreate.vue

@@ -31,6 +31,23 @@
 						{{ category.title }}
 					</button>
 				</span>
+
+                <div
+					v-if="selectedCategory !== null"
+					style="margin-top: 5px; color: red"
+				>
+					注:&nbsp;不选分类时可创建新分类!
+				</div>
+
+				<div class="newCategory" v-if="selectedCategory === null">
+					<div>创建新分类:&nbsp;</div>
+					<br />
+					<input
+						v-model="newCategory"
+						type="text"
+						placeholder="请输入一个新分类"
+					/>
+				</div>
 			</div>
 
 			<div class="form-elem">
@@ -85,6 +102,10 @@ export default {
 		// 标题图 id
 		let avatarID = ref(null);
 
+        // 新分类
+
+        let newCategory = ref("");
+
 		const router = useRouter();
 
 		onMounted(() => {
@@ -160,11 +181,6 @@ export default {
 						body: body.value,
 					};
 
-					// 添加分类
-					if (selectedCategory.value) {
-						data.category_id = selectedCategory.value.id;
-					}
-
 					// 标签预处理
 					data.tags = tags.value
 						// 用逗号分隔标签
@@ -176,6 +192,49 @@ export default {
 
 					data.avatar_id = avatarID.value;
 
+                    if (newCategory.value.length >= 6) {
+                        window.alert("分类名建议不超过6个字符");
+                        newCategory.value = "";
+                        return;
+                    }
+
+                    for (let item of categories.value) {
+                        if (newCategory.value === item.title){
+                            window.alert("分类名已存在!");
+                            newCategory.value = "";
+                            return;
+                        }
+                    }
+
+                    // 创建新的分类
+					if (
+						selectedCategory.value === null &&
+						newCategory.value !== null
+					) {
+						$.ajax({
+							url: "http://127.0.0.1:6789/api/category/",
+							type: "post",
+							async: false,
+							data: {
+								title: newCategory.value,
+							},
+							headers: {
+								Authorization:
+									"Bearer " +
+									localStorage.getItem("access_blog"),
+							},
+							success(resp) {
+								selectedCategory.value = resp;
+							},
+						});
+					}
+
+                    // 添加分类
+					if (selectedCategory.value) {
+						data.category_id = selectedCategory.value.id;
+					}
+
+
 					// 将发表文章请求发送至接口
 					// 成功后前往详情页面
 					const token = localStorage.getItem("access_blog");
@@ -212,6 +271,7 @@ export default {
 			chooseCategory,
 			onFileChange,
 			submit,
+            newCategory,
 		};
 	},
 };
@@ -219,7 +279,10 @@ export default {
 
 <style scoped>
 .category-btn {
+    margin-top: 5px;
 	margin-right: 10px;
+    width: 7rem;
+    font-size: 1rem;
 }
 #article-create {
 	text-align: center;
@@ -259,4 +322,10 @@ button {
 	border-radius: 5px;
 	width: 50px;
 }
+
+.newCategory {
+	font-size: large;
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
 </style>

frontend/src/views/ArticleEdit.vue

@@ -177,6 +177,21 @@ export default {
 						// 剔除长度为零的无效标签
 						.filter((x) => x.charAt(0) !== "");
 
+
+                    if (newCategory.value.length > 6) {
+                        window.alert("分类名建议不超过6个字符");
+                        newCategory.value = "";
+                        return;
+                    }
+
+                    for (let item of categories.value) {
+                        if (newCategory.value === item.title){
+                            window.alert("分类名已存在!");
+                            newCategory.value = "";
+                            return;
+                        }
+                    }
+
 					// 创建新的分类
 					if (
 						selectedCategory.value === null &&
@@ -280,7 +295,10 @@ export default {
 
 <style scoped>
 .category-btn {
+    margin-top: 5px;
 	margin-right: 10px;
+    width: 8rem;
+    font-size: 1rem;
 }
 #article-create {
 	text-align: center;