Add goods front page.

front_page_vue/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "vue": "^3.3.4",
-    "vue-router" : "^4.2.4"
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

front_page_vue/src/App.vue

@@ -4,43 +4,54 @@ import TheWelcome from './components/TheWelcome.vue'
 import { RouterLink, RouterView } from 'vue-router'
 
 import { reactive, onMounted, ref } from 'vue'
+import { tokenStore } from './store.js'
 
-// const hits = ref([]);
 
-// onMounted((async () => {
-//   const data = await fetch(
-//     `https://hn.algolia.com/api/v1/search?query=vue`
-//   ).then(rsp => rsp.json())
-//   console.log("liuyx on get data: " + data.hits)
-//   hits.value = data.hits
-// }))
+function sign_out(event) {
+  tokenStore.token = {};
+  localStorage.setItem("JwtKey","");
+}
+
+onMounted(() => {
+  console.log("onMounted.");
+
+  const initTokenStr = localStorage.getItem("JwtKey");
+
+  console.log("init token str:" + initTokenStr);
+
+  if (initTokenStr !== "{}" && initTokenStr !== null) {
+    let token = JSON.parse(initTokenStr);
+    tokenStore.token = token;
+  }
+})
 
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="Rust mall demo." />
-      <nav>
-        <RouterLink to="/sign_in">signIn</RouterLink>
-        <RouterLink to="/sign_up">signUp</RouterLink>
-      </nav>
-    </div>
-  </header>
+  <div>
+    <header>
+      <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+
+      <h1 class="green">Rust mall {{ emptyToken }} {{ tokenStore.token.token_type }}</h1>
+
+      <div>
+        <nav>
+          <div v-if="JSON.stringify(tokenStore.token) === '{}'">
+            <RouterLink to="/sign_in">signIn</RouterLink>
+            <RouterLink to="/sign_up">signUp</RouterLink>
+          </div>
+          <div v-else>
+            <RouterLink to="/">goodsList</RouterLink>
+            <button v-on:click="sign_out">sign out</button>
+          </div>
+        </nav>
+      </div>
+
+    </header>
+  </div>
 
   <main>
-    <!-- <TheWelcome /> -->
-
-    <!-- <ul>
-      <li v-for="item of hits" :key="item.objectID">
-        <a :href="item.url">{{ item.title }}</a>
-      </li>
-    </ul> -->
-
     <RouterView />
-
   </main>
 </template>
 
