🐛 修复接口请求 bug

README.md

@@ -1,5 +1,11 @@
 # 微前端架构模板
 
+### 2021.3.3 更新说明
+
+> 因服务器到期，所有网络请求均已更换成 mock 请求。
+> 
+> 教程案例统一以最新的 `master` 分支为主，其余分支未更新。
+
 ## 介绍
 
 > 微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时，它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。

micro-app-angular/src/app/pages/list/list.component.html

@@ -1,18 +1,5 @@
 <nz-table #basicTable [nzData]="list">
-  <thead>
-    <tr>
-      <th>图片</th>
-      <th>名称</th>
-      <th>价格</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let data of basicTable.data">
-      <td>
-        <nz-avatar [nzSize]="48" [nzSrc]="data.poster"></nz-avatar>
-      </td>
-      <td>{{ data.name }}</td>
-      <td>￥ {{ data.price }}</td>
-    </tr>
-  </tbody>
+  <h2 style="font-size: 26px; color: #fb4487;">
+    曾经充满数据的一个列表（因服务器到期，此处数据已丢失）
+  </h2>
 </nz-table>

micro-app-angular/src/app/pages/list/list.component.ts

@@ -26,6 +26,6 @@ export class ListComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.fetchVegetable(1, 999);
+    // this.fetchVegetable(1, 999);
   }
 }

micro-app-react-communication/src/pages/communication/index.jsx

@@ -6,32 +6,21 @@ import SharedModule from "@/shared";
 import { ApiGetUserInfo } from "@/apis";
 
 const Status = () => {
-  const history = useHistory();
-
-  const [token, setToken] = useState();
-  useEffect(() => {
-    const shared = SharedModule.getShared();
-    const token = shared.getToken();
-
-    // 未登录 - 返回主页
-    if (!token) {
-      message.error("未检测到登录信息！");
-      return history.push("/");
-    }
-
-    setToken(token);
-  }, [history]);
-
   const [userInfo, setUserInfo] = useState();
   useEffect(() => {
     if (!token) return;
 
     (async () => {
-      const result = await ApiGetUserInfo(token);
-      console.log(result);
-      setUserInfo(result.data.getUserInfo);
+      setUserInfo({
+        nickname: "shadows",
+        avatarUrl: "",
+        gender: 1,
+        country: "中国",
+        province: "广东",
+        city: "深圳",
+      });
     })();
-  }, [token]);
+  }, []);
 
   if (!userInfo) return null;
 

micro-app-react/src/index.js

@@ -41,3 +41,10 @@ export async function unmount() {
   console.log("ReactMicroApp unmount");  
   ReactDOM.unmountComponentAtNode(document.getElementById("root"));
 }
+
+if (process.env.NODE_ENV === "development") {
+  window["ReactMicroApp"] = {};
+  window["ReactMicroApp"].bootstrap = bootstrap;
+  window["ReactMicroApp"].mount = mount;
+  window["ReactMicroApp"].unmount = unmount;
+}

micro-app-react/src/pages/list/index.jsx

@@ -25,26 +25,29 @@ const List = () => {
 
   useEffect(() => {
     console.log({ page });
-    (async () => {
-      const result = await fetchVegetable(page, 10);
-      const { vegetableList } = result.data;
-      setData(() => vegetableList.items);
-      setPageInfo(() => ({
-        current: vegetableList.page,
-        pageSize: vegetableList.pageSize,
-        total: vegetableList.total,
-        onChange: (page) => setPage(page),
-      }));
-    })();
+    // (async () => {
+    //   const result = await fetchVegetable(page, 10);
+    //   const { vegetableList } = result.data;
+    //   setData(() => vegetableList.items);
+    //   setPageInfo(() => ({
+    //     current: vegetableList.page,
+    //     pageSize: vegetableList.pageSize,
+    //     total: vegetableList.total,
+    //     onChange: (page) => setPage(page),
+    //   }));
+    // })();
   }, [page]);
 
   return (
     <Card title="React 子应用列表页">
-      <Table rowKey="_id" dataSource={data} pagination={pageInfo}>
+      <h2 style={{ fontSize: "26px", color: "#fb4487" }}>
+        曾经充满数据的一个列表（因服务器到期，此处数据已丢失）
+      </h2>
+      {/* <Table rowKey="_id" dataSource={data} pagination={pageInfo}>
         <Column dataIndex="poster" render={(text) => <Avatar src={text} />} />
         <Column dataIndex="name" />
         <Column dataIndex="price" render={(text) => <>￥ {text}</>} />
-      </Table>
+      </Table> */}
     </Card>
   );
 };

micro-app-vue-communication/src/pages/communication/index.vue

@@ -36,24 +36,19 @@ export default {
   },
 
   mounted() {
-    const shared = SharedModule.getShared();
-    // 使用 shared 获取 token
-    const token = shared.getToken();
-
-    // 未登录 - 返回主页
-    if (!token) {
-      this.$message.error("未检测到登录信息！");
-      return this.$router.push("/");
-    }
-
-    this.getUserInfo(token);
+    this.getUserInfo();
   },
 
   methods: {
-    async getUserInfo(token) {
-      // ApiGetUserInfo 是用于获取用户信息的函数
-      const result = await ApiGetUserInfo(token);
-      this.userInfo = result.data.getUserInfo;
+    async getUserInfo() {
+      this.userInfo = {
+        nickname: "shadows",
+        avatarUrl: "",
+        gender: 1,
+        country: "中国",
+        province: "广东",
+        city: "深圳",
+      };
     }
   }
 };

micro-app-vue/src/pages/list/index.vue

@@ -1,10 +1,11 @@
 <template>
   <section>
     <a-card title="Vue 微应用列表页">
-      <a-table rowKey="_id" :dataSource="data" :pagination="pageInfo">
+      <!-- <a-table rowKey="_id" :dataSource="data" :pagination="pageInfo">
         <a-table-column title="菜名" dataIndex="name" />
         <a-table-column title="价格" dataIndex="price" :customRender="(text) => `￥ ${text}`" />
-      </a-table>
+      </a-table> -->
+      <h2 class="old-title">曾经充满数据的一个列表（因服务器到期，此处数据已丢失）</h2>
     </a-card>
   </section>
 </template>
@@ -46,7 +47,14 @@ export default {
   },
 
   created() {
-    this.fetchVegetable(1, 10);
+    // this.fetchVegetable(1, 10);
   }
 }
-</script>
+</script>
+
+<style lang="less" scoped>
+.old-title {
+  font-size: 26px;
+  color: #fb4487;
+}
+</style>