drf_vue_blog/frontend/src/views/UserCenterView.vue

<template>
	<BlogHeader ref="header" />
	<div id="user-center">
		<h3>更新资料信息</h3>
		<form>
			<div class="form-elem">
				<span>用户名：</span>
				<input
					v-model="username"
					type="text"
					placeholder="输入用户名"
				/>
			</div>

			<div class="form-elem">
				<span>新密码：</span>
				<input
					v-model="password"
					type="password"
					placeholder="输入密码"
					autocomplete="true"
				/>
			</div>

			<div class="form-elem">
				<button v-on:click.prevent="changeInfo">更新</button>
			</div>

			<div class="form-elem">
				<button
					v-on:click.prevent="showingDeleteAlert=true"
					class="delete-btn"
				>
					删除用户
				</button>
				<div :class="{ shake: showingDeleteAlert }">
					<button
						v-if="showingDeleteAlert"
						class="confirm-btn"
						@click.prevent="confirmDelete"
					>
						确定？
					</button>
				</div>
			</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";
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;
			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" });
                        }
                    })
				}
			});
		},
		changeInfo() {
			const that = this;
			authorization().then((response) => {
				if (response[0] === false) {
					window.alert("登录已过期, 请重新登录!");
					storage.clear();
					that.$router.push({ name: "login" });
					return;
				}
				// 密码不能少于6位

				if (that.password.length >= 0 && that.password.length < 6) {
					window.alert("密码太短了");
					return;
				}

				// 旧的用户名
				const oldName = storage.getItem("username_blog");
				// 表单数据
				let data = {};
				if (that.username !== "") {
					data.username = that.username;
				}
				data.password = that.password;
				that.token = storage.getItem("access_blog");
				// 修改用户名或密码
				$.ajax({
					url: "http://127.0.0.1:6789/api/user/" + oldName + "/",
					type: "PATCH",
					data: data,
					headers: {
						Authorization: "Bearer " + that.token,
					},
					success(resp) {
						window.alert("修改成功");
						const name = resp.username;
						storage.setItem("username_blog", name);
						// 跳转到用户界面
						that.$router.push({
							name: "UserCenter",
							params: { username: name },
						});
						that.$refs.header.refresh();
					},
				});
			});
		},
	},
};
</script>

<style scoped>
#user-center {
	text-align: center;
}

.form-elem {
	padding: 10px;
}

input {
	height: 25px;
	padding-left: 10px;
}

button {
	height: 35px;
	cursor: pointer;
	border: none;
	outline: none;
	background: gray;
	color: whitesmoke;
	border-radius: 5px;
	width: 250px;
}

.confirm-btn {
	width: 80px;
	background-color: darkorange;
}

.delete-btn {
	background-color: darkred;
	margin-bottom: 10px;
}

.shake {
	animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}

@keyframes shake {
	10%,
	90% {
		transform: translate3d(-1px, 0, 0);
	}
	20%,
	80% {
		transform: translate3d(2px, 0, 0);
	}
	30%,
	50%,
	70% {
		transform: translate3d(-4px, 0, 0);
	}
	40%,
	60% {
		transform: translate3d(4px, 0, 0);
	}
}
</style>