setup frontend-backend connection

hichina-main-back/src/main/java/com/hichina/main/back/hichinamainback/config/CorsConfig.java

@@ -15,7 +15,7 @@ public class CorsConfig implements WebMvcConfigurer {
     @Override
     public void addCorsMappings(CorsRegistry registry) {
         registry.addMapping("/**")
-                .allowedOrigins(env.getProperty("frontend.url"), "https://www.facebook.com")
+                .allowedOrigins(env.getProperty("frontend.url"), env.getProperty("frontend.mobilefirst.url"), "https://www.facebook.com")
                 .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS")
                 .allowedHeaders("*")
                 .allowCredentials(true)

hichina-main-back/src/main/resources/application-dev.properties

@@ -21,6 +21,7 @@ aliyun.oss.root.access.key.id=LTAI5tHiFqvcRHbZYcKZ7Ksm
 mybatis.configuration.map-underscore-to-camel-case=true
 
 frontend.url=http://localhost:9053
+frontend.mobilefirst.url=http://localhost:9583
 backend.servicebase.url=http://localhost:9052
 
 spring.jackson.date-format=yyyy-MM-dd HH:mm:ss

hichina-main-front-mobile-first/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
+    "axios": "^1.4.0",
     "core-js": "^3.6.5",
     "quasar": "^2.6.0",
     "vue": "^3.0.0",
@@ -21,12 +22,12 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",
+    "@quasar/app-webpack": "^3.0.0",
     "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-vue": "^9.0.0",
     "eslint-webpack-plugin": "^3.1.1",
-    "eslint-config-prettier": "^8.1.0",
-    "prettier": "^2.5.1",
-    "@quasar/app-webpack": "^3.0.0"
+    "prettier": "^2.5.1"
   },
   "browserslist": [
     "last 10 Chrome versions",
@@ -44,4 +45,4 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }
-}
+}

hichina-main-front-mobile-first/src/boot/axios.js

@@ -0,0 +1,23 @@
+// src/boot/axios.js
+
+import { boot } from "quasar/wrappers";
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "http://localhost:9052",
+  withCredentials: true,
+});
+
+export default boot(({ app }) => {
+  // for use inside Vue files (Options API) through this.$axios and this.$api
+
+  app.config.globalProperties.$axios = axios;
+  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
+  //       so you won't necessarily have to import axios in each vue file
+
+  app.config.globalProperties.$api = api;
+  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
+  //       so you can easily perform requests against your app's API
+});
+
+export { axios, api };

hichina-main-front-mobile-first/src/layouts/MainLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="hHh lpR fFf">
+  <q-layout view="hHh lpR fff">
     <q-header height-hint="76" reveal class="bg-white text-black">
       <q-toolbar class="GPL__toolbar" style="height: 76px">
         <div class="row">
@@ -125,67 +125,72 @@
 
     <q-page-container>
       <router-view />
-    </q-page-container>
-
-    <q-footer reveal bordered class="bg-blue-6 text-white">
-      <div class="q-pa-md">
-        <div class="row justify-center">
-          <div class="col-12 col-md-3 text-white q-pl-xl q-pt-md">
-            <div class="text-subtitle1 text-weight-bold">
-              About HiChinaTravel
-            </div>
-            <div class="text-body2 hover_underline_white q-mt-md">About Us</div>
-            <div class="text-body2 hover_underline_white q-mt-md">
-              Contact us
+      <q-footer bordered class="bg-blue-6 text-white">
+        <div class="q-pa-md">
+          <div class="row justify-center">
+            <div class="col-12 col-md-3 text-white q-pl-xl q-pt-md">
+              <div class="text-subtitle1 text-weight-bold">
+                About HiChinaTravel
+              </div>
+              <div class="text-body2 hover_underline_white q-mt-md">
+                About Us
+              </div>
+              <div class="text-body2 hover_underline_white q-mt-md">
+                Contact us
+              </div>
+              <div class="text-body2 hover_underline_white q-mt-md">
+                Copyright
+              </div>
+              <div class="text-body2 hover_underline_white q-mt-md">
+                Privacy
+              </div>
+              <div class="text-body2 hover_underline_white q-mt-md">
+                Join Us
+              </div>
             </div>
-            <div class="text-body2 hover_underline_white q-mt-md">
-              Copyright
+            <div class="col-12 col-md-5 q-pt-xl">
+              <div
+                class="text-subtitle1 text-weight-medium hover_underline_white q-mt-md"
+              >
+                Facebook: HiChinaTravel
+              </div>
+              <div
+                class="text-subtitle1 text-weight-medium hover_underline_white q-mt-md"
+              >
+                WeChat Official Account: HCTravel
+              </div>
+              <div
+                class="text-subtitle1 text-weight-medium hover_underline_white q-mt-md"
+              >
+                Instagram: HiChinaTravel
+              </div>
+              <div
+                class="text-subtitle1 text-weight-medium hover_underline_white q-mt-md"
+              >
+                Support: customerservice@hichinatrip.com
+              </div>
+              <div
+                class="text-subtitle1 text-weight-medium hover_underline_white q-mt-md"
+              >
+                Address: 4,Zhixin Rd. Qixia District Nanjing City, Jiangsu
+                Province, P.R China
+              </div>
             </div>
