feat:vue前端构建

bookmark_front/babel.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
+  presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: [
+    ["import", { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" }] // `style: true` 会加载 less 文件
+  ]
 };

bookmark_front/package.json

@@ -8,7 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "ant-design-vue": "^1.6.2",
+    "axios": "^0.19.2",
+    "babel-plugin-import": "^1.13.0",
     "core-js": "^3.6.5",
+    "localforage": "^1.7.4",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

bookmark_front/src/App.vue

@@ -1,32 +1,35 @@
 <template>
   <div id="app">
-    <div id="nav">
+    <Top />
-      <router-link to="/">Home</router-link> |
+    <Content>
-      <router-link to="/about">About</router-link>
+      <router-view />
-    </div>
+    </Content>
-    <router-view />
+    <Bottom />
   </div>
 </template>
 
+<script>
+import Top from "@/components/layout/Top.vue";
+import Content from "@/components/layout/Content.vue";
+import Bottom from "@/components/layout/Bottom.vue";
+
+export default {
+  name: "App",
+  components: { Top, Content, Bottom }
+};
+</script>
+
 <style lang="less">
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 100px;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
 }
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 </style>

bookmark_front/src/components/HelloWorld.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li>
-        <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li>
-        <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

bookmark_front/src/components/layout/Bottom.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="main">
+    <div>bottom</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Bottom"
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../global";
+.main {
+  background-color: gray;
+  height: @bottomHeight;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.14rem;
+}
+</style>

bookmark_front/src/components/layout/Content.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="main">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+@import "../../global.less";
+@sum: @topHeight + @bottomHeight;
+.main {
+  margin: 0 auto;
+  margin-top: @topHeight;
+  min-height: calc(~"100vh" - @sum);
+  width: 90%;
+  min-width: 5rem;
+  font-size: 0.14rem;
+  background-color: rgba(249, 231, 62, 0.2);
+}
+</style>

bookmark_front/src/components/layout/Top.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="main">
+    <img class="ico" src="/static/img/bookmarkLogo.png" />
+    <div class="user">fanxb</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Top"
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../global";
+.main {
+  position: fixed;
+  top: 0;
+  width: calc(100% - 10px);
+  height: @topHeight - (2 * @topPadding);
+  padding: @topPadding;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: rgba(197, 190, 198, 0.4);
+  .ico {
+    height: 100%;
+  }
+  .user {
+    font-size: 0.3rem;
+  }
+}
+</style>

