用户可新增分类,前端全部用组合式api重构

README.md

@@ -1 +1,21 @@
 ### 基于django3和vue3的博客项目
+
+#### 1、博客首页展示
+
+![image-20221003002818644](C:\Users\15270\AppData\Roaming\Typora\typora-user-images\image-20221003002818644.png)
+
+#### 2.发布文章界面
+
+![image-20221003002550725](C:\Users\15270\AppData\Roaming\Typora\typora-user-images\image-20221003002550725.png)
+
+#### 3.登录、注册界面
+
+![image-20221003002956157](C:\Users\15270\AppData\Roaming\Typora\typora-user-images\image-20221003002956157.png)
+
+#### 4.用户管理界面
+
+![image-20221003002845601](C:\Users\15270\AppData\Roaming\Typora\typora-user-images\image-20221003002845601.png)
+
+#### 5.更新文章界面
+
+![image-20221003003047933](C:\Users\15270\AppData\Roaming\Typora\typora-user-images\image-20221003003047933.png)

drf_vue_blog/settings.py

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

frontend/src/components/ArticleList.vue

@@ -1,31 +1,43 @@
 <template>
-	<div v-for="article in articles" :key="article.url" id="articles">
-		<div class="grid" :style="gridStyle(article)">
-			<div class="image-container">
-				<img :src="imageIfExists(article)" alt="" class="image" />
+		<div v-for="article in articles" :key="article.url" id="articles">
+			<div class="grid" :style="gridStyle()">
+				<div class="image-container">
+					<img
+						:src="imageIfExists(article)"
+						alt=""
+						class="image"
+						v-if="imageIfExists(article) !== null"
+					/>
+				</div>
+				<router-link
+					:to="{ name: 'detail', params: { id: article.id } }"
+					class="article-info"
+				>
+					<span v-if="article.category !== null" class="category">
+						{{ article.category.title }}
+					</span>
+
+					<span
+						v-for="tag in article.tags"
+						v-bind:key="tag"
+						class="tag"
+					>
+						{{ tag }}
+					</span>
+					<!-- 路由链接:to的两个参数分别是: 路由名称和传入的id -->
+					<router-link
+						:to="{ name: 'detail', params: { id: article.id } }"
+					>
+						<div class="article-title">{{ article.title }}</div>
+					</router-link>
+
+					<div>
+						{{ formatted_time(article.created) }}
+					</div>
+				</router-link>
 			</div>
-            <div>
-            </div>
-            <div>
-                <span v-if="article.category !== null" class="category">
-                    {{ article.category.title }}
-                </span>
-
-                <span v-for="tag in article.tags" v-bind:key="tag" class="tag">
-                    {{ tag }}
-                </span>
-                <!-- 路由链接:to的两个参数分别是: 路由名称和传入的id -->
-                <router-link :to="{ name: 'detail', params: { id: article.id } }">
-                    <div class="article-title">{{ article.title }}</div>
-                </router-link>
-
-                <div>
-                    {{ formatted_time(article.created) }}
-                </div>
-            </div>
 		</div>
-        </div>
-		<!-- 实现分页 -->
+    <!-- 实现分页 -->
 		<div id="paginator">
 			<span v-if="is_page_exists('previous')">
 				<router-link :to="get_path('previous')"> Prev </router-link>
@@ -41,7 +53,7 @@
 
 <script>
 import $ from "jquery";
