From d3886ae21d2a8fcb9b9a89e01a8f33d615782900 Mon Sep 17 00:00:00 2001
From: barney <15270405776@163.com>
Date: Mon, 3 Oct 2022 00:40:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0readme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                |  10 +-
 frontend/src/components/ArticleList.vue  | 101 ++++++++---------
 frontend/src/components/BlogHeader.vue   |  19 ++--
 frontend/src/components/CommentView.vue  | 131 ++++++++++++-----------
 frontend/src/router/index.js             |   2 +-
 frontend/src/store/index.js              |   4 +-
 frontend/src/utils/authorization.js      |   6 +-
 frontend/src/views/ArticleCreate.vue     |  64 ++++++-----
 frontend/src/views/ArticleDetailView.vue |  14 +--
 frontend/src/views/ArticleEdit.vue       |  25 +++--
 frontend/src/views/LoginView.vue         |  36 +++----
 frontend/src/views/RegisterView.vue      |   4 +-
 frontend/src/views/UserCenterView.vue    |   2 +-
 13 files changed, 207 insertions(+), 211 deletions(-)

diff --git a/README.md b/README.md
index d32a7af..76bec57 100644
--- a/README.md
+++ b/README.md
@@ -2,20 +2,20 @@
 
 #### 1、博客首页展示
 
-![image-20221003002818644](C:\Users\15270\AppData\Roaming\Typora\typora-user-images\image-20221003002818644.png)
+![博客首页](https://cdn.jsdelivr.net/gh/JokerZhang66/images@master//img/image-20221003002818644.png)
 
 #### 2.发布文章界面
 
-![image-20221003002550725](C:\Users\15270\AppData\Roaming\Typora\typora-user-images\image-20221003002550725.png)
+![](https://cdn.jsdelivr.net/gh/JokerZhang66/images@master//img/image-20221003002550725.png)
 
 #### 3.登录、注册界面
 
-![image-20221003002956157](C:\Users\15270\AppData\Roaming\Typora\typora-user-images\image-20221003002956157.png)
+![](https://cdn.jsdelivr.net/gh/JokerZhang66/images@master//img/image-20221003002956157.png)
 
 #### 4.用户管理界面
 
-![image-20221003002845601](C:\Users\15270\AppData\Roaming\Typora\typora-user-images\image-20221003002845601.png)
+![](https://cdn.jsdelivr.net/gh/JokerZhang66/images@master//img/image-20221003002845601.png)
 
 #### 5.更新文章界面
 
-![image-20221003003047933](C:\Users\15270\AppData\Roaming\Typora\typora-user-images\image-20221003003047933.png)
\ No newline at end of file
+![](https://cdn.jsdelivr.net/gh/JokerZhang66/images@master//img/image-20221003003047933.png)
\ No newline at end of file
diff --git a/frontend/src/components/ArticleList.vue b/frontend/src/components/ArticleList.vue
index 89e1d58..85e1754 100644
--- a/frontend/src/components/ArticleList.vue
+++ b/frontend/src/components/ArticleList.vue
@@ -1,54 +1,50 @@
 <template>
-		<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>
+	<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 } }"
-					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>
+					<div class="article-title">{{ article.title }}</div>
 				</router-link>
-			</div>
-		</div>
-    <!-- 实现分页 -->
-		<div id="paginator">
-			<span v-if="is_page_exists('previous')">
-				<router-link :to="get_path('previous')"> Prev </router-link>
-			</span>
-			<span class="current-page">
-				{{ get_page_param("current") }}
-			</span>
-			<span v-if="is_page_exists('next')">
-				<router-link :to="get_path('next')"> Next </router-link>
-			</span>
+
+				<div>
+					{{ formatted_time(article.created) }}
+				</div>
+			</router-link>
 		</div>
+	</div>
+	<!-- 实现分页 -->
+	<div id="paginator">
+		<span v-if="is_page_exists('previous')">
+			<router-link :to="get_path('previous')"> Prev </router-link>
+		</span>
+		<span class="current-page">
+			{{ get_page_param("current") }}
+		</span>
+		<span v-if="is_page_exists('next')">
+			<router-link :to="get_path('next')"> Next </router-link>
+		</span>
+	</div>
 </template>
 
 <script>
@@ -157,7 +153,7 @@ export default {
 			if (article.avatar) {
 				return article.avatar.content;
 			} else {
-                // 默认头像
+				// 默认头像
 				return "http://127.0.0.1:6789/media/avatar/20221002/Blog.jpg";
 			}
 		};
@@ -200,7 +196,6 @@ export default {
 </script>
 
 <style scoped>
-
 #articles {
 	padding: 0.4rem;
 }
@@ -210,25 +205,23 @@ export default {
 	border-radius: 10px;
 	box-shadow: darkslategrey 0 0 12px;
 	user-select: none;
-    
 }
 .image-container {
 	width: 100%;
-    display: grid;
-    place-items: center;
-
+	display: grid;
+	place-items: center;
 }
 
 .article-info {
-	width:90%;
+	width: 90%;
 	border-radius: 10px;
 	background-color: lightgray;
 	display: grid;
 	place-items: start start;
 	padding-left: 10px;
 	user-select: none;
-    position: relative;
-    left: 20px;
+	position: relative;
+	left: 20px;
 }
 
 .article-info:hover {
diff --git a/frontend/src/components/BlogHeader.vue b/frontend/src/components/BlogHeader.vue
index a106740..62a8db4 100644
--- a/frontend/src/components/BlogHeader.vue
+++ b/frontend/src/components/BlogHeader.vue
@@ -90,23 +90,23 @@ export default {
 		});
 
 		onMounted(() => {
-			authorization().then(
-				(data) => {[haslogin.value, username.value] = data}
-			);
+			authorization().then((data) => {
+				[haslogin.value, username.value] = data;
+			});
 		});
 
-        const refresh = () => {
+		const refresh = () => {
 			username.value = localStorage.getItem("username_blog");
-        }
+		};
 
 		return {
 			username,
 			haslogin,
-            refresh,
+			refresh,
 			homePage,
 			quit,
 		};
-	}
+	},
 };
 </script>
 
