feat: lab04 done
This commit is contained in:
Tony Yang
+3
-2
@@ -1,10 +1,11 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="zh-tw">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + Vue</title>
|
<title>Practicum of Attacking and Defense of Network Security</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/5.0.1/tocas.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
+19
-1
@@ -1,7 +1,25 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref, KeepAlive } from 'vue';
|
||||||
import { RouterView } from 'vue-router';
|
import { RouterView } from 'vue-router';
|
||||||
|
|
||||||
|
import router from './router';
|
||||||
|
|
||||||
|
import Navbar from './components/Navbar.vue';
|
||||||
|
import Footer from './components/Footer.vue';
|
||||||
|
|
||||||
|
const visitCount = ref(1);
|
||||||
|
router.afterEach(() => {
|
||||||
|
visitCount.value++;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<RouterView />
|
<Navbar />
|
||||||
|
<RouterView v-slot="{ Component }">
|
||||||
|
<KeepAlive>
|
||||||
|
<component :is="Component" v-if="$route.meta.keepAlive" />
|
||||||
|
</KeepAlive>
|
||||||
|
<component :is="Component" v-if="!$route.meta.keepAlive" />
|
||||||
|
</RouterView>
|
||||||
|
<Footer :visitCount="visitCount" />
|
||||||
</template>
|
</template>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 496 B |
@@ -0,0 +1,47 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['new-message']);
|
||||||
|
|
||||||
|
const name = ref('');
|
||||||
|
const message = ref('');
|
||||||
|
|
||||||
|
function submit() {
|
||||||
|
if (!name || !message) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
emit('new-message', { name: name.value, message: message.value });
|
||||||
|
name.value = '';
|
||||||
|
message.value = '';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<form @submit.prevent="submit">
|
||||||
|
<fieldset class="ts-fieldset">
|
||||||
|
<legend class="ts-legend">New Message</legend>
|
||||||
|
<div class="ts-wrap is-vertical">
|
||||||
|
<div class="ts-control">
|
||||||
|
<div class="label">Name</div>
|
||||||
|
<div class="content is-fluid">
|
||||||
|
<div class="ts-input">
|
||||||
|
<input name="name" type="text" placeholder="Name" v-model="name" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ts-control">
|
||||||
|
<div class="label">Message</div>
|
||||||
|
<div class="content is-fluid">
|
||||||
|
<div class="ts-input">
|
||||||
|
<textarea name="message" placeholder="Message" v-model="message"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ts-wrap has-top-spaced is-end-aligned">
|
||||||
|
<button class="ts-button" type="submit" :class="{'is-disabled': name === '' || message === '' }">Submit</button>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
<script setup>
|
||||||
|
defineProps(['message']);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="ts-conversation">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="../../assets/user.png" alt="Avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="bubble">
|
||||||
|
<div class="author">{{ message.name }}</div>
|
||||||
|
<div class="text">{{ message.message }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.ts-conversation > .content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<script setup>
|
||||||
|
defineProps(['visitCount']);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="ts-content is-center-aligned is-vertically-very-padded">
|
||||||
|
<div class="ts-container">
|
||||||
|
<div class="ts-text is-secondary">Total Visitor: {{ visitCount }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
msg: String,
|
|
||||||
})
|
|
||||||
|
|
||||||
const count = ref(0)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<button type="button" @click="count++">count is {{ count }}</button>
|
|
||||||
<p>
|
|
||||||
Edit
|
|
||||||
<code>components/HelloWorld.vue</code> to test HMR
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Check out
|
|
||||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
|
||||||
>create-vue</a
|
|
||||||
>, the official Vue + Vite starter
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Learn more about IDE Support for Vue in the
|
|
||||||
<a
|
|
||||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
|
||||||
target="_blank"
|
|
||||||
>Vue Docs Scaling up Guide</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ts-blankslate is-large">
|
||||||
|
<div class="ts-image is-circular">
|
||||||
|
<img src="../../assets/avatar.png" alt="Avatar" width="200">
|
||||||
|
</div>
|
||||||
|
<div class="header has-top-spaced">
|
||||||
|
R13922074
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
楊東翰
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<script>
|
||||||
|
import { RouterLink } from 'vue-router';
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav>
|
||||||
|
<div class="ts-container navbar-container">
|
||||||
|
<div class="ts-wrap">
|
||||||
|
<RouterLink class="ts-header is-brand" to="/">網路攻防實習</RouterLink>
|
||||||
|
<div class="ts-tab is-tall">
|
||||||
|
<RouterLink class="item" to="/" :class="{'is-active': $route.path == '/'}">關於</RouterLink>
|
||||||
|
<RouterLink class="item" to="/board" :class="{'is-active': $route.path == '/board'}">留言板</RouterLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<button class="ts-button is-disabled" disabled>登入</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
nav {
|
||||||
|
background-color: var(--ts-gray-100);
|
||||||
|
color: var(--ts-white-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ts-header.is-brand {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,11 +1,20 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router';
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
import HomeView from '../views/HomeView.vue';
|
import HomeView from '../views/HomeView.vue';
|
||||||
|
import BoardView from '../views/BoardView.vue';
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
component: HomeView
|
component: HomeView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/board',
|
||||||
|
name: 'Board',
|
||||||
|
component: BoardView,
|
||||||
|
meta: {
|
||||||
|
keepAlive: true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@@ -1,79 +0,0 @@
|
|||||||
:root {
|
|
||||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
background-color: #242424;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 3.2em;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
color: #213547;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,22 @@
|
|||||||
|
<script setup>
|
||||||
|
import BoardForm from '../components/Board/BoardForm.vue';
|
||||||
|
import BoardMessage from '../components/Board/BoardMessage.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const messages = ref([]);
|
||||||
|
|
||||||
|
const onSubmit = (message) => {
|
||||||
|
messages.value.push(message);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="ts-container">
|
||||||
|
<BoardForm @new-message="onSubmit" />
|
||||||
|
<div class="ts-content is-horizontally-fitted is-vertically-padded">
|
||||||
|
<div class="ts-wrap is-vertical">
|
||||||
|
<BoardMessage :message="message" v-for="message in messages" :key="message.id" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
+10
-21
@@ -1,30 +1,19 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import HelloWorld from '../components/HelloWorld.vue';
|
import BlankSlate from '../components/Home/BlankSlate.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="ts-container">
|
||||||
<a href="https://vite.dev" target="_blank">
|
<BlankSlate />
|
||||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
<div class="ts-content is-center-aligned">
|
||||||
</a>
|
<p>
|
||||||
<a href="https://vuejs.org/" target="_blank">
|
我是楊東翰，目前就讀於國立臺灣大學資訊工程學系，這是我的個人網站，歡迎來到我的小天地！
|
||||||
<img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
|
</p>
|
||||||
</a>
|
<span class="ts-icon is-envelope-icon"></span> <a href="mailto:r13922074@csie.ntu.edu.tw" class="ts-link">r13922074@csie.ntu.edu.tw</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<HelloWorld msg="Vite + Vue" />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.logo {
|
|
||||||
height: 6em;
|
|
||||||
padding: 1.5em;
|
|
||||||
will-change: filter;
|
|
||||||
transition: filter 300ms;
|
|
||||||
}
|
|
||||||
.logo:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
.logo.vue:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #42b883aa);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user