bookmark_front/src/components/public/LoginRegisterHeader.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="location">
+    <template v-if="type !== 'reset'">
+      <span :class="[{ current: type === 'login' }, 'text']">登陆</span>
+      <span class="point"></span>
+      <span class="text">注册</span>
+    </template>
+    <template v-else>
+      <span class="text">重置密码</span>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LoginRegisterHeader",
+  props: {
+    type: String
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@textColor: #969696;
+.location {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: @textColor;
+  .point {
+    width: 0.05rem;
+    height: 0.05rem;
+    border-radius: 50%;
+    background-color: @textColor;
+    margin-left: 0.1rem;
+    margin-right: 0.1rem;
+  }
+  .text {
+    font-size: 0.4rem;
+    vertical-align: middle;
+    line-height: 0.4rem;
+    font-weight: 600;
+  }
+}
+.current {
+  color: black;
+}
+</style>

bookmark_front/src/global.less

@@ -0,0 +1,16 @@
+/**
+ * header 配置
+ */
+@topHeight: 0.4rem; //header总高度
+@topPadding: 0.04rem; //header padding高度
+
+/**
+ * bottom配置
+ */
+@bottomHeight: 0.4rem; //bottom高度
+
+/**
+ * content配置
+ */
+@bgColor: rgba(211, 211, 205, 0.3); //背景色
+@loginBgColor: rgb(255, 255, 255); //登录页背景色

bookmark_front/src/store/modules/globalHeader.js

@@ -0,0 +1,31 @@
+const state = {
+  isLogin: 0
+};
+
+const getters = {};
+
+const actions = {
+  asyncAdd({ commit }, data) {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        commit("setCount", data);
+        resolve();
+      }, 2000);
+    });
+  }
+};
+
+const mutations = {
+  setCount(state1, data) {
+    // eslint-disable-next-line no-param-reassign
+    state1.count += data;
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+};

bookmark_front/src/util/HttpUtil.js

@@ -0,0 +1,95 @@
+import * as http from "axios";
+import { getToken } from "./UserUtil";
+import router from "../router/index";
+
+/**
+ * 请求
+ * @param {*} url url
+ * @param {*} method 方法
+ * @param {*} params url参数
+ * @param {*} body 请求体
+ * @param {*} isForm 是否form
+ * @param {*} redirect 接口返回未认证是否跳转到登陆
+ * @returns 数据
+ */
+async function request(url, method, params, body, isForm, redirect) {
+  const headers = {
+    "jwt-token": await getToken()
+  };
+  if (isForm) {
+    headers["Content-Type"] = "multipart/form-data";
+  }
+  try {
+    const { code, data, message } = await http.default.request({
+      url,
+      baseURL: "/bookmark/api",
+      params,
+      data: body,
+      headers
+    });
+    if (code === 1) {
+      return data;
+    }
+    if (code === -1 && redirect) {
+      // 跳转到登陆页
+      router.replace(`/public/login?redirect=${encodeURIComponent(router.currentRoute.fullPath)}`);
+      return null;
+    }
+    console.log(`请求异常:${message}`);
+    throw new Error(message);
+  } catch (err) {
+    console.error(err);
+    throw new Error(err);
+  }
+}
+
+/**
+ * get方法
+ * @param {*} url url
+ * @param {*} params url参数
+ * @param {*} redirect 未登陆是否跳转到登陆页
+ */
+async function get(url, params = null, redirect = true) {
+  return request(url, "get", params, null, redirect);
+}
+
+/**
+ * post方法
+ * @param {*} url url
+ * @param {*} params url参数
+ * @param {*} body body参数
+ * @param {*} isForm 是否表单数据
+ * @param {*} redirect 是否重定向
+ */
+async function post(url, params, body, isForm = false, redirect = true) {
+  return request(url, "post", params, body, isForm, redirect);
+}
+
+/**
+ * put方法
+ * @param {*} url url
+ * @param {*} params url参数
+ * @param {*} body body参数
+ * @param {*} isForm 是否表单数据
+ * @param {*} redirect 是否重定向
+ */
+async function put(url, params, body, isForm = false, redirect = true) {
+  return request(url, "put", params, body, isForm, redirect);
+}
+
+/**
+ * delete方法
+ * @param {*} url url
+ * @param {*} params url参数
+ * @param {*} redirect 是否重定向
+ */
+async function deletes(url, params = null, redirect = true) {
+  return request(url, "delete", params, null, redirect);
+}
+
+export default {
+  get,
+  post,
+  put,
+  delete: deletes
+};

bookmark_front/src/util/UserUtil.js

@@ -0,0 +1,36 @@
+import localStore from "localforage";
+// import HttpUtil from './HttpUtil.js';
+const TOKEN = "token";
+// consts USER_INFO = "userInfo";
+
+/**
+ * 获取用户token
+ */
+export async function getToken() {
+  if (!window.token) {
+    window.token = await localStore.getItem(TOKEN);
+  }
+  return window.token;
+}
+
+/**
+ * 清除用户token
+ */
+export async function clearToken() {
+  delete window.token;
+  await localStore.removeItem(TOKEN);
+}
+
+/**
+ * 本地获取用户信息
+ */
+export async function getUesrInfo() {
+  return null;
+}
+
+/**
+ * 从服务器获取用户信息
+ */
+export async function getOnlineUserInfo() {
+  return null;
+}

bookmark_front/src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

bookmark_front/src/views/public/Login.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="main">
+    <div class="main-body">
+      <login-register-header type="login"></login-register-header>
+    </div>
+  </div>
+</template>
+
+<script>
+import LoginRegisterHeader from "../../components/public/LoginRegisterHeader.vue";
+
+export default {
+  name: "Login",
+  components: { LoginRegisterHeader }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../global.less";
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .main-body {
+    width: 5rem;
+    height: 3.5rem;
+    background-color: @loginBgColor;
+    border-radius: 5px;
+    padding: 0.1rem;
+  }
+}
+</style>