Commit 6680b76f authored by 孙谢炜's avatar 孙谢炜

新增轮播图与登录检测

parent c0ea6e29
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>轮播图管理</title>
<style>
html,body,#app{
height: 100%;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="src/carousel_manage.js"></script>
</body>
</html>
This diff is collapsed.
......@@ -9,10 +9,11 @@
"dependencies": {
"@mdi/font": "7.0.96",
"axios": "^1.6.8",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.10",
"roboto-fontface": "*",
"vue": "^3.3.0",
"vuetify": "^3.5.9"
"vuetify": "^3.6.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
......
/**
* main.js
*
* Bootstraps Vuetify and other plugins then mounts the App`
*/
// Plugins
import { registerPlugins } from '@/plugins'
// Components
import App from './carousel_manage.vue'
// Composables
import { createApp } from 'vue'
const app = createApp(App)
registerPlugins(app)
app.mount('#app')
This diff is collapsed.
......@@ -80,16 +80,17 @@
</v-dialog>
<div>
<v-card v-if="exist_season" class="mx-auto my-2" href="/lauched_games.html" width="95%" rel="noopener" target="_blank" title="已提交比赛"
append-icon="mdi-chevron-right"></v-card>
<v-card v-if="exist_season" class="mx-auto my-2" href="/audit_games.html" width="95%" rel="noopener" target="_blank" title="待审核比赛">
<v-card v-if="exist_season" class="mx-auto my-2" href="/lauched_games.html" width="95%" rel="noopener"
target="_blank" title="已提交比赛" append-icon="mdi-chevron-right"></v-card>
<v-card v-if="exist_season" class="mx-auto my-2" href="/audit_games.html" width="95%" rel="noopener" target="_blank"
title="待审核比赛">
<template v-slot:append>
<v-icon v-if="unaudit_number === 0">mdi-chevron-right</v-icon>
<v-badge v-if="unaudit_number !== 0" color="error" :content="unaudit_number" inline></v-badge>
</template>
</v-card>
<v-card v-if="exist_season" class="mx-auto my-2" href="/score_ranking.html" width="95%" rel="noopener" target="_blank" title="球员积分榜单"
append-icon="mdi-chevron-right"></v-card>
<v-card v-if="exist_season" class="mx-auto my-2" href="/score_ranking.html" width="95%" rel="noopener"
target="_blank" title="球员积分榜单" append-icon="mdi-chevron-right"></v-card>
<v-card class="mx-auto my-2" href="/my_recentgames.html" width="95%" rel="noopener" target="_blank" title="比赛列表"
append-icon="mdi-chevron-right"></v-card>
</div>
......@@ -161,31 +162,40 @@ watch(score2, (newVal, oldVal) => {
form.value.validate(); // 触发表单验证
}
});
axios.get('/api/players',{
params:{
lim: 1000,
}
})
.then(function (response) {
const data = response.data;
exist_season.value = data.ExistSeason;
for (var i = 0; i < data.Players.length; i++) {
arr.value[i] = data.Players[i].player_id.toString() + '-' + data.Players[i].player_real_name;
function refresh() {
axios.get('/api/players', {
params: {
lim: 1000,
}
})
.catch(function (error) {
console.log(error);
})
.then(function (response) {
const data = response.data;
exist_season.value = data.ExistSeason;
for (var i = 0; i < data.Players.length; i++) {
arr.value[i] = data.Players[i].player_id.toString() + '-' + data.Players[i].player_real_name;
}
})
.catch(function (error) {
console.log(error);
})
axios.get('/api/lauchedGames',)
.then(function (response) {
const data1 = response.data;
unaudit_number.value = data1.Games.length;
})
.catch(function (error) {
console.log(error);
})
axios.get('/api/lauchedGames',)
.then(function (response) {
const data1 = response.data;
unaudit_number.value = data1.Games.length;
})
.catch(function (error) {
console.log(error);
})
}
refresh();
const clickGame_model = defineModel();
watch(clickGame_model, (newVal, oldVal) => {
if (newVal !== oldVal) {
refresh();
}
});
function submit() {
loading.value = true;
......
......@@ -2,7 +2,8 @@
<v-card class="relative1" style="height: 200px;" elevation="5">
<v-carousel :show-arrows="false" style="height: 100%;width: 100%;" cycle interval="2000" hide-delimiter-background>
<v-carousel-item v-for="(img, i) in imgs" :key="i" cover>
<img :src="img.src" class="tupian">
<a :href="img.link"><img :src="img.src" class="tupian"></a>
</v-carousel-item>
</v-carousel>
</v-card>
......@@ -239,25 +240,26 @@
<script setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';
import { reactive } from 'vue';
import axios from 'axios';
const imgs = reactive([
{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
},
]
);
// const imgs = reactive([
// {
// src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
// },
// {
// src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
// },
// {
// src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
// },
// {
// src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
// },
// ]
// );
const imgs = ref(new Array());
const items = ref(new Array());
const group1 = ref(new Array());
const group2 = ref(new Array());
......@@ -315,6 +317,21 @@ function formatYear(date) {
}
function refresh() {
axios.get('/api/getCarousel')
.then(function(response){
const data7 = response.data;
imgs.value.length = 0;
for(var i = 0; i < data7.Carousels_info.length; i++){
var carousel_img = {
src: data7.Carousels_info[i].src,
link: data7.Carousels_info[i].link,
}
imgs.value[i] = carousel_img;
}
})
.catch(function(error){
console.log(error);
})
axios.get('/api/mySeasonInfo',)
.then(function (response) {
const data4 = response.data;
......@@ -450,6 +467,13 @@ function refresh() {
refresh();
const clickHome_model = defineModel();
watch(clickHome_model, (newVal, oldVal) => {
if (newVal !== oldVal) {
refresh();
}
});
const cardtitle = ref(null);
const cardtext = ref(null);
const dialog1 = ref(false);
......
......@@ -47,6 +47,7 @@
import { ref } from 'vue';
import { reactive } from 'vue';
import axios from 'axios';
import CryptoJS from 'crypto-js';
const form = ref(null);
const rules = reactive({
......@@ -75,11 +76,16 @@ function info(title, text) {
dialog.value = true;
}
function md5Hash(password) {
return CryptoJS.MD5(password).toString();
}
function login() {
loading.value = true;
const hashedPassword = md5Hash(password.value); // 使用MD5进行前端哈希处理
axios.post('/api/login', {
usrname: usrname.value,
psword: password.value
psword: hashedPassword,
})
.then(function (response) {
const data = response.data;
......
......@@ -56,6 +56,14 @@
>
<v-list-item-title class="text-h6">比赛管理</v-list-item-title>
</v-list-item>
<v-list-item
color="primary"
href="/carousel_manage.html"
height="60px"
appendIcon = "mdi-chevron-right"
>
<v-list-item-title class="text-h6">轮播图管理</v-list-item-title>
</v-list-item>
</v-list>
</v-card>
<!-- <div class="text-h4 headline">
......
......@@ -30,6 +30,7 @@
import { ref } from 'vue';
import { reactive } from 'vue';
import { watch } from 'vue';
import CryptoJS from 'crypto-js';
import axios from 'axios';
const usrname = ref(null);
......@@ -58,11 +59,16 @@ watch(password, (newVal, oldVal) => {
}
});
function md5Hash(password) {
return CryptoJS.MD5(password).toString();
}
function register() {
loading.value = true;
const hashedPassword = md5Hash(password.value); // 使用MD5进行前端哈希处理
axios.post('/api/register', {
usrname: usrname.value,
psword: password.value
psword: hashedPassword,
})
.then(function (response) {
const data = response.data;
......
......@@ -242,7 +242,7 @@
</template>
<script setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';
import { reactive } from 'vue';
import axios from 'axios';
......@@ -457,6 +457,12 @@ function refresh() {
refresh();
const clickMy_model = defineModel();
watch(clickMy_model, (newVal, oldVal) => {
if (newVal !== oldVal) {
refresh();
}
});
function button1() {
if (players_id !== 0) {
......
......@@ -2,13 +2,13 @@
<div class="w-auto">
<v-window v-model="tab" class="h-screen w-auto">
<v-window-item :key="1" :value="'tab-1'" class="h-screen w-100 bottom-navigation">
<Home></Home>
<Home v-model="home_click"></Home>
</v-window-item>
<v-window-item :key="2" :value="'tab-2'" class="h-screen w-100 bottom-navigation">
<Gamemanage></Gamemanage>
<Gamemanage v-model="game_click"></Gamemanage>
</v-window-item>
<v-window-item :key="3" :value="'tab-3'" class="h-screen w-100 bottom-navigation">
<Space></Space>
<Space v-model="my_click"></Space>
</v-window-item>
<v-window-item :key="4" :value="'tab-4'" class="h-screen w-100 bottom-navigation">
<Manage></Manage>
......@@ -17,12 +17,12 @@
<v-layout class="tabs">
<v-bottom-navigation v-model="tab" color="indigo" align-tabs="center" stacked grow>
<v-btn value="tab-1">
<v-btn value="tab-1" @click="homeClick">
<v-icon>mdi-home</v-icon>
首页
</v-btn>
<v-btn value="tab-2">
<v-btn value="tab-2" @click="gameClick">
<v-badge color="error" dot v-if="unaudit_number !== 0">
<v-icon>mdi-table-tennis</v-icon>
</v-badge>
......@@ -30,12 +30,12 @@
比赛
</v-btn>
<v-btn value="tab-3">
<v-btn value="tab-3" @click="myClick">
<v-icon>mdi-account</v-icon>
我的
</v-btn>
<v-btn v-if="is_su" value="tab-4">
<v-btn v-if="is_su" value="tab-4" @click="manageClick">
<v-icon>mdi-account-cog</v-icon>
管理
</v-btn>
......@@ -53,28 +53,72 @@ import Home from './components/home.vue';
import Manage from './components/manage.vue';
import axios from 'axios';
const tab = ref(null);
const tab = ref("tab-1");
const is_su = ref(false);
const is_member = ref(false);
const unaudit_number = ref(0);
const home_click = ref(true);
const game_click = ref(true);
const my_click = ref(true);
axios.get('/api/currentUser')
.then(function (response) {
const data = response.data;
is_su.value = data.is_su;
})
.catch(function (error) {
console.log(error);
})
axios.get('/api/lauchedGames',)
.then(function (response) {
const data1 = response.data;
unaudit_number.value = data1.Games.length;
})
.catch(function (error) {
console.log(error);
})
function refresh() {
axios.get('/api/currentUser')
.then(function (response) {
const data = response.data;
if (data.status === "SUCCESS") {
is_su.value = data.is_su;
is_member.value = data.is_member;
}
if (data.status === "LOGOUT") {
window.location.href = '/index.html';
}
})
// .then(function(response){
// const data2 = response.data;
// if (data2.status === "LOGOUT"){
// window.location.href = '/index.html';
// }
// if (!is_member.value){
// window.location.href = '/index.html';
// }
// }
// )
.catch(function (error) {
console.log(error);
})
axios.get('/api/lauchedGames',)
.then(function (response) {
const data1 = response.data;
unaudit_number.value = data1.Games.length;
})
.catch(function (error) {
console.log(error);
})
}
refresh();
function homeClick() {
home_click.value = !home_click.value;
tab.value = "tab-1"
}
function gameClick() {
game_click.value = !game_click.value;
tab.value = "tab-2"
}
function myClick() {
my_click.value = !my_click.value;
tab.value = "tab-3"
}
function manageClick() {
tab.value = "tab-4"
}
</script>
<style>
......
......@@ -32,7 +32,7 @@
color="indigo" text="重启赛季"></v-btn>
</template>
</v-data-table>
<div><v-btn style="width: 100px;" class="float-right" variant="text" color="indigo"
<div><v-btn style="width: 100px;margin-right: 10px;" class="float-right" variant="text" color="indigo"
prepend-icon="mdi-scoreboard" @click="dialog = true" text="开启赛季"></v-btn></div>
</v-app>
<v-dialog v-model="dialog" width="auto">
......
......@@ -67,6 +67,7 @@ export default defineConfig({
player_manage: resolve(__dirname, 'player_manage.html'),
game_manage: resolve(__dirname, 'game_manage.html'),
past_seasons: resolve(__dirname, 'past_seasons.html'),
carousel_manage: resolve(__dirname, 'carousel_manage.html'),
}
},
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment