[day20]Vue实作-登入功能实作串接後端API(下)

为了处理bootstrapVue的问题，也是花了一点时间处理，不过好在，慢慢地熟悉Vue和bootstrapVue的写法，可以真的开始做登入功能了，不过注册功能，暂时不太确定社区网站，是否需要提供注册功能，就先不开发这件事!

後端资料源服务

跟教学不同的是，我们是使用Json Server，所以就先启动

json-server db.json

可以看到我们的资料後端服务起来了

我们要呼叫的是http://localhost:3000/householder

新增提醒工具

新增提示工具SweetAlert

• 安装

npm install sweetalert2

• main.js加入

import Swal from 'sweetalert2';
window.Swal = Swal;

程序修改

• 修改Login.vue内容

<input type="email" v-model="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter Account">
...省略
<button class="btn btn-primary" @click="login">Login</button>

script内容建置

<script>
import global from '../Global.vue';
import axios from'axios'
export default {
  name: 'Login',
  props: {
    msg: String
  },  
  data() { 
    return {
      email:null, 
      password:null,
      db_api:global.db_api
    }},
    methods:{ 
 
    async login(){ 
        //登入方法
        console.log(`${this.db_api}`+"householder/?loginId=D07-1&loginPass=d071")
        let result = await axios.get(`${this.db_api}`+"householder?loginId="+`${this.email}`+"&loginPass="+`${this.password}`)
                if(result.status==200 && result.data.length==1 ){
                    sessionStorage.setItem("user-info",JSON.stringify(result.data[0]))
                    let user=sessionStorage.getItem('user-info')
                    Swal.fire({
                        position: 'top',
                        icon: 'success',
                        title: '登入成功!!',
                        showConfirmButton: false,
                        timer: 1500
                        }).then(() => {
                            this.$refs['login'].hide()
                            window.location.reload() 
                            });
            }
                else{
                    // 密码错误提醒
                    Swal.fire({
                        position: 'top',
                        icon: 'error',
                        title: 'Wrong account or password.',
                        showConfirmButton: false,
                        timer: 5000
                        });
        } 
}
}
</script>
 

• 新增Global.vue
  存放後端url

<script>
const db_api=" http://localhost:3000/"
export default {
   db_api,
}
</script>

结果

• 登入
  
• 密码错误
  
  -登入成功
  
• session读取状态
  从画面上可以看到session是成功的，将D07-1的帐号资讯带出来
  

跟范例网站的内容比较，因为後端的内容不同，写法就会有差异，这边就呈现我调整过後的样子!!
透过调整也可以学到更多，了解差异，就让我们继续下去吧~