由图可见，导航条的提问并没有高亮，必须要再点击一次才能高亮，求解，望不吝赐教。
<template>
<a-layout id="components-layout-demo-top" class="layout" style="min-height: 100%;width:100%">
<div id="header">
<div class="logo">知 否</div>
<div id="title">
<router-link :to="{name:'mainPage',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
<a-icon type="home" /> 首页
</router-link>
</div>
<div id="title1">
<router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
<a-icon type="user" /> 个人中心
</router-link>
</div>
<a-input-search placeholder="请输入要搜索的问题" v-model="searchItem" style="width: 300px;margin: 15px 20px 10px 90px;" @search="onSearch"/>
<button type="button" id="search" @click="onSearch" style="
height: 15px;
width: 120px;
margin: 10px;
padding: 18px;
border-radius: 10px;
line-height: 0px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
position: absolute;
background: deepskyblue;
font-weight: bold;
color: white;
border-color: skyblue;
/*transform: translateY(4px);*/
">
搜索问题
</button>
<div style="height:60px;weight:200px;float:right;padding: 0 20px;">
<div id="right" style="padding: 10px 5px 20px 20px;">
<a-badge :count=count title="通知" v-if=ifToken style="margin-left: 40px">
<a-icon type="bell" style="font-size: 25px" title="通知" @click="getMessage"/>
</a-badge>
<router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}">
<a-avatar shape="square" v-if=ifToken size="large" :src=img style="margin-left: 20px;margin-bottom: 12px"/>
</router-link>
</div>
<template>
<a-dropdown>
<a style="color:white;font-size: 20px;" >
{{ u_name }} <a-icon type="down" style="color:white;font-size:25px" />
</a>
<a-menu slot="overlay" @click="onClick">
<a-menu-item key="1">
<a-icon type="setting" />
设置
</a-menu-item>
<a-menu-item key="2" @click="logout">
<a-icon type="logout" />
退出
</a-menu-item>
</a-menu>
</a-dropdown>
</template>
</div>
</div>
<a-layout-content style="padding: 0 50px">
<a-breadcrumb style="margin: 20px 0">
</a-breadcrumb>
<div :style="{ background: '#fff', padding: '24px', minHeight: '430px' }">
<img :src=img width="50" height="50">
<h3 style="font-weight: bold;display: inline;margin-left: 20px;">
{{username}}
</h3>
<router-link :to="{name:'changeInformation',params:{'id':this.id,'img':this.img,'token':this.token}}">
<a-button style="float: right;width: 120px;">编辑个人资料</a-button>
</router-link>
<br/><br/>
<a-menu v-model="current" mode="horizontal">
<a-menu-item key="answer" @click="answer" style="width: 330px; text-align: center;font-weight: bold"> 回答</a-menu-item>
<!-- <a-menu-item key="star" style="width: 330px; text-align: center;font-weight: bold"> 收藏</a-menu-item>-->
<a-menu-item key="question" style="width: 330px; text-align: center;font-weight: bold"> 提问</a-menu-item>
</a-menu>
<!--依次类推的话，以传来的列表list中的question_id为key，依次显示各个问题，具体如下-->
<div v-for="item in list" :key="item.question_id">
<br/><br/>
<a style="font-weight: bold;font-size: 20px;color: black" @click="seeThisQuestion(item)">{{item.question_title}}</a><!--问题标题-->
<p>{{item.question_content}}</p><!--问题内容-->
<p style="font-size: 10px">{{item.updated_time}}</p>
<a-button @click="changeQuestion(item)" type="primary" style="float:right;width:90px;padding: 0 10px;" v-if="item.question_authority_state === 0">修改问题</a-button>
<a-button @click="endQuestion(item)" style="float:right;width:90px;padding: 0 10px;" type="primary" v-if="item.question_authority_state === 0">终结问题</a-button>
<p v-if=item.question_authority_state style="float:right;width:90px;padding: 0 10px;" type="primary" >问题已终结</p>
<a-button @click="deleteQuestion(item)" v-if="item.question_authority_state === 0" style="float:right;width:90px;padding: 0 10px;" type="danger">删除问题</a-button>
<a-divider/>
</div>
<!--end 显示问题列表的部分-->
</div>
</a-layout-content>
</a-layout>
</template>
<script>
export default {
name:"personalQuestion",
inject:['reload'],
data(){
return{
current: ['mail'],
username:'',//昵称
list: [],
id:this.$route.params.id,//从登陆界面进行传值
img:this.$route.params.img,
token:this.$route.params.token,
searchItem:'',
count:'',
u_name:'',
ifToken: localStorage.getItem('access_token'),
}
},
mounted() {
var _this = this;
_this.$axios.post('/api/user/selectByUserId',
_this.$qs.stringify({
uId:_this.id,
}),
{headers:{access_token:_this.token}}
).then(function (response) {
console.log("主页获取登录用户信息：");
console.log(response.data);
console.log(response.data.data.u_img);
console.log(response.data.data.u_name);
_this.img = response.data.data.u_img;
_this.u_name=response.data.data.u_name;
}).catch(function (error) {
console.log(error);
//_this.$message.error('请求失败');
})
_this.$axios.post('/api/quest/showQuestByUserId',
_this.$qs.stringify({
userId:_this.id,
}),{headers: {access_token: _this.token}}
).then(function (response) {
console.log(response.data);
_this.list = response.data.data;
}).catch(function (error) {
console.log(error);
_this.$message.error('请求失败');
})//end getAskedQuestions函数，获取该用户的提问
_this.$axios.post('/api/msg/showMsgNum',
_this.$qs.stringify({
userId: _this.$route.params.id,//router传值！！！
}),{headers:{access_token:_this.token}}
).then(function (response) {
console.log(response.data.data);
_this.count = response.data.data;
//_this.list = response.data.data;
}).catch(function (error) {
console.log(error);
_this.$message.error('获取消息失败');
})
},
methods:{
logout(){
var _this = this;
_this.$axios.post('/api/user/leave',
_this.$qs.stringify({
uId: this.id,
}),{headers: {access_token:_this.token}}
).then(function (response) {
console.log(response.data);
localStorage.removeItem('access_token');
localStorage.clear();
_this.$router.push({
path:'/login',
name:'login',
})
}).catch(function (error) {
console.log(error);
_this.$message.error('请求失败');
})
},//end exit函数/*
onClick ({ key }) {
console.log(`Click on item ${key}`)
},
onSearch(){
var _this = this;
_this.$axios.post('/api/quest/selectByTitle',
_this.$qs.stringify({
questionTitle:_this.searchItem,
}),{ headers: { access_token: _this.token } }
).then(function (response) {
console.log(response.data.data);
_this.$router.push({
path:'/searchPage',
name:'searchPage',//路由命名
params:{
list:response.data.data,
id:_this.id,
img:_this.img,
token:_this.token
},
});//end 页面跳转
}).catch(function (error) {
console.log(error);
_this.$message.error('请求失败');
})
},//end onSearch函数，进行查找问题
getMessage(){
var _this = this;
_this.$router.push({
path:'/messagePage',
name:'messagePage',
params:{
id:_this.id,
img:_this.img,
token:_this.token,
}
})
},//end getMessage函数，获取消息
edit(){
var _this = this;
_this.$router.push({
path:'/changeInfomation',
name:'changeInfomation',
params:{
id:_this.id,
img:_this.userImg,
token:_this.token,
}
})
},//end edit函数，编辑个人信息
answer(){
var _this = this;
_this.$router.push({
path:'/personSpace',
name:'personSpace',
params:{
id:_this.id,
img:_this.img,
token:_this.token,
}
})
},
seeThisQuestion(record){
var _this = this;
console.log(record);//打印问题详细信息
_this.$router.push({
path:'/detailpage',
name:'DatailPage',//路由命名
params:{
question_id:record.question_id,//页面之间的传值
id:_this.id,
img:_this.img,
token:_this.token,
question_state:record.question_authority_state,
question_title:record.question_title,
question_content:record.question_title,
},
});
},//end seeThisQuestion函数，查看这个问题的详细信息
endQuestion(record){
var _this = this;
_this.$axios.post('/api/quest/alterQuestState',
_this.$qs.stringify({
questionId:record.question_id,
questionAuthorityState:1,
}),{headers: {access_token: _this.token}}
).then(function (response) {
console.log(response.data);
_this.$message.success('问题已终结');
}).catch(function (error) {
console.log(error);
_this.$message.error('请求失败');
})
_this.reload()
},
changeQuestion(record){
var _this = this;
_this.$router.push({
path:'/changeQuestion',
name:'changeQuestion',
params:{
question_id:record.question_id,
id:_this.id,
img:_this.img,
token:_this.token,
question_content:record.question_content,
}
})
},//end
deleteQuestion(record){
var _this = this;
_this.$axios.post('/api/quest/deleteQuest',
_this.$qs.stringify({
questionId:record.question_id,
isDeleted:1,
}),{headers: {access_token:_this.token}}
).then(function (response) {
console.log(response.data);
_this.$message.success('删除成功');
// _this.list = response.data.data;
}).catch(function (error) {
console.log(error);
_this.$message.error('删除失败');
})
_this.reload()
},
exit(){
var _this = this;
_this.$axios.post('/api/user/leave',
_this.$qs.stringify({
uId: this.id,
}),{headers: {access_token:_this.token}}
).then(function (response) {
console.log(response.data);
localStorage.removeItem('access_token');
localStorage.clear();
_this.$router.push({
path:'/login',
name:'login',
})
}).catch(function (error) {
console.log(error);
_this.$message.error('请求失败');
})
},//end exit函数
}
}
</script>
<style>
</style>
这是提问界面vue框架代码
<template>
<a-layout id="components-layout-demo-top" class="layout">
<div id="header">
<div class="logo">知 否</div>
<div id="title">
<router-link :to="{name:'mainPage',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
<a-icon type="home" /> 首页
</router-link>
</div>
<div id="title1">
<router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
<a-icon type="user" /> 个人中心
</router-link>
</div>
<a-input-search placeholder="请输入要搜索的问题" v-model="searchItem" style="width: 300px;margin: 15px 20px 10px 90px;" @search="onSearch"/>
<button type="button" id="search" @click="onSearch" style="
height: 15px;
width: 120px;
margin: 10px;
padding: 18px;
border-radius: 10px;
line-height: 0px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
position: absolute;
background: deepskyblue;
font-weight: bold;
color: white;
border-color: skyblue;
/*transform: translateY(4px);*/
">
搜索问题
</button>
<div style="height:60px;weight:200px;float:right;padding: 0 20px;">
<div id="right" style="padding: 10px 5px 20px 20px;">
<a-badge :count=count title="通知" v-if=ifToken style="margin-left: 40px">
<a-icon type="bell" style="font-size: 25px" title="通知" @click="getMessage"/>
</a-badge>
<router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}">
<a-avatar shape="square" v-if=ifToken size="large" :src=img style="margin-left: 20px;margin-bottom: 12px"/>
</router-link>
</div>
<template>
<a-dropdown>
<a style="color:white;font-size: 20px;" >
{{ u_name }} <a-icon type="down" style="color:white;font-size:25px" />
</a>
<a-menu slot="overlay" @click="onClick">
<a-menu-item key="1">
<a-icon type="setting" />
设置
</a-menu-item>
<a-menu-item key="2" @click="logout">
<a-icon type="logout" />
退出
</a-menu-item>
</a-menu>
</a-dropdown>
</template>
</div>
</div>
<a-layout-content style="padding: 0 50px">
<a-breadcrumb style="margin: 20px 0">
</a-breadcrumb>
<div :style="{ background: '#fff', padding: '24px', minHeight: '430px' }">
<img :src=img width="50" height="50">
<h3 style="font-weight: bold;display: inline;margin-left: 20px;">
{{username}}
</h3>
<!-- <a-button style="margin-left: 50px" @click="exit" type="danger">
退出登录
</a-button>-->
<router-link :to="{name:'changeInformation',params:{'id':this.id,'img':this.img,'token':this.token}}">
<a-button style="float: right;width: 120px;">编辑个人资料</a-button>
</router-link>
<br/><br/>
<a-menu mode="horizontal">
<a-menu-item key="answer" style="width: 330px; text-align: center;font-weight: bold"> 回答</a-menu-item>
<!-- <a-menu-item key="star" style="width: 330px; text-align: center;font-weight: bold"> 收藏</a-menu-item>-->
<a-menu-item key="question" @click="question" style="width: 330px; text-align: center;font-weight: bold"> 提问</a-menu-item>
</a-menu>
<!--依次类推的话，以传来的列表list中的question_id为key，依次显示各个问题，具体如下-->
<div v-for="(item, index) in list" :key="`${item.question_id}_${index}`">
<div style="float:right;background: red;font-size: 18px;padding:5px;color:white" v-if="item.question_authority_state === 1">已终结</div>
<div style="float:right;background: deepskyblue;font-size: 18px;padding:5px;color:white" v-if="item.question_authority_state === 0">未终结</div>
<a style="font-weight: bold;font-size: 20px;color: black;margin: 130px 0px;" @click="seeThisQuestion(item)">{{item.question_title}}</a><!--问题标题-->
<p>{{item.answer_content}}</p><!--回答内容-->
<p style="font-size: 10px">{{item.updated_time}}</p>
<a-button @click="changeAnswer(item)" style="float:left;width:90px;padding: 0 10px;" type="primary" v-if="item.question_authority_state === 0">修改回答</a-button>
<a-button @click="deleteAnswer(item)" style="float:left;width:90px;padding: 0 10px;" type="danger" v-if="item.question_authority_state === 0">删除回答</a-button>
<a-divider/>
</div>
<!--end 显示问题列表的部分-->
</div>
</a-layout-content>
</a-layout>
</template>
<script>
export default {
name:"personSpace",
inject:['reload'],
data(){
return{
current: ['mail'],
username:'',//昵称
id:this.$route.params.id,//从登陆界面进行传值
img:this.$route.params.img,
token:this.$route.params.token,
list: [],
searchItem:'',
count:'',
ifToken: localStorage.getItem('access_token'),
u_name:''
}
},
mounted() {
var _this = this;
_this.$axios.post('/api/user/selectByUserId',
_this.$qs.stringify({
uId:_this.id,
}),
{headers:{access_token:_this.token}}
).then(function (response) {
console.log("主页获取登录用户信息：");
console.log(response.data);
console.log(response.data.data.u_img);
console.log(response.data.data.u_name);
_this.img = response.data.data.u_img;
_this.u_name=response.data.data.u_name;
}).catch(function (error) {
console.log(error);
//_this.$message.error('请求失败');
})
_this.$axios.post('/api/answer/showAnswerByUserId',
_this.$qs.stringify( {
userId: _this.$route.params.id,
// userId: 2,
}),{ headers: { access_token: _this.token } }
).then(function (response) {
console.log("showAnswerByUserId:")
console.log(response.data.data);
_this.list = response.data.data;
}).catch(function (error) {
console.log(error);
_this.$message.error('对不起，请求失败');
})//end get函数，获取某一个用户的所有回答
_this.$axios.post('/api/msg/showMsgNum',
_this.$qs.stringify({
userId: _this.$route.params.id,//router传值！！！
}),{headers:{access_token:_this.token}}
).then(function (response) {
console.log(response.data.data);
_this.count = response.data.data;
//_this.list = response.data.data;
}).catch(function (error) {
console.log(error);
_this.$message.error('获取消息失败');
})
},
methods:{
onClick ({ key }) {
console.log(`Click on item ${key}`)
},
onSearch(){
var _this = this;
_this.$axios.post('/api/quest/selectByTitle',
_this.$qs.stringify({
questionTitle:_this.searchItem,
}),{ headers: { access_token: _this.token } }
).then(function (response) {
console.log(response.data.data);
_this.$router.push({
path:'/searchPage',
name:'searchPage',//路由命名
params:{
list:response.data.data,
id:_this.id,
img:_this.img,
token:_this.token
},
});//end 页面跳转
}).catch(function (error) {
console.log(error);
_this.$message.error('请求失败');
})
},//end onSearch函数，进行查找问题
getMessage(){
var _this = this;
_this.$router.push({
path:'/messagePage',
name:'messagePage',
params:{
id:_this.id,
img:_this.img,
token:_this.token,
}
})
},//end getMessage函数，获取消息
getAskedQuestions(){
var _this = this;
_this.$axios.post('/api/showQuestByUserId',
_this.$qs.stringify({
user_id:_this.userId,
})
).then(function (response) {
console.log(response.data);
_this.list = response.data.data;
}).catch(function (error) {
console.log(error);
_this.$message.error('请求失败');
})
},//end getAskedQuestions函数，获取该用户的提问
edit(){
var _this = this;
_this.$router.push({
path:'/changeInformation',
name:'changeInformation',
params:{
id:_this.id,
img:_this.userImg,
token:_this.token,
}
})
},//end edit函数，编辑个人信息
question(){
var _this = this;
_this.$router.push({
path:'/personalQuestion',
name:'personalQuestion',
params:{
id:_this.id,
img:_this.img,
token:_this.token,
}
})
},
changeAnswer(record){
var _this = this;
console.log("修改回答：");
console.log(record);
console.log("终结状态："+record.question_authority_state)
_this.$router.push({
path:'/changeAnswer',
name:'changeAnswer',
params:{
answer_id:record.answer_id,
answer_content:record.answer_content,
id:_this.id,
img:_this.img,
token:_this.token,
question_id:record.question_id,
question_title:record.question_title,
question_content:record.question_content,
question_authority_state:record.question_authority_state
}
})
},//end
deleteAnswer(record){
var _this = this;
_this.$axios.post('/api/answer/deleteAnswer',
_this.$qs.stringify({
answerId:record.answer_id,
isDeleted:1,
}),{headers: {access_token: _this.token}}
).then(function (response) {
console.log(response.data);
_this.$message.success('删除成功');
_this.list = response.data.data;
_this.reload();
}).catch(function (error) {
console.log(error);
_this.$message.error('删除失败');
})
},
logout(){
var _this = this;
_this.$axios.post('/api/user/leave',
_this.$qs.stringify({
uId: this.id,
}),{headers: {access_token:_this.token}}
).then(function (response) {
console.log(response.data);
localStorage.removeItem('access_token');
localStorage.clear();
_this.$router.push({
path:'/login',
name:'login',
})
}).catch(function (error) {
console.log(error);
_this.$message.error('请求失败');
})
},//end exit函数/*
seeThisQuestion(record){
var _this = this;
console.log(record);//打印问题详细信息
_this.$router.push({
path:'/detailPage',
name:'detailPage',//路由命名
params:{
question_id:record.question_id,//页面之间的传值
id:_this.id,
img:_this.img,
token:_this.token,
question_authority_state:record.question_authority_state,
question_title:record.question_title,
question_content:record.question_content,
},
});
},//end seeThisQuestion函数，查看这个问题的详细信息
}
}
</script>
<style scoped>
</style>
这是回答界面vue框架代码
<a-menu v-model="current" mode="horizontal">
<a-menu-item key="answer" @click="answer" style="width: 330px; text-align: center;font-weight: bold"> 回答</a-menu-item>
<!-- <a-menu-item key="star" style="width: 330px; text-align: center;font-weight: bold"> 收藏</a-menu-item>-->
<a-menu-item key="question" style="width: 330px; text-align: center;font-weight: bold"> 提问</a-menu-item>
</a-menu>
menu部分已在其中，不胜感激。
