（十）Vue项目——轻社区：完成侧边栏布局—用户信息+最新话题

目录

侧边栏

1.侧边栏布局

2.用户信息

3.热门话题

4.最新话题

---

侧边栏

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);

}

页面效果如下

~~ (●ˇ∀ˇ●)~~    嘿嘿~