element ui目录式笔记

挨打且不服66

已于 2022-08-14 12:57:12 修改

阅读量259

点赞数

分类专栏： java 文章标签： java vue.js

于 2022-08-12 13:29:57 首次发布

本文链接：https://blog.csdn.net/lf_78910jqk/article/details/126302143

版权

java 专栏收录该内容

128 篇文章 0 订阅

订阅专栏

资源

目录式笔记

p5-前端项目初始化步骤
p10

token

p11
写一个新模块需要的git操作

git status # 查看当前工作区是否干净
git checkout -b login # 创建新分支（同时切换到新分支），用于写登录，最后写完了合并到主分支就好
git branch # 查看所有分支

p12

main.js
router.js

p13

新建登录组件，通过路由组件，把登录组件渲染到了APP根组件中
路由的重定向——4’26

p18登录组件表单的数据绑定

<template>
    <el-form :model="loginForm" label-width="0px" class="login_form">
<!--                用户名-->
        <el-form-item v-model="loginForm.username">
            <el-input prefix-icon="el-icon-user" placeholder="请输入账号"></el-input>
        </el-form-item>
</template>

<script>
  export default {
    data(){
      return{
        //这是登录表单的数据绑定对象
        loginForm:{
          username:'',
          password:''
        }
      }
    }
  }
</script>

：model绑定属性——1‘00
v-model绑定属性里的具体属性

p19-登录表单的数据验证
:rules=“loginFormRules”
prop=“username”

：rules指定属性绑定，验证规则项
prop引用具体验证规则
trigger代表触发时机，trigger: ‘blur’ 代表文本框失去焦点的时候，触发这次验证

p20-表单的重置

<script>
    export default {
      data(){},
      methods:{
        //点击重置按钮，重置登录表单
        resetLoginForm(){
          console.log(this) //this就是全局组件，类似于java类里的
        }
      }

ref=“loginFormRef”

p21-登录组件登录前的预验证

p22-根据预验证是否通过，判断是否发起请求

api文档（接口文档）——1‘00
const result = this.$http.post(‘login’,this.loginForm);
await、async——5’20
a. 要把紧挨着await的方法修饰成一个异步的think方法
解构赋值——6.30
p23-登录组件配置弹窗提示
导入弹框组件，全局挂载——1‘40
p24-登录组件登录成功后的行为
将登录成功之后的token，保存到客户端的sessionStorage中
a. 项目中除了登录之外的其他API接口，必须在登录之后才能访问
b. token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
通过编程式导航跳转到后台主页，路由地址是/home
sessionStorage-会话存储机制
window.sessionStorage.setItem(“token”,res.data.token);
this.$router.push(“/home”); 登录成功后跳转路径

进度：p25