Browse Source

Add bookmarks component

master
Alfred 1 year ago
parent
commit
fda1f37748
6 changed files with 100 additions and 121 deletions
  1. 1
    1
      index.html
  2. 29
    4
      package-lock.json
  3. 1
    0
      package.json
  4. 66
    0
      src/components/Bookmarks.vue
  5. 0
    113
      src/components/HelloWorld.vue
  6. 3
    3
      src/router/index.js

+ 1
- 1
index.html View File

@@ -3,7 +3,7 @@
3 3
   <head>
4 4
     <meta charset="utf-8">
5 5
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
6
-    <title>macarrodes</title>
6
+    <title>Macarrodes</title>
7 7
   </head>
8 8
   <body>
9 9
     <div id="app"></div>

+ 29
- 4
package-lock.json View File

@@ -632,6 +632,15 @@
632 632
       "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==",
633 633
       "dev": true
634 634
     },
635
+    "axios": {
636
+      "version": "0.18.0",
637
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
638
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
639
+      "requires": {
640
+        "follow-redirects": "1.4.1",
641
+        "is-buffer": "1.1.6"
642
+      }
643
+    },
635 644
     "babel-code-frame": {
636 645
       "version": "6.26.0",
637 646
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -4859,6 +4868,24 @@
4859 4868
         "readable-stream": "2.3.6"
4860 4869
       }
4861 4870
     },
