4登录退出页面下

实现表单的数据绑定

查看element-ui ，form表单对象就是
添加 :model填写数据对象
每个数据表单通过v-model绑定上所需要的数据属性

1、定义数据对象loginForm,添加具体属性username，password

export default {
    data(){
         return{
        // 这是登录表单的数据绑定内容
        loginForm:{
            username:'zs',
            password:'123'
        }
    };
}
    }

2、在html里进行v-model 双向绑定

 <!-- 登录表单区域 -->
            <el-form class="login_form" :model="loginForm" >
                <!-- 用户名 -->
                <el-form-item >
                    <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"  ></el-input>
                </el-form-item>

实现数据表单认证

·p18 查看用户是否规范的输入内容
·查看element-ui（form 表单验证中） :model
·添加 rules 验证规则对象、（这些都在element ui 网页中看见）
required:true //代表必填项
message:”错误提示消息”
trigger:’blur’ //代表鼠标失去焦点时触发这个行为
min:最小长度
1、为 el-form 绑定规则对象 :rules:”rules”
2、在data（）区域添加规则对象 ，对象属性通常为数组如：username
3、在el-form-item中v-model绑定规则
·用户名username 规则
4、为每个表单添加对应规则 prop=“username”

<!-- 登录表单区域 -->
            <el-form class="login_form" :model="loginForm" :rules="rules">
                <!-- 用户名 -->
                <el-form-item prop="rules.username">
                    <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"  ></el-input>
                </el-form-item>

实现表单的重置功能

element ui中提供了 resetFieds 实现表单重置的方法
·拿到表单（el-form）实例对象(有username、password这些)、
使用ref ：loginFormRef(引用对象–就是组件的实例)
·为重置按钮绑定单击事件resetLoginform（）{}
·

实现登录前表单数据的预验证

·使用Form Methods 里的 validate方法
·对登录按钮绑定点击事件

<!-- 按钮区域 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>

methods:{
 // 表单预验证
        login(){
            this.$refs.loginFormRef.validate(vaild =>{
                console.log(vaild);
            });
        }
}

效果：输入不符合规格会报错

配置axios发起登录请求

·在入口文件main.js导入axios
impor axios from ‘axios’
·配置请求根路径
axios.defaults.baseURL=‘http://127.0.0.1:8888/api/private/v1/’

挂载原型
Vue.prototype.$http=axios\cdot 请求服务器前开启mysql\cdot 启动node里面的app.js\cdot 在login组件中发起登录请求//post(地址,参数：登录表单的数据)请求方式和参数看接口md文档constresult=this.$http.post(“login”,this.loginForm);
console.log(result);
返回结果如下，并不是我们想要的数据，数据还存储在data中

我们把data重命名为res ，并且只输出res就行

知识点：
p21 async await 异步请求

配置Message全局弹框组件

p22 登录成功或失败、弹框提示用户
·使用element ui 里面的 message消息提示组件
·把message组件挂载到 vue原型 （element ui）

·在组件中直接使用（使用 $message ）

完善登录之后的操作

p23
·1．将登录成功之后的token，保存到客户端的sessionStorage中 window那条代码
(通过 console.log(res) 查看到返回的token)
window.sessionStorage.setItem(“token”, res.data.token)
1.1项目中出了登录之外的其他API接口，必须在登里之后才能访问
1.2 token只应在当前网站打开期间生效，所以将 token保存在sessionStorage中
2．通过编程式导航跳转到后台主页，路由地址是/home
this.$router.push("/home");
查看token

·创建home组件
·把home组件添加到路由中
登录之后就可以调到home页面

路由导航守卫控制页面访问权限

p24
·在router.js 中把路由守卫挂载到

语法解释

在router/index.js 修改的代码

退出功能实现

p25
·退出功能实现原理
基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带
token，必须重新登录生成一个新的token之后才可以访问页面。
·清空token
window.sessionStorage.clear()
·跳转到登录页面
this.$router.push(‘/login’)
1、在Home.vue里添加退出按钮
2、按钮点击触发logout事件、

#处理项目中的ESLint语法报错问题
p26
#修改element-ui组件的按需导入形式
p27 只是修改了一下代码

将本地代码提交到码云

p28
·查看状态 git status

·提交到缓存区 git add .
·再看看状态 如果都是绿色就代表都在缓存区
·提交到本地仓库 git commit -m “完成了登录”
·查看分支 git branch、看见当前处于 login分支

·login合并到master
1、切换到master 命令：git checkout master 、
2、合并命令： git merge login

·远程推送 git push

git config --global user.name “LJNWalay”

git config --global user.email “7924680+ljnwalay@user.noreply.gitee.com ”
· 还有推送到login分支上
1、切换到login 分支 git checkout login
git branch 查看分支
2、git push -u origin 推送到分支上