发表于： 2021-08-09 21:03:56
1 1879
今天完成的事情：，跟着教程完成vue项目的初始化，后端数据获取，使用了Element组件库，登录输入框验证等一系列知识
明天计划的事情：vue项目渲染列表页；；
收获：
今天收获满满。
搞懂了很多之前迷茫，看到后心情急躁的问题；都得到了解决。。之前写的很复杂的事件，其实很简单的几行代码就搞定了。（还是看文档的重要性！）
<!-- 登录表单区 -->
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
<!-- 用户名 -->
<el-form-item prop="username">
<el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password"
type="password"></el-input>
</el-form-item>
<!-- 按钮 -->
<el-form-item class="btns">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="resetLoginFormRef">重置</el-button>
</el-form-item>
</el-form>
在vue 项目中引用了Element 组件库 （提前引入组件库依赖）。组件库文档中需要的事件实例都给演示了，！上面是直接引用的表单组件。
model 获取表单输入的，model 绑定好的：
// 登录表单的绑定对象
loginForm: {
username: '',
password: ''
},
rules和prop 表单的验证规则：
// 表单的验证规则对象
loginFormRules: {
// 验证用户名是否合法
username: [
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{ min: 3, max: 11, message: '输入长度在 3 到 11 个字符', trigger: 'blur' }
],
// 验证密码是否合法
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' },
{ min: 6, max: 16, message: '输入长度在 6 到 16 个字符', trigger: 'blur' }
]
}
验证失败的效果图：
重置按钮和登录按钮的事件绑定：
methods: {
resetLoginFormRef () {
// console.log(this);
this.$refs.loginFormRef.resetFields()
},
login () {
this.$refs.loginFormRef.validate(async valid => {
if (!valid) return
const { data: res } = await this.$http.post('login', this.loginForm)
if (res.meta.status !== 200) return this.$message.error('登录失败')
this.$message.success('登录成功')
// 1，将登录成功后的 token ，保存到客户端的 sessionStorage 中
// 1.1 项目中除了登录之外的其他API接口，必须在登录之后才可以访问
// 1.2 token 只应该在当前网页打开期间生效，所以将 token 保存在 sessionStorage 中
window.sessionStorage.setItem('token', res.data.token)
// 2，通过编程式导航跳转到后台页面， 路由地址为 /home
this.$router.push('/home')
})
}
}
配置的 axios 与后端交互：
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'https://lianghj.top:8888/api/private/v1/'
Vue.prototype.$http = axios
返回列表
评论