vue-項目-實作登陸

<template>
  <div class="maincont">
    <header>
      <a href="javascript:history.back(-1)" class="back-off fl"><span class="glyphicon glyphicon-menu-left"></span></a>
      <div class="head-mid">
        <h1>會員注冊</h1>
      </div>
    </header>
    <div class="head-top">
      <img src="@/assets/images/head.jpg" />
    </div><!--head-top/-->
    <form action="user.html" method="get" class="reg-login">
      <h3>還沒有三級分銷賬号？點此<router-link class="orange" to="/Reg">注冊</router-link></h3>
      <div class="lrBox">
        <div class="lrList"><input type="text" v-model="user_name"  placeholder="輸入手機号碼或者郵箱号" /></div>
        <div class="lrList"><input type="text" v-model="password" placeholder="輸入你的密碼" /></div>
      </div><!--lrBox/-->
      <div class="lrSub">
        <input type="button" @click="Login()" value="立即登入" />
      </div>
    </form><!--reg-login/-->
    <tab-bar></tab-bar>
  </div><!--maincont-->
</template>
<script>
import  "@/assets/css/bootstrap.min.css"
import  "@/assets/css/style.css"
import  "@/assets/css/response.css"
import  "@/assets/js/jquery.min.js"
import  "@/assets/js/jquery.excoloSlider.js"
import  "@/assets/js/style.js"
import TabBar from "./Public/TabBar";
import Common from "../Mixins/Common";
export default {
  name: 'Login',
  components: {TabBar},
  mixins:[ Common ],
  data () {
    return {
      user_name:'',
      password:''
    }
  },
  methods:{
    Login:function () {
      if( this.user_name=='' ){
        alert('使用者名不能為空');
        return false;
      }
      if( this.password == ''){
        alert('請輸入你的密碼')
        return  false
      }
      let api_data = {
        user_name:this.user_name,
        password: this.password,
        tt:3
      };
      this.ajaxPost( '/api/user/login' , api_data ).then(api_response =>{
        if( api_response.status != 200 ) {
          alert( api_response.msg );
          return false;
        }else{
          // sessionStorage都可以
          localStorage.setItem('user_id' ,api_response.data.user_id);
          localStorage.setItem('user_token' ,api_response.data.token);
          localStorage.setItem('user_info' , JSON.stringify(api_response.data) );
          alert('登陸成功');
          this.gotoPage('Index');
        }
      });
    }
  },
  component:{
    TabBar:TabBar
  },
  mounted(){
    console.log(JSON.parse(localStorage.getItem('user_info')));
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>