目录
侧边栏
1.侧边栏布局
打开src\components\Sidebar.vue,编写代码。
<template>
<div>
<div class="mb-2">
<UserInfo />
</div>
<div class="mb-2">
<BestTopic />
</div>
<div>
<NewTopic />
</div>
</div>
</template>
<script>
import UserInfo from '@/components/sidebar/UserInfo'
import BestTopic from '@/components/sidebar/BestTopic'
import NewTopic from '@/components/sidebar/NewTopic'
export default {
components: { UserInfo, NewTopic, BestTopic }
}
</script>
创建src\components\sidebar\UserInfo.vue,代码如下。
<template>
<div>
用户信息
</div>
</template>
创建src\components\sidebar\BestTopic.vue,代码如下。
<template>
<div>
热门话题
</div>
</template>
创建src\components\sidebar\NewTopic.vue,代码如下。
<template>
<div>
最新话题
</div>
</template>
页面效果如下
2.用户信息
编写src\components\sidebar\UserInfo.vue。
<template>
<div class="model bg-light">
<div class="modal-header">
<h5 class="modal-title small">LightBBS</h5>
</div>
<div class="modal-body row" v-if="isLogin">
<div class="col-3">
<router-link :to="{ name: 'user' }">
<img class="rounded" style="width:65px" :src="user.img_url">
</router-link>
</div>
<div class="col-9">
<div class="mb-2">
<router-link class="username" :to="{ name: 'user' }">{{ user.name }}</router-link>
</div>
<div>
<router-link :to="{ name: 'post' }" tag="button" class="btn btn-outline-primary btn-sm">发布主题</router-link>
</div>
</div>
</div>
<div class="modal-body text-center" v-if="isLogin === false">
<div class="mb-2">
<router-link :to="{ name: 'register' }" tag="button" class="btn btn-outline-secondary">现在注册</router-link>
</div>
<div class="small">
已注册用户请
<router-link :to="{ name: 'login' }">登录</router-link>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['isLogin'])
},
data () {
return {
user: {}
}
},
created () {
this.getProfile()
},
methods: {
getProfile () {
this.$http.get('user/profile').then(res => {
if (res.data.code === 1) {
this.user = res.data.data
}
}).catch(() => {
this.$toastr.e('操作失败,服务器异常。')
})
}
}
}
</script>
<style scoped>
.modal-header {
padding: 0.65rem 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.username {
color: #666;
}
.username:hover {
color: #444;
text-decoration: none;
}
</style>
已登录情况下的页面效果如下。
未登录情况下的页面效果如下
3.热门话题
打开src\components\sidebar\BestTopic.vue,编写代码。
<template>
<div class="model bg-light">
<div class="modal-header">
<h5 class="modal-title small">最受欢迎的话题</h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-light small" v-for="topic in topics" :key="topic.id">
<router-link :to="{ name: 'topic_show', params: { id: topic.id } }">{{ topic.title }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
topics: [],
size: 5
}
},
created () {
this.getBestTopic()
},
methods: {
getBestTopic () {
this.$http.get('topic/best', { params: { size: this.size } }).then(res => {
if (res.data.code === 1) {
this.topics = res.data.data
}
}).catch(() => {
this.$toastr.e('操作失败,服务器异常。')
})
}
}
}
</script>
<style scoped>
.modal-header {
padding: 0.65rem 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-item {
padding: 0.4rem 1.25rem;
border: 0;
}
.list-group-item a {
color: #666;
}
</style>
打开route\route.php,编写服务器端路由。
Route::get('topic/best', 'api/Topic/best');
打开application\api\controller\Topic.php,编写best()方法。
public function best()
{
$size = max(min($this->request->get('size/d', 10), 20), 1);
$data = TopicModel::where(['is_show' => 1])->field('id,title')->order('hits', 'desc')->limit($size)->select();
$this->success('', null, $data);
}
页面效果如下
打开src\components\topic\Show.vue,在id改变时加载数据。
export default {
data () {
……(原有代码)
},
watch: {
'$route' () {
this.id = parseInt(this.$route.params.id) || 0
this.getTopic()
this.getLike()
}
},
……(原有代码)
}
4.最新话题
编写src\components\sidebar\NewTopic.vue。
<template>
<div class="model bg-light">
<div class="modal-header">
<h5 class="modal-title small">最新发布的话题</h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-light small" v-for="topic in topics" :key="topic.id">
<router-link :to="{ name: 'topic_show', params: { id: topic.id } }">{{ topic.title }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
topics: [],
size: 5
}
},
created () {
this.getBestTopic()
},
methods: {
getBestTopic () {
this.$http.get('topic/new', { params: { size: this.size } }).then(res => {
if (res.data.code === 1) {
this.topics = res.data.data
}
}).catch(() => {
this.$toastr.e('操作失败,服务器异常。')
})
}
}
}
</script>
<style scoped>
.modal-header {
padding: 0.65rem 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-item {
padding: 0.4rem 1.25rem;
border: 0;
}
.list-group-item a {
color: #666;
}
</style>
打开route\route.php,编写服务器端路由。
Route::get('topic/new', 'api/Topic/newest');
打开application\api\controller\Topic.php,编写newest()方法。
public function newest()
{
$size = max(min($this->request->get('size/d', 10), 20), 1);
$data = TopicModel::where(['is_show' => 1])->field('id,title')->order('id', 'desc')->limit($size)->select();
$this->success('', null, $data);
}
页面效果如下
~~ (●ˇ∀ˇ●)~~ 嘿嘿~