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

简介: 从0开始搭建Vue项目——todolist,本文涉及cli搭建项目&配置&路由&守卫相关内容

登录数据绑定

在我们之前的单纯使用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) => {});
复制代码

1.webp.jpg

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

1.webp.jpg

在其中有我们很多熟悉的history等等所以我们可以调用this.$router.push()来实现跳转。

this.$router.push('/todo')
复制代码

如果我们想要传参的话可以以对象的形式设置push,其中name为组件名称,params为传值

this.$router.push({ name: 'Home', params: { name: this.form.username } })
复制代码

\



目录
打赏
0
0
3
0
69
分享
相关文章
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
162 64
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
70 1
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
79 1
|
3月前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
35 3
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
54 2
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
219 4
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等