elementUI之不会用
form表单注意事项
<template><div class="container"><el-form :model="form" label-width="80px" :rules="RulesName" ref="loginForm"><el-form-item label="姓名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="form.password"></el-input></el-form-item><el-form-item label="确认密码" prop="confirm"><el-input v-model="form.confirm"></el-input></el-form-item><el-form-item label=""><el-button type="primary" @click="onsubmit()">login</el-button></el-form-item></el-form></div>
</template><script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: 'test',data () {// 注意：必须在data函数里定义此箭头函数，才能确保this.from使用const samePwd = (rule, value, callback) => {if (value !== this.form.password) {// 如果验证失败，则调用 回调函数时，指定一个 Error 对象。callback(new Error('两次输入的密码不一致!'))} else {// 如果验证成功，则直接调用 callback 回调函数即可。callback()}}return {form: {username: '',password: '',confirm: ''},RulesName: {username: [{ required: true, message: '请输入', trigger: 'blur' },{pattern: /^[a-zA-Z0-9]{1,10}$/,message: '用户名必须是1-10的大小写字母数字',trigger: 'blur'}],passwordRule: [{ required: true, message: '请输入', trigger: 'blur' },{ min: 3, max: 5, message: '长度3-5', trigger: 'blur' }],confirm: [{ required: true, message: '请输入', trigger: 'blur' },{pattern: /^[a-zA-Z0-9]{1,10}$/,message: '用户名必须是1-10的大小写字母数字',trigger: 'blur'},{ validator: samePwd, trigger: 'blur' }]}}}
}
</script>前后端数据交互
可以数据交互了，那就使用
axios，那么在此直接使用axios真的好吗？
答：肯定不行
我们每次发起一个http请求都要写基地址（如：http://localhost:8080）那就重复切烦人
如果基地址变化了也很烦人
而且我们发请求需要携带一些token的，每次发起请求都要携带，那也很烦人
so需要对axios进行封装
