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

\



相关文章
|
15天前
|
JavaScript
Vue中ref创建_基本类型的响应式数据,在Vue2的年代,数据配在data里,Vue3的区别是不把响应数据写在data里,那个数据是响应式的用ref包一下,let name = ref(“张三“)
Vue中ref创建_基本类型的响应式数据,在Vue2的年代,数据配在data里,Vue3的区别是不把响应数据写在data里,那个数据是响应式的用ref包一下,let name = ref(“张三“)
|
15天前
|
前端开发
Vue2和Vue3的区别,在setup中定义的数据,在data(){return中能否定义到},在setup我们不能用this,写在return中可以用this,但是不能在setup否则会报错
Vue2和Vue3的区别,在setup中定义的数据,在data(){return中能否定义到},在setup我们不能用this,写在return中可以用this,但是不能在setup否则会报错
|
6天前
|
JavaScript
|
8天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
4天前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
|
8天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
31 0
|
14天前
|
JavaScript API
Vue数据动态代理机制的实现以及响应式与数据劫持
Vue数据动态代理机制的实现以及响应式与数据劫持
12 0
|
15天前
|
JavaScript
文本,视频网站提交的方法,配置提交的按钮,一次性提交的方法,Vue编写好代码向后台发送数据就行
文本,视频网站提交的方法,配置提交的按钮,一次性提交的方法,Vue编写好代码向后台发送数据就行
|
15天前
|
JavaScript
文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
|
15天前
|
JavaScript
Vue插值表达式数组写法,插值表达式,如何插入数据,数组,集合,{{}}多项数据显示页面的写法
Vue插值表达式数组写法,插值表达式,如何插入数据,数组,集合,{{}}多项数据显示页面的写法