实现前端

实现前端导航栏

技术细节

在 components文件夹下写文件 NavBar.vue

前端美化用bootstrap

找到合适的样式

在 NavBar.vue 下进行代码实现

​x
<template>     
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar w/ text</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
            </ul>
            <span class="navbar-text">
              Navbar text with an inline element
            </span>
          </div>
        </div>
      </nav>
</template>

<script>

</script>

<style scoped>

</style>

在 App.vue 下引用 NavBar.vue 并且调用 bootstrap 依赖的 js 和 css

xxxxxxxxxx
<template>
  <NavBar />
  <router-view></router-view>
</template>

<script>
import NavBar from './components/NavBar.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap"

export default {
  components: {
    NavBar
}
}
</script>

<style>
  body {
    background-image: url("@/assets/background.jpg");
    background-size: cover;
  }
</style>

解决报错问题：

缺少响应依赖 @popperjs/core

添加响应的依赖

实现基础导航栏效果

修改导航栏的相关样式

在views 文件夹下设计各个页面的组件，分别是 报错页面、PK页面、排行榜页面、对局列表页面及用户机器人页面

实现界面的路由与重定向

在 router/index.js 下

xxxxxxxxxx
import { createRouter, createWebHistory } from 'vue-router'
import PKIndexView from "../views/pk/PKIndexView"
import RecordIndexView from "../views/record/RecordIndexView"
import RankListIndexView from "../views/ranklist/RankListIndexView"
import UserBotIndexView from "../views/user/bot/UserBotIndexView"
import NotFound from "../views/error/NotFound"

const routes = [
  {
    path: "/",
    name: "home",
    redirect: "/pk/",
  },
  {
    path: "/pk/",
    name: "pk_index",
    component: PKIndexView,
  },
  {
    path: "/record/",
    name: "record_index",
    component: RecordIndexView,
  },
  {
    path: "/ranklist/",
    name: "ranklist_index",
    component: RankListIndexView,
  },
  {
    path: "/user/bot/",
    name: "user_bot_index",
    component: UserBotIndexView,
  },
  {
    path: "/404/",
    name: "404",
    component: NotFound,
  },
  {
    path: "/:catchAll(.*)",
    redirect: "/404/",
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

实现界面的动态跳转（用户通过鼠标交互）

NavBar.vue下

xxxxxxxxxx
<template>     
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
          <a class="navbar-brand" href="/">AI 对战平台</a>
          <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" aria-current="page" href="/pk/">对战</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/record/">对局列表</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/ranklist/">排行榜</a>
              </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Zhu Wentao
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li><a class="dropdown-item" href="/user/bot/">我的Bot</a></li>
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item" href="#">退出</a></li>
                    </ul>
                  </li>
              </ul>
          </div>
        </div>
      </nav>
</template>

<script>

</script>

<style scoped>

</style>

实现页面的纯前端跳转（不消耗服务器资源，响应速度更快）

xxxxxxxxxx
<template>     
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
          <router-link  class="navbar-brand" :to="{name: 'home'}">AI对战平台</router-link>
          <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <router-link  class="nav-link" :to="{name: 'pk_index'}">对战</router-link>
              </li>
              <li class="nav-item">
                <router-link  class="nav-link" :to="{name: 'record_index'}">对局列表</router-link>
              </li>
              <li class="nav-item">
                <router-link  class="nav-link" :to="{name: 'ranklist_index'}">排行榜</router-link>
              </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Zhu Wentao
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li>
                        <router-link  class="dropdown-item" :to="{name: 'user_bot_index'}">我的Bot</router-link>
                      </li>
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item" href="#">退出</a></li>
                    </ul>
                  </li>
              </ul>
          </div>
        </div>
      </nav>
</template>

<script>

</script>

<style scoped>

</style>

实现聚焦区域

PKIndexView.vue

xxxxxxxxxx
<template>
    <div class="container">
        <div class="card">
            <div class="card-body">对战</div>
        </div>
    </div>
</template>

<script>

</script>

<style scoped>
    
</style>

维护代码