typescript: deserialize json to object
/*
* _oo0oo_
* o8888888o
* 88" . "88
* (| -_- |)
* 0\ = /0
* ___/`---'\___
* .' \\| |// '.
* / \\||| : |||// \
* / _||||| -:- |||||- \
* | | \\\ - /// | |
* | \_| ''\---/'' |_/ |
* \ .-\__ '-' ___/-. /
* ___'. .' /--.--\ `. .'___
* ."" '< `.___\_<|>_/___.' >' "".
* | | : `- \`.;`\ _ /`;.`/ - ` : | |
* \ \ `_. \_ __\ /__ _/ .-` / /
* =====`-.____`.___ \_____/___.-`___.-'=====
* `=---='
*
*
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*
* 佛祖保佑 永不宕机 永无BUG
*
* 佛曰:
* 写字楼里写字间，写字间里程序员；
* 程序人员写程序，又拿程序换酒钱。
* 酒醒只在网上坐，酒醉还来网下眠；
* 酒醉酒醒日复日，网上网下年复年。
* 但愿老死电脑间，不愿鞠躬老板前；
* 奔驰宝马贵者趣，公交自行程序员。
* 别人笑我忒疯癫，我笑自己命太贱；
* 不见满街漂亮妹，哪个归得程序员？
*
* @Author: geovindu
* @Date: 2024-08-22 20:33:20
* @LastEditors: geovindu
* @LastEditTime: 2024-08-22 21:36:52
* @FilePath: \vue\vuetest\interface\Iuserinfo.ts
* @Description: geovindu
* @lib,packpage:
*
* @IDE: vscode
* @js lib: node 20 vue.js 3.0
* @database: mysql 8.0 sql server 2019 postgreSQL 16
* Copyright (c) geovindu 2024 by geovindu@163.com, All Rights Reserved.
*/
export interface Iuserinfo
{
/**
* id
*/
id: number;
/**
* 用户名
*/
userName: string;
/**
* 真实姓名
*/
userReal: string;
/**
* 密码
*/
userPassword:string;
/**
* 是否可以用
*/
userIsOk:boolean;
/**
* 电子邮件
*/
userMail:string;
/**
* 手机号码
*/
userMobile:string;
/**
* 创建时间
*/
createdAt:Date;
/**
* 最后更新时间
*/
updatedAt:Date;
}
/*
*
* ┏┓ ┏┓+ +
* ┏┛┻━━━┛┻┓ + +
* ┃ ┃
* ┃ ━ ┃ ++ + + +
* ████━████ ┃+
* ┃ ┃ +
* ┃ ┻ ┃
* ┃ ┃ + +
* ┗━┓ ┏━┛
* ┃ ┃
* ┃ ┃ + + + +
* ┃ ┃
* ┃ ┃ + 神兽保佑
* ┃ ┃ 代码无bug
* ┃ ┃ +
* ┃ ┗━━━┓ + +
* ┃ ┣┓
* ┃ ┏┛
* ┗┓┓┏━┳┓┏┛ + + + +
* ┃┫┫ ┃┫┫
* ┗┻┛ ┗┻┛+ + + +
*
*
* @Author: geovindu
* @Date: 2024-08-22 21:20:11
* @LastEditors: geovindu
* @LastEditTime: 2024-08-22 21:27:36
* @FilePath: \vue\vuetest\src\model\userinfo.ts
* @Description: geovindu
* @lib,packpage:
*
* @IDE: vscode
* @js lib: node 20 vue.js 3.0
* @database: mysql 8.0 sql server 2019 postgreSQL 16
* Copyright (c) geovindu 2024 by geovindu@163.com, All Rights Reserved.
*/
/**
* 用户实体类
* geovindu
*/
class userinfo
{
/**
* id
*/
private id: number;
/**
* 用户名
*/
private userName: string;
/**
* 真实姓名
*/
private userReal: string;
/**
* 密码
*/
private userPassword:string;
/**
* 是否可以用
*/
private userIsOk:boolean;
/**
* 电子邮件
*/
private userMail:string;
/**
* 手机号码
*/
private userMobile:string;
/**
* 创建时间
*/
private createdAt:Date;
/**
* 最后更新时间
*/
private updatedAt:Date;
/**
*
* @param data
*/
constructor(data:any) {
this.id = data.id;
this.userName = data.userName;
this.userReal = data.userReal;
this.userPassword=data.userPassword;
this.userIsOk=data.userIsOk;
this.userMail=data.userMail;
this.userMobile=data.userMobile;
this.createdAt=data.createdAt;
this.updatedAt=data.updatedAt;
//this.updatedAt=new Date();
}
}
export default userinfo;
/*
* 佛曰:
* 写字楼里写字间，写字间里程序员；
* 程序人员写程序，又拿程序换酒钱。
* 酒醒只在网上坐，酒醉还来网下眠；
* 酒醉酒醒日复日，网上网下年复年。
* 但愿老死电脑间，不愿鞠躬老板前；
* 奔驰宝马贵者趣，公交自行程序员。
* 别人笑我忒疯癫，我笑自己命太贱；
* 不见满街漂亮妹，哪个归得程序员？
*
* @Author: geovindu
* @Date: 2024-08-22 21:18:16
* @LastEditors: geovindu
* @LastEditTime: 2024-08-22 21:21:54
* @FilePath: \vue\vuetest\src\model\userinfoJson.ts
* @Description: geovindu
* @lib,packpage:
*
* @IDE: vscode
* @js lib: node 20 vue.js 3.0
* @database: mysql 8.0 sql server 2019 postgreSQL 16
* Copyright (c) geovindu 2024 by geovindu@163.com, All Rights Reserved.
*/
class userinfoJson {
/**
* id
*/
private id: number;
/**
* 用户名
*/
private userName: string;
/**
* 真实姓名
*/
private userReal: string;
/**
* 密码
*/
private userPassword:string;
/**
* 是否可以用
*/
private userIsOk:boolean;
/**
* 电子邮件
*/
private userMail:string;
/**
* 手机号码
*/
private userMobile:string;
/**
* 创建时间
*/
private createdAt:Date;
/**
* 最后更新时间
*/
private updatedAt:Date;
//2 種方法
/**
*
*/
static fromJSON(data: any): userinfoJson {
const user =new userinfoJson();
user.id = data.id;
user.userName = data.userName;
user.userReal = data.userReal;
user.userPassword=data.userPassword;
user.userIsOk=data.userIsOk;
user.userMail=data.userMail;
user.userMobile=data.userMobile;
user.createdAt=data.createdAt;
user.updatedAt=data.updatedAt;
return user;
}
}
export default userinfoJson;
调用：
/**
*
* Author: geovindu
* Date: 2024-08-21 20:22:04
* LastEditors: geovindu
* LastEditTime: 2024-08-21 20:46:20
* FilePath: \vue\vuetest\src\components\Login.vue
* Description: geovindu
*
* IDE: vscode
* js lib: node 20 vue.js 3.0
* database: mysql 8.0 sql server 2019 portgreSQL 16
* Copyright (c) geovindu 2024 by geovindu@163.com, All Rights Reserved.
*/
<template>
<ElForm class="login-form" ref="loginRef" :model="loginParam" :rules="loginRules">
<h1 class="login-title">登录</h1>
<ElFormItem prop="username">
<ElInput placeholder="请输入账号" :prefix-icon="User" v-model="loginParam.username" size="large"></ElInput>
</ElFormItem>
<ElFormItem prop="password">
<ElInput placeholder="请输入密码" show-password :prefix-icon="Lock" v-model="loginParam.password" size="large"></ElInput>
</ElFormItem>
<ElFormItem>
<ElButton type="primary" class="login-btn" size="large" @click="login">登录</ElButton>
</ElFormItem>
</ElForm>
</template>
<script lang="ts" setup>
import { defineComponent, ref } from 'vue';
import axios from "axios";
import { useRouter, useRoute } from 'vue-router'
// import json from "typedjson";
//import {jsonObject, jsonMember, TypedJSON} from 'typedjson';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import { User ,Lock} from '@element-plus/icons-vue';
import Crypoto from "../common/Cryptographer";
//import DuCrypoto from "../common/ducry";
import {type Iuserinfo } from "../interface/Iuserinfo";
import userInfo from '../model/userinfo';
import userinfoJson from "../model/userinfoJson";
//import { routes } from 'vue-router/auto-routes';
const loginParam=ref({
username:"",
password:""
})
const loginRules = ref({
username: [
{ required: true, message: 'Please enter your username', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please enter your password', trigger: 'blur' }
]
});
//登录验证
const login = () => {
const form = loginParam.value;
const cry = new Crypoto();
console.log(form.username+","+cry.encrypt(form.password));
//http://localhost:8081/api/userlogin?userName=geovindu&userPassword=bb80af81b49aee29c43f4dd617203363
axios.get("/api/userlogin?userName="+form.username+"&userPassword="+cry.encrypt(form.password))
.then(function (response) {
// 处理成功情况
console.log("查找登录处理成功情况");
console.log(response.data); //object length
if(response.data.length===0) //response.data[0]
{
console.log("未成功");
}
else
{
//
//const strf={id: 1,updatedAt: "2025-09-01T00:00:00.000Z", userIsOk: true ,userMail: "geovindu@163.com", userMobile: "13824350518",userName: "geovindu",userPassword: "oAKz0OCbwHidXcrp4rKfhw==",userReal: "涂聚文",createdAt: "2025-07-09T00:00:00.000Z"};
//ok [0]
let userinfos:Iuserinfo=response.data[0] as Iuserinfo;
console.log("1.interface成功"+userinfos.userName);
//const userObj = TypedJSON.parse(response.data,userInfo);
const userObj =new userInfo(response.data[0]);
console.log("2.new:"+userObj.userName); //手動寫
const dd=userinfoJson.fromJSON(response.data[0]);
console.log("3.from:"+dd.userName);//手動寫
//ok
const user = Object.assign(userInfo, response.data[0]);
console.log("4.Object,username:"+user.userName);
//routes.push({ path: '/about', query: { username: user.userName }});
}
})
.catch(function (error) {
// 处理错误情况
console.log(error)
})
//const router = useRouter();
//const route = useRoute()
//router.push({path: '/about'}); // 路由跳转不了,query: {username: user.userName }
//const ducry=new DuCrypoto();
//console.log("password:"+ducry.encrypt(form.password));
//console.log(form.username+","+form.password);
console.log("click");
};
/*
export default defineComponent({
name: 'login', //路由名
components: { ElForm, ElFormItem, ElInput, ElButton },
setup() {
const loginForm = ref({
username: '',
password: ''
});
const loginRules = ref({
username: [
{ required: true, message: 'Please enter your username', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please enter your password', trigger: 'blur' }
]
});
const login = () => {
//const form = ref.value;
// Add your login logic here
// Redirect to another page after successful login
};
return {
loginForm,
loginRules,
login
};
}
});*/
</script>
输出：
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
