snowywar/SNCTF-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
jiayuqi7813
2022-05-21 23:35:48 +08:00
commit 601d9c2831
20 changed files with 1558 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

7
README.md Normal file
View File

@@ -0,0 +1,7 @@
# Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
## Recommended IDE Setup
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

13
index.html Normal file
View File

@@ -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>

1144
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

25
package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "snctf-theme",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^0.27.2",
"element-plus": "^2.2.0",
"vue": "^3.2.25",
"vue-axios": "^3.4.1",
"vue-router": "^4.0.13"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.3",
"less": "^4.1.2",
"less-loader": "^11.0.0",
"unplugin-auto-import": "^0.7.1",
"unplugin-vue-components": "^0.19.5",
"vite": "^2.9.9"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

12
src/App.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
body{
background-color: #2d3039;
}
</style>

3
src/api/index.js Normal file
View File

@@ -0,0 +1,3 @@
import axios from "axios";
let BASE_URL = "http://localhost:9000";

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

40
src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,40 @@
<script setup>
import { ref } from 'vue'
defineProps({
msg: String
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<p>
Recommended IDE setup:
<a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
</p>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">
Vite Documentation
</a>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
</p>
<button type="button" @click="count++">count is: {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<style scoped>
a {
color: #42b983;
}
</style>

116
src/components/Login.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<div class="login">
<div class="loin_form">
<p>Welcome to SNCTF</p>
<el-tabs v-model="activeNames" >
<el-tab-pane label="登录" name="first">
<el-form
:model="loginForm"
:rules="loginRules"
ref="loginForm">
<el-form-item label="" prop="username" class="elItem">
<el-input
type="text"
autocomplete="off"
v-model="loginForm.username"
prefix-icon="el-icon-user-solid"
placeholder="请输入用户名"
></el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input
type="password"
autocomplete="off"
v-model="loginForm.password"
prefix-icon="el-icon-lock"
placeholder="请输入密码"
></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button type="primary" @click="goToLogin">登录</el-button>
<!-- <el-button @click="resetLoginForm">重置</el-button>-->
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="注册" name="second">
<!-- 引用注册组件-->
<register></register>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import Register from "./register.vue";
import axios from "axios";
import { ElNotification } from 'element-plus';
export default {
data(){
return{
loginForm:{
username:'',
password:'',
},
activeNames: 'first',
loginRules:{
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
]
},
}
},
methods:{
goToLogin(){
axios({
method:'post',
url:'/api/v1/login',
headers:{
'Content-Type':'application/json;charset=UTF-8'
},
data:{
username:this.loginForm.username,
password:this.loginForm.password
}
}).then(res=>{
console.log(res.data);
if(res.data.code===200){
this.$router.push('/home')
ElNotification({
title: '登录成功',
message: '欢迎回来',
type: 'success',
duration: 3000,
});
}else{
ElNotification({
title: '登录失败',
message: '用户名或密码错误',
type: 'error',
duration: 3000,
});
}
}).catch(err=>{
ElNotification({
title: '登录失败',
message: '用户访问错误',
type: 'error',
duration: 3000,
});
console.log(err)
})
}
},
components: {Register}
}
</script>

51
src/components/Navbar.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<el-menu
router
:default-active="$route.path"
class="el-menu-demo"
mode="horizontal"
background-color="#2d3039"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="0">
<a href="/home"><img style = "height:50px;width:auto" src="../assets/logo.png" alt="logo"></a>
</el-menu-item>
<el-menu-item index="/home">Home</el-menu-item>
<el-menu-item index="/scoreboard">Scoreboard</el-menu-item>
<el-menu-item index="/users">Users</el-menu-item>
<el-menu-item index="/notification">Notification</el-menu-item>
<el-menu-item index="/challenges">Challenges</el-menu-item>
<el-button type="primary" class="login" @click="login">登录/注册</el-button>
</el-menu>
</template>
<script>
export default {
methods:{
login(){
this.$router.push('/login')
}
}
}
</script>
<style lang="less" scoped>
.login{
margin-top: 12px;
margin-left: auto;
margin-right: 30px;
float:right;
}
</style>

34
src/components/index/Index.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="index">
<div class="title">
Welcome to SNCTF
</div>
</div>
</template>
<style lang="less" scoped>
.index {
display: flex;
justify-content: center;
align-items: center;
height: auto;
/* 首页 */
position: absolute;
left: 0px;
top: 80px;
width: 100%;
height: auto;
background: #2D3039;
.title{
/* Welcome To SNCTF */
position: absolute;
font-family: MiSans-Regular;
font-size: 50px;
font-weight: normal;
margin-top: 10%;
color: #FFFFFF;
}
}
</style>

0
src/components/register.vue Normal file
View File

11
src/main.js Normal file
View File

@@ -0,0 +1,11 @@
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

21
src/router/index.js Normal file
View File

@@ -0,0 +1,21 @@
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/home',
name:'Home',
component: () => import('../views/Home.vue')
},
{
path:'/login',
name:'Login',
component: Login,
}
]
})
export default router

12
src/views/Home.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<Navbar></Navbar>
<Index></Index>
</template>
<script>
import Navbar from "../components/Navbar.vue";
import Index from "../components/index/Index.vue";
export default {
components: {Index, Navbar},
}
</script>

12
src/views/login.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<Navbar></Navbar>
<Login></Login>
</template>
<script>
import Navbar from "../components/Navbar.vue";
import Login from "../components/Login.vue";
export default {
components: {Navbar,Login}
}
</script>

30
vite.config.js Normal file
View File

@@ -0,0 +1,30 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
server:{
host: 'localhost',
port: 8080,
proxy: {
'/api': {
target: `http://localhost:9000`, //实际请求地址
changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
})