记录小工具：密码生成器的开发

头像
慕非钦°
     广东
    阅读 12 分钟
    头图

    介绍

    体验密码生成器

    前往体验

    什么是密码？

    密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。当然，对一小部分人来说，这种无法识别的信息是可以再加工并恢复的。密码在中文里是“口令”（password）的通称。登录网站、电子邮箱和银行取款时输入的“密码”其实严格来讲应该仅被称作“口令”，因为它不是本来意义上的“加密代码”，但是也可以称为秘密的号码。

    什么是强密码？

    • 独特的： 您应该为每个帐户设置单独的密码。
    • 长的： 它的长度至少为 12 个字符。
    • 复杂的： 它包括大写和小写字母、数字和符号。

    什么是随机密码生成器？

    密码随机生成器是一种软件或程序，可为您的各种软件和网站的帐户随机生成密码。使用此工具，您不必时常手动更改密码，并且可以获得由各种字母、数字和符号组成的字符串组成的强密码。

    您可能想知道：我可以自己创建组合随机字符的密码，那为什么还要麻烦呢？因为人们不擅长随机选择密码，而倾向于使用常见的数字、字符和名称。无论你认为自己有多聪明，计算机都很容易破解人类生成的密码。这就是为什么您应该使用我们的密码生成器。

    随机密码生成器安全吗？

    在选择随机密码生成器时，人们最关心的是安全性。不确定密码生成器的公司是否会知道您的新密码。这些公司与许多安全站点一样使用 HTTPS 通信协议，但它可能不如银行系统安全。

    因此，在选择密码管理器或密码生成器时，最好选择信誉良好且安全级别高的。

    我们的密码生成器具有安全的本地加密，使黑客无法访问创建的密码。我们不会在线存储您的详细信息。

    为什么我的密码应该是唯一的？

    绝对有必要为您的每个在线帐户设置一个唯一的密码。

    跨帐户重复使用密码会带来重大风险。一旦黑客窃取了您的一个帐户的密码，他们就会获得对所有其他帐户的访问权限。

    通过简单地向现有密码添加额外的字符、符号或数字来创建新密码并不是一个好主意。建议您使用我们的强密码生成器，这将为您提供额外的保护。

    为什么我的密码应该是随机的？

    强密码由大小写字母、数字和特殊字符组成，即使是最熟练的黑客也无法破解。它也应该与您的个人信息无关。如果您在密码中使用电话号码、社会安全号码、邮政编码、身份证号码、门牌号码和生日，则攻击者很容易危及您的帐户。

    代码

    效果图

    Html结构

    <div class="password w theme-bg-color">
    <div class="content">
      <div class="tool-title">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-mima1"></use>
        </svg>
        <h1>密码生成器</h1>
      </div>
      <div class="tool-main">
        <el-input class="password-input" size="large" v-model="passwordVal">
          <template #suffix>
            <div class="input-icon-box">
              <svg
                class="icon refresh-icon"
                aria-hidden="true"
                @click="handleRefreshClick"
              >
                <use xlink:href="#icon-shuaxin"></use>
              </svg>
            </div>
            <div
              class="input-icon-box copy-icon-box"
              @click="copyText(passwordVal)"
            >
              复制
            </div>
          </template>
        </el-input>
        <div class="input-icon-box m-copy-icon-box" @click="copyText(passwordVal)">
          复制
        </div>
        <div class="config-item-box">
          <span
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-peizhi"></use></svg
            ><span>配置项</span></span
          >
          <div>
            <el-checkbox
              @change="updatePassword"
              size="large"
              label="数字（0-9）"
              v-model="numbers"
            />
            <el-checkbox
              @change="updatePassword"
              size="large"
              label="小写字母（a-z）"
              v-model="lowercase"
            />
            <el-checkbox
              @change="updatePassword"
              size="large"
              label="大写字母（A-Z）"
              v-model="uppercase"
            />
            <el-checkbox
              @change="updatePassword"
              size="large"
              label="特殊字符（!@#$%^&*）"
              v-model="symbols"
            />
          </div>
          <div>
            <el-checkbox
              @change="updatePassword"
              label="排除混淆字符（1lI、0oO）"
              v-model="exclude"
            />
          </div>
        </div>
        <div class="password-length-box">
          <span
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-changdu"></use></svg
            ><span>密码长度</span></span
          >
          <el-slider
            @change="updatePassword"
            v-model="passLength"
            show-input
            class="slider"
            :min="1"
            :max="50"
          />
        </div>
        <div class="history-box">
          <div class="record-box">
            <el-checkbox label="记录历史密码" v-model="isHistory" />
            <span
              >---该功能将记录您最近生成的100个密码。并且历史记录不是存储在我们云端服务器上，而是存储在您的浏览器本地存储中。</span
            >
          </div>
          <div class="look-history-box">
            <span @click="historyPassword"
              >{{ isMore ? "隐藏历史记录" : "查看历史记录" }}
              <i class="bi bi-chevron-down"></i
            ></span>
          </div>
          <div class="remove-btn" v-if="isMore" @click="removeHistory">清除历史记录</div>
          <div class="history-content" v-if="isMore">
            <div
              class="history-pw-item"
              v-for="(item, idx) in dataMap.passList"
              :key="idx"
            >
              <span @click="copyText(item)">{{ item }}</span>
            </div>
          </div>
        </div>
        <div class="about-password-box">
          <span
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-guanyu-"></use></svg
            ><span>关于密码生成器</span></span
          >
          <p>
            密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。当然，对一小部分人来说，这种无法识别的信息是可以再加工并恢复的。密码在中文里是“口令”（password）的通称。登录网站、电子邮箱和银行取款时输入的“密码”其实严格来讲应该仅被称作“口令”，因为它不是本来意义上的“加密代码”，但是也可以称为秘密的号码。
          </p>
        </div>
      </div>
    </div>
  </div>

    css样式

    <style lang="scss" scoped>
