登录界面

基于vue-router实现

演示界面 https://zpliu1126.github.io/LearnJs/html/login.html

1. 首先router中定义好了路由

const router = new VueRouter({
    routes: [{ path: "/", redirect: "/home" },
        { path: '/home', component: home, },
        { path: '/register', component: register },
        { path: '/home/news', component: news },
        { path: '/blog', component: blog },
        { path: '/login', component: login },
    ]
})
export default router

1. 使用blog.vue组件作为首页

   在blog.vue组件中放置路由出口，当路由发生改变时转变页面

       <div class="blog-container">
           <router-view></router-view>
       </div>

2. 当路由中使用到/login/时，将会在路由出口进行渲染

3. 登录组件login.vue

    <div id="loginContainer">
       <div class="card">
       <div class="card-header">
           Weclome To Github
       </div>
           <div class="card-body">
             <form action="#">
                 <div class="form-group">
                     <label for="">
                      Account
                     </label>
                       <input type="text" class="form-control" required placeholder="Tel phone number or email">
                   </div>
                   <div class="form-group">
                     <label for="">
                       password
                     </label>
                       <input type="password" class="form-control" required placeholder="At least five character">
                   </div>
                   <button  class="form-control btn" type="submit" style="">login</button>
             </form>
           </div>
         </div>
       </div>
     </div>

4. 接下来就是交给css和js的活了

   • 用到了flex弹性布局

   • flex-direction 垂直方向布局

   • align-items 交叉轴方向，居中

   • justify-content 主轴方向居中

    #loginContainer {
       color: white;
       height: 100vh;
       border-top: solid 2px darkred;
       display: flex;
       flex-direction: column;
       height: 100vh;
       justify-content: center;
       align-items:center;
       background: rgb(41, 45, 62) url(https://43423.oss-cn-beijing.aliyuncs.com/img/20190921231830.svg);
       background-repeat: repeat-y;
       background-size:cover;

     }
     .form-group{
       min-height: 100px;
     }
     form input[type="text"], input[type="password"]{
       border:none;
       border-bottom: solid 2px red;
       width: 100%;
       height: 40px;
       padding:10px;
       transform: border-bottom 0.5s;
     }
     form input[type="text"]:focus, input[type="password"]:focus{
       border-bottom:solid 2px blue;
     }
     form input[type="text"]:hover, input[type="password"]:hover{
       border-bottom:solid 2px blue;
     }
     .form-group label{
       font-size: 20px;
     }
     button.form-control{
       background: #fafafa;
       border: none;
       border-radius: 0.6;
     }   
     .card-header{
       text-align: start;
       font-size: 20px;
       margin: 20px 0;
     }
   form button[type="submit"]{
       height: 40px;
       width: 60px;
       background-color:#67cd0a;
       color: #fafafa;
     }
   form button[type="submit"]:hover{
       height: 40px;
       width: 60px;
       background-color:#cd170a;
       color: #fafafa;
     }

1. vue中进行密码的验证

   ## 提交按钮监听点击事件
    <button  class="form-control btn"  v-on:click="login($event)" >login</button>
   ## 传递事件对象，用于阻止默认的form表单提交
   ## 在methods中定义登录处理函数
   export default{
     data() {
       return {
         requsetToast:null
       }
     },
     methods:{
         login(event){
           event.preventDefault();
           this.requsetToast=Toast({
                 message: '登录ing',
                 position: 'top',
                 duration: -1
               });
         }
       },
   }