Vue2-todolist——登录&数据&axios&跳转

登录数据绑定

在我们之前的单纯使用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元素后就可以开始配置我们的登录校验

1. element组件:在data中配置rules校验规则，针对每一个表单数据进行不同的校验，message为警告文本，trigger为触发校验事件，require为判空，即必填项，在el-input中rule需要绑定一下rules属性值用v-bind

rules: {username: [{ required: true, message: '请输入账号', trigger: 'blur' },],}
复制代码

1. validate()校验:使用refs获取到form数据再调用validate()方法来进行表单校验，将数据传入函数进行判断等其他操作。

this.$refs[formName].validate((valid) => {});
复制代码

AXIOS

安装配置

1. 安装

npm i axios -S
复制代码

1. 局部引入(Login.vue)

import axios from 'axios'
axios.get('url')
复制代码

1. 全局引入(main.js)

• 引入

import axios from 'axios'
复制代码

• 挂载

Vue.prototype.axios = axios
复制代码

使用

1. this调用aioxs

this.axios()
复制代码

1. 参数配置

this.axios({
   method: 'post',
   url: 'http://qlapi.sylu.edu.cn/mock/67/login',
   data: this.form,
})
复制代码

1. method为请求类别，一般登录为post请求
   url为请求地址，这里我们的请求地址设置的为yapi接口提供的测试地址
   data为接口要求需要发的数据，这里是我们的账号和密码
2. 异步执行

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 } })
复制代码

\