.password .content {
  padding: 50px 100px;
}

.tool-main {
  padding-top: 20px;
}

.tool-title {
  display: flex;
  align-items: center;
}

.tool-title h1 {
  font-size: 24px;
}

.tool-title .icon {
  width: 2.2em;
  height: 2.2em;
  margin-right: 5px;
}

.input-icon-box {
  display: flex;
  align-items: center;
  padding: 10px 5px;
}

.copy-icon-box,
.m-copy-icon-box {
  cursor: pointer;
  background-color: var(--themeTextColor);
  margin: 5px 0;
  padding: 5px 25px;
  border-radius: 2px;
  color: #fff;
  line-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;

  &:hover {
    opacity: 0.8;
  }
}

.m-copy-icon-box {
  margin-top: 10px;
  display: none;
}

.icon {
  width: 2em;
  height: 2em;
  cursor: pointer;
  margin-right: 10px;
}

.config-item-box,
.password-length-box,
.about-password-box {
  margin: 20px 0;

  span {
    font-weight: 500;
    display: flex;
    align-items: center;

    .icon {
      width: 1.2em;
      height: 1.2em;
    }
  }
}

.config-item-box {
  margin-top: 20px;
}

.password-length-box span {
  margin-right: 20px;
}

.password-length-box .slider {
  width: 400px;
}

.history-box p {
  font-size: 14px;
}

.record-box {
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  span {
    margin-left: 20px;
  }
}

.look-history-box {
  display: flex;
  align-items: center;

  span {
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;

    .bi {
      margin-left: 3px;
    }
  }
}

.bi-chevron-down::before {
  transform: rotate(0deg);
  transition: all 0.3s;
  vertical-align: middle;
}

.bi-chevron-down.open-more::before {
  transform: rotate(180deg);
  transition: all 0.3s;
}

.remove-btn {
  margin-top: 10px;
  background-color: red;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  padding: 8px 0;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background-color: rgb(229, 41, 41);
    transition: all 0.2s;
  }
}

.history-content {
  padding: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 5px;
  margin-top: 10px;

  .history-pw-item {
    padding: 8px 0;
    width: 50%;
    overflow-wrap: break-word;

    span {
      color: rgb(12, 6, 1);
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        color: var(--linkTextColor);
        transition: all 0.2s;
      }
    }
  }

  p {
    font-size: 14px;
  }
}

.about-password-box {
  margin-top: 30px;

  p {
    font-size: 14px;
    margin: 10px 0;
  }
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: none;
}

:deep(.el-slider__runway) {
  background-color: #666;
}

:deep(.el-slider__bar) {
  background-color: var(--themeTextColor);
}

:deep(.el-slider__button) {
  border-color: var(--themeTextColor);
}

:deep(.el-checkbox__label) {
  color: var(--balckTextColor) !important;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: var(--themeTextColor);
  border-color: var(--themeTextColor);
}

