SSR render success

jvuesource · Feb 28, 2019 · 2d0a6cd · 2d0a6cd
1 parent 712cf78
commit 2d0a6cd
Show file tree

Hide file tree

Showing 6 changed files with 322 additions and 431 deletions.
diff --git a/src/main/vue/build/cpm.cmd b/src/main/vue/build/cpm.cmd
@@ -1,39 +1,41 @@
-REM ./build/cpm.cmd
-REM ncp [source] [dest] [--limit=concurrency limit] [--filter=filter] --stopOnErr
-
-REM clean && mkdir
-del "dist/node_modules" /q
-mkdir "dist/node_modules"
-
-REM core-js
-yarn ncp node_modules/core-js dist/node_modules/core-js
-del -rf dist/node_modules/core-js/modules /q
-
-REM vue-server-renderer
-yarn ncp node_modules/he dist/node_modules/he
-yarn ncp node_modules/lodash._reinterpolate dist/node_modules/lodash._reinterpolate
-yarn ncp node_modules/lodash.template dist/node_modules/lodash.template
-yarn ncp node_modules/lodash.templatesettings dist/node_modules/lodash.templatesettings
-yarn ncp node_modules/resolve dist/node_modules/resolve
-yarn ncp node_modules/serialize-javascript dist/node_modules/serialize-javascript
-yarn ncp node_modules/vue-server-renderer dist/node_modules/vue-server-renderer
-del dist/node_modules/vue-server-renderer/node_modules /q
-
-REM vue
-yarn ncp node_modules/vue dist/node_modules/vue
-
-REM vue-router
-yarn ncp node_modules/vue-router dist/node_modules/vue-router
-
-REM axios
-yarn ncp node_modules/axios dist/node_modules/axios
-yarn ncp node_modules/is-buffer dist/node_modules/is-buffer
-yarn ncp node_modules/follow-redirects dist/node_modules/follow-redirects
-
-REM bootstrap-vue
-yarn ncp node_modules/bootstrap-vue dist/node_modules/bootstrap-vue
-del "dist/node_modules/bootstrap-vue/node_modules" /q
-del "dist/node_modules/bootstrap-vue/src" /q
-
-REM circular-json
-yarn ncp node_modules/circular-json dist/node_modules/circular-json
+REM ./build/cpm.cmd
+REM ncp [source] [dest] [--limit=concurrency limit] [--filter=filter] --stopOnErr
+
+REM clean && mkdir
+del "dist/node_modules" /q
+mkdir "dist/node_modules"
+
+REM core-js
+yarn ncp node_modules/core-js dist/node_modules/core-js
+
+REM vue-server-renderer
+yarn ncp node_modules/he dist/node_modules/he
+yarn ncp node_modules/lodash._reinterpolate dist/node_modules/lodash._reinterpolate
+yarn ncp node_modules/lodash.template dist/node_modules/lodash.template
+yarn ncp node_modules/lodash.templatesettings dist/node_modules/lodash.templatesettings
+yarn ncp node_modules/resolve dist/node_modules/resolve
+yarn ncp node_modules/serialize-javascript dist/node_modules/serialize-javascript
+yarn ncp node_modules/vue-server-renderer dist/node_modules/vue-server-renderer
+del dist/node_modules/vue-server-renderer/node_modules /q
+
+REM vue
+yarn ncp node_modules/vue dist/node_modules/vue
+
+REM vue-router
+yarn ncp node_modules/vue-router dist/node_modules/vue-router
+
+REM axios
+yarn ncp node_modules/axios dist/node_modules/axios
+yarn ncp node_modules/is-buffer dist/node_modules/is-buffer
+yarn ncp node_modules/follow-redirects dist/node_modules/follow-redirects
+
+REM bootstrap-vue
+yarn ncp node_modules/bootstrap-vue dist/node_modules/bootstrap-vue
+del "dist/node_modules/bootstrap-vue/node_modules" /q
+del "dist/node_modules/bootstrap-vue/src" /q
+
+REM circular-json
+yarn ncp node_modules/circular-json dist/node_modules/circular-json
+
+REM source-map
+yarn ncp node_modules/source-map dist/node_modules/source-map
diff --git a/src/main/vue/build/cpm.sh b/src/main/vue/build/cpm.sh
@@ -8,7 +8,6 @@ mkdir -p dist/node_modules
 
 # core-js
 yarn ncp node_modules/core-js dist/node_modules/core-js
-rm -rf dist/node_modules/core-js/modules
 
 # vue-server-renderer
 yarn ncp node_modules/he dist/node_modules/he
@@ -37,4 +36,7 @@ rm -rf dist/node_modules/bootstrap-vue/node_modules
 rm -rf dist/node_modules/bootstrap-vue/src
 
 # circular-json
