typescript:　deserialize json to object

®Geovin Du Dream Park™ / 2024-08-23 / 原文

/*
 *                        _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>

输出：