# 登录界面

基于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
               });
         }
       },
   }
   ```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zpliu.gitbook.io/booknote/qian-duan-cao-zuo/shi-li-lian-xi/01-deng-lu-jie-mian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.