typescript:　deserialize json to object

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/*
 *                        _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;
 
}

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/*
 *
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃ 　
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃　　　　　　　　　　　
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无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;

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/*
 *           佛曰: 
 *                   写字楼里写字间，写字间里程序员； 
 *                   程序人员写程序，又拿程序换酒钱。 
 *                   酒醒只在网上坐，酒醉还来网下眠； 
 *                   酒醉酒醒日复日，网上网下年复年。 
 *                   但愿老死电脑间，不愿鞠躬老板前； 
 *                   奔驰宝马贵者趣，公交自行程序员。 
 *                   别人笑我忒疯癫，我笑自己命太贱； 
 *                   不见满街漂亮妹，哪个归得程序员？
 *
 * @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;

　　

调用：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
/**
 *
 * 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>
 
  

　　

输出：

 

 

 

 

posted @   ®Geovin Du Dream Park™  阅读(8)  评论(0)  编辑  收藏  举报
相关博文：
·  vue.js3+element-plus+typescript add,edit,del,search
·  TypeScript: miniProgram 获取用户信息
·  JSON数据转typescript
·  Django大全1
·  Java-XML-和-JSON-教程-全-
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术
历史上的今天：
2018-08-22 PHP7.27: Cookie and Session
2009-08-22 html设置背景色和字体颜色--兼容各浏览器
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI IDE Trae