[day17]Vue实作-浏览列加入登入及注册钮

延续之前的浏览列的实作，这次要增加登入跟注册纽，其实我也还在想这个网站是否需要注册功能，毕竟是私人社区，也许之後可以由管委会调整社区名单就好，但练习嘛，就都做罗，之後再关闭也没关系。

登入画面开发(Login.vue)

1. 新增Login.vue，并於main.js加上

Vue.component('Login',require('./components/Login.vue').default);

2. Home.vue加入Login.vue内容

 <Login></Login>

3.Narbar.vue加入按钮
关键来了，之前有提到我们是使用bootstrapvue，而示范案例是使用bootstrap4开发的，後来发现还是有差异，之前分页用link的部分都没问题，这次使用button就怪怪的了
先来看看范例写什麽

<form class="form-inline my-2 my-lg-0">
  <!-- 点选後弹出login视窗(Modal) -->
  <a class="btn btn-outline-success my-2 my-sm-0" type="submit" data-toggle="modal" data-target="#login">Login/Register</a>
  <a class="btn btn-outline-success my-2 my-sm-0">Log out</a>
</form>

但就是弹跳不出来login的视窗，後来检视bootstrap-vue官网，与原本写法有差异，後来改用官网的写法，就成功罗!!
有时候会觉得，错误讯息不是很容易检视，之後再来研究一下这个问题。
调整後的写法

<b-nav-form>
   <b-button size="sm" class="my-2 my-sm-0"  variant="outline-secondary" v-b-modal.login > Login/Register </b-button>  
   <b-button size="sm" class="my-2 my-sm-0"  variant="outline-secondary"  > Log out </b-button>
</b-nav-form>

完整的调整如下

<template>
<div>
  <b-navbar toggleable="lg" type="dark" variant="dark">

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="/">Home</b-nav-item>
        <b-nav-item href="/about">About</b-nav-item>
        <b-nav-item href="/products">Products</b-nav-item>
        <b-nav-item href="/news">news</b-nav-item>
        <b-nav-item href="/stores">Stores</b-nav-item>
        <b-nav-item href="/posthome">Posttest</b-nav-item>
      <b-nav-item href="/user">Member-Center</b-nav-item>

      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-button size="sm" class="my-2 my-sm-0"  variant="outline-secondary" v-b-modal.login > Login/Register </b-button>  
          <b-button size="sm" class="my-2 my-sm-0"  variant="outline-secondary"  > Log out </b-button>
         
        </b-nav-form>
 
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>
</template>
 
<script>
export default {
  name: 'Navbar',
  props: {
    msg: String
  },
}
</script>
<style >
</style>

最後同范例的做法，完成Login.vue，就正常弹出我们要的画面罗

<template>
    <div class="login">
        <!-- Modal -->
        <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
 
                <div class="modal-body">
 
                        <ul class="nav nav-fill nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register" aria-selected="false">Register</a>
                            </li>
                        </ul>
 
                        <div class="tab-content" id="pills-tabContent">
                        
                            <div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
                                
                                <h5 class="text-center">Login Please</h5>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Email</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                                    <small class="form-text text-muted">We'll never share your email with anyone else.</small>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Password</label>
                                    <input type="password"class="form-control" id="exampleInputPassword1" placeholder="Password">
                                </div>
 
                                <div class="form-group">
                                    <button class="btn btn-primary">Login</button>
                                </div>
                            </div>
                        
                            <div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab">
                                
                                <h5 class="text-center">Create New Account</h5>
 
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
                                </div>
                                <div class="form-group">
                                    <label for="password">Password</label>
                                    <input type="password" class="form-control" id="password" placeholder="Password">
                                </div>
 
                                <div class="form-group">
                                    <button class="btn btn-primary">Register</button>
                                </div>
                            </div>
 
                        </div>
                </div>
           
            </div>
        </div>
        </div>
    </div>
</template>
 
<script>
export default {
  name: 'Login',
  props: {
    msg: String
  },  
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
 
</style>

今天就完成到这边，接下来继续把网页的壳做完