@@ -152,10 +152,9 @@ export default {
 /* 在鼠标移上去后显示下拉菜单 */
 .dropdown:hover .dropdown-content {
 	display: block;
-    background-color: lightblue;
-    z-index: 10;
+	background-color: lightblue;
+	z-index: 10;
 }
-
 </style>
 
 <style scoped>
diff --git a/frontend/src/components/CommentView.vue b/frontend/src/components/CommentView.vue
index 292c89e..166aa54 100644
--- a/frontend/src/components/CommentView.vue
+++ b/frontend/src/components/CommentView.vue
@@ -52,78 +52,79 @@
 </template>
 
 <script>
-import $ from 'jquery';
-import authorization from '@/utils/authorization'
-import { ref, watchEffect } from 'vue';
+import $ from "jquery";
+import authorization from "@/utils/authorization";
+import { ref, watchEffect } from "vue";
 
 export default {
 	name: "CommentView",
-    props: {
-        article: {
-            required: true,
-        }
-    },
+	props: {
+		article: {
+			required: true,
+		},
+	},
 	setup(props) {
-        // 所有评论
-        let comments = ref([]);
-        // 评论控件绑定的文本和占位符
-        let message = ref('');
-        let placeholder = ref('说点啥吧...');
-        // 评论的评论
-        let parentId = ref(null);
-        // 发表评论
-        const submit = () => {
-            authorization().then((response) => {
-                if (response[0]) {
-                    $.ajax({
-                        url: 'http://127.0.0.1:6789/api/comment/',
-                        type: 'POST',
-                        data: {
-                            content: message.value,
-                            article_id: props.article.id,
-                            parent_id: parentId.value,
+		// 所有评论
+		let comments = ref([]);
+		// 评论控件绑定的文本和占位符
+		let message = ref("");
+		let placeholder = ref("说点啥吧...");
+		// 评论的评论
+		let parentId = ref(null);
+		// 发表评论
+		const submit = () => {
+			authorization().then((response) => {
+				if (response[0]) {
+					$.ajax({
+						url: "http://127.0.0.1:6789/api/comment/",
+						type: "POST",
+						data: {
+							content: message.value,
+							article_id: props.article.id,
+							parent_id: parentId.value,
+						},
+						headers: {
+							authorization:
+								"Bearer " + localStorage.getItem("access_blog"),
+						},
+						success(resp) {
+							// 将新评论添加到顶部
+							comments.value.unshift(resp);
+							message.value = "";
+							window.alert("留言成功");
+						},
+					});
+				} else {
+					window.alert("请登录后再评论!");
+				}
+			});
+		};
 
-                        },
-                        headers: {
-                            authorization: "Bearer " + localStorage.getItem('access_blog')
-                        },
-                        success(resp) {
-                            // 将新评论添加到顶部
-                            comments.value.unshift(resp);
-                            message.value = '';
-                            window.alert("留言成功");
-                        }
-                    })
-                }else {
-                    window.alert("请登录后再评论!");
-                }
-            });
-        };
+		const replyTo = (comment) => {
+			parentId.value = comment.id;
+			placeholder.value = "对" + comment.author.username + "说";
+		};
 
-        const replyTo = (comment) => {
-            parentId.value = comment.id;
-            placeholder.value = '对' + comment.author.username + '说';
-        };
+		const formatted_time = (iso_date_string) => {
+			const date = new Date(iso_date_string);
+			return date.toLocaleDateString() + " " + date.toLocaleTimeString();
+		};
 
-        const formatted_time = (iso_date_string) => {
-            const date = new Date(iso_date_string);
-            return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
-        };
+		watchEffect(() => {
+			comments.value =
+				props.article !== null ? props.article.comments : [];
+		});
 
-        watchEffect(() => {
-            comments.value = props.article !== null ? props.article.comments : [];
-        }); 
-
-        return {
-            comments,
-            message,
-            placeholder,
-            parentId,
-            submit,
-            replyTo,
-            formatted_time,
-        }
-    },
+		return {
+			comments,
+			message,
+			placeholder,
+			parentId,
+			submit,
+			replyTo,
+			formatted_time,
+		};
+	},
 };
 </script>
 
