从零开发基于chatGPT的社区交友系统 (前后端分离)丨主页框架 03

前言

• 上一章我们实现了基础的主题切换功能，这一章我们开始搭建主页主要框架，并测试一下我们的切换主题功能。

开工

引用iconfont字体图标

• 这里我们使用font-class方法引用iconfont字体图标。
• 在项目目录的src\assets\icons中创建iconfont.css文件。
• 首先我们将选中的图标放入项目，点击标红部分，如下图：
  
• 在弹出的页面中将代码复制进刚刚创建的iconfont.css文件中，代码如下：

@font-face {
  font-family: "iconfont"; /* Project id 3990496 */
  src: url('//at.alicdn.com/t/c/font_3990496_c7efy0697zw.woff2?t=1684920260831') format('woff2'),
       url('//at.alicdn.com/t/c/font_3990496_c7efy0697zw.woff?t=1684920260831') format('woff'),
       url('//at.alicdn.com/t/c/font_3990496_c7efy0697zw.ttf?t=1684920260831') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-wode:before {
  content: "\e74d";
}

.icon-zhuye:before {
  content: "\e63b";
}

.icon-xiaoxi1:before {
  content: "\e741";
}

.icon-sousou:before {
  content: "\e63a";
}

.icon-qq:before {
  content: "\e600";
}

.icon-weixin:before {
  content: "\e665";
}

.icon-guanbi:before {
  content: "\e6c1";
}

• main.js文件中引用，这样就可以全局使用啦。

import '@/assets/icons/iconfont.css'

• 使用方法如下：

<i class="iconfont icon-sousou"></i>

template代码

• 这里我的思路是主框架分为上下两部分。
• 上为头部，使用绝对定位置于最上层。
• 下为主要内容，分为左右两部分，左边为导航栏，右边为路由页面展示部分。
• 主框架思路：

  <div class="container">
    <div class="header"></div>
    <div class="main">
      <div class="nav"></div>
      <div class="content"></div>
    </div>
  </div>

• 头部为左中右布局，左边logo，中间搜索框，右边留几个按钮，如下：

	<div class="header">
      <img class="logo" src="@/assets/icons/logo.png">
      <div class="search-box">
        <input placeholder="搜索">
        <div class="search-icon">
          <i class="iconfont icon-guanbi"></i>
          <i class="iconfont icon-sousou"></i>
        </div>
      </div>
      <div class="right">
        <button @click="switchTheme('default')">极简白</button>
        <button @click="switchTheme('dark')">暗夜黑</button>
        <button>打赏</button>
        <button>关于我们</button>
      </div>
    </div>

• 导航栏部分如下：

      <div class="nav">
        <div class="nav-item" :class="communityState" @click="routerPush('community')">
          <i class="iconfont icon-zhuye"></i>
          <div>社区</div>
        </div>
        <div class="nav-item" :class="chatState" @click="routerPush('chat')">
          <i class="iconfont icon-xiaoxi1"></i>
          <div>聊天</div>
        </div>
        <div class="nav-item" :class="userState" @click="routerPush('user')">
          <i class="iconfont icon-wode"></i>
          <div>我的</div>
        </div>
      </div>

• 主内容即路由内容部分使用<router-view>左右路由页面占位。
• 主内容部分如下：

      <div class="content">
        <router-view></router-view>
      </div>

style代码

.container {
  height: 100%;
  width: 86%;
  margin: 0 auto;
}

.header {
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  width: 86%;
  margin: 0 auto;
  background-color: @backgroundColor;

  .logo {
    height: 3rem;
  }

  .search-box {
    background-color: @boxBackgroundColor;
    width: 30rem;
    border-radius: 2rem;
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    input {
      background-color: @boxBackgroundColor;
      flex: 1;
      border: none;
      outline: none;
      font-size: @textSize2;
      color: @primaryText;
      width: auto;
      line-height: 2.4rem;
    }
    .search-icon{
      display: flex;
      i {
        color: @secondary;
        padding: 0 0.6rem;
      cursor: pointer;
      }
    }
  }

  .right {
    display: flex;

    button {
      padding: 0.5rem 1.2rem;
      border: none;
      border-radius: 2rem;
      background-color: transparent;
      font-size: @textSize2;
      color: @primaryText;
      cursor: pointer;
    }
    button:hover{
      background-color: @boxBackgroundColor;
    }
  }
}

.main {
  padding-top: 5.6rem;
  display: flex;
  height: 100%;
  box-sizing: border-box;
}

.nav {
  flex: 1;

  .nav-item {
    display: flex;
    align-items: center;
    font-size: @textSize2;
    color: @primaryText;
    font-weight: 600;
    padding: 0.8rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 2rem;
    cursor: pointer;
    i{
      font-size: 1.5rem;
    }
    div {
      margin-left: 0.8rem;
    }
  }
  .selected{
    background-color: @boxBackgroundColor;
  }
  .nav-item:hover{
      background-color: @boxBackgroundColor;
    }
}

.content {
  flex: 5;
  padding-left: 2rem;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.content::-webkit-scrollbar{
  display: none;
}
.content::-moz-scrollbar{
  display: none;
}

页面展示

路由局部跳转

• 在项目目录的src\components目录中新建如下三个vue文件：

//community.vue
<template>
    <div>
        社区
    </div>
</template>

//chat.vue
<template>
    <div>
        聊天
    </div>
</template>

//user.vue
<template>
    <div>
        我的
    </div>
</template>

• 路由配置，在router/index.js添加如下配置：
• 其中，主路由页面是index.vue，该路由有三个子路由。

{
    path: '/',
    name: 'Index',
    component: () => import('../views/index'),
    children: [{
      path: '/user',
      name: 'User',
      component: () => import('../components/user')
    },
    {
      path: '/community',
      name: 'Community',
      component: () => import('../components/community')
    },
    {
      path: '/chat',
      name: 'Chat',
      component: () => import('../components/chat')
    }]
  },

script代码

• js代码这里主要实现了头部的两个皮肤切换，以及导航栏的路由局部刷新功能，如下：

<script setup>
import { setTheme } from '@/theme/theme'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
const router = useRouter()
const userState = ref('noSelected')
const communityState = ref('noSelected')
const chatState = ref('noSelected')
onMounted(() => {
  routerPush('community')
})
const switchTheme = (theme) => {
  setTheme(theme)
}
const routerPush = (path) => {
  router.push(path)
  communityState.value = 'noSelected'
  chatState.value = 'noSelected'
  userState.value = 'noSelected'
  switch (path) {
    case 'community':
      communityState.value = 'selected'
      break
    case 'chat':
      chatState.value = 'selected'
      break
    case 'user':
      userState.value = 'selected'
      break
    default:
      communityState.value = 'selected'
  }
}
</script>

总结

• 至此，主页框架就基本完成了，上述的一些功能也可以正常使用，录制gif有点麻烦这里就没有展示，后面会不断完善细节。小伙伴们可以将自己的意见反馈发表到评论区，有合作想法的铁子欢迎私聊。。。