4871
+    "follow-redirects": {
4872
+      "version": "1.4.1",
4873
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
4874
+      "integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
4875
+      "requires": {
4876
+        "debug": "3.1.0"
4877
+      },
4878
+      "dependencies": {
4879
+        "debug": {
4880
+          "version": "3.1.0",
4881
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
4882
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
4883
+          "requires": {
4884
+            "ms": "2.0.0"
4885
+          }
4886
+        }
4887
+      }
4888
+    },
4862 4889
     "for-in": {
4863 4890
       "version": "1.0.2",
4864 4891
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -6904,8 +6931,7 @@
6904 6931
     "is-buffer": {
6905 6932
       "version": "1.1.6",
6906 6933
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
6907
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
6908
-      "dev": true
6934
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
6909 6935
     },
6910 6936
     "is-builtin-module": {
6911 6937
       "version": "1.0.0",
@@ -8448,8 +8474,7 @@
8448 8474
     "ms": {
8449 8475
       "version": "2.0.0",
8450 8476
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
8451
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
8452
-      "dev": true
8477
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
8453 8478
     },
8454 8479
     "multicast-dns": {
8455 8480
       "version": "6.2.3",

+ 1
- 0
package.json View File

@@ -14,6 +14,7 @@
14 14
     "build": "node build/build.js"
15 15
   },
16 16
   "dependencies": {
17
+    "axios": "^0.18.0",
17 18
     "vue": "^2.5.2",
18 19
     "vue-router": "^3.0.1"
19 20
   },

+ 66
- 0
src/components/Bookmarks.vue View File

@@ -0,0 +1,66 @@
1
+<template>
2
+  <div class="hello">
3
+  <h1>{{ msg }}</h1>
4
+    <hr />
5
+    <div>
6
+      <ul>
7
+        <li v-for="bk in bookmarks" :key="bk.id">
8
+          {{bk.url}}
9
+        </li>
10
+      </ul>
11
+    </div>
12
+    <hr />
13
+    <div>
14
+      <input type="text" v-model="input_val">
15
+    </div>
16
+    <div>
17
+      Input Value: <span v-text="input_val"></span>
18
+    </div>
19
+    <hr />
20
+    <div>
21
+      <button class="btn btn-primary" v-on:click="counter++">You've clicked this button {{counter}} times!</button>
22
+    </div>
23
+  </div>
24
+</template>
25
+
26
+<script>
27
+import axios from 'axios'
28
+
29
+export default {
30
+  name: 'Bookmarks',
31
+  data () {
32
+    return {
33
+      msg: 'Welcome to Your Vue.js App',
34
+      bookmarks: [],
35
+      input_val: '',
36
+      counter: 0
37
+    }
38
+  },
39
+  methods: {
40
+  },
41
+  created: function () {
42
+    axios.get('http://localhost:3000/bookmarks')
43
+      .then(response => {
44
+        this.bookmarks = response.data
45
+      })
46
+  }
47
+}
48
+</script>
49
+
50
+<!-- Add "scoped" attribute to limit CSS to this component only -->
51
+<style scoped>
52
+h1, h2 {
53
+  font-weight: normal;
54
+}
55
+ul {
56
+  list-style-type: none;
57
+  padding: 0;
58
+}
59
+li {
60
+  display: inline-block;
61
+  margin: 0 10px;
62
+}
63
+a {
64
+  color: #42b983;
65
+}
66
+</style>

+ 0
- 113
src/components/HelloWorld.vue View File

@@ -1,113 +0,0 @@
1
-<template>
2
-  <div class="hello">
3
-    <h1>{{ msg }}</h1>
4
-    <h2>Essential Links</h2>
5
-    <ul>
6
-      <li>
7
-        <a
8
-          href="https://vuejs.org"
9
-          target="_blank"
10
-        >
11
-          Core Docs
12
-        </a>
13
-      </li>
14
-      <li>
15
-        <a
16
-          href="https://forum.vuejs.org"
17
-          target="_blank"
18
-        >
19
-          Forum
20
-        </a>
21
-      </li>
22
-      <li>
23
-        <a
24
-          href="https://chat.vuejs.org"
25
-          target="_blank"
26
-        >
27
-          Community Chat
28
-        </a>
29
-      </li>
30
-      <li>
31
-        <a
32
-          href="https://twitter.com/vuejs"
33
-          target="_blank"
34
-        >
35
-          Twitter
36
-        </a>
37
-      </li>
38
-      <br>
39
-      <li>
40
-        <a
41
-          href="http://vuejs-templates.github.io/webpack/"
42
-          target="_blank"
43
-        >
44
-          Docs for This Template
45
-        </a>
46
-      </li>
47
-    </ul>
48
-    <h2>Ecosystem</h2>
49
-    <ul>
50
-      <li>
51
-        <a
52
-          href="http://router.vuejs.org/"
53
-          target="_blank"
54
-        >
55
-          vue-router
56
-        </a>
57
-      </li>
58
-      <li>
59
-        <a
60
-          href="http://vuex.vuejs.org/"
61
-          target="_blank"
62
-        >
63
-          vuex
64
-        </a>
65
-      </li>
66
-      <li>
67
-        <a
68
-          href="http://vue-loader.vuejs.org/"
69
-          target="_blank"
70
-        >
71
-          vue-loader
72
-        </a>
73
-      </li>
74
-      <li>
75
-        <a
76
-          href="https://github.com/vuejs/awesome-vue"
77
-          target="_blank"
78
-        >
79
-          awesome-vue
80
-        </a>
81
-      </li>
82
-    </ul>
83
-  </div>
84
-</template>
85
-
86
-<script>
87
-export default {
88
-  name: 'HelloWorld',
89
-  data () {
90
-    return {
91
-      msg: 'Welcome to Your Vue.js App'
92
-    }
93
-  }
94
-}
95
-</script>
96
-
97
-<!-- Add "scoped" attribute to limit CSS to this component only -->
98
-<style scoped>
99
-h1, h2 {
100
-  font-weight: normal;
101
-}
102
-ul {
103
-  list-style-type: none;
104
-  padding: 0;
105
-}
106
-li {
107
-  display: inline-block;
108
-  margin: 0 10px;
109
-}
110
-a {
111
-  color: #42b983;
112
-}
113
-</style>

+ 3
- 3
src/router/index.js View File

@@ -1,6 +1,6 @@
1 1
 import Vue from 'vue'
2 2
 import Router from 'vue-router'
3
-import HelloWorld from '@/components/HelloWorld'
3
+import Bookmarks from '@/components/Bookmarks'
4 4
 
5 5
 Vue.use(Router)
6 6
 
@@ -8,8 +8,8 @@ export default new Router({
8 8
   routes: [
9 9
     {
10 10
       path: '/',
11
-      name: 'HelloWorld',
12
-      component: HelloWorld
11
+      name: 'Bookmarks',
12
+      component: Bookmarks
13 13
     }
14 14
   ]
15 15
 })

Loading…
Cancel
Save