@@ -144,7 +145,7 @@ button {
 	height: 25px;
 	background: lightslategray;
 	width: 40px;
-    margin-bottom: 40px;
+	margin-bottom: 40px;
 }
 .comments {
 	padding-top: 10px;
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 7bb97e8..bfdaac5 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -34,7 +34,7 @@ const routes = [
         component: UserCenter,
     },
     {
-        path : "/article/create/",
+        path: "/article/create/",
         name: "ArticleCreate",
         component: ArticleCreate,
     },
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index e42a22c..21fd44e 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -9,9 +9,9 @@ export default createStore({
 
     },
     mutations: {
-        updateIsLogin(state,islogin) {
+        updateIsLogin(state, islogin) {
             state.islogin = islogin;
-        },updateIsSuperUser(state, isSuperUser){
+        }, updateIsSuperUser(state, isSuperUser) {
             state.isSuperUser = isSuperUser;
         }
     },
diff --git a/frontend/src/utils/authorization.js b/frontend/src/utils/authorization.js
index 4a667fd..b9fea80 100644
--- a/frontend/src/utils/authorization.js
+++ b/frontend/src/utils/authorization.js
@@ -28,7 +28,7 @@ const authorization = async () => {
                     refresh: refreshToken,
                 },
                 success(resp) {
-                    const nextExpiredTime = new Date().getTime() + 24*3600*1000;
+                    const nextExpiredTime = new Date().getTime() + 24 * 3600 * 1000;
                     storage.setItem("access_blog", resp.access);
                     storage.removeItem("refresh_blog"); // 移除刷新令牌
                     console.log(
@@ -39,12 +39,12 @@ const authorization = async () => {
                     haslogin = true;
                 },
             });
-        }catch(err){
+        } catch (err) {
             storage.clear();
             haslogin = false;
             // console.log('authorization err');
         }
-        
+
     } else {
         storage.clear(); // 清除所有有效信息
         haslogin = false;
diff --git a/frontend/src/views/ArticleCreate.vue b/frontend/src/views/ArticleCreate.vue
index fcee455..3665074 100644
--- a/frontend/src/views/ArticleCreate.vue
+++ b/frontend/src/views/ArticleCreate.vue
@@ -43,7 +43,7 @@
 			</div>
 
 			<div class="form-elem">
-				<div style="margin-bottom: 10px;">正文：</div>
+				<div style="margin-bottom: 10px">正文：</div>
 				<textarea
 					v-model="body"
 					placeholder="输入正文"
@@ -66,26 +66,26 @@ import BlogFooter from "@/components/BlogFooter.vue";
 import authorization from "@/utils/authorization";
 import $ from "jquery";
 import { onMounted } from "@vue/runtime-core";
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
 import { ref } from "vue";
 export default {
 	name: "ArticleCreate",
 	components: { BlogHeader, BlogFooter },
 	setup() {
-        // 文章标题
-		let title =  ref("");
+		// 文章标题
+		let title = ref("");
 		// 文章正文
-		let body =  ref("");
+		let body = ref("");
 		// 数据库中所有的分类
-		let categories =  ref([]);
+		let categories = ref([]);
 		// 选定的分类
-		let selectedCategory =  ref(null);
+		let selectedCategory = ref(null);
 		// 标签
 		let tags = ref("");
 		// 标题图 id
 		let avatarID = ref(null);
 
-        const router = useRouter();
+		const router = useRouter();
 
 		onMounted(() => {
 			// 页面初始化时获取所有分类
@@ -98,7 +98,7 @@ export default {
 			});
 		});
 
-        // 根据分类是否被选中，按钮的颜色发生变化
+		// 根据分类是否被选中，按钮的颜色发生变化
 		const categoryStyle = (category) => {
 			if (
 				selectedCategory.value !== null &&
@@ -127,25 +127,25 @@ export default {
 			}
 		};
 
-        const onFileChange = (e) => {
+		const onFileChange = (e) => {
 			// 将二进制文件数据添加到提交数据中
 			const file = e.target.files[0];
 			let formData = new FormData();
 			formData.append("content", file);
-           
+
 			$.ajax({
 				url: "http://127.0.0.1:6789/api/avatar/",
 				type: "POST",
 				data: formData,
-                processData: false,
-                contentType: false,
+				processData: false,
+				contentType: false,
 				headers: {
-					"Authorization":
+					Authorization:
 						"Bearer " + localStorage.getItem("access_blog"),
 				},
 				success(resp) {
 					avatarID.value = resp.id;
-				}
+				},
 			});
 		};
 
@@ -174,7 +174,7 @@ export default {
 						// 剔除长度为零的无效标签
 						.filter((x) => x.charAt(0) !== "");
 
-                    data.avatar_id = avatarID.value;
+					data.avatar_id = avatarID.value;
 
 					// 将发表文章请求发送至接口
 					// 成功后前往详情页面
@@ -183,8 +183,8 @@ export default {
 						url: "http://127.0.0.1:6789/api/article/",
 						type: "POST",
 						data: JSON.stringify(data),
-                        contentType: 'application/json',
-                        dataType: 'json',
+						contentType: "application/json",
+						dataType: "json",
 						headers: {
 							Authorization: "Bearer " + token,
 						},
@@ -199,22 +199,20 @@ export default {
 					window.alert("令牌过期，请重新登录。");
 				}
 			});
-        }
-
-
-        return {
-            categories,
-            title,
-            body,
-            avatarID,
-            tags,
-            selectedCategory,
-            categoryStyle,
-            chooseCategory,
-            onFileChange,
-            submit,
-        }
+		};
 
+		return {
+			categories,
+			title,
+			body,
+			avatarID,
+			tags,
+			selectedCategory,
+			categoryStyle,
+			chooseCategory,
+			onFileChange,
+			submit,
+		};
 	},
 };
 </script>
