vue博客项目

1.给表单绑定数据

<el-form :model="form"">
 <el-form-item >
    <el-input  v-model="form.name"></el-input>
  </el-form-item >
  </el-form >

export default {
data() {
return {
form：{
name：‘ ’
}
}
}

2.给表单加验证规则

  <el-form :rules="rules">
   <el-form-item  prop="name">
    <el-input ></el-input>
  </el-form-item>
    </el-form >

export default {
data() {
return {
form：{
name：‘ ’
}，
rules: {
name: [
{ required: true, message: ‘请输入活动名称’, trigger: ‘blur’ },
{ min: 3, max: 5, message: ‘长度在 3 到 5 个字符’, trigger: ‘blur’ }
],
}
}

3.重置方法

Form Methods里有resetFields–对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
login是form表单的实例对象

<el-form ref=“login”>
 <el-form-item >
  <el-button  @click="login">重置</el-button>
  </el-form-item >
  </el-form >

export default {
data() {
return {
form：{
name：‘ ’
}，
rules: {
name: [
{ required: true, message: ‘请输入活动名称’, trigger: ‘blur’ },
{ min: 3, max: 5, message: ‘长度在 3 到 5 个字符’, trigger: ‘blur’ }
],
}，
methods：{
reset（）{
this.$ref.login.resetFields();
}
}
}

4.点击登录按钮获取返回值

<el-form ref=“login”>
 <el-form-item >
  <el-button  @click="login">重置</el-button>
  </el-form-item >
  </el-form >

methods：{
    login（）{
    
    validate（valid）方法----对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
    async：await只能用在被async修饰的方法中 。把紧挨着await的方法修饰成一个异步的async方法，解决await的阻塞问题
this.$ref.login.validate( async valid=>{
if( !valid){
return;
}
axios获取表单数据
await：简化promise操作
{data：res}：在axios返回的数据中，只有data才是服务器返回的真实数据，所以在原先的result上解构赋值出一个data属性，然后重命名为res对象，{data：res}，那么res就是真实数据了
const { data:res}=await this.$http.post('login',this.loginForm);
console.log(res);

判断res.meta.status是否为200

if(res.meta.status!==200){
return console log('登录失败')
}
console log('登录成功')
 );
}
    }

5.路由导航守卫用法

如果用户没有登录，但是通过url访问特定页面。需要重新导航到登录页面

// 为路由对象，添加 beforeEach 导航守卫
router.beforeEach((to, from, next) => {
// 如果用户访问的登录页，直接放行
if (to.path === ‘/login’) return next()
// 从 sessionStorage 中获取到 保存的 token 值
const tokenStr = window.sessionStorage.getItem(‘token’)
// 没有token，强制跳转到登录页
if (!tokenStr) return next(’/login’)
next()
})

6.退出

基于 token 的方式实现退出比较简单，只需要销毁本地的 token 即可。这样，后续的请求就不会携带 token ，
必须重新登录生成一个新的 token 之后才可以访问页面。
// 清空token
window.sessionStorage.clear()
// 跳转到登录页
this.$router.push(’/login’)