5-24 登陆界面优化

src/assets/css/login.scss

@@ -1,12 +1,28 @@
-.bg{
-  background-image: src('@/assets/images/login.jpg');
+$bg:#2d3a4b;
+$dark_gray:#889aa4;
+$light_gray:#eee;
+.login-container{
+  // background: url('../../../public/static/images/login.png');
   width: 100%;
+  height: 330px;
+  margin-top: 9%;
   display: flex;
   justify-content: center;
+  flex-direction: row ;
   align-items: center;
+
+  .pic{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+
+  .tab{
+    width: 390px;
+  }
+
+  .btn{
+    display: flex;
+    justify-content: center;
+  }
 }
-.tab{
-  margin-top: 13%;
-  width: 330px;
-  border: 1px solid #000000;
-}

src/assets/js/login.js

@@ -1,38 +1,38 @@
-import { mapMutations } from 'vuex'
+import { mapMutations} from 'vuex'
 export default {
-  data () {
+  data() {
     return {
-      username: '',
-      password: '',
+      loginForm:{
+        username:'',
+        password:'',
+      }
+      
     }
   },
   components: {
   },
-  created () {
+  created() {
   },
-
+  
   methods: {
     ...mapMutations("user", ["SET_TOKEN"]),
-    login () {
+    login(){
       var digital = new URLSearchParams();
-      digital.append("username", "admin"),
-        digital.append("password", "admin"),
-        this.API.post("/admin/loginvue", digital).then((res) => {
-          const { data, code } = res;
-          debugger
-
-          console.log(localStorage.getItem('authToken'));
-          if (code == 200) {
-            this.SET_TOKEN(data);
-            this.$message({
-              message: '登陆成功',
-              type: 'success'
-            });
-            this.$router.push('/'); // 跳转到首页
-          } else {
-            this.$message.error('登录失败');// ui弹窗提示
-          }
+      digital.append("username",this.loginForm.username),
+      digital.append("password",this.loginForm.password),
+      this.API.post("/admin/loginvue", digital).then((res) => {
+       const {data,code} = res;
+       console.log(localStorage.getItem('authToken'));
+       if(code == 200){
+				this.SET_TOKEN(data);
+				this.$message({
+          message: '登陆成功',
+          type: 'success'
         });
+         this.$router.push('/'); // 跳转到首页
+			} else {
+        this.$message.error('登录失败');// ui弹窗提示
+			}
+      });
     }
-  }
-}
+  }}

src/router/index.js

@@ -73,10 +73,11 @@ const router = new VueRouter({
  * 路由的钩子函数，处理是否登录的判断
  * **/
  router.beforeEach((to, from, next) => {
-    // 路由地址不存在的处理办法
-  if(to.path === '/login' && store.getters.authToken){
-    next({path: '/'})
-  }else if (to.matched.some(m => m.meta.requireAuth)) {    // 需要登录
+    // 登录后登录页面处理办法
+  // if(to.path === '/login' && store.getters.authToken){
+  //   next({path: '/'})
+  // }else
+   if (to.matched.some(m => m.meta.requireAuth)) {    // 需要登录
     if(window.localStorage.authToken){
       next()
     } else if (to.path !== '/login') {

src/views/login.vue

@@ -1,23 +1,20 @@
 <template>
-  <div class="bg">
-    <el-form label-width="80px" class="tab">
-      <el-form-item label="用户名">
-        <el-input placeholder="请输入内容" v-model="username" clearable>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="密码">
-        <el-input
-          placeholder="请输入密码"
-          v-model="password"
-          show-password
-        ></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="login">登录</el-button>
-        <el-button>取消</el-button>
-      </el-form-item>
-    </el-form>
+<div class="login-container">
+  <div class="pic"> 
+    <img src="@/assets/images/log3.png">
   </div>
+  <el-form :model="loginForm" label-width="80px" class="tab">
+    <el-form-item>
+      <el-input prefix-icon="el-icon-user" placeholder="请输入内容" v-model="loginForm.username" clearable></el-input>
+    </el-form-item>
+    <el-form-item >
+      <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
+    </el-form-item>
+    <el-form-item class="btn">
+      <el-button size="medium" icon="el-icon-s-promotion" type="primary" @click="login">登录</el-button>
+    </el-form-item>
+  </el-form>
+</div>
 </template>
 
 <script>