PeterAlbus
/
PeterAlbus_Blog
mirror of https://github.com/PeterAlbus/PeterAlbus_Blog.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix some bug

Browse Source
pangu
PeterAlbus 3 years ago
parent 95f26e2dd2
commit c9fee63458
4 changed files with 346 additions and 89 deletions
Show Stats Download Patch File Download Diff File

166
src/components/Comment.vue
Unescape Escape View File

@ -9,7 +9,7 @@
type="textarea"
placeholder="请友善交流，文明用语"
/>
<div>
<div style="display: flex;flex-direction: row;justify-content: right;align-items: center">
<el-checkbox v-model="hideMyself" label="1" size="small">匿名</el-checkbox>
<el-button
size="small" @click="addComment"
@ -17,26 +17,47 @@
type="primary" color="#63a35c">发布</el-button>
</div>
</div>
<el-scrollbar max-height="20vh">
<div v-for="item in comments" class="main-comment">
<el-scrollbar max-height="20vh" ref="scrollbarRef">
<div v-for="item in currentPageComments" class="main-comment">
<div class="comment-user">
<el-avatar :src="item.userAvatar" :size="30"></el-avatar>
<span style="padding: 0 10px 0 10px;display: flex;align-items: center">{{item.userUsername}}<el-tag :type="identityType(item.userIdentity)" effect="dark" size="small">{{ userIdentity(item.userIdentity) }}</el-tag></span>
<span style="padding: 0 10px 0 10px;display: flex;align-items: center">{{item.userUsername}}</span>
<el-tag :type="identityType(item.userIdentity)" effect="dark" size="small">{{ userIdentity(item.userIdentity) }}</el-tag>
</div>
<div style="padding: 10px 10px 10px 40px" class="comment-box">
<div style="width: 100%">{{item.commentContent}}</div>
</div>
<div class="comment-buttons">
<el-icon class="comment-button" @click="openComment(item,item)"><chat-line-square /></el-icon>
<div class="comment-button">{{item.gmtCreate}}</div>
<div class="comment-button">{{item.index+1}}楼</div>
<div class="comment-button" @click="openComment(item,item)"><el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>回复</div>
<div class="comment-button" @click="deleteComment(item)" v-if="userStore.userIdentity<=1||userStore.userId===item.commentUserId">
<el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>删除
</div>
</div>
<div class="side-comment" v-if="item.hasComment">
<div v-for="i in item.comments" class="comment-box">
<div style="width: 100%"><span style="font-weight: bold;color: #56AD93">{{ i.userUsername }}</span> {{i.commentContent}}</div>
<div class="comment-buttons">
<el-icon class="comment-button" @click="openComment(i,item)"><chat-line-square /></el-icon>
<el-scrollbar max-height="130px">
<div class="side-comment" v-if="item.hasComment">
<div v-for="i in item.comments" class="comment-box">
<div style="width: 100%"><span style="font-weight: bold;color: #56AD93">{{ i.userUsername }}</span> {{i.commentContent}}</div>
<div class="comment-buttons">
<div class="comment-button" @click="openComment(i,item)"><el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>回复</div>
<div class="comment-button" @click="deleteComment(i)" v-if="userStore.userIdentity<=1||userStore.userId===i.commentUserId">
<el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>删除
</div>
</div>
</div>
</div>
</div>
</el-scrollbar>
<el-divider></el-divider>
</div>
<div style="display: flex;justify-content: center">
<el-pagination layout="prev, pager, next"
small hide-on-single-page
v-model:current-page="currentPage"
:page-size="3"
@current-change="toTop"
:total="comments.length">
</el-pagination>
</div>
</el-scrollbar>
</div>
@ -52,7 +73,7 @@
type="textarea"
placeholder="请友善交流，文明用语"
/>
<div>
<div style="display: flex;flex-direction: row;justify-content: right;align-items: center">
<el-checkbox v-model="hideMyself" label="1" size="small">匿名</el-checkbox>
<el-button
size="small" @click="showFloatComment=false"
@ -67,28 +88,35 @@
</template>
<script setup lang="ts">
import {computed, onMounted, reactive, ref, watch} from "vue";
import {computed, onMounted, PropType, reactive, ref, watch} from "vue";
import axios from "axios";
import {Comment,ChatLineSquare,Close} from "@element-plus/icons-vue"
import qs from "qs";
import {useUserStore} from "@/store/user";
import {ElMessage} from "element-plus";
import {ElMessage, ElMessageBox} from "element-plus";
import type { ElScrollbar } from 'element-plus'
import {useRoute} from "vue-router";
import router from "@/router";
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
const toTop=()=>{
scrollbarRef.value!.setScrollTop(0)
}
const userStore = useUserStore()
const route=useRoute()
const showFloatComment = ref(false)
const hideMyself = ref(false)
const commentUsername= ref('')
const currentPage=ref(1)
const props = defineProps({
blogId: {
default() {
return ''
},
}
blogId: {}
});
let comments=ref([
{
index: 0,
commentId:"1",
commentTarget:1,
commentTargetId:"1505910717547618306",
@ -97,22 +125,30 @@ let comments=ref([
userAvatar:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
userIdentity:-1,
commentContent:"数据加载中",
gmtCreate:null,
gmtModified:null,
gmtCreate:'',
gmtModified:'',
hasComment:false,
comments:[{
commentUserId:"-1",
commentContent:"",
userUsername:"匿名",
userAvatar:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
userIdentity:-1
userIdentity:-1,
gmtCreate:''
}]
}
])
const newComment=reactive({
interface Comment {
commentTarget:number
commentTargetId:any
commentUserId:string
commentContent:string
}
const newComment=reactive<Comment>({
commentTarget:1,
commentTargetId:"",
commentTargetId:route.query.id,
commentUserId:"-1",
commentContent:"",
})
@ -131,11 +167,15 @@ const openComment=(comment:any,bigComment:any)=>{
}
const getComments=()=>{
if(!props.blogId) return
axios.get("/comment/getCommentByBlogId?blogId="+props.blogId)
.then((res)=>{
comments.value=res.data
let count=0
for(let comment of comments.value)
{
comment.index=count
count++
if(comment.commentUserId!=='-1')
{
axios.get("/user/getUserById?userId="+comment.commentUserId)
@ -174,6 +214,7 @@ const getComments=()=>{
}
})
}
comments.value.reverse()
})
}
@ -189,7 +230,19 @@ const addComment=()=>{
.then((res)=>{
if(res.data=="notLogin")
{
ElMessage.error("没有登录不可评论！")
ElMessageBox.confirm(
'没有登录账号无法进行评论',
'信息',
{
confirmButtonText: '前往注册/登录',
cancelButtonText: '取消',
type: 'info',
}
)
.then(() => {
router.push('/login')
})
.catch(() => {})
}
else if(res.data=="fail")
{
@ -216,7 +269,21 @@ const addCommentToComment=()=>{
.then((res)=>{
if(res.data=="notLogin")
{
ElMessage.error("没有登录不可评论！")
ElMessageBox.confirm(
'没有登录账号无法进行评论',
'信息',
{
confirmButtonText: '前往注册/登录',
cancelButtonText: '取消',
type: 'info',
}
)
.then(() => {
router.push('/login')
})
.catch(() => {
newCommentToComment.commentContent=""
})
}
else if(res.data=="fail")
{
@ -232,6 +299,33 @@ const addCommentToComment=()=>{
})
}
const deleteComment=(comment:any)=>{
ElMessageBox.confirm(
'确认要删除本条评论吗？删除后无法恢复！',
'警告',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
axios.post('/comment/deleteComment',qs.stringify(comment))
.then((res)=>{
if(res.data=="noPermission")
{
ElMessage.error("你没有权限进行此操作")
}
else
{
ElMessage.success("删除成功")
getComments()
}
})
})
.catch(() => {})
}
const identityType = (userIdentity:any)=>{
if(userIdentity==0)
{
@ -270,6 +364,12 @@ const userIdentity = (userIdentity:any)=>{
}
}
const currentPageComments=computed(
function (){
return comments.value.slice((currentPage.value-1)*3,currentPage.value*3)
}
)
watch(() => props.blogId,
() => {
getComments()
@ -282,18 +382,18 @@ onMounted(()=>{
<style scoped>
.main-comment{
background-color: #F7F7F7;
background-color: #ffffff;
margin: 5px;
padding: 5px;
border-radius: 5px;
text-align: left;
}
.side-comment{
background-color: #E3E3E3;
background-color: #f3f3f3;
margin: 5px 5px 5px 40px ;
padding: 5px;
padding: 10px;
text-align: left;
border-radius: 5px;
}
.comment-user{
@ -319,8 +419,10 @@ onMounted(()=>{
}
.comment-button{
color: black;
color: gray;
cursor: pointer;
font-size: small;
padding: 0 10px 0 10px;
}
.comment-button:hover{

259
src/views/About.vue
Unescape Escape View File

@ -2,71 +2,167 @@
<div class="banner">
<div class="banner-container">
<div>
<h1>个人介绍</h1>
<h1>博客详情</h1>
</div>
</div>
</div>
<div class="main-container">
<el-row>
<el-col :lg="{span:11,offset:3}" :sm="15">
<div class="module">
<div class="blog-header">
<h1>个人简介</h1>
<p><i class="fa fa-user"></i> PeterAlbus</p>
</div>
<div class="blog-content">
<v-md-editor v-model="blogContent" mode="preview"></v-md-editor>
</div>
<div class="blog-header">
<h1 style="padding: 8px 20px 2px;">{{blog.blogTitle}}</h1>
<p style="padding: 0 5px 5px 5px"><i class="fa fa-user"></i> {{blog.blogAuthor}}&emsp;<i class="fa fa-calendar"></i> 发布于{{blog.blogTime}} <i class="fa fa-eye"></i> {{blog.blogViews}}次访问</p>
</div>
<div class="blog-content">
<v-md-preview :text="blog.blogContent" ref="mdRef"></v-md-preview>
</div>
</el-col>
<el-col :lg="{span:6}" :sm="9">
<PersonalInfo></PersonalInfo>
<FriendLinks></FriendLinks>
<div class="sticky-box">
<div class="module anchors" :class="{'hide-small-screen':hideCatalogue}" v-if="titleList.length!==0">
<h2 class="title"><el-icon style="vertical-align: -10%"><notebook /></el-icon> 目录</h2>
<div class="content" style="padding: 10px">
<el-scrollbar max-height="30vh">
<div
v-for="anchor in titleList"
:style="{ padding: `2px 20px 2px ${anchor.indent * 20 + 20}px` }"
class="anchor"
@click="handleAnchorClick(anchor)"
>
<a style="cursor: pointer"><el-icon class="arrow-icon" style="vertical-align: -15%"><arrow-right /></el-icon> {{ anchor.title }}</a>
</div>
</el-scrollbar>
</div>
</div>
<Comment :blogId="blog.blogId"></Comment>
<div class="module">
<h2 class="title"><el-icon style="vertical-align: -10%"><share-icon /></el-icon> 分享本页面</h2>
<div class="content paragraph">
<Share
url="https://www.peteralbus.com/%23/about"
:title="blog.blogTitle"
source="PeterAlbus的博客"
:description="blog.blogDescription"
:image="blog.blogImg"
:twitter="true"
:google="true"
></Share>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="fixed-buttons hide-big-screen">
<el-button type="success" :icon="Notebook" circle @click="hideCatalogue=!hideCatalogue" v-if="titleList.length!==0"/>
</div>
</template>
<script>
import {Link} from "@element-plus/icons-vue";
import FriendLinks from "@/components/FriendLinks.vue"
import PersonalInfo from "@/components/PersonalInfo.vue"
export default {
components:{LinkIcon:Link,PersonalInfo,FriendLinks},
name: "About",
data(){
return{
blogContent:'欢迎访问我的博客！我的网名是PeterAlbus，是一名计算机专业的普通大学生。\n' +
'\n' +
'<br>'+
'我对于计算机相关内容都比较感兴趣。小站初建成，还十分简陋，会一步步添加新的功能。\n' +
'\n' +
'<br>'+
'欢迎通过电子邮箱:wuhongdb@163.com或 QQ:2997592724与我联系。',
friendLinkList:[
{
linkId:1,
linkName:'loading',
linkUrl:'#'
}
]
}
},
created() {
this.getFriendLinkList()
},
methods:{
getFriendLinkList: function (){
let that=this;
that.$axios.get('friendLink/getFriendLinkList')
.then(res=>{
that.friendLinkList=res.data;
})
}
<script setup lang="ts">
import {onMounted, ref ,nextTick} from "vue";
import {useRoute} from "vue-router";
import {ArrowRight,Notebook,Share as shareIcon} from "@element-plus/icons-vue";
import axios from "axios";
import PersonalInfo from '@/components/PersonalInfo.vue'
import Comment from '@/components/Comment.vue'
import type {vMdEditor} from "@kangc/v-md-editor"
const route=useRoute()
let mdRef=ref<InstanceType<typeof vMdEditor>>()
let titleList:any=ref([])
let hideCatalogue=ref(true)
let blog=ref({
blogId:'1508671319567269890',
blogTitle:'稍等，数据正在请求中',
blogImg:'https://file.peteralbus.com/assets/blog/imgs/cover/cover1.jpg',
blogType:1,
blogDescription:'这里显示的是默认数据',
blogAuthor:'PeterAlbus',
blogContent:'# 提示\n' +
'如果很长时间都依旧显示本文字，检查你的互联网是否突然中断，或联系PeterAlbus，他可能忘记开服务器后端了',
blogTime:'2021-7-19',
blogLike:18,
blogViews:200,
isTop:1
})
const getBlog=()=>{
if(blog.value.blogId!==undefined)
{
axios.get('queryById?id='+blog.value.blogId)
.then(res=>{
blog.value=res.data;
blog.value.blogViews+=1;
axios.get('/visitBlog?blogId='+blog.value.blogId+"&ipAddress="+localStorage.getItem('ipAddress'));
document.title = blog.value.blogTitle+'——PeterAlbus的博客'
let meta:any=document.querySelector('meta[name="description"]')
if(!meta)
{
meta.setAttribute('content',blog.value.blogDescription)
}
nextTick(getTitles)
})
}
}
const getTitles=()=>{
const anchors=mdRef.value?.$el.querySelectorAll('h1,h2,h3,h4,h5,h6')
const titles = Array.from(anchors).filter((title:any) => !!title.innerText.trim());
if (!titles.length) {
titleList.value = [];
return;
}
const hTags = Array.from(new Set(titles.map((title:any) => title.tagName))).sort();
titleList.value = titles.map((el:any) => ({
title: el.innerText,
lineIndex: el.getAttribute('data-v-md-line'),
indent: hTags.indexOf(el.tagName),
}));
}
const handleAnchorClick=(anchor:any)=>{
const { lineIndex } = anchor;
const heading = mdRef.value?.$el.querySelector(`[data-v-md-line="${lineIndex}"]`);
if (heading) {
mdRef.value?.scrollToTarget({
target: heading,
scrollContainer: window,
top: 60,
});
}
}
let friendLinkList=ref([
{
linkId:1,
linkName:'loading',
linkUrl:'#'
}
])
const getFriendLinkList=function () {
axios.get('friendLink/getFriendLinkList')
.then(res => {
friendLinkList.value = res.data;
})
}
onMounted(()=>{
getBlog()
getFriendLinkList()
})
</script>
<style scoped>
.banner {
position: relative;
@ -89,16 +185,81 @@ export default {
.blog-content{
text-align: left;
word-wrap:break-word;
width: 90%;
margin: 0 auto;
}
.blog-header{
margin-bottom: 1px;
padding: 8px 20px 12px;
background-color: #f7f7f7;
width: 90%;
margin: 0 auto;
}
.blog-header p{
font-size: 14px;
color: #4B6186;
color: #245440;
}
.anchor{
text-align: left;
transition: transform 0.3s ease .1s;
}
.anchors a:hover{
color: #63a35c;
}
.anchor:hover{
transform: translateX(+5px);
background-color: #f1f1f1;
}
.fixed-buttons{
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
position: fixed;
right: 10px;
bottom: 80px;
z-index: 101;
height: 200px;
width: 32px;
}
@media screen and (max-width: 767px){
.anchors{
position: fixed;
bottom: 80px;
padding: 0;
right: 60px;
width: 70%;
max-width: 300px;
z-index: 102;
transform-origin: right bottom;
transition-property:opacity,transform;
transition-duration:0.3s;
transition-timing-function:ease;
}
.anchors .title{
border-radius: 5px 5px 0 0;
}
.anchors .content{
border-radius: 0 0 5px 5px;
}
.anchors {
box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
border-radius: 5px;
}
.anchors:hover{
box-shadow: 0 6px 16px 12px rgba(7,17,27,0.25);
}
}
</style>

8
src/views/Blog.vue
Unescape Escape View File

@ -35,7 +35,7 @@
</el-scrollbar>
</div>
</div>
<Comment :blogId="blogId"></Comment>
<Comment :blogId="blog.blogId"></Comment>
<div class="module">
<h2 class="title"><el-icon style="vertical-align: -10%"><share-icon /></el-icon> 分享本页面</h2>
<div class="content paragraph">
@ -90,8 +90,6 @@ let blog=ref({
isTop:1
})
let blogId:string='-1'
const getBlog=()=>{
if(blog.value.blogId!==undefined)
{
@ -158,10 +156,6 @@ const getFriendLinkList=function () {
}
onMounted(()=>{
if(route.query.id!=null)
{
blogId=route.query.id.toString()
}
getBlog()
getFriendLinkList()
})

2
src/views/EditBlog.vue
Unescape Escape View File

@ -197,7 +197,7 @@ const onSubmit= async (formEl: FormInstance | undefined) => {
else
{
ElMessage.success('发布成功');
router.push('/blog?id='+blog.value.blogId)
router.push('/')
}
})
}

Write Preview
Loading…
Cancel
Save