vuex, vuerouter, vuetify 설치

a9320b9b · 이승준 · 6c43138b · a9320b9b · a9320b9b · a9320b9b
Commit a9320b9b authored Nov 13, 2019 by 이승준
--- a/README.md
+++ b/README.md
-# ajou_tt_frontend
+# vuetifyapp
 ## Project setup
 ```

--- a/babel.config.js
+++ b/babel.config.js
--- a/package.json
+++ b/package.json
 {
-  "name": "ajou_tt_frontend",
+  "name": "vuetifyapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
@@ -9,16 +9,25 @@
  },
  "dependencies": {
    "core-js": "^3.3.2",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.3",
+    "vuetify": "^2.1.0",
+    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
+    "@vue/cli-plugin-router": "^4.0.5",
+    "@vue/cli-plugin-vuex": "^4.0.5",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-vuetify": "^2.0.1",
+    "vue-template-compiler": "^2.6.10",
+    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
@@ -29,9 +38,12 @@
      "plugin:vue/essential",
      "eslint:recommended"
    ],
-    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
+    },
+    "rules": {
+      "vue/no-unused-vars": "warning",
+      "no-console": "off"
    }
  },
  "postcss": {

--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -5,11 +5,13 @@
    <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>ajou_tt_frontend</title>
+    <title>vuetify 테스트</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
-      <strong>We're sorry but ajou_tt_frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but vuetifyapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

--- a/src/App.vue
+++ b/src/App.vue
 <template>
-  <div id="app">
+  <v-app>
-    <img alt="Vue logo" src="./assets/logo.png">
+    <v-app-bar
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+      app
-  </div>
+      color="primary"
+      dark
+    >
+    <v-card-text class="text-center"> 뷰티파이 테스트용 {{this.$store.state.userID}}</v-card-text>
+    </v-app-bar>
+    <v-content>
+      <router-view></router-view>
+    </v-content>
+    <v-footer color="#00d1ff">
+      <v-card-text class="text-center">
+        뷰티파이로 만들었습니다.
+      </v-card-text>
+    </v-footer>
+  </v-app>
 </template>
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 export default {
-  name: 'app',
+  name: 'App',
  components: {
-    HelloWorld
+  },
-  }
-}
-</script>
-<style>
+  data: () => ({
-#app {
+  }),
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+};
-  -webkit-font-smoothing: antialiased;
+</script>
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
 <template>
-  <div class="hello">
+  <v-container>
-    <h1>{{ msg }}</h1>
+    <v-layout
-    <p>
+      text-center
-      For a guide and recipes on how to configure / customize this project,<br>
+      wrap
-      check out the
+    >
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+      <v-flex xs12>
+        <v-img
+          :src="require('../assets/logo.svg')"
+          class="my-3"
+          contain
+          height="200"
+        ></v-img>
+      </v-flex>
+      <v-flex mb-4>
+        <h1 class="display-2 font-weight-bold mb-3">
+          Welcome to Vuetify
+        </h1>
+        <p class="subheading font-weight-regular">
+          For help and collaboration with other Vuetify developers,
+          <br>please join our online
+          <a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
        </p>
-    <h3>Installed CLI Plugins</h3>
+      </v-flex>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <v-flex
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+        mb-5
-    </ul>
+        xs12
-    <h3>Essential Links</h3>
+      >
-    <ul>
+        <h2 class="headline font-weight-bold mb-3">What's next?</h2>
-      <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>
+        <v-layout justify-center>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+          <a
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+            v-for="(next, i) in whatsNext"
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+            :key="i"
-    </ul>
+            :href="next.href"
-    <h3>Ecosystem</h3>
+            class="subheading mx-3"
-    <ul>
+            target="_blank"
-      <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>
+            {{ next.text }}
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+          </a>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+        </v-layout>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+      </v-flex>
-    </ul>
-  </div>
+      <v-flex
+        xs12
+        mb-5
+      >
+        <h2 class="headline font-weight-bold mb-3">Important Links</h2>
+        <v-layout justify-center>
+          <a
+            v-for="(link, i) in importantLinks"
+            :key="i"
+            :href="link.href"
+            class="subheading mx-3"
+            target="_blank"
+          >
+            {{ link.text }}
+          </a>
+        </v-layout>
+      </v-flex>
+      <v-flex
+        xs12
+        mb-5
+      >
+        <h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
+        <v-layout justify-center>
+          <a
+            v-for="(eco, i) in ecosystem"
+            :key="i"
+            :href="eco.href"
+            class="subheading mx-3"
+            target="_blank"
+          >
+            {{ eco.text }}
+          </a>
+        </v-layout>
+      </v-flex>
+    </v-layout>
+  </v-container>
 </template>
 <script>
 export default {
  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
+  data: () => ({
-<style scoped>
+    ecosystem: [
-h3 {
+      {
-  margin: 40px 0 0;
+        text: 'vuetify-loader',
-}
+        href: 'https://github.com/vuetifyjs/vuetify-loader',
-ul {
+      },
-  list-style-type: none;
+      {
-  padding: 0;
+        text: 'github',
-}
+        href: 'https://github.com/vuetifyjs/vuetify',
-li {
+      },
-  display: inline-block;
+      {
-  margin: 0 10px;
+        text: 'awesome-vuetify',
-}
+        href: 'https://github.com/vuetifyjs/awesome-vuetify',
-a {
+      },
-  color: #42b983;
+    ],
-}
+    importantLinks: [
-</style>
+      {
+        text: 'Documentation',
+        href: 'https://vuetifyjs.com',
+      },
+      {
+        text: 'Chat',
+        href: 'https://community.vuetifyjs.com',
+      },
+      {
+        text: 'Made with Vuetify',
+        href: 'https://madewithvuejs.com/vuetify',
+      },
+      {
+        text: 'Twitter',
+        href: 'https://twitter.com/vuetifyjs',
+      },
+      {
+        text: 'Articles',
+        href: 'https://medium.com/vuetify',
+      },
+    ],
+    whatsNext: [
+      {
+        text: 'Explore components',
+        href: 'https://vuetifyjs.com/components/api-explorer',
+      },
+      {
+        text: 'Select a layout',
+        href: 'https://vuetifyjs.com/layout/pre-defined',
+      },
+      {
+        text: 'Frequently Asked Questions',
+        href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
+      },
+    ],
+  }),
+};
+</script>
--- a/src/components/adder.vue
+++ b/src/components/adder.vue
+<template>
+<v-app class="myApp">
+  <v-form v-model="isInputValid" class="text-center">
+    <v-text-field v-model="num1" :rules="numberRules" label="피연산자 1"></v-text-field>
+    <v-text-field v-model="num2" :rules="numberRules" label="피연산자 2"> </v-text-field>
+    <v-btn color="success" v-on:click="cal">계산하기!</v-btn>
+  </v-form>
+  <v-alert v-if="inputError" type="error">입력이 정확하지 않습니다.</v-alert>
+  <v-alert v-if="connectionError" type="error">서버와의 통신에 실패하였습니다.</v-alert>
+  <v-alert v-if="successMsg" type="success">성공적으로 서버에 요청을 보냈습니다.</v-alert>
+  <v-card v-if="successMsg">
+    <v-card-text>계산 결과는 {{result}}입니다.</v-card-text>
+  </v-card>
+</v-app>
+</template>
+<script>
+export default {
+  name: "adder",
+  data() {
+    return {
+      num1: "",
+      num2: "",
+      result: 0,
+      isInputValid: false,
+      inputError: false,
+      connectionError: false,
+      successMsg: false,
+      numberRules: [
+        v => !!v || '입력을 비울 수는 없습니다.',
+        function(v){
+          if(v == 0){
+            return true;
+          }
+          if(!!(v*1) == false){
+            return "숫자를 입력하십시오."
+          }
+          return true;
+        }
+      ]
+    }
+  },
+  methods: {
+    async cal() {
+      if(!this.isInputValid){
+        this.inputError = true;
+        this.connectionError = false;
+        this.successMsg = false;
+        return;
+      }else{
+        this.inputError = false;
+      }
+      let bodyData = {
+        num1: this.num1,
+        num2: this.num2
+      }
+      try {
+        let requestPromis =
+        fetch('/', {
+          method: 'POST', // POST 메소드 지정
+          body: JSON.stringify(bodyData), //express가 이해할 수 있는 JSON 형태로 POST 데이터 변환
+          headers: {
+            'Content-Type': 'application/json'
+          },
+        });
+        let responseData = await requestPromis;
+        let responseBodyJsonString = await responseData.json();//json 포맷에 맞는 string으로 반환해 준다.
+        let responseBody = JSON.parse(responseBodyJsonString);//string으로 된 포맷을 자바스크립트 오브젝트로 변환
+        this.result = responseBody.result
+      }catch(e){
+        this.connectionError = true;
+        console.log(e);
+        return;
+      }
+      this.connectionError = false;
+      this.successMsg = true;
+    }
+  }
+}
+</script>
+<style lang="css" scoped>
+  .myApp {
+    width: 50%;
+    margin: auto;
+  }
+</style>
--- a/src/components/hello.vue
+++ b/src/components/hello.vue
+<template>
+  <v-app>
+    <h1>환영합니다, {{this.$store.state.userName}}님!</h1>
+    <p>{{this.$store.state.userID}}로 접속하셨습니다.</p>
+  </v-app>
+</template>
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted(){
+    if(this.$store.state.userID == ""){
+      alert("비정상적인 접근입니다.");
+      this.$router.push("/");
+      return;
+    }
+  }
+}
+</script>
+<style lang="css" scoped>
+</style>
--- a/src/components/login.vue
+++ b/src/components/login.vue
+<template>
+<v-app>
+  <v-card>
+    <v-card-text>로그인</v-card-text>
+    <v-card-text>테스트용 계정, id/pw 둘 다 1234</v-card-text>
+    <v-form v-model="formValid" ref="loginForm">
+      <v-text-field v-model="studentId" label="학번" :rules="[rules.required, rules.numberOnly]"></v-text-field>
+      <v-text-field v-model="password" label="비밀번호" :rules="[rules.required]"></v-text-field>
+      <v-btn color="success" @click="onPushLogin">
+        <span v-if="!isLogging">로그인</span>
+        <v-progress-circular v-if="isLogging" indeterminate></v-progress-circular>
+      </v-btn>
+    </v-form>
+    <v-expand-transition>
+      <v-alert v-show="connectionError" type="error">서버와의 통신에 실패하였습니다.</v-alert>
+    </v-expand-transition>
+    <v-expand-transition>
+      <v-alert v-show="loginError" type="error">등록되지 않은 학번이거나 잘못된 비밀번호입니다.</v-alert>
+    </v-expand-transition>
+    <v-card-text>비밀번호가 기억나지 않으십니까?</v-card-text>
+  </v-card>
+</v-app>
+</template>
+<script>
+import ruleModule from '../plugins/textFieldRules.js';
+export default {
+  name: "loginVue",
+  data() {
+    return {
+      studentId: "",
+      password: "",
+      formValid: false,
+      rules: ruleModule,
+      isLogging: false,
+      connectionError: false,
+      loginError: false
+    }
+  },
+  methods: {
+    async onPushLogin() {
+      if (this.$refs.loginForm.validate() == false) {
+        return;
+      }
+      this.isLogging = true;
+      this.connectionError = false;
+      this.loginError = false;
+      let responseBody;
+      let id = this.studentId;
+      try {
+        let bodyData = {
+          id: this.studentId,
+          pw: this.password
+        }
+        let requestPromis =
+          fetch('/login', {
+            method: 'POST', // POST 메소드 지정
+            body: JSON.stringify(bodyData), //express가 이해할 수 있는 JSON 형태로 POST 데이터 변환
+            headers: {
+              'Content-Type': 'application/json'
+            },
+          });
+        let responseData = await requestPromis;
+        let responseBodyJsonString = await responseData.json(); //json 포맷에 맞는 string으로 반환해 준다.
+        responseBody = JSON.parse(responseBodyJsonString); //string으로 된 포맷을 자바스크립트 오브젝트로 변환
+      } catch (e) {
+        this.isLogging = false;
+        this.connectionError = true;
+        this.loginError = false;
+        return;
+      }
+      this.connectionError = false;
+      this.isLogging = false;
+      if(responseBody.msg != "OK"){
+        this.loginError = true;
+        return;
+      }
+      this.$store.state.userID = id;
+      this.$store.state.userName = responseBody.userName;
+      this.$router.push("/main");
+    }
+  }
+}
+</script>
+<style lang="css" scoped>
+</style>
--- a/src/main.js
+++ b/src/main.js
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
+import store from './store'
+import vuetify from './plugins/vuetify';
 Vue.config.productionTip = false
 new Vue({
-  render: h => h(App),
+  router,
+  vuetify,
+  store,
+  render: h => h(App)
 }).$mount('#app')
--- a/src/plugins/textFieldRules.js
+++ b/src/plugins/textFieldRules.js
+export default  {
+  required(v) {
+      if (!!v == false) {
+        return "입력을 비울 수 없습니다.";
+      }
+      return true;
+    },
+    realNumber(v) {
+      if (v == 0) {
+        return true;
+      }
+      if (!(v * 1)) {
+        return "숫자를 입력하십시오.";
+      }
+      return true;
+    },
+    integer(v) {
+      if (Number.isInteger(v*1)) {
+        return true;
+      }
+      return "정수를 입력하십시오.";
+    },
+    positiveNumber(v) {
+      if (this.realNumber(v) === true) {
+        if (v > 0) {
+          return true;
+        } else {
+          return "양수를 입력하십시오.";
+        }
+      } else {
+        return "숫자를 입력하십시오.";
+      }
+    },
+    numberOnly(v) {
+      v = String(v);
+      for(let i=0; i<v.length; i++){
+        if(isNaN(v[i]*1)){
+          return "숫자만 입력해 주십시오.";
+        }
+      }
+      return true;
+    }
+};
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+Vue.use(Vuetify);
+export default new Vuetify({
+});
--- a/src/router/index.js
+++ b/src/router/index.js
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import login from '../components/login.vue';
+import hello from '../components/hello.vue';
+Vue.use(VueRouter)
+const routes = [
+  {
+    path: '/',
+    name: 'login',
+    component: login
+  },
+  {
+    path: "/main",
+    name: "main",
+    component: hello
+  }
+]
+const router = new VueRouter({
+  mode: "history",
+  routes
+})
+export default router
--- a/src/store/index.js
+++ b/src/store/index.js
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+export default new Vuex.Store({
+  state: {
+    userID: "",
+    userName: "",
+    test: 3
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
--- a/src/views/About.vue
+++ b/src/views/About.vue
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
+<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>
--- a/vue.config.js
+++ b/vue.config.js
+module.exports = {
+  "transpileDependencies": [
+    "vuetify"
+  ]
+}
\ No newline at end of file