完成web端导航栏
This commit is contained in:
parent
6f564eaa60
commit
4eb9cdfae7
|
|
@ -8,6 +8,7 @@
|
|||
"name": "web",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@floating-ui/vue": "^0.2.0",
|
||||
"bootstrap": "^5.2.3",
|
||||
"core-js": "^3.8.3",
|
||||
"jquery": "^3.6.3",
|
||||
|
|
@ -1773,6 +1774,59 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.2.0.tgz",
|
||||
"integrity": "sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA=="
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.2.0.tgz",
|
||||
"integrity": "sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/vue": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/vue/-/vue-0.2.0.tgz",
|
||||
"integrity": "sha512-2FjxjcXIbt5aT3KncAAlnPV1CanjA5thmTH+JZtvD6g/6sneexGKI5mJA8ru8c6+1CQX8dUBzh7Te/afoALZYA==",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.1.0",
|
||||
"vue-demi": "^0.13.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^2.0.0 || >=3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/vue/node_modules/vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@hapi/hoek": {
|
||||
"version": "9.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
|
||||
|
|
@ -1947,6 +2001,12 @@
|
|||
"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.6",
|
||||
"resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.6.tgz",
|
||||
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@sideway/address": {
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/vue": "^0.2.0",
|
||||
"bootstrap": "^5.2.3",
|
||||
"core-js": "^3.8.3",
|
||||
"jquery": "^3.6.3",
|
||||
|
|
|
|||
|
|
@ -1,34 +1,18 @@
|
|||
<template>
|
||||
<div>Bot昵称：{{ bot_name }}</div>
|
||||
<div>Bot战力：{{ bot_rating }}</div>
|
||||
<router-view />
|
||||
<NavBar />
|
||||
<!-- router-view 定义在 router 文件夹的 index.js 中 -->
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "jquery";
|
||||
import { ref } from "vue";
|
||||
// 导入 NavBar 组件
|
||||
import NavBar from "./components/NavBar.vue";
|
||||
// 导入 BootStrap 的 css 和 js 依赖以同步 BootStrap 样式
|
||||
import "bootstrap/dist/css/bootstrap.css";
|
||||
import "bootstrap/dist/js/bootstrap";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
setup: () => {
|
||||
let bot_name = ref("");
|
||||
let bot_rating = ref("");
|
||||
|
||||
$.ajax({
|
||||
url: "http://localhost:3000/pk/getbotinfo/",
|
||||
type: "get",
|
||||
success: (resp) => {
|
||||
// console.log(resp);
|
||||
bot_name.value = resp.name;
|
||||
bot_rating.value = resp.rating;
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
bot_name,
|
||||
bot_rating,
|
||||
};
|
||||
},
|
||||
components: { NavBar },
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<!-- container是一个自适应大小的容器 -->
|
||||
<div class="container">
|
||||
<!-- card 布局可以绘制框体 -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<!-- slot 可以作为母版,将子组件嵌套在里面 -->
|
||||
<!-- 子组件要填充的内容都会渲染到 slot 里面 -->
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script></script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
/* 到顶部距离 20px */
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<router-link class="navbar-brand" :to="{ name: 'home' }">King of Bot</router-link>
|
||||
<div class="collapse navbar-collapse" id="navbarText">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<!-- :class 是 v-bind:class 的简写 -->
|
||||
<router-link
|
||||
:class="route_name == 'pk_index' ? 'nav-link active' : 'nav-link'"
|
||||
:to="{ name: 'pk_index' }"
|
||||
>对战</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
:class="route_name == 'ranklist_index' ? 'nav-link active' : 'nav-link'"
|
||||
:to="{ name: 'ranklist_index' }"
|
||||
>对局列表</router-link
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
:class="route_name == 'record_index' ? 'nav-link active' : 'nav-link'"
|
||||
:to="{ name: 'record_index' }"
|
||||
>排行榜</router-link
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
<!-- 下拉菜单样式 -->
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
flykhan
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<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>
|
||||
import { useRoute } from "vue-router";
|
||||
import { computed } from "vue";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
// 用于判断当前选中的是哪个 nav-link 链接,结合上文操作将选中的 nav-link 改为 nav-link active 模式
|
||||
let route_name = computed(() => route.name);
|
||||
|
||||
return {
|
||||
route_name,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -1,7 +1,50 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
// 导入所有 view 页面
|
||||
import PkIndexView from '../views/pk/PkIndexView.vue'
|
||||
import RanklistIndexView from '../views/ranklist/RanklistIndexView.vue'
|
||||
import RecordIndexView from '../views/record/RecordIndexView.vue'
|
||||
import UserBotIndexView from '../views/user/bot/UserBotIndexView.vue'
|
||||
import NotFound from '../views/error/NotFound.vue'
|
||||
|
||||
|
||||
// 定义所有页面的 URL 路由
|
||||
const routes = [
|
||||
{
|
||||
path:'/',
|
||||
name:'home',
|
||||
// 重定向:将 home 重定向到 pk 页面
|
||||
redirect:'/pk/'
|
||||
},
|
||||
{
|
||||
path:'/pk/',
|
||||
name:'pk_index',
|
||||
component:PkIndexView
|
||||
},
|
||||
{
|
||||
path:'/ranklist/',
|
||||
name:'ranklist_index',
|
||||
component:RanklistIndexView
|
||||
},
|
||||
{
|
||||
path:'/record/',
|
||||
name:'record_index',
|
||||
component:RecordIndexView
|
||||
},
|
||||
{
|
||||
path:'/user/bot/',
|
||||
name:'user_bot_index',
|
||||
component:UserBotIndexView
|
||||
},
|
||||
{
|
||||
path:'/404/',
|
||||
name:'404',
|
||||
component:NotFound
|
||||
},
|
||||
{
|
||||
// 正则匹配所有其他非法页面到 404
|
||||
path:'/:catchAll(.*)',
|
||||
redirect:'/404/'
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<ContentBase>404 Not Found</ContentBase>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentBase from "../../components/ContentBase.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContentBase,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<ContentBase>对战</ContentBase>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentBase from "../../components/ContentBase.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContentBase,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<ContentBase>对局列表</ContentBase>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentBase from "../../components/ContentBase.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContentBase,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<ContentBase>排行榜</ContentBase>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentBase from "../../components/ContentBase.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContentBase,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<ContentBase>我的Bot</ContentBase>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentBase from "../../../components/ContentBase.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContentBase,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Reference in New Issue