:deep(.password-input .el-input__inner) {
  font-size: 20px;
  font-weight: 600;
  color: var(--balckTextColor);
}

.rotate-animation {
  animation: rotate 0.3s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 860px) {
  .password .content {
    padding: 10px;
  }

  .tool-main {
    padding: 0;
  }

  .password-input .icon {
    margin-right: 0;
  }

  .copy-icon-box {
    display: none;
  }

  .m-copy-icon-box {
    display: block;
  }

  .password-length-box .slider {
    width: 100%;
  }

  .look-history-box {
    margin-top: 10px;
  }

  .history-pw-item {
    width: 100% !important;
  }
}
</style>

    定义变量

    const dataMap = reactive({
  passList: [],
});

let passwordVal = ref("");
let passLength = ref(12);
let numbers = ref(true);
let lowercase = ref(true);
let uppercase = ref(true);
let symbols = ref(true);
let exclude = ref(true);
let isHistory = ref(true);
let isMore = ref(false);
let maxPw = ref(100);

    定义刷新密码的方法

    const updatePassword = () => {
  const charSets = {
    uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    lowercase: "abcdefghijklmnopqrstuvwxyz",
    numbers: "0123456789",
    symbols: "!@#$%^&*()_+-=[]{}|;:,.<>?",
  };

  let allChars = "";

  for (const [key, value] of Object.entries(charSets)) {
    if (key === "exclude" && exclude.value) {
      allChars = allChars.replace(/[1lI0oO]/g, "");
    } else if (key === "symbols" && symbols.value) {
      allChars += value;
    } else if (key !== "exclude" && key !== "symbols" && eval(`${key}.value`)) {
      allChars += value;
    } else {
      allChars = allChars.replace(new RegExp("[" + value + "]", "g"), "");
    }
  }

  passwordVal.value = "";

  for (let i = 0; i < passLength.value; i++) {
    const randomIndex = Math.floor(Math.random() * allChars.length);
    passwordVal.value += allChars[randomIndex];
  }

  if (isHistory.value) {
    dataMap.passList = getStore("PASS_WORD_LIST")?.length
      ? getStore("PASS_WORD_LIST")
      : [];
    if (dataMap.passList.length < maxPw.value) {
      dataMap.passList.push(passwordVal.value);
      setStore("PASS_WORD_LIST", dataMap.passList);
    }
  }
};

    页面加载或刷新时

    在onMounted钩子中调用updatePassword函数，并在setup中判断浏览器是否保存了历史密码记录

    onMounted(() => {
  updatePassword();
});

if (getStore("PASS_WORD_LIST")?.length) {
  dataMap.passList = getStore("PASS_WORD_LIST");
}

    点击刷新按钮时给按钮添加动画

    const handleRefreshClick = () => {
  const iconBox = document.querySelector(".refresh-icon");
  iconBox.classList.add("rotate-animation");

  setTimeout(() => {
    iconBox.classList.remove("rotate-animation");
  }, 500);

  updatePassword();
};

    点击显示/隐藏历史记录按钮方法

    const historyPassword = () => {
  isMore.value = !isMore.value;
  const moreIcon = document.querySelector(".bi-chevron-down");
  moreIcon.classList.toggle("open-more");
};

    点击清楚历史记录的方法

    const removeHistory = () => {
  clearStore("PASS_WORD_LIST");
  dataMap.passList = getStore("PASS_WORD_LIST");
  isMore.value = false;
};

    点击赋值按钮的方法

    const copyText = (val) => {
  navigator.clipboard
    .writeText(val)
    .then(() => {
      ElNotification({
        title: "成功",
        message: "您生成的密码已经复制成功！",
        type: "success",
        zIndex: 99999,
      });
    })
    .catch(() => {
      ElNotification({
        title: "失败",
        message: "复制密码时出错，请重试",
        type: "warning",
        zIndex: 99999,
      });
    });
};

    原文链接

    记录小工具：密码生成器的开发

    前端javascriptvue.jscsssass
    慕非钦°
    4 声望0 粉丝
    « 上一篇
    Vue3 Hook详解：提升组件逻辑复用和可维护性的利器
    下一篇 »
    深入了解 CSS 逻辑选择器：is、where、not、has

    引用和评论

    推荐阅读
    头像
    如何将内容插入到输入框光标所在位置

    慕非钦°赞 1阅读 288

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.9k评论 7

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    0 条评论
    得票最新