feat:登录页完成

bookmark_front/.editorconfig

@@ -4,4 +4,4 @@ indent_size = 2
 end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
-max_line_length = 100
+max_line_length = 150

bookmark_front/babel.config.js

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

bookmark_front/package.json

@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "ant-design-vue": "^1.6.2",
+    "ant-design-vue": "^1.6.3",
     "axios": "^0.19.2",
     "babel-plugin-import": "^1.13.0",
     "core-js": "^3.6.5",

bookmark_front/src/components/public/Switch.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="main">
+    <template v-if="current !== 'reset'">
+      <span @click="go('login')" :class="[{ current: current == 'login' }, 'item']">登录</span>
+      <span class="pot"></span>
+      <span @click="go('register')" :class="[{ current: current == 'register' }, 'item']">注册</span>
+    </template>
+    <template v-else><span class="item">重置密码</span></template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PublicSwitch",
+  props: {
+    current: {
+      type: String,
+      default: "login"
+    }
+  },
+  methods: {
+    go(target) {
+      this.$router.replace(target);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.25rem;
+  color: #969696;
+  .current {
+    color: #1890ff !important;
+    border-bottom: 2px solid #1890ff;
+  }
+  .item {
+    cursor: pointer;
+  }
+  .pot {
+    background-color: #1890ff;
+    width: 0.05rem;
+    height: 0.05rem;
+    border-radius: 50%;
+    margin: 0.15rem;
+  }
+}
+</style>

bookmark_front/src/main.js

@@ -1,11 +1,19 @@
 import Vue from "vue";
+import { Button, FormModel, Input, Icon, message, Checkbox } from "ant-design-vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 
+Vue.component(Button.name, Button);
+Vue.use(FormModel);
+Vue.component(Input.name, Input);
+Vue.component(Icon.name, Icon);
+Vue.use(Checkbox);
+
+Vue.prototype.$message = message;
 Vue.config.productionTip = false;
 
-new Vue({
+window.vueInstance = new Vue({
   router,
   store,
   render: h => h(App)

bookmark_front/src/router/index.js

@@ -12,7 +12,6 @@ Vue.use(VueRouter);
 const routes = [
   {
     path: "/",
-    name: "Main",
     component: Main,
     children: [
       {

bookmark_front/src/util/HttpUtil.js

@@ -20,13 +20,15 @@ async function request(url, method, params, body, isForm, redirect) {
     headers["Content-Type"] = "multipart/form-data";
   }
   try {
-    const { code, data, message } = await http.default.request({
+    const res = await http.default.request({
       url,
       baseURL: "/bookmark/api",
+      method,
       params,
       data: body,
       headers
     });
+    const { code, data, message } = res.data;
     if (code === 1) {
       return data;
     }
@@ -35,10 +37,9 @@ async function request(url, method, params, body, isForm, redirect) {
       router.replace(`/public/login?redirect=${encodeURIComponent(router.currentRoute.fullPath)}`);
       return null;
     }
-    console.log(`请求异常:${message}`);
+    window.vueInstance.$message.error(message);
     throw new Error(message);
   } catch (err) {
-    console.error(err);
     throw new Error(err);
   }
 }

bookmark_front/src/views/main/Main.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script>
-import Top from "@/components/layout/Top.vue";
+import Content from "@/layout/main/Content.vue";
-import Content from "@/components/layout/Content.vue";
+import Bottom from "@/layout/main/Bottom.vue";
-import Bottom from "@/components/layout/Bottom.vue";
+import Top from "@//layout/main/Top.vue";
 
 export default {
   name: "Home",

bookmark_front/src/views/public/pages/Login.vue

@@ -1,11 +1,81 @@
 <template>
-  <div>登录页面</div>
+  <div>
+    <Header current="login" />
+    <div class="form">
+      <a-form-model ref="loginForm" :model="form" :rules="rules">
+        <a-form-model-item prop="str" ref="str">
+          <a-input v-model="form.str" placeholder="邮箱/用户名">
+            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
+          </a-input>
+        </a-form-model-item>
+        <a-form-model-item prop="password">
+          <a-input v-model="form.password" placeholder="密码" type="password">
+            <a-icon slot="prefix" type="password" style="color:rgba(0,0,0,.25)" />
+          </a-input>
+        </a-form-model-item>
+        <a-form-model-item prop="password">
+          <div class="reset">
+            <a-checkbox v-model="form.rememberMe">记住我</a-checkbox>
+            <router-link replace="reset">重置密码</router-link>
+          </div>
+        </a-form-model-item>
+
+        <a-form-model-item>
+          <div class="btns">
+            <a-button type="primary" block @click="submit">登录</a-button>
+          </div>
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+  </div>
 </template>
 
 <script>
+import Header from "@/components/public/Switch.vue";
+import httpUtil from "../../../util/HttpUtil.js";
 export default {
-  name: "Login"
+  name: "Login",
+  components: {
+    Header
+  },
+  data() {
+    return {
+      form: {
+        str: "",
+        password: "",
+        rememberMe: false
+      },
+      rules: {
+        str: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { min: 1, max: 50, message: "最短1，最长50", trigger: "blur" }
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { pattern: "^\\w{6,18}$", message: "密码为6-18位数字,字母,下划线组合", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      let _this = this;
+      this.$refs.loginForm.validate(async status => {
+        if (status) {
+          let res = await httpUtil.post("/user/login", null, _this.form);
+        }
+      });
+    }
+  }
 };
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.form {
+  margin: 0.3rem;
+  .reset {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>

bookmark_front/vue.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  lintOnSave: false,
+  devServer: {
+    proxy: {
+      "/bookmark/api": {
+        //这里最好有一个 /
+        target: "http://localhost:8088", // 服务器端接口地址
+        ws: true, //如果要代理 websockets，配置这个参数
+        // 如果是https接口，需要配置这个参数
+        changeOrigin: true, //是否跨域
+        pathRewrite: {
+          "^/bookmark/api": "/bookmark/api"
+        }
+      }
+    }
+  }
+};