From 72d661cdebef6ff939d7f2aa199988f8587e1dc5 Mon Sep 17 00:00:00 2001
From: 18062706139 <2279549769@qq.com>
Date: Tue, 30 Aug 2022 19:17:30 +0800
Subject: [PATCH 1/2] nd

---
 src/App.vue                         |   5 +-
 src/componets/HomePage/sixGraph.vue |   5 +-
 src/main.js                         |  30 +++++-
 src/router/index.js                 |  13 ++-
 src/utils/login.js                  |  31 ++++++
 src/views/loginView.vue             | 150 ++++++++++++++++++++++++++++
 6 files changed, 224 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/login.js
 create mode 100644 src/views/loginView.vue

diff --git a/src/App.vue b/src/App.vue
index e2827bc..5c98a20 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,9 @@
+import { localGet } from '@/utils/login';
 <!--
  * @Author: arvin(王德江)
  * @Date: 2022-08-05 14:24:57
- * @LastEditors: 最后编辑
- * @LastEditTime: 2022-08-06 19:05:11
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-30 19:04:51
  * @Description: 
 -->
 <template>
diff --git a/src/componets/HomePage/sixGraph.vue b/src/componets/HomePage/sixGraph.vue
index a3e5e88..cf49555 100644
--- a/src/componets/HomePage/sixGraph.vue
+++ b/src/componets/HomePage/sixGraph.vue
@@ -2,7 +2,7 @@
  * @Author: Ryker
  * @Date: 2022-08-06 21:58:02
  * @LastEditors: 18062706139 2279549769@qq.com
- * @LastEditTime: 2022-08-25 21:56:50
+ * @LastEditTime: 2022-08-30 17:00:51
 -->
 <template>
 <div class="mainContainerSix">
@@ -29,6 +29,9 @@ export default {
             PV: 34,
             UV: 8
         }
+    },
+    methods: {
+        
     }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index 49627c1..e62d65d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,8 @@
 /*
  * @Author: arvin(王德江)
  * @Date: 2022-08-05 14:24:57
- * @LastEditors: arvin(王德江)
- * @LastEditTime: 2022-08-25 23:24:16
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-30 19:16:12
  * @Description: 
  */
 import Vue from 'vue'
@@ -18,7 +18,31 @@ import './assets/element/styles.scss'
 import '@/assets/fonts/font.css'
 
 import 'rrweb-player/dist/style.css';
-
+import { localGet } from '@/utils/login'
+router.beforeEach((to, from, next) => {
+  if(to.path == '/loginView' || to.path === '/') {
+    if(localGet('token')) {
+      const query = to.query
+      if(to.path === 'loginView' || to.path === '/') {
+        router.push({
+          path: '/homeView'
+        })
+      } else {
+        router.push({
+          path: '/' + query
+        })
+      }
+      return 
+    }
+    next()
+  } else {
+    if(!localGet('token')) {
+      next({path: '/loginView'})
+    } else {
+      next()
+    }
+  }
+})
 Vue.use(ElementUI)
 Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false
diff --git a/src/router/index.js b/src/router/index.js
index b71bbbe..f9c3ab3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,19 +1,19 @@
 /*
  * @Author: arvin(王德江)
  * @Date: 2022-08-05 14:24:57
- * @LastEditors: arvin(王德江)
- * @LastEditTime: 2022-08-05 15:19:53
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-30 19:11:58
  * @Description:
  */
 import Vue from "vue";
 import VueRouter from "vue-router";
 import HomeView from "../views/HomeView.vue";