-import { onMounted, ref, watch} from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
 export default {
@@ -141,31 +153,31 @@ export default {
 			return url;
 		};
 
-        const imageIfExists = (article) => {
-            if (article.avatar) {
-                return article.avatar.content;
-            }
-        };
-
-        const gridStyle = (article) => {
-            if(article.avatar) {
-                return {
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 1fr 8fr',
-                }
-            }
-        };
+		const imageIfExists = (article) => {
+			if (article.avatar) {
+				return article.avatar.content;
+			} else {
+                // 默认头像
+				return "http://127.0.0.1:6789/media/avatar/20221002/Blog.jpg";
+			}
+		};
+
+		const gridStyle = () => {
+			return {
+				display: "grid",
+				gridTemplateColumns: "1fr 10fr",
+			};
+		};
 
 		onMounted(get_article_data);
 
+		// watch(()=>router.fullPath, () => {
+		//     console.log("路由变化了!");
+		//     get_article_data();
+		// })
 
-        // watch(()=>router.fullPath, () => {
-        //     console.log("路由变化了!");
-        //     get_article_data();
-        // })
-        
-        // 和上面的功能等价
-        watch(router,get_article_data);
+		// 和上面的功能等价
+		watch(router, get_article_data);
 
 		return {
 			articles,
@@ -173,8 +185,8 @@ export default {
 			is_page_exists,
 			get_page_param,
 			get_article_data,
-            imageIfExists,
-            gridStyle,
+			imageIfExists,
+			gridStyle,
 			get_path,
 		};
 	},
@@ -188,38 +200,65 @@ export default {
 </script>
 
 <style scoped>
+
 #articles {
-	padding: 1rem;
+	padding: 0.4rem;
 }
 
 .image {
-	width: 100px;
+	width: 100%;
 	border-radius: 10px;
 	box-shadow: darkslategrey 0 0 12px;
+	user-select: none;
+    
 }
 .image-container {
-	width: 100px;
+	width: 100%;
+    display: grid;
+    place-items: center;
+
+}
+
+.article-info {
+	width:90%;
+	border-radius: 10px;
+	background-color: lightgray;
+	display: grid;
+	place-items: start start;
+	padding-left: 10px;
+	user-select: none;
+    position: relative;
+    left: 20px;
 }
+
+.article-info:hover {
+	cursor: pointer;
+}
+
 .grid {
-	padding-bottom: 10px;
+	padding-bottom: 5px;
+}
+
+a {
+	text-decoration: none;
 }
 
 .article-title {
 	font-size: 1.5rem;
 	font-weight: bolder;
 	text-decoration: none;
-	color: blue;
-	padding: 15px 0 15px 0;
+	color: blueviolet;
+	padding: 5px 0 5px 0;
 }
 
 .tag {
-	padding: 2px 5px 2px 5px;
+	padding: 5px 10px 5px 10px;
 	margin: 5px 5px 5px 0;
 	font-family: Georgia, Arial, sans-serif;
 	font-size: small;
 	background-color: #4e4e4e;
 	color: whitesmoke;
-	border-radius: 5px;
+	border-radius: 15px;
 }
 
 #paginator {
@@ -237,7 +276,6 @@ export default {
 	font-weight: bold;
 	padding-left: 10px;
 	padding-right: 10px;
-   
 }
 
 .category {

frontend/src/components/BlogHeader.vue

@@ -71,7 +71,7 @@ export default {
 		let haslogin = ref(false);
 		const quit = () => {
 			window.alert("已退出登录!");
-			console.log("登出成功,过期时间: ", new Date().toLocaleString());
+			// console.log("登出成功,过期时间: ", new Date().toLocaleString());
 			router.push({ name: "home" });
 			storage.clear(); // 清除所有有效信息
 			haslogin.value = false;
@@ -95,25 +95,22 @@ export default {
 			);
 		});
 
+        const refresh = () => {
+			username.value = localStorage.getItem("username_blog");
+        }
+
 		return {
 			username,
 			haslogin,
+            refresh,
 			homePage,
 			quit,
 		};
-	},
-
-	methods: {
-		refresh() {
-			this.username = localStorage.getItem("username_blog");
-		},
-	},
+	}
 };
 </script>
 
 <style scoped>