@@ -57,8 +68,12 @@ header {
 @media (min-width: 1024px) {
   header {
     display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .logo {
@@ -67,7 +82,8 @@ header {
 
   header .wrapper {
     display: flex;
-    place-items: flex-start;
+    flex-direction: row;
+    /* place-items: flex-direction; */
     flex-wrap: wrap;
   }
 

front_page_vue/src/router/index.js

@@ -1,14 +1,15 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import GoodsDetailView from '../views/GoodsDetailView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView
-    },
+    // {
+    //   path: '/',
+    //   name: 'home',
+    //   component: HomeView
+    // },
     {
       path: '/about',
       name: 'about',
@@ -27,6 +28,16 @@ const router = createRouter({
       name: 'signIn',
       component: () => import('../views/SignInView.vue')
     },
+    {
+      path: '/',
+      name: 'goodsList',
+      component: () => import('../views/GoodsListView.vue')
+    },
+    {
+      path: '/goods_detail/:id',
+      name: 'goodsDetail',
+      component: GoodsDetailView
+    },
   ]
 })
 

front_page_vue/src/store.js

@@ -0,0 +1,14 @@
+import { reactive } from 'vue'
+
+/**
+ * like this:
+ * { "uid": "1b017638-1b1c-4e75-8a16-389f72dfa98e", "token": { "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxYjAxNzYzOC0xYjFjLTRlNzUtOGExNi0zODlmNzJkZmE5OGUiLCJleHAiOjE2OTI1MjQ0MTcsImlhdCI6MTY5MjQzODAxN30.QZcxjqcRADI5eRuKTgE4LhPrk0nbMuy9G66Iz8KcK0A", "token_type": "Bearer" } }
+ */
+export const tokenStore = reactive({
+    token: {},
+    setToken(jwt) {
+        console.log("setToken");
+        this.token = jwt;
+    }
+});
+

front_page_vue/src/views/GoodsDetailView.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { reactive, onMounted, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { tokenStore } from '../store.js'
+
+
+const router = useRouter()
+const route = useRoute()
+
+const goodDetail = ref({});
+
+const addOrderStatus = ref('');
+const addOrderResult = ref({});
+
+async function postData(url = '', data = {}) {
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': tokenStore.token.token.token_type + ' ' + tokenStore.token.token.access_token,
+    },
+    body: JSON.stringify(data)
+  });
+  return response.json();
+}
+
+async function fetch_goods_detail() {
+  const data = await fetch(
+    'http://127.0.0.1:3004/goods_detail?goods_id=' + route.params.id,
+    {
+      method: "post",
+      headers: {
+        'Content-Type': 'application/json'
+      },
+    }
+  ).then(rsp => rsp.json())
+  // alert.call("")
+  // window.alert("get goods_list over.");
+
+  goodDetail.value = data;
+}
+
+
+async function add_order() {
+  addOrderStatus.value = 'check sign status....';
+  if (JSON.stringify(tokenStore.token) === '{}') {
+    window.alert("please sign in first.");
+    return
+  }
+  addOrderStatus.value = 'request token....';
+
+  const addOrderTokenResp = await postData(
+    'http://127.0.0.1:3002/request_order_token',
+    {}
+  )
+  // .then(rsp => rsp.json())
+
+  const addOrderToken = addOrderTokenResp.token;
+  addOrderStatus.value = 'request token success.' + addOrderToken;
+
+
+  const addOrderResp = await postData(
+    'http://127.0.0.1:3002/add_order',
+    {
+      'items_id': Number(route.params.id),
+      'price': goodDetail.value.unit_price,
+      'count': 1,
+      'currency': "CNY",
+      'description': '',
+      'token': addOrderToken,
+    }
+  )
+  // .then(rsp => rsp.json())
+
+  addOrderStatus.value = 'add order success.';
+
+  // alert.call("")
+  // window.alert("get goods_list over.");
+
+  addOrderResult.value = addOrderResp;
+  // goodDetail.value = data;
+}
+
+onMounted((async () => {
+  fetch_goods_detail()
+}))
+
+</script>
+
+<template>
+  <main>
+    <div>
+      Goods Detail:
+    </div>
+    <div>
+      <p>name:</p>
+      <p>{{ goodDetail.goods_name }}</p>
+      <p>des:</p>
+      <p>{{ goodDetail.goods_des }}</p>
+
+      <div>
+        <button @click="add_order">buy now!</button>
+      </div>
+
+      <br>
+      <p>{{ addOrderStatus }}</p>
+      <p>{{ JSON.stringify(addOrderResult) }}</p>
+    </div>
+  </main>
+</template>

front_page_vue/src/views/GoodsListView.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { reactive, onMounted, ref } from 'vue'
+
+const page = ref(0);
+const page_size = ref(10);
+
+const goods = ref([]);
+
+async function fetch_goods_list() {
+  const data = await fetch(
+    'http://127.0.0.1:3004/goods_list?page_size=' + page_size.value + '&page=' + page.value,
+    {
+      method: "post",
+      headers: {
+        'Content-Type': 'application/json'
+      },
+    }
+  ).then(rsp => rsp.json())
+  // alert.call("")
+  // window.alert("get goods_list over.");
+
+  goods.value = data;
+}
+
+onMounted((async () => {
+  fetch_goods_list()
+}))
+
+</script>
+
+<template>
+  <main>
+    <div>
+      Goods List:
+    </div>
+    <div>
+      <ul>
+        <li v-for="item of goods" :key="item.objectID">
+          <a :href="'/goods_detail/' + item.id">{{ item.goods_name }}</a>
+        </li>
+      </ul>
+    </div>
+  </main>
+</template>

front_page_vue/src/views/SignInView.vue

@@ -1,10 +1,12 @@
 <script setup>
 import { reactive, onMounted, ref } from 'vue'
+import { tokenStore } from '../store.js'
+
 
 const userEmail = ref("");
 const userPassword = ref("");
 
-const signedToken = ref({})
+const signedToken = ref({});
 
 async function sign_in(event) {
   const data = await fetch(
@@ -23,13 +25,18 @@ async function sign_in(event) {
   // alert.call("")
   window.alert("sign_in over uuid:" + data.uid);
 
-  for(var key in data) {
-    console.log("sign_in get data: key"+ key + " : " + data[key])
+  for (var key in data) {
+    console.log("sign_in get data: key" + key + " : " + data[key])
   }
   console.log("sign_in get data,access_token: " + data.token.access_token)
   console.log("sign_in get data,token_type " + data.token.token_type)
 
   signedToken.value = data;
+  tokenStore.token = data;
+
+  let jwtStr = JSON.stringify(data);
+  console.log("setToken save to localStorage:" + jwtStr);
+  localStorage.setItem("JwtKey", jwtStr);
 }
 </script>
 
@@ -49,7 +56,7 @@ async function sign_in(event) {
       <button @click="sign_in">sign in</button>
     </div>
     <p>
-      {{signedToken}}
+      {{ signedToken }}
     </p>
   </main>
 </template>

order_server/Cargo.toml

@@ -14,7 +14,11 @@ consul_reg_lib = { path = "../consul_reg_lib" }
 
 axum = "0.6.10"
 tokio = { version = "1.0", features = ["full"] }
-tower = { version = "0.4", features = ["util"] }
+
+# 中间件
+tower = { version = "0.4", features = ["full"] }
+tower-http = { version = "0.2", features = ["full"] }
+
 dotenv = "0.15.0"
 sqlx = { version = "0.6.2", features = [
     "postgres",