-            <div class="text-body2 hover_underline_white q-mt-md">Privacy</div>
-            <div class="text-body2 hover_underline_white q-mt-md">Join Us</div>
+            <div class="col-12 col-md-4"></div>
           </div>
-          <div class="col-12 col-md-5 q-pt-xl">
-            <div
-              class="text-subtitle1 text-weight-medium hover_underline_white q-mt-md"
-            >
-              Facebook: HiChinaTravel
-            </div>
-            <div
-              class="text-subtitle1 text-weight-medium hover_underline_white q-mt-md"
-            >
-              WeChat Official Account: HCTravel
-            </div>
-            <div
-              class="text-subtitle1 text-weight-medium hover_underline_white q-mt-md"
-            >
-              Instagram: HiChinaTravel
-            </div>
-            <div
-              class="text-subtitle1 text-weight-medium hover_underline_white q-mt-md"
-            >
-              Support: customerservice@hichinatrip.com
+          <div class="row justify-center q-mt-xl">
+            <div class="text-body2 text-weight-medium hover_underline_white">
+              COPYRIGHT © 2015-2023 WWW.HICHINATRAVEL.COM, ALL RIGHTS RESERVED
             </div>
-            <div
-              class="text-subtitle1 text-weight-medium hover_underline_white q-mt-md"
-            >
-              Address: 4,Zhixin Rd. Qixia District Nanjing City, Jiangsu
-              Province, P.R China
-            </div>
-          </div>
-          <div class="col-12 col-md-4"></div>
-        </div>
-        <div class="row justify-center q-mt-xl">
-          <div class="text-body2 text-weight-medium hover_underline_white">
-            COPYRIGHT © 2015-2023 WWW.HICHINATRAVEL.COM, ALL RIGHTS RESERVED
           </div>
-        </div>
-        <div class="row justify-center">
-          <div class="text-body2 text-weight-medium hover_underline_white">
-            备案号： 京ICP备16006305号-1
+          <div class="row justify-center">
+            <div class="text-body2 text-weight-medium hover_underline_white">
+              备案号： 京ICP备16006305号-1
+            </div>
           </div>
         </div>
-      </div>
-    </q-footer>
+      </q-footer>
+    </q-page-container>
   </q-layout>
 </template>
 

hichina-main-front-mobile-first/src/pages/IndexPage.vue

@@ -1,17 +1,72 @@
 <template>
-  <q-page class="flex flex-center">
-    <img
-      alt="Quasar logo"
-      src="~assets/quasar-logo-vertical.svg"
-      style="width: 200px; height: 200px"
-    >
+  <q-page>
+    <div class="q-pa-md">
+      <q-carousel
+        animated
+        v-model="slide"
+        navigation
+        infinite
+        :autoplay="2000"
+        arrows
+        transition-prev="slide-right"
+        transition-next="slide-left"
+        @mouseenter="autoplay = false"
+        @mouseleave="autoplay = true"
+      >
+        <q-carousel-slide
+          :name="1"
+          img-src="https://cdn.quasar.dev/img/mountains.jpg"
+        />
+        <q-carousel-slide
+          :name="2"
+          img-src="https://cdn.quasar.dev/img/parallax1.jpg"
+        />
+        <q-carousel-slide
+          :name="3"
+          img-src="https://cdn.quasar.dev/img/parallax2.jpg"
+        />
+        <q-carousel-slide
+          :name="4"
+          img-src="https://cdn.quasar.dev/img/quasar.jpg"
+        />
+      </q-carousel>
+    </div>
   </q-page>
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { ref, onMounted } from "vue";
+import { defineComponent } from "vue";
+import { api } from "boot/axios";
 
 export default defineComponent({
-  name: 'IndexPage'
-})
+  name: "IndexPage",
+  setup() {
+    const sliders = ref([]);
+
+    function loadHomeSliders() {
+      api
+        .get("/api/public/pagecontent/homesliders")
+        .then((response) => {
+          sliders.value = response.data.data;
+          console.log("sliders.value");
+          console.log(sliders.value);
+          // loadBlogList();
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    }
+
+    onMounted(() => {
+      // we call "next()" method of our component
+      loadHomeSliders();
+    });
+
+    return {
+      slide: ref(1),
+      autoplay: ref(true),
+    };
+  },
+});
 </script>

hichina-main-front-mobile-first/yarn.lock

@@ -1967,6 +1967,11 @@ async@^3.2.3:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
   integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 at-least-node@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
@@ -1984,6 +1989,15 @@ autoprefixer@10.4.13:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+axios@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
+  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-loader@^9.1.2:
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
@@ -2336,6 +2350,13 @@ colorette@^2.0.10:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@^2.19.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -2690,6 +2711,11 @@ define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -3238,7 +3264,7 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.15.0:
   version "1.15.2"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@@ -3262,6 +3288,15 @@ fork-ts-checker-webpack-plugin@6.5.0:
     semver "^7.3.2"
     tapable "^1.0.0"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -4154,7 +4189,7 @@ mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -4881,6 +4916,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 punycode@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"