前端学习——后台管理系统_前端后台管理系统

1 git 相关命令

1. git status：查看当前工作区是否干净；开始开发前先检查一下；
2. git checkout 分支名：切换到某个分支
3. git checkout -b 分支名：创建一个新的分支；每个新的功能都应该创建一个新的分支；
4. git branch：查看当前项目的所有分支；*代表当前正处于的分支；
5. git add . :将修改后的文件添加到缓存区
6. git commit -m "提交文本信息"：将缓存区的文件提交到本地仓库
7. git merge 分支名：将某分支合并到总分支
   1. 将分支合并到master时，要先切换到master分支中
8. git push：切换到想推送的分支，运行命令，将本分支最新的的代码推送到云端仓库
9. git push  -u origin 远程分支名称：首次将本地的分支中的代码推送到云端，首先得切换到要推送的分支，然后输入命令

2 实操经验

1. 给表单绑定校验规则
   1. 给表单el-form绑定校验规则:rules="loginFormRules"
   2. 在data中配置校验规则为一个对象loginFormRules:{username:[],password:[]}
   3. 给每个el-form-item配置prop属性，绑定校验规则prop="username"
2. 拿到服务器返回的数据
   1. 使用post方法得到返回数据为promise时，可以用await进行修饰，即：await this.$http.post("请求路径", 请求参数)
   2. 使用await进行修饰时，需将该函数设置为异步函数，在函数开头加async

   3. this.$refs.loginFormRef.validate(async (valid) => {
              // 预校验失败，则返回
              if (!valid) return;
              // 预校验成功，发送post请求
              const { data: res } = await this.$http.post("login", this.loginForm);
              if (res.meta.status !== 200) {
                console.log("登录失败");
              } else {
                console.log("登录成功");
              }
      });
      

3. 表格索引列
   1. 给表格加type属性，将type设置为index即可
   2. <el-table-column type="index" label="#"></el-table-column>
4. 表格展开列
   1. 给表格加type属性，将type设置为expand即可
   2. <el-table-column type="expand"></el-table-column>
5. 自定义校验规则
   1. 现在data(){ var 自定义校验规则; return{}}的return前用var自定义校验规则

   2.     // 自定义邮箱校验规则
          var 自定义校验规则名 = (rule, value, callback) => {
            // 通过正则进行校验
            const reg值名称 = 验证该值的正则表达式;
       
            if (reg值名称.test(value)) {
              // 合法的邮箱
              return callback();
            }
       
            callback(new Error("请输入合法的xx值"));
          };
      

      自定义校验规则

   3. 在验证规则对象中，找到要添加规则的对象，用validator指定验证规则名。例如：

      1. { validator: checkEmail, trigger: "blur" }

3 CSS新学样式

1. justify-content:flex-start|flex-end|center|space-between|space-around|initial|inherit主轴对齐
2. align-items:flex-start|flex-end|center|space-between|space-around多行侧轴对齐
3. display:flex. 弹性盒模型
4. letter-spacing：字间距
5. min-width：最小宽度