技术栈： Nuxt3、Naive UI

1.先写个输入框

<n-input-group>
    <n-input v-model:value="str" :autofocus="!isMobile()" clearable></n-input>
    <n-button type="primary" @click="deJiami(str)">加密</n-button>
</n-input-group>

判断不是手机端的时候自动获取焦点，方便输入。(因为我发现在手机端，自动获取焦点，会自动调起输入法，挡住几乎一半页面)

2.核心代码

import md5 from 'md5';
const str = ref('');
const out32Lower = ref('');
const out32Upper = ref('');
const out16Lower = ref('');
const out16Upper = ref('');

function jiami(str: string) {
    if (str) {
        out32Lower.value = md5(str);
        out32Upper.value = out32Lower.value.toUpperCase();
        out16Lower.value = out32Lower.value.substring(8, 24);
        out16Upper.value = out16Lower.value.toUpperCase();
    } else {
        out32Lower.value = '';
        out32Upper.value = '';
        out16Lower.value = '';
        out16Upper.value = '';
    }
}

const deJiami = useDebounce(jiami, 200); // 防抖

watch(str, (value) => {
    deJiami(value);
})

引入md5；监听输入框str变化，执行加密。

3.展示加密后的数据

简单写几行代码，用来展示数据。

4.成果展示

5.部署到阿里云

使用pm2部署后，就可以访问了： MD5在线加密