diff --git a/frontend/src/views/ArticleDetailView.vue b/frontend/src/views/ArticleDetailView.vue
index 11457f0..a863bbf 100644
--- a/frontend/src/views/ArticleDetailView.vue
+++ b/frontend/src/views/ArticleDetailView.vue
@@ -56,7 +56,7 @@ export default {
 				type: "GET",
 				success(resp) {
 					article.value = resp;
-				}
+				},
 			});
 		});
 
@@ -64,16 +64,16 @@ export default {
 			const date = new Date(iso_date_string);
 			return date.toLocaleDateString();
 		};
-        // vue3中使用computed
-        // 动态计算用户是否为管理员身份
-        let isSuperUser = computed(()=> {
-            return localStorage.getItem("is_superuser_blog") === "true";
-        })
+		// vue3中使用computed
+		// 动态计算用户是否为管理员身份
+		let isSuperUser = computed(() => {
+			return localStorage.getItem("is_superuser_blog") === "true";
+		});
 
 		return {
 			article,
 			formatted_time,
-            isSuperUser,
+			isSuperUser,
 		};
 	},
 	// computed: {
diff --git a/frontend/src/views/ArticleEdit.vue b/frontend/src/views/ArticleEdit.vue
index 52216e0..890da13 100644
--- a/frontend/src/views/ArticleEdit.vue
+++ b/frontend/src/views/ArticleEdit.vue
@@ -21,7 +21,12 @@
 					</button>
 				</span>
 
-                <div v-if="selectedCategory !== null" style="margin-top:5px; color:red;">注:&nbsp;不选分类时可创建新分类!</div>
+				<div
+					v-if="selectedCategory !== null"
+					style="margin-top: 5px; color: red"
+				>
+					注:&nbsp;不选分类时可创建新分类!
+				</div>
 
 				<div class="newCategory" v-if="selectedCategory === null">
 					<div>创建新分类:&nbsp;</div>
