代码拉取完成，页面将自动刷新
同步操作将从 huyi612/hmdp-web 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>黑马点评</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="./css/element.css">
<link href="./css/main.css" rel="stylesheet">
<link href="./css/info.css" rel="stylesheet">
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<div class="header">
<div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
<div class="header-title">个人主页 </div>
</div>
<div class="basic">
<div class="basic-icon">
<img :src="user.icon || '/imgs/icons/default-icon.png'" alt="">
</div>
<div class="basic-info">
<div class="name">{{user.nickName}}</div>
<span>杭州</span>
<div class="edit-btn" @click="toEdit">
编辑资料
</div>
</div>
<div class="logout-btn" @click="logout">
退出登录
</div>
</div>
<div class="introduce">
<span v-if="info.introduce"></span>
<span v-else>添加个人简介，让大家更好的认识你 <i class="el-icon-edit"></i></span>
</div>
<div class="content">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="笔记" name="1">
<div v-for="b in blogs" :key="b.id" class="blog-item">
<div class="blog-img"><img :src="b.images.split(',')[0]" alt=""></div>
<div class="blog-info">
<div class="blog-title">{{b.title}}</div>
<div class="blog-liked"><img src="/imgs/thumbup.png" alt=""> {{b.liked}}</div>
<div class="blog-comments"><i class="el-icon-chat-dot-round"></i> {{b.comments}}</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="评价" name="2">评价</el-tab-pane>
<el-tab-pane label="粉丝(0)" name="3">粉丝(0)</el-tab-pane>
<el-tab-pane label="关注(0)" name="4">关注(0)</el-tab-pane>
</el-tabs>
</div>
<foot-bar :active-btn="4"></foot-bar>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script src="./js/footer.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
user: "",
activeName: "1",
info: {},
blogs: []
},
created() {
this.queryUser();
},
methods: {
queryBlogs() {
axios.get("/blog/of/me")
.then(({ data }) => this.blogs = data)
.catch(this.$message.error)
},
queryUser() {
// 查询用户信息
axios.get("/user/me")
.then(({ data }) => {
// 保存用户
this.user = data;
// 查询用户详情
this.queryUserInfo();
// 查询用户笔记
this.queryBlogs();
})
.catch(err => {
location.href = "login.html"
})
},
goBack() {
history.back();
},
queryUserInfo() {
axios.get("/user/info/" + this.user.id)
.then(({ data }) => {
if (!data) {
return
}
// 保存用户详情
this.info = data;
// 保存到本地
sessionStorage.setItem("userInfo", JSON.stringify(data))
})
.catch(err => {
this.$message.error(err);
})
},
toEdit() {
location.href = 'info-edit.html'
},
logout() {
axios.post("/user/logout")
.then(() => {
// 清理session
sessionStorage.removeItem("token")
// 跳转
location.href = "/"
})
.catch(this.$message.error)
},
handleClick() {
}
},
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手