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

猪痞恶霸
VIP.5 如鱼得水
467 阅读2分钟

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

大家好，我是猪痞恶霸，入门未满一年的带学生一枚，请多多关照。

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

git地址： 戳我现已完成登录以及其功能，请大佬多多指教

登录数据绑定

在我们之前的单纯使用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' },],}

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

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

image-20220120165800605.png

AXIOS

安装配置

  1. 安装

    npm i axios -S

  2. 局部引入(Login.vue)

    import axios from 'axios'
axios.get('url')

  3. 全局引入(main.js)

    • 引入

      import axios from 'axios'

    • 挂载

      Vue.prototype.axios = axios

使用

  1. this调用aioxs

    this.axios()

  2. 参数配置

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

    method为请求类别，一般登录为post请求

    url为请求地址，这里我们的请求地址设置的为yapi接口提供的测试地址

    data为接口要求需要发的数据，这里是我们的账号和密码

  3. 异步执行

    then((res) => {console.log(res)})

登录跳转

在原来的原生写法中我们常常调用BOM的window来进行js中的页面跳转

window.open()

而在现在的项目中我们需要其他的方法来进行跳转，在之前我们可以来打印一下this.$router

image-20220120191335311.png

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

this.$router.push('/todo')

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

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

\

avatar
文章
阅读
粉丝