parent
74808ae9fa
commit
932ed5ed5a
10 changed files with 473 additions and 127 deletions
Binary file not shown.
@ -0,0 +1,96 @@ |
||||
<template> |
||||
<div class="search"> |
||||
<form> |
||||
<input |
||||
v-model="searchText" |
||||
type="text" |
||||
placeholder="输入搜索内容..." |
||||
/> |
||||
<button v-on:click.prevent="searchArticles"></button> |
||||
</form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { ref } from "vue"; |
||||
import router from "@/router/index"; |
||||
|
||||
export default { |
||||
name: "SearchButton", |
||||
setup() { |
||||
let searchText = ref(""); |
||||
const searchArticles = () => { |
||||
const text = searchText.value.trim(); |
||||
if (text.charAt(0) !== "") { |
||||
router.push({ name: "home", query: { search: text } }); |
||||
} |
||||
}; |
||||
return { |
||||
searchText, |
||||
searchArticles, |
||||
}; |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.search { |
||||
padding-top: 22px; |
||||
} |
||||
|
||||
/* 搜索框样式 */ |
||||
* { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
form { |
||||
position: relative; |
||||
width: 20vw; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
input, |
||||
button { |
||||
outline: none; |
||||
} |
||||
|
||||
input { |
||||
border-color: gray; |
||||
width: 100%; |
||||
height: 30px; |
||||
padding-left: 13px; |
||||
padding-right: 46px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
button { |
||||
border: none; |
||||
height: 30px; |
||||
width: 30px; |
||||
cursor: pointer; |
||||
position: absolute; |
||||
} |
||||
|
||||
.search input { |
||||
border: 2px solid gray; |
||||
border-radius: 5px; |
||||
background: transparent; |
||||
top: 0; |
||||
right: 0; |
||||
} |
||||
|
||||
.search button { |
||||
background: gray; |
||||
border-radius: 0 5px 5px 0; |
||||
width: 45px; |
||||
top: 0; |
||||
right: 0; |
||||
} |
||||
|
||||
.search button:before { |
||||
content: "搜索"; |
||||
font-size: 13px; |
||||
color: white; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,59 @@ |
||||
import $ from 'jquery'; |
||||
|
||||
const authorization = async () => { |
||||
const storage = localStorage; |
||||
|
||||
let haslogin = false; |
||||
// 用户名
|
||||
let username = storage.getItem('username_blog'); |
||||
// 过期时间
|
||||
const expired_time = Number(storage.getItem("expired_time")); |
||||
console.log("expired_time ",new Date(expired_time).toLocaleString()); |
||||
// 当前时间
|
||||
const current = new Date().getTime(); |
||||
// 刷新令牌
|
||||
const refreshToken = storage.getItem("refresh_blog"); |
||||
// 未过期
|
||||
if (expired_time > current) { |
||||
haslogin = true; |
||||
console.log('authorization success'); |
||||
} |
||||
// 初始tokeng过期,则由刷新令牌申请新的token
|
||||
else if (refreshToken !== null) { |
||||
try { |
||||
$.ajax({ |
||||
url: "http://127.0.0.1:6789/api/token/refresh/", |
||||
type: "POST", |
||||
async: false, |
||||
data: { |
||||
refresh: refreshToken, |
||||
}, |
||||
success(resp) { |
||||
const nextExpiredTime = new Date().getTime() + 60000; |
||||
storage.setItem("access_blog", resp.access); |
||||
storage.removeItem("refresh_blog"); // 移除刷新令牌
|
||||
console.log( |
||||
"令牌刷新时间: ", |
||||
new Date().toLocaleString() |
||||
); |
||||
storage.setItem("expired_time", nextExpiredTime); |
||||
haslogin = true; |
||||
}, |
||||
}); |
||||
}catch(err){ |
||||
storage.clear(); |
||||
haslogin = false; |
||||
console.log('authorization err'); |
||||
} |
||||
|
||||
} else { |
||||
storage.clear(); // 清除所有有效信息
|
||||
haslogin = false; |
||||
console.log('authorization exp'); |
||||
} |
||||
|
||||
console.log('authorization done'); |
||||
return [haslogin, username]; |
||||
} |
||||
|
||||
export default authorization; |
||||
@ -0,0 +1,205 @@ |
||||
<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(function (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(function (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> |
||||
Loading…
Reference in new issue