-
+import loginView from '@/views/loginView'
 Vue.use(VueRouter);
 
 const routes = [
   {
-    path: "/",
+    path: "/homeView",
     name: "home",
     component: HomeView,
   },
@@ -35,6 +35,11 @@ const routes = [
     name: "reqError",
     component: () => import("../views/ReqErrorView.vue"),
   },
+  {
+    path: "/",
+    name: 'loginView',
+    component: loginView
+  }
 ];
 
 const router = new VueRouter({
diff --git a/src/utils/login.js b/src/utils/login.js
new file mode 100644
index 0000000..575fbc4
--- /dev/null
+++ b/src/utils/login.js
@@ -0,0 +1,31 @@
+/*
+ * @Author: 18062706139 2279549769@qq.com
+ * @Date: 2022-08-30 19:00:01
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-30 19:00:03
+ * @FilePath: /t1/src/utils/login.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// 先把值保留，如果没错误就处理之后返回，否则返回有错误的。
+export function localGet (key) {
+    const value = window.localStorage.getItem(key)
+    try {
+        return JSON.parse(window.localStorage.getItem(key))
+    } catch (error) {
+        return value;
+    }
+}
+
+export function localSet (key, value) {
+    window.localStorage.setItem(key, JSON.stringify(value));
+}
+
+export function localRemove (key) {
+    window.localStorage.removeItem(key);
+}
+
+export const pathMap = {
+    index: '首页',
+    login: '登录',
+    add: '添加商品'
+  }
\ No newline at end of file
diff --git a/src/views/loginView.vue b/src/views/loginView.vue
new file mode 100644
index 0000000..c13f160
--- /dev/null
+++ b/src/views/loginView.vue
@@ -0,0 +1,150 @@
+<template>
+<div class="login-body">
+    <!-- 登陆框div -->
+    <div class="login-container">
+        <!-- 登陆框头部logo部分 -->
+        <div class="head">
+            <img class="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" />
+            <div class="name">
+                <div class="title">新蜂商城</div>
+                <div class="tips">Vue3.0 后台管理系统</div>
+            </div>
+        </div>
+        <el-form label-position="top" :rules="rules" :model="ruleForm" ref="ruleForm" class="login-form">
+            <el-form-item label="账号" prop="username">
+                <el-input type="text" v-model="ruleForm.username"></el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="password">
+                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div>
+                <el-button style="width: 100%" type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
+                <el-checkbox v-model="checked" @change="!checked">下次自动登录</el-checkbox>
+            </el-form-item>
+        </el-form>
+    </div>
+</div>
+</template>
+
+<script>
+import {
+    localSet
+} from '@/utils/login'
+export default {
+    data() {
+        return {
+            ruleForm: {
+                username: '', // 账号
+                password: '', // 密码
+            },
+            rules: {
+                username: [{
+                    required: 'true',
+                    message: '请输入',
+                    trigger: 'blur'
+                }, {
+                    min: 3,
+                    max: 10,
+                    message: '长度在 3 到 10 个字符',
+                    trigger: 'blur'
+                }],
+                password: [{
+                    required: 'true',
+                    message: '密码不能为空',
+                    trigger: 'blur'
+                }, {
+                    min: 3,
+                    max: 10,
+                    message: '长度在 3 到 10 个字符',
+                    trigger: 'blur'
+                }]
+            },
+            checked: true,
+        }
+    },
+    methods: {
+        submitForm(formName) {
+            console.log(1)
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    if (this.ruleForm.username === 'admin' && this.ruleForm.password === '123456') {
+                        this.$router.push({
+                            path: '/homeView'
+                        })
+                        localSet('token', '123456');
+                    } else if (this.ruleForm.username !== 'admin') {
+                        alert('用户名错误')
+                    } else if (this.ruleForm.password !== '123456') {
+                        alert('密码错误')
+                    }
+                } else {
+                    alert('不符合输入规则');
+                    return false;
+                }
+            });
+        },
+    },
+
+}
+</script>
+
+<style scoped>
+.login-body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    background-color: #466AEB;
+    height: 100vh;
+}
+
+.login-container {
+    width: 420px;
+    height: 500px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
+}
+
+.head {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 40px 0 20px 0;
+}
+
+.head img {
+    width: 100px;
+    height: 100px;
+    margin-right: 20px;
+}
+
+.head .title {
+    font-size: 28px;
+    color: #1BAEAE;
+    font-weight: bold;
+}
+
+.head .tips {
+    font-size: 12px;
+    color: #999;
+}
+
+.login-form {
+    width: 70%;
+    margin: 0 auto;
+}
+
+.login-form>>>.el-form--label-top .el-form-item__label {
+    padding: 0;
+}
+
+.login-form>>>.el-form-item {
+    margin-bottom: 0;
+}
+
+.el-form-item {
+    text-align: left;
+}
+</style>
-- 
Gitee


From ce882b936e256c34fdc74c6497c5755a50cb5410 Mon Sep 17 00:00:00 2001
From: 18062706139 <2279549769@qq.com>
Date: Tue, 30 Aug 2022 19:22:50 +0800
Subject: [PATCH 2/2] nd

---
 src/views/loginView.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/views/loginView.vue b/src/views/loginView.vue
index c13f160..f987e4f 100644
--- a/src/views/loginView.vue
+++ b/src/views/loginView.vue
@@ -4,10 +4,9 @@
     <div class="login-container">
         <!-- 登陆框头部logo部分 -->
         <div class="head">
-            <img class="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" />
             <div class="name">
-                <div class="title">新蜂商城</div>
-                <div class="tips">Vue3.0 后台管理系统</div>
+                <div class="title">Let's ReVue</div>
+                <div class="tips">前端监控系统</div>
             </div>
         </div>
         <el-form label-position="top" :rules="rules" :model="ruleForm" ref="ruleForm" class="login-form">
@@ -147,4 +146,7 @@ export default {
 .el-form-item {
     text-align: left;
 }
+.logo {
+    background-size: cover;
+}
 </style>
-- 
Gitee