update FE app, add router, add BE webConfig

Author: yennanliu

springEmployeeSystem/backend/EmployeeSystem/src/main/java/EmployeeSystem/demo/config/WebConfig.java

@@ -0,0 +1,33 @@
+package EmployeeSystem.demo.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+// TODO : check if can merge below
+// 1) enable CORS 2) show swagger 2.x UI properly
+@Configuration
+public class WebConfig implements WebMvcConfigurer {
+    @Override
+    public void addCorsMappings(CorsRegistry registry) {
+        registry.addMapping("/**")
+                .allowedOriginPatterns("*") // SpringBoot2.4.0 [allowedOriginPatterns]代替[allowedOrigins]
+                .allowedMethods("*")
+                .maxAge(3600)
+                .allowCredentials(true);
+    }
+
+    @Bean
+    public WebMvcConfigurer corsConfigurer() {
+        return new WebMvcConfigurer() {
+            @Override
+            public void addCorsMappings(CorsRegistry registry) {
+                registry.addMapping("/**")
+                        .allowedOrigins("*")
+                        .allowedMethods("GET", "PUT", "POST", "PATCH", "DELETE", "OPTIONS");
+            }
+        };
+    }
+
+}

springEmployeeSystem/frontend/employee-system-ui/src/App.vue

@@ -4,10 +4,41 @@
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
     </nav>
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
+<script>
+var axios = require("axios");
+export default {
+  data() {
+    return {
+      baseURL: "http://localhost:9998/",
+      users: null,
+      departments: null,
+      key: 0,
+      token: null,
+      cartCount: 0,
+    };
+  },
+
+  methods: {
+    async fetchData() {
+      // get users
+      await axios
+        .get(this.baseURL + "users/")
+        .then((res) => (this.users = res.users))
+        .catch((err) => console.log(err));
+    },
+
+    mounted() {
+      this.fetchData();
+    },
+  },
+};
+</script>
+
+
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;