parent
20023c684a
commit
29912d3580
@ -0,0 +1,30 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
# class_system
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "class_system",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
|
"axios": "^1.7.7",
|
||||||
|
"element-plus": "^2.8.4",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"vue": "^3.4.29",
|
||||||
|
"vue-router": "^4.3.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.0.5",
|
||||||
|
"pinia-plugin-persistedstate": "^4.1.1",
|
||||||
|
"unplugin-auto-import": "^0.18.3",
|
||||||
|
"unplugin-vue-components": "^0.27.4",
|
||||||
|
"vite": "^5.3.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,11 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<router-view></router-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
|
||||||
|
//上传接口
|
||||||
|
export const uploadService = (file) => {
|
||||||
|
return request.post('/upload/', { file: file })
|
||||||
|
}
|
||||||
|
|
||||||
|
//排行榜展示
|
||||||
|
export const rankingShow = () => {
|
||||||
|
return request.get('/leaderboard/')
|
||||||
|
}
|
||||||
|
|
||||||
|
//启动点名
|
||||||
|
export const callService = () => {
|
||||||
|
return request.post('/roll_call/', { start_roll_call: 'true' } )
|
||||||
|
}
|
||||||
|
|
||||||
|
//启动点名
|
||||||
|
export const callCheckService = (id,dao,wen,ans) => {
|
||||||
|
return request.post('/confirm_roll_call/',
|
||||||
|
{
|
||||||
|
student_id: id,
|
||||||
|
attended: dao,
|
||||||
|
question_repeat: wen,
|
||||||
|
answer_accuracy: ans,
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
|
||||||
|
//注册接口
|
||||||
|
export const userRegisterService = ({user,pwd}) => {
|
||||||
|
return request.post('/toregister/', { user: user, pwd: pwd })
|
||||||
|
}
|
||||||
|
|
||||||
|
//登录接口
|
||||||
|
export const userLoginService = ({ user, pwd }) => {
|
||||||
|
return request.post('/', { user: user, pwd: pwd })
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,9 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'LOGO';
|
||||||
|
src: url(ZhanKuXiaoLOGOTi-2.otf);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'KUAI';
|
||||||
|
src: url(ZhanKuKuaiLeTi2016XiuDingBan-1.ttf);
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 365 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 208 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,16 @@
|
|||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import pinia from '@/stores/index'
|
||||||
|
|
||||||
|
import './assets/font/font.css'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(pinia)
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/home',
|
||||||
|
component: () => import('@/views/HomePage.vue'),//首页
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
component: () => import('@/views/LoginPage.vue'),//登录页
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/register',
|
||||||
|
component: () => import('@/views/RegisterPage.vue'),//注册页
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/', component: () => import('@/views/LayoutPage.vue'), redirect: '/ready',
|
||||||
|
children: [
|
||||||
|
{ path: '/ready', component: () => import('@/views/ReadyCall.vue') },
|
||||||
|
{ path: '/rank', component: () => import('@/views/RankingList.vue') },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/rollcall',
|
||||||
|
component: () => import('@/views/RollCall.vue'),//点名页
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import persist from 'pinia-plugin-persistedstate'
|
||||||
|
|
||||||
|
const pinia = createPinia()
|
||||||
|
pinia.use(persist)
|
||||||
|
|
||||||
|
export default pinia
|
||||||
|
|
||||||
|
// import { useUserStore } from './modules/user'
|
||||||
|
// export { useUserStore }
|
||||||
|
export * from './modules/user'
|
||||||
|
export * from './modules/ranking.js'
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
export const useRankingStore = defineStore('rank', () => {
|
||||||
|
const list = ref([
|
||||||
|
|
||||||
|
])
|
||||||
|
const count = ref('0')
|
||||||
|
return {
|
||||||
|
list,
|
||||||
|
count,
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
persist: true
|
||||||
|
})
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useUserStore = defineStore('big-user', () => {
|
||||||
|
const user = ref('')
|
||||||
|
|
||||||
|
|
||||||
|
return { user }
|
||||||
|
}, {
|
||||||
|
persist: true
|
||||||
|
})
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const baseURL = 'http://10.133.12.95:8000/polls'
|
||||||
|
const instance = axios.create({
|
||||||
|
baseURL: 'http://10.133.12.95:8000/polls',
|
||||||
|
timeout: 1000
|
||||||
|
})
|
||||||
|
|
||||||
|
// 添加请求拦截器
|
||||||
|
instance.interceptors.request.use(
|
||||||
|
(config) => {
|
||||||
|
// 在发送请求之前做些什么
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
(error) => Promise.reject(error)
|
||||||
|
// 对请求错误做些什么
|
||||||
|
)
|
||||||
|
|
||||||
|
// 添加响应拦截器
|
||||||
|
instance.interceptors.response.use(
|
||||||
|
(response) => {
|
||||||
|
// 2xx 范围内的状态码都会触发该函数。
|
||||||
|
// 对响应数据做点什么
|
||||||
|
return response;
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
// 超出 2xx 范围的状态码都会发该函数。
|
||||||
|
// 对响应错误做点什么
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export default instance
|
||||||
|
export { baseURL }
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="common-layout">
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<el-menu class="transparent-menu" text-color="white" mode="horizontal">
|
||||||
|
<el-menu-item class="transparent-menu-item" style="font-size:x-large;letter-spacing: 8px;">
|
||||||
|
classroom roll call system
|
||||||
|
</el-menu-item>
|
||||||
|
<div class="flex-grow" />
|
||||||
|
<el-menu-item class="transparent-menu-item" style="font-size: large;">首页</el-menu-item>
|
||||||
|
<el-menu-item class="transparent-menu-item" style="font-size: large;">关于我们</el-menu-item>
|
||||||
|
<el-button class="transparent-button" @click="$router.push('/login')">login
|
||||||
|
in</el-button>
|
||||||
|
</el-menu>
|
||||||
|
</el-header>
|
||||||
|
<el-main>
|
||||||
|
<el-button class="transparent-button enter-button" @click="$router.push('/ready')"
|
||||||
|
style="position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%);width: 140px;height: 50px;font-size: larger;">进入</el-button>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.transparent-menu {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none ;
|
||||||
|
font-family: "KUAI";
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-grow {
|
||||||
|
flex-grow: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.common-layout {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background-image: url('@/assets/first.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enter-button {
|
||||||
|
font-family: "LOGO";
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent-button {
|
||||||
|
background-color: transparent;
|
||||||
|
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.763);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 15px;
|
||||||
|
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
border-color: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent-menu-item {
|
||||||
|
background-color: transparent !important;
|
||||||
|
&:hover {
|
||||||
|
border-bottom: 2px solid #fff !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent-menu-item.is-active {
|
||||||
|
border-bottom: 2px solid #fff !important;
|
||||||
|
color: #fff !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
<script setup>
|
||||||
|
import { Pointer, Histogram, Tools } from '@element-plus/icons-vue'
|
||||||
|
import labi from '@/assets/labi.jpg'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div calss="button-box">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="8" style="background-color: #e8edf0;">
|
||||||
|
<el-avatar :size="100" :src=labi class="labi" />
|
||||||
|
<div class="menu">
|
||||||
|
<el-menu active-text-color="#fff" class="el-menu-vertical-demo" :default-active="$route.path"
|
||||||
|
router>
|
||||||
|
<el-menu-item index="/ready">
|
||||||
|
<el-icon>
|
||||||
|
<Pointer class="icon-group" />
|
||||||
|
</el-icon>
|
||||||
|
<span>点名</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/rank">
|
||||||
|
<el-icon>
|
||||||
|
<Histogram class="icon-group" />
|
||||||
|
</el-icon>
|
||||||
|
<span>排行榜</span>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
</div>
|
||||||
|
<el-button class="butt" @click="$router.push('/home')"
|
||||||
|
style="position: absolute; top: 90%; left:9%; transform: translate(-50%, -50%);width: 90px;height: 40px">
|
||||||
|
返回首页
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="16">
|
||||||
|
<router-view></router-view>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.button-box{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu{
|
||||||
|
margin-top: 300px;
|
||||||
|
margin-left: 80px;
|
||||||
|
margin-right: 80px;
|
||||||
|
padding-bottom: 250px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.labi {
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 12%;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item {
|
||||||
|
color: #6c6c6c;
|
||||||
|
&:hover {
|
||||||
|
background-color: #92a772;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item.is-active {
|
||||||
|
background-color: #92a772;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.butt{
|
||||||
|
color: #fff;
|
||||||
|
background-color: #92a772;
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #92a772;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,135 @@
|
|||||||
|
<script setup>
|
||||||
|
import { userLoginService } from '@/api/user.js'
|
||||||
|
import { User, Lock } from '@element-plus/icons-vue'
|
||||||
|
import { ref ,reactive} from 'vue'
|
||||||
|
import imgText from '@/assets/login.png'
|
||||||
|
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const formdata = ref()
|
||||||
|
const loginForm = reactive({
|
||||||
|
user: '',
|
||||||
|
pwd: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
user: [
|
||||||
|
{ required: true, message: '用户名不能为空', trigger: 'change' },
|
||||||
|
{ pattern: /^.{2,}$/, message: '用户名长度不小于2位', trigger: 'change' }
|
||||||
|
],
|
||||||
|
pwd: [
|
||||||
|
{ required: true, message: '密码不能为空', trigger: 'change' },
|
||||||
|
{ pattern: /^(?![0-9A-Z.]+$)(?![0-9a-z.]+$).{8,}$/, message: '密码长度不小于8位,同时包含大小写字母', trigger: 'change' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const login = async () => {
|
||||||
|
await formdata.value.validate()
|
||||||
|
const res = await userLoginService(formdata.value)
|
||||||
|
console.log(res)
|
||||||
|
ElMessage.success('登录成功')
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="all-back">
|
||||||
|
<div class="first-back">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="left-col">
|
||||||
|
<div class="left-top">
|
||||||
|
<el-menu class="transparent-menu" mode="horizontal">
|
||||||
|
<el-menu-item class="transparent-menu-item"
|
||||||
|
style="font-size: large;border-bottom: 2px solid">登录</el-menu-item>
|
||||||
|
<el-menu-item class="transparent-menu-item" style="font-size: large;"
|
||||||
|
@click="$router.push('/register')">注册</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
</div>
|
||||||
|
<div class="left-button">
|
||||||
|
<!--登陆界面-->
|
||||||
|
<el-form :model="loginForm" :rules="rules" ref="formdata">
|
||||||
|
<el-form-item prop="user">
|
||||||
|
<el-icon :size="20" style="color:#8fa46e ;margin-right: 10px;">
|
||||||
|
<User />
|
||||||
|
</el-icon>
|
||||||
|
<el-input v-model="loginForm.user" placeholder="请输入用户名"
|
||||||
|
style="width: 350px;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="pwd">
|
||||||
|
<el-icon :size="20" style="color:#8fa46e ;margin-right: 10px;">
|
||||||
|
<Lock />
|
||||||
|
</el-icon>
|
||||||
|
<el-input v-model="loginForm.pwd" placeholder="请输入密码" style="width: 350px;"
|
||||||
|
type="password"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button color="#8fa46e"
|
||||||
|
style="color: aliceblue;margin-top: 40px;margin-left: 40px;border-radius: 20px;width: 90px;"
|
||||||
|
@click="login">登录</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<img :src="imgText" style="width: 100%;height: 580px;" />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.all-back {
|
||||||
|
background-color: #b6bca6;
|
||||||
|
width: 100%;
|
||||||
|
height: 97.7vh;
|
||||||
|
}
|
||||||
|
.first-back {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 5%;
|
||||||
|
margin-left: 17%;
|
||||||
|
width: 1000px;
|
||||||
|
height: 580px;
|
||||||
|
background-color: #dce1de;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent-menu {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent-menu-item {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #8fa46e !important;
|
||||||
|
&:hover {
|
||||||
|
border-bottom: 2px solid #8fa46e !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #8fa46e !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent-menu-item.is-active {
|
||||||
|
border-bottom: 2px solid #8fa46e !important;
|
||||||
|
color: #8fa46e !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-top {
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-left: 50px;
|
||||||
|
font-weight: bold
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-button {
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-left: 60px;
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import { rankingShow } from '@/api/student.js'
|
||||||
|
|
||||||
|
const tableData = reactive([])
|
||||||
|
|
||||||
|
const rankShow = async () => {
|
||||||
|
const res = await rankingShow()
|
||||||
|
tableData.value = res.data.leaderboard
|
||||||
|
console.log(res.data);
|
||||||
|
console.log(tableData.value)
|
||||||
|
}
|
||||||
|
rankShow()
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1 class="top-title">学生积分排行榜</h1>
|
||||||
|
<div class="rank-table">
|
||||||
|
<el-card style="margin-left: 30px;margin-right: 30px;height: 600px;">
|
||||||
|
<template style="background-color: #e8edf0;" #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>软件K班</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!--排行榜-->
|
||||||
|
<el-table height="510" :data="tableData.value" style="width: 100%;color:#909399">
|
||||||
|
<el-table-column type="index" label="排名" width="100" />
|
||||||
|
<el-table-column prop="student_id" label="学号" width="300" />
|
||||||
|
<el-table-column prop="name" label="姓名" width="300">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="score" label="积分" width="70">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.top-title {
|
||||||
|
font-family: KUAI;
|
||||||
|
color: #8fa46e;
|
||||||
|
font-size:xx-large;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
font-family: KUAI;
|
||||||
|
font-size: larger;
|
||||||
|
color: #8fa46e;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,133 @@
|
|||||||
|
<script setup>
|
||||||
|
import { userRegisterService } from '@/api/user.js'
|
||||||
|
import { User, Lock } from '@element-plus/icons-vue'
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import imgText from '@/assets/login.png'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const formdata = ref()
|
||||||
|
const loginForm = ref({
|
||||||
|
user: '',
|
||||||
|
pwd: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
user: [
|
||||||
|
{ required: true, message: '用户名不能为空', trigger: 'change' },
|
||||||
|
{ pattern: /^.{2,}$/, message: '用户名长度不小于2位', trigger: 'change' }
|
||||||
|
],
|
||||||
|
pwd: [
|
||||||
|
{ required: true, message: '密码不能为空', trigger: 'change' },
|
||||||
|
{ pattern: /^(?![0-9A-Z.]+$)(?![0-9a-z.]+$).{8,}$/, message: '密码长度不小于8位,同时包含大小写字母', trigger: 'change' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const register = async () => {
|
||||||
|
await formdata.value.validate()
|
||||||
|
const res = await userRegisterService(loginForm.value)
|
||||||
|
console.log(res)
|
||||||
|
ElMessage.success('注册成功')
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="all-back">
|
||||||
|
<div class="first-back">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="left-col">
|
||||||
|
<div class="left-top">
|
||||||
|
<el-menu class="transparent-menu" mode="horizontal">
|
||||||
|
<el-menu-item class="transparent-menu-item" style="font-size: large;"
|
||||||
|
@click="$router.push('/login')">登录</el-menu-item>
|
||||||
|
<el-menu-item class="transparent-menu-item"
|
||||||
|
style="font-size: large;border-bottom: 2px solid">注册</el-menu-item>
|
||||||
|
|
||||||
|
</el-menu>
|
||||||
|
</div>
|
||||||
|
<div class="left-button">
|
||||||
|
<!--登陆界面-->
|
||||||
|
<el-form :model="loginForm" :rules="rules" ref="formdata">
|
||||||
|
<el-form-item prop="user">
|
||||||
|
<el-icon :size="20" style="color:#8fa46e ;margin-right: 10px;">
|
||||||
|
<User />
|
||||||
|
</el-icon>
|
||||||
|
<el-input v-model="loginForm.user" placeholder="请输入用户名"
|
||||||
|
style="width: 350px;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="pwd">
|
||||||
|
<el-icon :size="20" style="color:#8fa46e ;margin-right: 10px;">
|
||||||
|
<Lock />
|
||||||
|
</el-icon>
|
||||||
|
<el-input v-model="loginForm.pwd" placeholder="请输入密码" style="width: 350px;"
|
||||||
|
type="password"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button color="#8fa46e" @click="register"
|
||||||
|
style="color: aliceblue;margin-top: 40px;margin-left: 40px;border-radius: 20px;width: 90px;">注册</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<img :src="imgText" style="width: 100%;height: 580px;" />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.all-back {
|
||||||
|
background-color: #b6bca6;
|
||||||
|
width: 100%;
|
||||||
|
height: 97.7vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-back {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 5%;
|
||||||
|
margin-left: 17%;
|
||||||
|
width: 1000px;
|
||||||
|
height: 580px;
|
||||||
|
background-color: #dce1de;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent-menu {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent-menu-item {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #8fa46e !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-bottom: 2px solid #8fa46e !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #8fa46e !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent-menu-item.is-active {
|
||||||
|
border-bottom: 2px solid #8fa46e !important;
|
||||||
|
color: #8fa46e !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-top {
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-left: 50px;
|
||||||
|
font-weight: bold
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-button {
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-left: 60px;
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
AutoImport({
|
||||||
|
resolvers: [ElementPlusResolver()],
|
||||||
|
}),
|
||||||
|
Components({
|
||||||
|
resolvers: [ElementPlusResolver()],
|
||||||
|
})
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in new issue