fixed proxies and displaying backend data in the front end

Author: jacmacmod

.env

@@ -1,4 +1,3 @@
-PORT=4001
 USER=jackfowler
 DATABASE_URL="postgres://[email protected]:5432/asteroids"
 NASA_API_KEY=8VuxJOhXZWmsdO97pxA7BgayP0uAWsrK5cFKycIC

package.json

@@ -10,7 +10,7 @@
     "hack:client": "vue-cli-service serve",
     "hack:server": "nodemon server",
     "hack": "concurrently \"yarn hack:server\" \"yarn hack:client\"",
-    "start": "node index.js"
+    "start": "node server.js"
   },
   "dependencies": {
     "axios": "^0.21.0",

seedFiles/importAsteroids.js

@@ -1,5 +1,5 @@
 const knex = require("knex");
-const config = require("./knexfile");
+const config = require("../knexfile");
 const db = knex(config);
 
 const axios = require('axios');

seedFiles/importItems.js

@@ -1,5 +1,5 @@
 require("dotenv").config();
-const config = require("./knexfile");
+const config = require("../knexfile");
 const knex = require("knex");
 const db = knex(config);
 

seedFiles/seedandMigrate.js

@@ -1,5 +1,5 @@
 const knex = require("knex");
-const config = require("./knexfile");
+const config = require("../knexfile");
 const db = knex(config);
 
 

server.js

@@ -8,6 +8,10 @@ require("dotenv").config();
 
 const PORT = process.env.PORT || 9000;
 // Serve static assets
+app.use((req, res, next) => {
+    res.header('Access-Control-Allow-Origin', '*');
+    next();
+  });
 app.use(express.static(__dirname, + "/public"));
 
 app.get("/api/asteroids", async (req, res) => {
@@ -21,5 +25,30 @@ app.get("/api/asteroids", async (req, res) => {
     }
   });
 
+  app.get("/api/asteroids/names", async (req, res) => {
+    try {
+      const asteroidNames = await db.select("name").table("asteroids");
+      res.json(asteroidNames);
+    } catch (err) {
+      console.error("Error finding names!", err);
+      res.sendStatus(500);
+    }
+  });
+
+  app.get("/api/asteroids/:id", async (req, res) => {
+    const id = req.params.id;
+
+    try {
+      const asteroidNames = await db
+      .select()
+      .table("asteroids")
+      .where({id:id});
+      res.json(asteroidNames);
+    } catch (err) {
+      console.error("Error finding names!", err);
+      res.sendStatus(500);
+    }
+  });
+
   app.listen(PORT, () => console.log(`App listening on port ${PORT}!`));
 

src/App.vue

@@ -12,25 +12,42 @@
   <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
-
+{{asteroidNames}}
 <select v-model="selected">
   <option disabled value="">Please select one</option>
   <option>A</option>
   <option>B</option>
   <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
+
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="50" cy="50" r="3"/>
+</svg>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="50" cy="50" r="3"/>
+</svg>
   </div>
 </template>
 
 <script>
-
+import {asteroidNames} from "../utils";
 
 export default {
   name: 'App',
   data: () => ({
+    asteroidNames: [1,2,3],
     selected: "",
   }),
+  mounted() {
+  asteroidNames().then((data) => {
+    console.log(data)
+    this.asteroidNames=data;
+  });
+  },
+  methods: {
+
+  }
 }
 </script>
 

utils.js

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+export const asteroidNames = async () => {
+    const { data: names } = await axios.get(`/api/asteroids/names`);
+    let result = names.map(asteroid => {
+        return asteroid.name
+    })
+        console.log(result)
+    return result;
+  };

vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    devServer: {
+        proxy:"http://localhost:9000",
+    }
+}