[vue] Wyswietlanie na froncie uzytkownikow z opisami i punktami

backend/main.go

@@ -18,7 +18,7 @@ func Cors() gin.HandlerFunc {
 
 		if origin != "" {
 			c.Header("Access-Control-Allow-Origin", origin)
-			c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization") //自定义 Header
+			c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization") // Header
 			c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
 			c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
 			c.Header("Access-Control-Allow-Credentials", "true")
@@ -27,7 +27,7 @@ func Cors() gin.HandlerFunc {
 
 		if method == "OPTIONS" {
 			c.Header("Access-Control-Allow-Origin", "*")
-			c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization") //自定义 Header
+			c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization") // Header
 			c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
 			c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
 			c.Header("Access-Control-Allow-Credentials", "true")
@@ -43,11 +43,6 @@ func main() {
 	router := gin.Default()
 	router.Use(Cors())
 
-	// Serve frontend static files
-	// router.Use(static.Serve("/", static.LocalFile("./views", true)))
-
-	// config.AllowOrigins = []string{"http://localhost:8080/"}
-
 	// Setup route group for the API
 	api := router.Group("/api")
 	{

frontend/app/src/views/Users.vue

@@ -4,7 +4,7 @@
 
     <v-container class="my-5">
         <v-layout row wrap>
-          <v-flex xs12 sm6 md4 lg3 v-for="person in team" :key="person.name">
+          <v-flex xs12 sm6 md4 lg3 v-for="person in allUsers" :key="person.login">
             <v-card flat class="text-xs-center ma-3">
               <v-responsive class="pt-4">
                   <v-avatar size="100" class="grey lighten-2">
@@ -12,13 +12,16 @@
                   </v-avatar>
               </v-responsive>
               <v-card-text>
-                <div class="subheading">{{ person.name }}</div>
-                <div class="grey--text">{{ person.userDescription }}</div>
+                <div  class="subheading">{{ person.login }}</div>
+
+                <div v-if="person.userDescription" class="grey--text">{{ person.userDescription }}</div>
+                <div v-else class="subheading white--text">_</div>
+
               </v-card-text>
               <v-card-actions>
                 <v-btn flat color="grey">
                   <v-icon small left>grade</v-icon>
-                  <span>{{person.points}}</span>
+                  <span>{{ person.points }}</span>
                 </v-btn>
               </v-card-actions>
             </v-card>
@@ -30,21 +33,49 @@
 </template>
 
 <script>
-
-  export default {
+import  axios from 'axios'
+export default {
   data(){
     return{
       userAvatar: '/user-cylinder.png',
-          team: [
-          { name: 'Sarenka', userDescription: 'Opis swoj uzytkownika', points: 100},
-          { name: 'Ksiezniczka', userDescription: 'Graphic designer', points: 100},
-          { name: 'Jeż', userDescription: 'Web developer', points: 100},
-          { name: 'Miro', userDescription: 'Social media maverick', points: 100 },
-          { name: 'Wilk', userDescription: 'Sales guru', points: 100},
-        ]
+      allUsers: []
     }
+  },
+  methods:{
+    getAllUsers(){
+      var objectVue = this;
+
+      var promiseUsers = new Promise(function(resolve, reject) {
+        var allUsersTmp = axios.get("http://127.0.0.1:3000/api/getUsersView" ,{ crossdomain: true })
+          .then(function(res){
+              return res.data.allUsers //zwraca uzytkownikow
+          }).then(function(res){
+            objectVue.team = res
+            return res
+          })
+
+        if(allUsersTmp){
+          resolve(allUsersTmp)
+        }
+        else{
+          reject("Nie udalo sie pobrac uzytkownikow")
         }
 
+      })
+
+    //Promise.all czeka na wykonanie wszystkich
+      var fromResolve = Promise.race([promiseUsers]).then(function(){
+        promiseUsers.then(function(fromResolve){
+          objectVue.allUsers = fromResolve
+          return fromResolve
+        })
+      })
+
     }
+  },
+  mounted(){
+    this.getAllUsers()
+  }
+}
 </script>