首页 > 其他分享 >typescript:　deserialize json to object

typescript:　deserialize json to object

时间：2024-08-22 20:55:38浏览次数：6  
标签：userName typescript const string deserialize private geovindu json data

 

/*
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 
 *            佛祖保佑     永不宕机     永无BUG
 * 
 *        佛曰:  
 *                写字楼里写字间，写字间里程序员；  
 *                程序人员写程序，又拿程序换酒钱。  
 *                酒醒只在网上坐，酒醉还来网下眠；  
 *                酒醉酒醒日复日，网上网下年复年。  
 *                但愿老死电脑间，不愿鞠躬老板前；  
 *                奔驰宝马贵者趣，公交自行程序员。  
 *                别人笑我忒疯癫，我笑自己命太贱；  
 *                不见满街漂亮妹，哪个归得程序员？
 * 
 * @Author: geovindu
 * @Date: 2024-08-22 14:33:20
 * @LastEditors: geovindu
 * @LastEditTime: 2024-08-22 14: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 [email protected], 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 16: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 [email protected], 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 15:18:16
 * @LastEditors: geovindu
 * @LastEditTime: 2024-08-22 16: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 [email protected], 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 10:22:04
 * LastEditors: geovindu
 * LastEditTime: 2024-08-21 10: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 [email protected], 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: "[email protected]", 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>

　　

输出：

 

 

 

 

标签：userName,typescript,const,string,deserialize,private,geovindu,json,data
From： https://www.cnblogs.com/geovindu/p/18374734

相关文章

  • Jenkins从2.401.1升级到2.440.1后项目配置报错，提示：JSONObject["scm"] is not a JSONOb
    因为安全原因升级了Jenkins。然后发现Project-->Configure那里配置竟然嵌套了，而且保存修改的时候，提示：JSONObject["scm"]isnotaJSONObject. 异常信息表明在JSON中尝试获取一个名为“scm”的属性时，期望得到的是一个JSONObject，但实际上并不是。可能是因为JSON中的......
  • 044、Vue3+TypeScript基础，pinia库中getters的用法
    01、main.js代码如下：//引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步：引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步：创建pinia实例constpinia=......
  • 使用 JsonSchema 校验 JSON数据
    有时候JSON数据格式需要校验是否合法，我们可以使用JsonSchema来校验数据是否合法。引入pom.xmlhttps://json-schema.org/<dependency><groupId>com.networknt</groupId><artifactId>json-schema-validator</artifactId><versio......
  • 043、Vue3+TypeScript基础，pinia库使用action，在函数中对存储数据进行修改
    01、main.js代码如下：//引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步：引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步：创建pinia实例constpinia=......
  • 042、Vue3+TypeScript基础，pinia库存储数据修改的两种方式
    01、main.ts代码如下：//引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步：引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步：创建pinia实例constpinia=......
  • 041、Vue3+TypeScript基础，使用pinia库来储存数据
    01、输入npminstallpinia 02、main.js代码如下：//引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步：引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步......
  • TypeScript深度揭秘：Map的全方位详解、作用、特点、优势及实战应用和高级应用
            在TypeScript的广阔世界里，Map对象无疑是一个强大的存在，它提供了灵活且高效的键值对存储机制。今天，我们就来一场轻松而严谨的探秘之旅，全方位解析TypeScript中Map的定义、作用、特点、优势，并通过实战代码示例，带你领略Map的无穷魅力。引言Map是TypeScript（以及Ja......
  • 040、Vue3+TypeScript基础，使用nanoid库生成id
    01、使用powershell，输入npminanoid来安装： 02、App.vue代码如下：<template><divclass="app"><h2class="title">App.Vue</h2><Page1/><br><Page2/></div></template><......
  • 跨域、JSONP、CORS、Spring、Spring Security解决方案
    概述JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。跨域是浏览器（如Chrome浏览器基于JSV8引擎，可以简单理解为JS解释器）的一种同源安全策略，是浏览器单方面限制脚本的跨域访问。因此，仅有客户端运行在浏览器时才存在跨域问题，才需要考虑如何解决这个问题。浏览器控制台......
  • 038、Vue3+TypeScript基础，使用router.push进行路由跳转并传参
    01、main.js//引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入路由importrouterfrom'./router'constapp=createApp(App);//使用路由app.use(router);//App.vue的根元素id为appapp......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99