登录数据绑定
在我们之前的单纯使用js的DOM或者JQ提供的方法来进行参数获取数据,然后再进行一些数据操作以及进行一些请求
但是在vue中不同,我们常常使用双向绑定的方式进行数据的获取等操作
首先我们需要使用v-model
来绑定form
<el-form ref="form" :model="form" class="login-box" label-position="right"></el-form> 复制代码
之后在每个表单中也需要进行model双向绑定
<el-input type="text" placeholder="请输入账号" v-model="form.username"></el-input> 复制代码
登录事件
在完成以上动作后就可以进行事件的绑定,也就是登录的时候我们需要干什么,一个login函数中,我们需要校验,请求,提示。
首先为我们的按钮绑定事件
<el-button type="primary" @click="login('form')" class="login-btn">登录</el-button> 复制代码
然后再methods下定义我们的login函数
methods:{ login(){} } 复制代码
之后在函数中设置校验以及请求等其他业务上需要的即可
登录校验
在我们正常根据接口文档配置好数据和dom元素后就可以开始配置我们的登录校验
- element组件:在data中配置rules校验规则,针对每一个表单数据进行不同的校验,message为警告文本,trigger为触发校验事件,require为判空,即必填项,在el-input中rule需要绑定一下rules属性值用v-bind
rules: {username: [{ required: true, message: '请输入账号', trigger: 'blur' },],} 复制代码
- validate()校验:使用refs获取到form数据再调用validate()方法来进行表单校验,将数据传入函数进行判断等其他操作。
this.$refs[formName].validate((valid) => {}); 复制代码
AXIOS
安装配置
- 安装
npm i axios -S 复制代码
- 局部引入(Login.vue)
import axios from 'axios' axios.get('url') 复制代码
- 全局引入(main.js)
- 引入
import axios from 'axios' 复制代码
- 挂载
Vue.prototype.axios = axios 复制代码
使用
- this调用aioxs
this.axios() 复制代码
- 参数配置
this.axios({ method: 'post', url: 'http://qlapi.sylu.edu.cn/mock/67/login', data: this.form, }) 复制代码
- method为请求类别,一般登录为post请求
url为请求地址,这里我们的请求地址设置的为yapi接口提供的测试地址
data为接口要求需要发的数据,这里是我们的账号和密码 - 异步执行
then((res) => {console.log(res)}) 复制代码
登录跳转
在原来的原生写法中我们常常调用BOM的window来进行js中的页面跳转
window.open() 复制代码
而在现在的项目中我们需要其他的方法来进行跳转,在之前我们可以来打印一下this.$router
在其中有我们很多熟悉的history等等所以我们可以调用this.$router.push()来实现跳转。
this.$router.push('/todo') 复制代码
如果我们想要传参的话可以以对象的形式设置push,其中name为组件名称,params为传值
this.$router.push({ name: 'Home', params: { name: this.form.username } }) 复制代码
\