Skip to content
Snippets Groups Projects
Commit 48a22a18 authored by JangNamhyeok's avatar JangNamhyeok
Browse files

Jang

parents
Branches
No related tags found
No related merge requests found
Pipeline #4094 failed
> 1%
last 2 versions
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# test_frontend
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
Source diff could not be displayed: it is too large. Options to address this: view the blob.
{
"name": "test_frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.19.0",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"
},
"devDependencies": {
"@vue/cli-plugin-router": "^4.1.0",
"@vue/cli-plugin-vuex": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"vue-template-compiler": "^2.6.10"
}
}
public/favicon.ico

4.19 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>test_frontend</title>
</head>
<body>
<noscript>
<strong>We're sorry but test_frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<Nav id="nav"></Nav>
<div class="main">
<router-view/>
</div>
</div>
</template>
<script>
import Nav from '@/components/Nav.vue'
export default {
name: 'home',
components: {
'Nav': Nav
}
}
</script>
<style>
#app {
text-align: center;
}
#nav {
background: gray;
width: 20%;
float: left;
}
.main{
background: white;
width: 80%;
float: right;
}
</style>
src/assets/logo copy.png

6.69 KiB

src/assets/logo.png

6.69 KiB

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div class="nav">
<div class="profile">
<img src="../assets/logo.png" alt="">
<p>{{uid}}</p>
<p>{{name}}</p>
<p>{{univ}}</p>
<p>{{major}}</p>
<hr>
</div>
<div id="menu">
<router-link to='/'>Home</router-link><br>
<router-link to='/login'>Login</router-link><br>
<router-link to='/club'>Club</router-link>
</div>
<div id="UserInfo">
<h3>My Info</h3>
</div>
<div id="UserClub">
<h3>Club Info</h3>
</div>
</div>
</template>
<script>
export default {
name: 'Nav',
data() {
return {
uid: 'User ID',
name: 'User Name',
univ: 'Univ',
major: 'Major'
}
}
}
</script>
<style>
.nav {
text-align: center;
}
</style>
\ No newline at end of file
<template>
<div class="clubForm">
{{name}} <br>
{{address}} <br>
</div>
</template>
<script>
export default {
async created() {
let id = req.params.id;
const res = await this.$http.get(`http://jnhonlinux.ddns.net:3000/club/${id}`)
if(res.data.success == true) {
this.data = res.data.result[0]
}
},
data() {
return {
name: '',
address: ''
}
}
}
</script>
<style>
.clubForm {
width: 300px;
height: 200px;
border: 2px solid black;
}
</style>
\ No newline at end of file
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
Vue.prototype.$http = axios
Vue.config.productionTip = false
new Vue({
router,
store,
render: function (h) { return h(App) }
}).$mount('#app')
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import SignUp from '../views/SignUp.vue'
import Club from '../views/Club.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: function () {
return import(/* webpackChunkName: "about" */ '../views/About.vue')
}
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/signup',
name: 'signup',
component: SignUp
},
{
path: '/club',
name: 'club',
component: Club
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
HOST_API: 'http://jnhonlinux.ddns.net:3000',
nowUser: {},
// id: '',
// uid: '',
// password: '',
// email: '',
// phone: '',
// univ: '',
// department: '',
// sid: '',
// ifsuper: '',
},
mutations: {
setUser(state, payload){
state.nowUser = payload;
}
},
actions: {
},
modules: {
}
})
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<div class="clubView">
<h1>Club List</h1>
<input type="text" id="searchClub" placeholder="Search"> <br>
<hr>
<div class="clubList">
<div class="club" v-for="club in data" :key="club">
{{club.name}}
</div>
</div>
</div>
</template>
<script>
import clubForm from '@/components/clubForm.vue'
export default {
name: 'club',
components: {
clubForm
},
async created() {
const res = await this.$http.get('http://jnhonlinux.ddns.net:3000/club')
if(res.data.success == true) {
this.data = res.data.result
}
},
data() {
return {
data: [],
name: '',
}
}
}
</script>
<style>
.club {
width: 300px;
height: 250px;
border: 2px solid black;
float: left;
margin: 20px 10px;
}
#searchClub {
float: left;
margin-left: 20px;
}
</style>
\ No newline at end of file
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
<template>
<div class="login">
<h1>Login</h1>
<div class="loginInput">
<input type="text" v-model="uid" placeholder="Enter The ID.."><br>
</div>
<div class="loginInput">
<input type="password" v-model="password" placeholder="Enter The password...">
</div>
<button v-on:click="btnLogin">Login</button><br>
{{data}} <br>
{{$store.state.nowUser}}
<router-link to='/signup'><p>If you are not yet a member ...</p></router-link>
</div>
</template>
<script>
export default {
name: 'login',
data() {
return {
id: '',
uid: '',
password: '',
message: '',
data: [],
}
},
methods: {
async btnLogin() {
const res = await this.$http.post('http://jnhonlinux.ddns.net:3000/login', {
'uid': this.uid,
'password': this.password
});
if(res.data.success == true) {
this.data = res.data.result[0]
this.$store.commit('setUser', data);
// this.$router.push("/")
}
}
}
}
</script>
<style>
h1 {
margin-bottom: 25px;
}
.loginInput input {
border: none;
outline: none;
background: none;
color: black;
font-size: 18px;
margin-bottom: 20px;
border-bottom: 1px solid #4caf50;
}
button {
width: 20%;
background: none;
border: 2px solid gray;
color: black;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 12px 0;
}
</style>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment