之前一直在VUE3的框架中使用VUE3。
但是我们在做一个小页面的时候，没有必要独立创建一个VUE项目的时候，我们该如何使用VUE3呢？
下边我这边直接放出一个示例，复制粘贴就能用
这里我使用了VUE3+element-plus
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moolsnet第三方对接数据加密示例</title>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.full.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/qs/6.9.6/qs.min.js"
type="application/javascript"></script>
<!-- 引入加密文件（这个必须引入） -->
<script src="https://www.mools.net/lims/web/common/js/crypto-js.js"></script>
</head>
<style>
span{
display: inline-block;
}
div {
height: 30px;
line-height: 30px;
}
.left{
float: left;
}
.input-el{
height: 50px;
line-height: 50px;
}
</style>
<body>
<div style="width:100%;" id="app">
<div style="width:80%;margin:0 auto;height:200px">
<div>
<h1>加密参数</h1>
</div>
<br>
<div>
<span>key(16位)：</span><span><el-input v-model="key" placeholder="请输入加密key" style="width:1000px;"></el-input></span>
</div>
<div>
<span>i v(16位)：</span><span><el-input v-model="iv" placeholder="请输入加密iv" style="width:1000px;"></el-input></span>
</div>
</div>
<div style="width:80%;margin:0 auto;">
<!-- 前端加密 -->
<div>
<div>
<h1>前端加密,加密值必须是json</h1>
</div>
<br>
<!-- textarea -->
<div>
<el-input type="textarea" rows="10" placeholder="请输入要加密的json" size="medium" v-model="jia_json" maxlength="100000" style="width:500px;" >
</el-input>
</div>
<!-- 按钮 -->
<div style="margin-left:15px;margin-right:15px;">
<el-button type="primary" @click="enCode">前端加密</el-button>
</div>
<!-- textarea -->
<div>
<el-input type="textarea" rows="10" placeholder="请输入内容" size="medium" v-model="jia_value" maxlength="500000" style="width:500px;" >
</el-input>
</div>
</div>
<br><br><br>
<br><br><br><br><br><br>
<!-- 后端 解密 -->
<div>
<div>
<h1>后端解密</h1>
</div>
<br>
<!-- textarea -->
<div>
<el-input type="textarea" rows="10" placeholder="请输入要解密的字符串" size="medium" v-model="jie_str" style="width:500px;" maxlength="500000" >
</el-input>
</div>
<!-- 按钮 -->
<div style="margin-left:15px;margin-right:15px;">
<el-button type="primary" @click="deCode()">后端解密</el-button>
</div>
<!-- textarea -->
<div>
<el-input type="textarea" rows="10" placeholder="请输入内容" size="medium" v-model="jie_value" style="width:500px;" maxlength="100000" >
</el-input>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
Object.assign(window, Vue);
const vue3Composition = {
setup() {
const data = reactive({
// 加密的json
jia_json:"{'name':1,'class_id':2}",
// 加密得到的字符串
jia_value:'',
// 解密字符串
jie_str:'',
// 解密得到的值
jie_value: '',
// 加密key
key:'',
// 加密iv
iv:'',
});
/**
* @name: 加密
* @author: camellia
* @email: [email protected]
* @date: 2021-08-19
*/
const enCode = () => {
// 加密所需的秘钥以及偏移字符串，后期我们会为您提供，以下两个字符串仅供测试使用，不可用于正式环境
// const key = '1234567887654321';
// const iv = '1234567887654321';
if(data.key == '' || data.iv == '')
{
ElementPlus.ElMessage({
showClose: true,
message: '请填写加密参数',
type: 'warning'
}); return;
}
// 调用加密方法
data.jia_value = encryptCode(data.jia_json, data.key, data.iv);
}
/**
* @name:crypto-js 加密
* @author: camellia
* @email: [email protected]
* @date: 2021-08-19
* @param: param json 要加密的值（必须是json）
* @param: key string 加密秘钥 16位字符串
* @param: iv string 加密偏移量 16位字符串
*/
const encryptCode = (param,key,iv) => {
// json转json字符串
var text = JSON.stringify(param);
// 加载秘钥
var key = CryptoJS.enc.Latin1.parse(key);
// 加载偏移量
var iv = CryptoJS.enc.Latin1.parse(iv);
// 加密
var encrypted = CryptoJS.AES.encrypt(text, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.ZeroPadding
}).toString();
return encrypted;
};
/**
* @name: 后端解密
* @author: camellia
* @email: [email protected]
* @date: 2021-08-19
* @param: data type description
* @return: data type description
*/
const deCode = () => {
if(data.key == '' || data.iv == '')
{
ElementPlus.ElMessage({
showClose: true,
message: '请填写加密参数',
type: 'warning'
}); return;
}
var param = data.jie_str;
var postData = Qs.stringify({
params: param,
key: data.key,
iv: data.iv
});
axios.post("https://dlut.mools.net/jiemi.php", postData )
.then(response => {
data.jie_value = response.data;
})
.catch(error => {
// console.log(error);
});
}
/**
* @name: 将data绑定值dataRef
* @author: camellia
* @email: [email protected]
* @date: 2021-08-19
*/
const dataRef = toRefs(data);
return {
deCode,
enCode,
...dataRef
}
},
}
// ElementPlus.locale(ElementPlus.lang.zhCn);
const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
</script>
再赘述一次，上边的代码复制粘贴即可使用
有好的建议，请在下方输入你的评论。