-yarn ncp node_modules/circular-json dist/node_modules/circular-json
+yarn ncp node_modules/circular-json dist/node_modules/circular-json
+
+# source-map
+yarn ncp node_modules/source-map dist/node_modules/source-map
diff --git a/src/main/vue/src/components/HelloWorld.vue b/src/main/vue/src/components/HelloWorld.vue
diff --git a/src/main/vue/src/util/storage.js b/src/main/vue/src/util/storage.js
@@ -1,83 +1,90 @@
-/**
- * storage.js
- *
- * @author Terwer
- * @version 1.0
- * 19-2-28 上午12:22
- **/
-import { getLogger } from "./logger";
-const logger = getLogger("util/storage");
-const CircularJSON = require("circular-json");
-import { isEmptyOrUndefined } from "./string";
-import { inBrowser } from "../util/dom";
-import Vue from "vue";
-
-/**
- * 设置Session缓存
- * @param key key
- * @param value value
- */
-const setSessionStorage = (key, value) => {
-  console.log("Vue.$sessionStorage.set=>key:", key);
-  console.log("Vue.$sessionStorage.set=>value:", value);
-  Vue.$sessionStorage.set(key, value);
-};
-
-/**
- * 获取Session缓存
- * @param key key
- * @returns {*}
- */
-// const getSessionStorage = key => {
-//   return getSessionStorageOrDefault(key, "");
-// };
-
-/**
- * 获取Session缓存带默认值
- * @param key
- * @param val
- * @returns string
- */
-const getSessionStorageOrDefault = (key, val) => {
-  const value = Vue.$sessionStorage.get(key);
-  console.log("Vue.$sessionStorage.get=>key:", key);
-  console.log("Vue.$sessionStorage.get=>value:", value);
-  return isEmptyOrUndefined(value) ? val : value;
-};
-
-const setSession = (key, value) => {
-  logger.debug("process.env.SSR_ENV=>", process.env.SSR_ENV);
-  if (inBrowser) {
-    // 客户端存储数据
-    logger.debug("setSession to $sessionStorage");
-    setSessionStorage(key, value);
-  } else {
-    // 服务端设置Session
-    logger.debug("setSession to server");
-    global.setSessionCallback(key, value);
-  }
-};
-
-const getSession = (key, val) => {
-  let data = "";
-  if (inBrowser) {
-    // 客户端获取数据
-    // 优先获取SessionStorage，因为这里是最新更新的数据，点击客户端路由就会更新
-    data = getSessionStorageOrDefault(key, val);
-    logger.debug("get data from sessionStorage");
-    // 没有Session取window.__INITIAL_STATE__，这里只有出发服务端渲染才会更新
-    if (data.length === 0 && !isEmptyOrUndefined(window.__INITIAL_STATE__)) {
-      logger.debug("get data from window.__INITIAL_STATE__");
-      const initDataMap = window.__INITIAL_STATE__[0];
-      data = CircularJSON.stringify(initDataMap[key]);
-    }
-  } else {
-    // 服务端获取Session
-    data = global.getSessionCallback(key);
-    logger.debug("getSession from server");
-  }
-  logger.debug("data=>" + data);
-  return data;
-};
-
-export { setSession, getSession };
+/**
+ * storage.js
+ *
+ * @author Terwer
+ * @version 1.0
+ * 19-2-28 上午12:22
+ **/
+import { getLogger } from "./logger";
+const logger = getLogger("util/storage");
+const CircularJSON = require("circular-json");
+import { isEmptyOrUndefined } from "./string";
+import { inBrowser } from "../util/dom";
+import Vue from "vue";
+
+/**
+ * 设置Session缓存
+ * @param key key
+ * @param value value
+ */
+const setSessionStorage = (key, value) => {
+  console.log("Vue.$sessionStorage.set=>key:", key);
+  console.log("Vue.$sessionStorage.set=>value:", value);
+  Vue.$sessionStorage.set(key, value);
+};
+
+/**
+ * 获取Session缓存
+ * @param key key
+ * @returns {*}
+ */
+// const getSessionStorage = key => {
+//   return getSessionStorageOrDefault(key, "");
+// };
+
+/**
+ * 获取Session缓存带默认值
+ * @param key
+ * @param val
+ * @returns string
+ */
+const getSessionStorageOrDefault = (key, val) => {
+  const value = Vue.$sessionStorage.get(key);
+  console.log("Vue.$sessionStorage.get=>key:", key);
+  console.log("Vue.$sessionStorage.get=>value:", value);
+  return isEmptyOrUndefined(value) ? val : value;
+};
+
+const setSession = (key, value) => {
+  logger.debug("process.env.SSR_ENV=>", process.env.SSR_ENV);
+  if (inBrowser) {
+    // 客户端存储数据
+    logger.debug("setSession to $sessionStorage");
+    setSessionStorage(key, value);
+  } else {
+    // 服务端设置Session
+    logger.debug("setSession to server");
+    global.setSessionCallback(key, value);
+  }
+};
+
+const getSession = (key, val) => {
+  let data = "";
+  if (inBrowser) {
+    // 客户端获取数据
+    // 优先获取SessionStorage，因为这里是最新更新的数据，点击客户端路由就会更新
+    data = getSessionStorageOrDefault(key, val);
+    logger.debug("get data from sessionStorage");
+    logger.debug(data);
+    // 没有Session取window.__INITIAL_STATE__，这里只有触发服务端渲染才会更新
+    logger.debug("storage window.__INITIAL_STATE__=>");
+    logger.debug(window.__INITIAL_STATE__);
+    // 如果Session空，就从window.__INITIAL_STATE__获取值
+    const isEmpty = data === "[]" || data === "{}";
+    if (isEmpty && !isEmptyOrUndefined(window.__INITIAL_STATE__)) {
+      logger.debug("get data from window.__INITIAL_STATE__");
+      const initDataMap = window.__INITIAL_STATE__[0];
+      const curStr = CircularJSON.parse(initDataMap[key]);
+      console.log(typeof curStr);
+      data = CircularJSON.stringify(curStr);
+    }
+  } else {
+    // 服务端获取Session
+    data = global.getSessionCallback(key);
+    logger.debug("getSession from server");
+  }
+  logger.debug("getSession data success");
+  return data;
+};
+
+export { setSession, getSession };