EasyPan项目

Time: 2024-12-22 Sunday 02:08:02
Author: Jackasher

EasyPan项目-font

图片验证码什么时候发送请求

可以采用img的src标签来获取验证码

代理设置

server: {
  port: 1024,
  hmr: true,
  proxy: {
    '/api': {
      target: 'http://localhost:7090',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '/api')
    }
  }
}

前端邮箱校验

vue似乎封装了校验邮箱的方法，是element plus封装的，在form加入字段rule，在表单项加入prop属性来进行

//获取邮箱验证码
const getEmailCode = () => {
  formDataRef.value.validateField("email", (valid) => {
    if (!valid) {
      return;
    }
    dialogConfig4SendMailCode.show = true;

    nextTick(() => {
      changeCheckCode(1);
      formData4SendMailCodeRef.value.resetFields();
      formData4SendMailCode.value = {
        email: formData.value.email,
      };
    });
  });
};

我们具体分析一下这个，formDataRef是el组件的实例，实例上属性rules会进行验证

循环便利菜单栏

<div class="body">
    <div class="left-sider">
      <div class="menu-list">
        <div class="menu-item" v-for="item in menus">
          <div :class="['iconfont','icon-' + item.icon]"></div>

        </div>
      </div>
      <div class="menu-sub-list">4</div>
    </div>
    <div class="body-content">5</div>
  </div>
</div>

最终会生成类似于这个的html

<div class="menu-item">
  <div class="iconfont icon-home"></div>
</div>
<div class="menu-item">
  <div class="iconfont icon-user"></div>
</div>
<div class="menu-item">
  <div class="iconfont icon-settings"></div>
</div>

二级菜单的显示

我们在一级菜单循环了menu，现在我们要展示二级菜单，我自己的想法是，直接循环menu的children呀，不行的，因为这里不是一下全部展示完成，而是选择性，根据路由的不同来展示，但是这里，他重新定义了一个currentmenu，然后在二级菜单展示currentmenu，在路由变化时，为currentmenu赋值

const setMenu = (menuCode, path) => {
  const menu = menus.find((item) => {
    return item.menuCode === menuCode;
  });
  currentMenu.value = menu;
  currentPath.value = path;
};

watch(
  () => route,
  (newVal, oldVal) => {
    if (newVal.meta.menuCode) {
      setMenu(newVal.meta.menuCode, newVal.path);
    }
  },
  { immediate: true, deep: true }
);