@@ -172,7 +177,6 @@ export default {
 						// 剔除长度为零的无效标签
 						.filter((x) => x.charAt(0) !== "");
 
-
 					// 创建新的分类
 					if (
 						selectedCategory.value === null &&
@@ -181,17 +185,18 @@ export default {
 						$.ajax({
 							url: "http://127.0.0.1:6789/api/category/",
 							type: "post",
-                            async: false,
-                            data: {
-                                title: newCategory.value,
-                            },
+							async: false,
+							data: {
+								title: newCategory.value,
+							},
 							headers: {
-								Authorization: "Bearer " + localStorage.getItem("access_blog"),
+								Authorization:
+									"Bearer " +
+									localStorage.getItem("access_blog"),
 							},
 							success(resp) {
 								selectedCategory.value = resp;
 							},
-
 						});
 					}
 
@@ -199,7 +204,6 @@ export default {
 						? selectedCategory.value.id
 						: null;
 
-
 					$.ajax({
 						url:
 							"http://127.0.0.1:6789/api/article/" +
@@ -210,7 +214,8 @@ export default {
 						contentType: "application/json",
 						data: JSON.stringify(data),
 						headers: {
-							Authorization: "Bearer " + localStorage.getItem("access_blog"),
+							Authorization:
+								"Bearer " + localStorage.getItem("access_blog"),
 						},
 						success(resp) {
 							router.push({
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index d3cc39b..9724141 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -27,9 +27,9 @@
 					<button v-on:click.prevent="login">登录</button>
 				</div>
 
-                <div v-if="!haslogin">
-                    <div class="error">{{error_msg}}</div>
-                </div>
+				<div v-if="!haslogin">
+					<div class="error">{{ error_msg }}</div>
+				</div>
 			</form>
 		</div>
 	</div>
@@ -53,8 +53,8 @@ export default {
 	setup() {
 		let username = ref("");
 		let password = ref("");
-        let error_msg = ref("");
-        let haslogin = ref(false); // 默认未登录
+		let error_msg = ref("");
+		let haslogin = ref(false); // 默认未登录
 		const store = useStore();
 		const login = () => {
 			$.ajax({
@@ -80,10 +80,10 @@ export default {
 							"/",
 						type: "GET",
 						success(resp) {
-                            // 清除错误信息
-                            error_msg.value = "";
-                            // 登录成功
-                            haslogin.value = true;
+							// 清除错误信息
+							error_msg.value = "";
+							// 登录成功
+							haslogin.value = true;
 							// 保存该用户是否为管理员
 							storage.setItem(
 								"is_superuser_blog",
@@ -98,18 +98,18 @@ export default {
 
 					router.push({ name: "home" });
 				},
-                error(resp) {
-                    error_msg.value = resp.responseText;
-                    haslogin.value = false;
-                }
+				error(resp) {
+					error_msg.value = resp.responseText;
+					haslogin.value = false;
+				},
 			});
 		};
 
 		return {
 			username,
 			password,
-            error_msg,
-            haslogin,
+			error_msg,
+			haslogin,
 			login,
 		};
 	},
@@ -148,8 +148,8 @@ span {
 }
 
 .error {
-    color: red;
-    font-size: 20px;
-    font-weight: bold;
+	color: red;
+	font-size: 20px;
+	font-weight: bold;
 }
 </style>
diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue
index 0aad480..0db99c5 100644
--- a/frontend/src/views/RegisterView.vue
+++ b/frontend/src/views/RegisterView.vue
@@ -19,7 +19,7 @@
 						v-model="password"
 						type="password"
 						placeholder="请输入密码"
-                        autocomplete="true"
+						autocomplete="true"
 					/>
 				</div>
 
@@ -29,7 +29,7 @@
 						v-model="conform_password"
 						type="password"
 						placeholder="请再输入一次密码"
-                        autocomplete="true"
+						autocomplete="true"
 					/>
 				</div>
 
diff --git a/frontend/src/views/UserCenterView.vue b/frontend/src/views/UserCenterView.vue
index cae1871..60a4f34 100644
--- a/frontend/src/views/UserCenterView.vue
+++ b/frontend/src/views/UserCenterView.vue
@@ -63,7 +63,7 @@ export default {
 		let username = ref("");
 		let password = ref("");
 		let token = ref("");
-		let showingDeleteAlert = ref(false); 
+		let showingDeleteAlert = ref(false);
 		const router = useRouter();
 		const header = ref(null); // 使用ref获取dom元素