drf_vue_blog/frontend/src/views/ArticleEdit.vue

<template>
	<BlogHeader />
	<div id="article-create">
		<h3>更新文章</h3>
		<form>
			<div class="form-elem">
				<span>标题：</span>
				<input v-model="title" type="text" placeholder="输入标题" />
			</div>

			<div class="form-elem">
				<span>分类：</span>
				<span v-for="category in categories" :key="category.id">
					<!--样式也可以通过 :style 绑定-->
					<button
						class="category-btn"
						:style="categoryStyle(category)"
						@click.prevent="chooseCategory(category)"
					>
						{{ category.title }}
					</button>
				</span>
			</div>

			<div class="form-elem">
				<span>标签：</span>
				<input
					v-model="tags"
					type="text"
					placeholder="输入标签，用逗号分隔"
				/>
			</div>

			<div class="form-elem">
				<div style="margin-bottom: 10px">正文：</div>
				<textarea
					v-model="body"
					placeholder="输入正文"
					rows="20"
					cols="100"
				></textarea>
			</div>

			<div class="form-elem">
				<button v-on:click.prevent="submit">提交</button>
				<button
					v-on:click.prevent="deleteArticle"
					style="background-color: darkred; margin-left: 30px"
				>
					删除
				</button>
			</div>
		</form>
	</div>
	<BlogFooter />
</template>

<script>
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 { useRoute, useRouter } from "vue-router";

export default {
	name: "ArticleEdit",
	components: { BlogHeader, BlogFooter },
	setup() {
		// 文章标题
		let title = ref("");
		// 文章内容
		let body = ref("");
		// 文章的分类
		let selectedCategory = ref(null);
		// 标签
		let tags = ref("");
		// 文章id
		let articleID = ref(null);
		// 所有分类
		let categories = ref([]);

		const route = useRoute();
		const router = useRouter();

		// 页面初始化时获取所有分类

		onMounted(() => {
			$.ajax({
				url: "http://127.0.0.1:6789/api/category",
				type: "GET",
				success(resp) {
					categories.value = resp;
				},
			});

			$.ajax({
				url:
					"http://127.0.0.1:6789/api/article/" +
					route.params.id +
					"/",
				type: "GET",
				success(resp) {
					const data = resp;
					title.value = data.title;
					body.value = data.body;
					selectedCategory.value = data.category;
					tags.value = data.tags.join(",");
					articleID.value = data.id;
					console.log(tags.value);
				},
			});
		});

		// 根据分类是否被选中，按钮的颜色发生变化
		const categoryStyle = (category) => {
			if (
				selectedCategory.value !== null &&
				category.id === selectedCategory.value.id
			) {
				return {
					backgroundColor: "black",
				};
			}
			return {
				backgroundColor: "lightgrey",
				color: "black",
			};
		};

		// 选取分类
		const chooseCategory = (category) => {
			// 如果点击已选取的分类，则将 selectedCategory 置空
			if (
				selectedCategory.value !== null &&
				selectedCategory.value.id === category.id
			) {
				selectedCategory.value = null;
			} else {
				selectedCategory.value = category;
			}
		};

		// 点击提交按钮
		const submit = () => {
			authorization().then((response) => {
				if (response[0]) {
					let data = {
						title: title.value,
						body: body.value,
					};

					data.category_id = selectedCategory.value
						? selectedCategory.value.id
						: null;

					// 标签预处理
					data.tags = tags.value
						// 用逗号分隔标签
						.split(/[,，]/)
						// 剔除标签首尾空格
						.map((x) => x.trim())
						// 剔除长度为零的无效标签
						.filter((x) => x.charAt(0) !== "");

					const token = localStorage.getItem("access_blog");
					$.ajax({
						url:
							"http://127.0.0.1:6789/api/article/" +
							articleID.value +
							"/",
						type: "PUT",
						dataType: "json", // 传入json数据，需要写这三行
                        contentType:"application/json",
						data: JSON.stringify(data),
						headers: {
							Authorization: "Bearer " + token,
						},
						success(resp) {
							router.push({
								name: "detail",
								params: { id: resp.id },
							});
						},
						error() {
							window.alert("令牌过期,请重新登录!");
						},
					});
				} else {
					window.alert("令牌过期,请重新登录!");
				}
			});
		};

		const deleteArticle = () => {
			authorization().then((response) => {
				const token = localStorage.getItem("access_blog");
				if (response[0]) {
					$.ajax({
						url:
							"http://127.0.0.1:6789/api/article/" +
							articleID.value +
							"/",
						type: "DELETE",
						headers: {
							Authorization: "Bearer " + token,
						},
						success() {
							router.push({
								name: "home",
							});
						},
						error() {
							window.alert("令牌过期,请重新登录!");
						},
					});
				} else {
					alert("令牌过期，请重新登录。");
				}
			});
		};

		return {
			categories,
			title,
			body,
			tags,
			selectedCategory,
			categoryStyle,
			articleID,
			submit,
			chooseCategory,
			deleteArticle,
		};
	},
};
</script>

<style scoped>
.category-btn {
	margin-right: 10px;
}
#article-create {
	text-align: center;
	font-size: large;
}
form {
	text-align: left;
	padding-left: 100px;
	padding-right: 10px;
	padding-bottom: 50px;
}
.form-elem {
	padding: 10px;
}
.form-elem-1 {
	display: inline-block;
	padding: 10px;
}
input {
	height: 25px;
	padding-left: 10px;
	width: 50%;
}
button {
	height: 35px;
	cursor: pointer;
	border: none;
	outline: none;
	background: steelblue;
	color: whitesmoke;
	border-radius: 5px;
	width: 60px;
}
</style>