-/* 样式来源: https://www.runoob.com/css/css-dropdowns.html* /
-/* 下拉按钮样式 */
 .dropbtn {
 	width: 10vw;
 	background-color: mediumslateblue;
@@ -155,11 +152,10 @@ export default {
 /* 在鼠标移上去后显示下拉菜单 */
 .dropdown:hover .dropdown-content {
 	display: block;
+    background-color: lightblue;
+    z-index: 10;
 }
-/* 当下拉内容显示后修改下拉按钮的背景颜色 */
-.dropdown:hover .dropbtn {
-	background-color: darkslateblue;
-}
+
 </style>
 
 <style scoped>
@@ -175,7 +171,7 @@ export default {
 
 .grid-1 {
 	display: grid;
-	grid-template-columns: 8fr 2fr;
+	grid-template-columns: 12fr 2fr;
 }
 
 .login-link {

frontend/src/components/CommentView.vue

@@ -60,7 +60,6 @@ export default {
 	name: "CommentView",
     props: {
         article: {
-            type: Object,
             required: true,
         }
     },
@@ -102,7 +101,6 @@ export default {
         };
 
         const replyTo = (comment) => {
-            console.log(comment);
             parentId.value = comment.id;
             placeholder.value = '对' + comment.author.username + '说';
         };

frontend/src/utils/authorization.js

@@ -51,7 +51,7 @@ const authorization = async () => {
         // console.log('authorization exp');
     }
 
-    console.log('authorization done');
+    // console.log('authorization done');
     return [haslogin, username];
 }
 

frontend/src/views/ArticleDetailView.vue

@@ -36,7 +36,7 @@ import BlogHeader from "@/components/BlogHeader.vue";
 import BlogFooter from "@/components/BlogFooter.vue";
 import CommentView from "@/components/CommentView.vue";
 import $ from "jquery";
-import { ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import { useRoute } from "vue-router";
 
 export default {
@@ -47,34 +47,40 @@ export default {
 		CommentView,
 	},
 	setup() {
-		let article = ref(  );
+		let article = ref(null); //记住这里要有初始值
 		const route = useRoute(); // 用来解析路由动态参数:id
-		$.ajax({
-			url: "http://127.0.0.1:6789/api/article/" + route.params.id,
-			type: "GET",
-			success(resp) {
-				article.value = resp;
-			},
-			error(resp) {
-				console.log(resp);
-			},
+
+		onMounted(() => {
+			$.ajax({
+				url: "http://127.0.0.1:6789/api/article/" + route.params.id,
+				type: "GET",
+				success(resp) {
+					article.value = resp;
+				}
+			});
 		});
 
 		const formatted_time = (iso_date_string) => {
 			const date = new Date(iso_date_string);
 			return date.toLocaleDateString();
 		};
+        // vue3中使用computed
+        // 动态计算用户是否为管理员身份
+        let isSuperUser = computed(()=> {
+            return localStorage.getItem("is_superuser_blog") === "true";
+        })
 
 		return {
 			article,
 			formatted_time,
+            isSuperUser,
 		};
 	},
-	computed: {
-		isSuperUser() {
-			return localStorage.getItem("is_superuser_blog") === "true";
-		},
-	},
+	// computed: {
+	// 	isSuperUser() {
+	// 		return localStorage.getItem("is_superuser_blog") === "true";
+	// 	},
+	// },
 };
 </script>
 

frontend/src/views/ArticleEdit.vue

@@ -20,6 +20,18 @@
 						{{ 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">
@@ -79,6 +91,8 @@ export default {
 		let articleID = ref(null);
 		// 所有分类
 		let categories = ref([]);
+		// 一个新分类
+		let newCategory = ref("");
 
 		const route = useRoute();
 		const router = useRouter();
@@ -107,7 +121,6 @@ export default {
 					selectedCategory.value = data.category;
 					tags.value = data.tags.join(",");
 					articleID.value = data.id;
-					console.log(tags.value);
 				},
 			});
 		});
@@ -150,10 +163,6 @@ export default {
 						body: body.value,
 					};
 
-					data.category_id = selectedCategory.value
-						? selectedCategory.value.id
-						: null;
-
 					// 标签预处理
 					data.tags = tags.value
 						// 用逗号分隔标签
@@ -163,7 +172,34 @@ export default {
 						// 剔除长度为零的无效标签
 						.filter((x) => x.charAt(0) !== "");
 
-					const token = localStorage.getItem("access_blog");
+
+					// 创建新的分类
+					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;
+							},
+
+						});
+					}
+
+					data.category_id = selectedCategory.value
+						? selectedCategory.value.id
+						: null;
+
+
 					$.ajax({
 						url:
 							"http://127.0.0.1:6789/api/article/" +
@@ -171,10 +207,10 @@ export default {
 							"/",
 						type: "PUT",
 						dataType: "json", // 传入json数据，需要写这三行
-                        contentType:"application/json",
+						contentType: "application/json",
 						data: JSON.stringify(data),
 						headers: {
-							Authorization: "Bearer " + token,
+							Authorization: "Bearer " + localStorage.getItem("access_blog"),
 						},
 						success(resp) {
 							router.push({
@@ -231,6 +267,7 @@ export default {
 			submit,
 			chooseCategory,
 			deleteArticle,
+			newCategory,
 		};
 	},
 };
@@ -272,4 +309,10 @@ button {
 	border-radius: 5px;
 	width: 60px;
 }
+
+.newCategory {
+	font-size: large;
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
 </style>

frontend/src/views/LoginView.vue

@@ -19,13 +19,17 @@
 						type="password"
 						v-model="password"
 						placeholder="输入密码"
-                        autocomplete="true"
+						autocomplete="true"
 					/>
 				</div>
 
 				<div class="form-elem">
 					<button v-on:click.prevent="login">登录</button>
 				</div>
+
+                <div v-if="!haslogin">
+                    <div class="error">{{error_msg}}</div>
+                </div>
 			</form>
 		</div>
 	</div>
@@ -38,7 +42,7 @@ import BlogHeader from "@/components/BlogHeader.vue";
 import BlogFooter from "@/components/BlogFooter.vue";
 import $ from "jquery";
 import router from "@/router/index";
-import { useStore } from 'vuex';
+import { useStore } from "vuex";
 
 export default {
 	name: "LoginView",
@@ -47,12 +51,11 @@ export default {
 		BlogFooter,
 	},
 	setup() {
-        
 		let username = ref("");
 		let password = ref("");
-
-        const store = useStore();
-
+        let error_msg = ref("");
+        let haslogin = ref(false); // 默认未登录
+		const store = useStore();
 		const login = () => {
 			$.ajax({
 				url: "http://127.0.0.1:6789/api/token/",
@@ -62,37 +65,51 @@ export default {
 					password: password.value,
 				},
 				success(resp) {
-                    // 将token保存到localStorage
-                    const storage = localStorage;
-                    const current = (new Date()).getTime();
-                    const expiredTime = current + 24*3600*1000;
-                    storage.setItem('access_blog', resp.access);
-                    storage.setItem('refresh_blog', resp.refresh);
-                    storage.setItem('expired_time', expiredTime);
-                    storage.setItem('username_blog', username.value);
-                    $.ajax({
-                        url: 'http://127.0.0.1:6789/api/user/' + username.value + '/',
-                        type: 'GET',
-                        success(resp){
-                            // 保存该用户是否为管理员
-                            storage.setItem("is_superuser_blog",resp.is_superuser);
-                            store.commit("updateIsSuperUser",JSON.parse(storage.getItem("is_superuser_blog")));
-                            console.log(store.state);
-                        }
-                    });
+					// 将token保存到localStorage
+					const storage = localStorage;
+					const current = new Date().getTime();
+					const expiredTime = current + 24 * 3600 * 1000;
+					storage.setItem("access_blog", resp.access);
+					storage.setItem("refresh_blog", resp.refresh);
+					storage.setItem("expired_time", expiredTime);
+					storage.setItem("username_blog", username.value);
+					$.ajax({
+						url:
+							"http://127.0.0.1:6789/api/user/" +
+							username.value +
+							"/",
+						type: "GET",
+						success(resp) {
+                            // 清除错误信息
+                            error_msg.value = "";
+                            // 登录成功
+                            haslogin.value = true;
+							// 保存该用户是否为管理员
+							storage.setItem(
+								"is_superuser_blog",
+								resp.is_superuser
+							);
+							store.commit(
+								"updateIsSuperUser",
+								JSON.parse(storage.getItem("is_superuser_blog"))
+							);
+						},
+					});
 
-                    console.log("登录时间: ",new Date().toLocaleString());
 					router.push({ name: "home" });
 				},
-				error(resp) {
-					console.log(resp);
-				},
+                error(resp) {
+                    error_msg.value = resp.responseText;
+                    haslogin.value = false;
+                }
 			});
 		};
 
 		return {
 			username,
 			password,
+            error_msg,
+            haslogin,
 			login,
 		};
 	},
@@ -129,4 +146,10 @@ button {
 span {
 	font-weight: bold;
 }
+
+.error {
+    color: red;
+    font-size: 20px;
+    font-weight: bold;
+}
 </style>

frontend/src/views/UserCenterView.vue

@@ -28,7 +28,7 @@
 
 			<div class="form-elem">
 				<button
-					v-on:click.prevent="showingDeleteAlert=true"
+					v-on:click.prevent="showingDeleteAlert = true"
 					class="delete-btn"
 				>
 					删除用户
@@ -53,55 +53,54 @@ import BlogHeader from "@/components/BlogHeader.vue";
 import BlogFooter from "@/components/BlogFooter.vue";
 import authorization from "@/utils/authorization";
 import $ from "jquery";
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 const storage = localStorage;
 export default {
 	name: "UserCenter",
 	components: { BlogHeader, BlogFooter },
-	data: function () {
-		return {
-			username: "",
-			password: "",
-			token: "",
-			showingDeleteAlert: false,
-		};
-	},
-	mounted() {
-		this.username = storage.getItem("username_blog");
-	},
-	methods: {
-		confirmDelete() {
-			const that = this;
+	setup() {
+		let username = ref("");
+		let password = ref("");
+		let token = ref("");
+		let showingDeleteAlert = ref(false); 
+		const router = useRouter();
+		const header = ref(null); // 使用ref获取dom元素
+
+		const confirmDelete = () => {
 			authorization().then((response) => {
 				if (response[0]) {
 					// 获取令牌
-					that.token = storage.getItem("access_blog");
-                    $.ajax({
-                        url: 'http://127.0.0.1:6789/api/user/' + that.username + '/',
-                        type: 'DELETE',
-                        headers: {
-                             Authorization: "Bearer " + that.token 
-                        },
-                        success(resp) {
-                            console.log(resp);
-                            storage.clear();
-							that.$router.push({ name: "home" });
-                        }
-                    })
+					token.value = storage.getItem("access_blog");
+					$.ajax({
+						url:
+							"http://127.0.0.1:6789/api/user/" +
+							username.value +
+							"/",
+						type: "DELETE",
+						headers: {
+							Authorization: "Bearer " + token.value,
+						},
+						success() {
+							storage.clear();
+							router.push({ name: "home" });
+						},
+					});
 				}
 			});
-		},
-		changeInfo() {
-			const that = this;
+		};
+
+		const changeInfo = () => {
 			authorization().then((response) => {
 				if (response[0] === false) {
 					window.alert("登录已过期, 请重新登录!");
 					storage.clear();
-					that.$router.push({ name: "login" });
+					router.push({ name: "login" });
 					return;
 				}
 				// 密码不能少于6位
 
-				if (that.password.length >= 0 && that.password.length < 6) {
+				if (password.value.length >= 0 && password.value.length < 6) {
 					window.alert("密码太短了");
 					return;
 				}
@@ -110,33 +109,47 @@ export default {
 				const oldName = storage.getItem("username_blog");
 				// 表单数据
 				let data = {};
-				if (that.username !== "") {
-					data.username = that.username;
+				if (username.value !== "") {
+					data.username = username.value;
 				}
-				data.password = that.password;
-				that.token = storage.getItem("access_blog");
+				data.password = password.value;
+				token.value = storage.getItem("access_blog");
 				// 修改用户名或密码
 				$.ajax({
 					url: "http://127.0.0.1:6789/api/user/" + oldName + "/",
 					type: "PATCH",
 					data: data,
 					headers: {
-						Authorization: "Bearer " + that.token,
+						Authorization: "Bearer " + token.value,
 					},
 					success(resp) {
 						window.alert("修改成功");
 						const name = resp.username;
 						storage.setItem("username_blog", name);
 						// 跳转到用户界面
-						that.$router.push({
+						router.push({
 							name: "UserCenter",
 							params: { username: name },
 						});
-						that.$refs.header.refresh();
+						header.value.refresh();
 					},
 				});
 			});
-		},
+		};
+
+		onMounted(() => {
+			username.value = storage.getItem("username_blog");
+		});
+
+		return {
+			username,
+			password,
+			token,
+			showingDeleteAlert,
+			confirmDelete,
+			changeInfo,
+			header,
+		};
 	},
 };
 </script>