用户前端登录

• router/index.js

  import Vue from 'vue'
  import Router from 'vue-router'
  import login from '@/components/Login'
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/login',
        name: 'login',
        component: login
      }
    ]
  })
  

• Login.vue

  <template>
    <div id='login'>
        <h2>用户登录</h2>
        <p>用户名  <input type="text" v-model="name"></p>
        <p>密码  <input type="password" v-model="password"></p>
        <button @click="sub">登录</button>
    </div>
  </template>
  
  <script>
  export default {
    name: 'login',
    data () {
      return {
        name:'',
        password:''
      }
    },
    methods:{
      sub:function(){
        // 拼装数据结构
        let data = {
          "name":this.name,
          "password":this.password
        }
        // 发送数据
        this.axios({
          url:'/api/app01/login/',
          method:'post',
          data:data
        }).then(res=>{
          if(res.data.status==200){
            // 登录成功后，跳转到图书列表页
          }else{
            alert(res.data.msg);
          }
        })
      }
    }
  }
  </script>