pkpyta7xr
/
ai-snake
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

version-1.4[实现web端的导航栏]

Browse Source
pull/1/head
dyh 3 years ago
parent 624589e175
commit 1cb251f5e1
11 changed files with 276 additions and 23 deletions
Show Stats Download Patch File Download Diff File

11
web/package-lock.json generated
Unescape View File

@ -8,6 +8,7 @@
"name": "web",
"version": "0.1.0",
"dependencies": {
"@popperjs/core": "^2.11.5",
"bootstrap": "^5.2.0",
"core-js": "^3.8.3",
"jquery": "^3.6.0",
@ -1936,6 +1937,11 @@
"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
"dev": true
},
"node_modules/@popperjs/core": {
"version": "2.11.5",
"resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.5.tgz",
"integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
},
"node_modules/@sideway/address": {
"version": "4.1.4",
"resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
@ -12232,6 +12238,11 @@
"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
"dev": true
},
"@popperjs/core": {
"version": "2.11.5",
"resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.5.tgz",
"integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
},
"@sideway/address": {
"version": "4.1.4",
"resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",

1
web/package.json
Unescape View File

@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@popperjs/core": "^2.11.5",
"bootstrap": "^5.2.0",
"core-js": "^3.8.3",
"jquery": "^3.6.0",

50
web/src/App.vue
Unescape View File

@ -1,34 +1,38 @@
<template>
<div>
<div>Bot昵称：{{bot_name}}</div>
<div>Bot战力：{{bot_rating}}</div>
</div>
<NavBar/>
<router-view/>
</template>
<script>
import $ from "jquery"
import { ref } from "vue"
// import $ from "jquery"
// import { ref } from "vue"
import NavBar from './components/NavBar.vue';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
// import "bootstrap/dist/js/bootstrap";
export default {
components: { NavBar },
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
}
}
// 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
// }
// }
}
</script>

21
web/src/components/ContentField.vue
Unescape View File

@ -0,0 +1,21 @@
<template>
<div class="container content-field">
<div class="card">
<div class="card-body">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
div.content-field {
margin-top: 20px ;
}
</style>

73
web/src/components/NavBar.vue
Unescape View File

@ -0,0 +1,73 @@
<template>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<router-link class='navbar-brand' :to="{name:'home'}">King Of Bots</router-link>
<!-- <a class="navbar-brand" href="#">King Of Bots</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="/pk/">对战</a> -->
<!-- router-link单页面 -->
<router-link :class="route_name == 'pk_index' ? 'nav-link active' : 'nav-link' " :to="{name:'pk_index'}">PK</router-link>
</li>
<li class="nav-item">
<!-- <a class="nav-link" href="/record/">对局列表</a> -->
<router-link :class="route_name == 'record_index' ? 'nav-link active' : 'nav-link' " :to="{name:'record_index'}">对局列表</router-link>
</li>
<li class="nav-item">
<!-- <a class="nav-link" href="/ranklist/">排行榜</a> -->
<router-link :class="route_name == 'ranklist_index' ? 'nav-link active' : '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">
杜艳贺
</a>
<!-- --------坑：注意----------------- -->
<!-- 下拉框的警告解决：style="margin:0" -->
<!-- -------------------------------- -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="margin:0">
<router-link class="dropdown-item" :to="{name:'user_bot_index'}">我的Bots</router-link>
<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();
let route_name = computed( () => route.name );
return {
route_name
}
}
}
</script>
<style scoped>
</style>

47
web/src/router/index.js
Unescape View File

@ -1,6 +1,53 @@
import { createRouter, createWebHistory } from 'vue-router'
import NotFound from '../views/error/NotFound'
import PkIndexView from '../views/pk/PkIndexView'
import RanklistIndexView from '../views/ranklist/RanklistIndexView'
import RecordIndexView from '../views/record/RecordIndexView'
import UserBotIndexView from '../views/user/bot/UserBotIndexView'
const routes = [
{
path: "/",
name:"home",
redirect:"/pk/",
},
//pk
{
path:"/pk/",
name:"pk_index",
component:PkIndexView,
},
//对战列表
{
path:"/record/",
name:"record_index",
component:RecordIndexView,
},
//排行榜
{
path:"/ranklist/",
name:"ranklist_index",
component:RanklistIndexView,
},
//我的Bot
{
path:"/user/bot/",
name:"user_bot_index",
component:UserBotIndexView,
},
//404页面
{
path:"/404/",
name:"404",
component:NotFound,
},
//匹配其他未路由的页面
{
path:"/:catChAll(.*)",
redirect:"/404/",
}
]
const router = createRouter({

19
web/src/views/error/NotFound.vue
Unescape View File

@ -0,0 +1,19 @@
<template>
<ContentField>
404
</ContentField>
</template>
<script>
import ContentField from "@/components/ContentField"
export default {
components:{
ContentField
}
}
</script>
<style>
</style>

20
web/src/views/pk/PkIndexView.vue
Unescape View File

@ -0,0 +1,20 @@
<template>
<ContentField>
PK卡槽
</ContentField>
</template>
<script>
import ContentField from "@/components/ContentField"
export default {
components:{
ContentField
}
}
</script>
<style>
</style>

19
web/src/views/ranklist/RanklistIndexView.vue
Unescape View File

@ -0,0 +1,19 @@
<template>
<ContentField>
排行榜卡槽
</ContentField>
</template>
<script>
import ContentField from "@/components/ContentField"
export default {
components:{
ContentField
}
}
</script>
<style>
</style>

19
web/src/views/record/RecordIndexView.vue
Unescape View File

@ -0,0 +1,19 @@
<template>
<ContentField>
对局列表卡槽
</ContentField>
</template>
<script>
import ContentField from "@/components/ContentField"
export default {
components:{
ContentField
}
}
</script>
<style>
</style>

19
web/src/views/user/bot/UserBotIndexView.vue
Unescape View File

@ -0,0 +1,19 @@
<template>
<ContentField>
我的Bots
</ContentField>
</template>
<script>
import ContentField from "@/components/ContentField"
export default {
components:{
ContentField
}
}
</script>
<style>
</style>
Write Preview
Loading…
Cancel
Save