vue学习第03天

效果

样式

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .btn {
    display: flex;
    justify-content: flex-end;
  }

按钮点击重置

<!-- 输入框 -->
<el-form ref="loginFormRef"
         ...>
​
<el-button @click="resetLoginForm"
          type="info">重置</el-button>
 
<!-- ref 引用 -->    
<script>
export default {
  methods: {
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
    }
  }
}
</script>

配置axios (main.js)

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios

发起post请求

// 提交
submitLoginForm () {
    this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
        const { data: res } = await this.$http.post('login', this.loginForm)
    })
},

// const result = = await this.$http.post('login', this.loginForm)
// { data:res } 用来解构result，result中有data
// async await 

消息提示框message

// main.js
import { Button, Form, FormItem, Input, Message } from 'element-ui'
Vue.prototype.$message = Message
// 使用
this.$message.error('用户名或密码错误')

保存token 及 跳转

window.sessionStorage.setItem('token', res.data.token)
this.$router.push('./home')