typescript: deserialize json to object
typescript: deserialize json to object
geovindu
发布于 2026-06-18 20:32:22
发布于 2026-06-18 20:32:22
/*
* _oo0oo_
* o8888888o
* 88" . "88
* (| -_- |)
* 0\ = /0
* ___/`---'\___
* .' \\| |// '.
* / \\||| : |||// \
* / _||||| -:- |||||- \
* | | \\\ - /// | |
* | \_| ''\---/'' |_/ |
* \ .-\__ '-' ___/-. /
* ___'. .' /--.--\ `. .'___
* ."" '< `.___\_<|>_/___.' >' "".
* | | : `- \`.;`\ _ /`;.`/ - ` : | |
* \ \ `_. \_ __\ /__ _/ .-` / /
* =====`-.____`.___ \_____/___.-`___.-'=====
* `=---='
*
*
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*
* 佛祖保佑 永不宕机 永无BUG
*
* 佛曰:
* 写字楼里写字间，写字间里程序员；
* 程序人员写程序，又拿程序换酒钱。
* 酒醒只在网上坐，酒醉还来网下眠；
* 酒醉酒醒日复日，网上网下年复年。
* 但愿老死电脑间，不愿鞠躬老板前；
* 奔驰宝马贵者趣，公交自行程序员。
* 别人笑我忒疯癫，我笑自己命太贱；
* 不见满街漂亮妹，哪个归得程序员？
*
* @Author: geovindu
* @Date: 2024-08-22 14:33:20
* @LastEditors: geovindu
* @LastEditTime: 2024-08-22 20: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 14:20:11
* @LastEditors: geovindu
* @LastEditTime: 2024-08-22 20:07: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 20:18:16
* @LastEditors: geovindu
* @LastEditTime: 2024-08-22 21:11: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;调用：
/*
* ┌───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┐
* │Esc│ │ F1│ F2│ F3│ F4│ │ F5│ F6│ F7│ F8│ │ F9│F10│F11│F12│ │P/S│S L│P/B│ ┌┐ ┌┐ ┌┐
* └───┘ └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┘ └┘ └┘ └┘
* ┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───────┐ ┌───┬───┬───┐ ┌───┬───┬───┬───┐
* │~ `│! 1│@ 2│# 3│$ 4│% 5│^ 6│& 7│* 8│( 9│) 0│_ -│+ =│ BacSp │ │Ins│Hom│PUp│ │N L│ / │ * │ - │
* ├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─────┤ ├───┼───┼───┤ ├───┼───┼───┼───┤
* │ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{ [│} ]│ | \ │ │Del│End│PDn│ │ 7 │ 8 │ 9 │ │
* ├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤ └───┴───┴───┘ ├───┼───┼───┤ + │
* │ Caps │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter │ │ 4 │ 5 │ 6 │ │
* ├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────────┤ ┌───┐ ├───┼───┼───┼───┤
* │ Shift │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│ Shift │ │ ↑ │ │ 1 │ 2 │ 3 │ │
* ├─────┬──┴─┬─┴──┬┴───┴───┴───┴───┴───┴──┬┴───┼───┴┬────┬────┤ ┌───┼───┼───┐ ├───┴───┼───┤ E││
* │ Ctrl│ │Alt │ Space │ Alt│ │ │Ctrl│ │ ← │ ↓ │ → │ │ 0 │ . │←─┘│
* └─────┴────┴────┴───────────────────────┴────┴────┴────┴────┘ └───┴───┴───┘ └───────┴───┴───┘
*
* @Author: geovindu
* @Date: 2024-08-21 20:22:04
* @LastEditors: geovindu
* @LastEditTime: 2024-08-23 21:13:03
* @FilePath: \vue\vuetest\src\components\Login.vue
* @Description: geovindu
* @lib,packpage:
*
* @IDE: vscode
* @jslib: node 20 vue.js 3.0
* @OS: windows10
* @database: mysql 8.0 sql server 2019 postgreSQL 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 router from "@/router"; //路由配置文件
//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));
let islogin: boolean=false;
//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
{
islogin=true;
console.log(islogin);
//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);
router.push('/about'); //改变路由
}
})
.catch(function (error) {
// 处理错误情况
console.log(error)
})
/**
if(islogin)
{
router.push('/about'); //改变路由
}
else
{
router.push("/");
}
console.log(islogin);
*/
//router.push({path:'/about'}); //改变路由
//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");
};
</script>输出：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-08-23，如有侵权请联系 cloudcommunity@tencent.com 删除
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号