> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/qian-duan-cao-zuo/shi-li-lian-xi/01-deng-lu-jie-mian.md).

# 登录界面

基于vue-router实现

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

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

```javascript
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组件中放置路由出口，当路由发生改变时转变页面

   ```markup
       <div class="blog-container">
           <router-view></router-view>
       </div>
   ```
2. 当路由中使用到`/login/`时，将会在路由出口进行渲染
3. 登录组件`login.vue`

   ```markup
    <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 主轴方向居中

```css
    #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中进行密码的验证

   ```javascript
   ## 提交按钮监听点击事件
    <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
               });
         }
       },
   }
   ```