animation

src/app/app.module.ts

@@ -6,12 +6,14 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,BrowserAnimationsModule],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
+  
+  
 })
 export class AppModule {}

src/app/tab1/tab1.page.html

@@ -8,7 +8,7 @@
 </ion-header>
 
 <ion-content class="ion-padding">
-  <swiper-container  [loop]="true">
+  <swiper-container slides-per-view="1" speed="500" loop="true" css-mode="true" autoplay="true">
     <swiper-slide><ion-img src="assets/img/banner.jpg"></ion-img></swiper-slide>
     <swiper-slide><ion-img src="assets/img/banner2.jpg"></ion-img></swiper-slide>
     <swiper-slide><ion-img src="assets/img/banner3.jpg"></ion-img></swiper-slide>
@@ -46,3 +46,12 @@
     </ion-card>
   
 </ion-content>
+<script>
+  var mySwiper = new Swiper('.swiper', {
+    autoplay: {
+    delay: 30,
+    stopOnLastSlide: false,
+    disableOnInteraction: true,
+    }
+  });
+  </script>

src/app/tab1/tab1.page.ts

@@ -1,13 +1,23 @@
 import { Component } from '@angular/core';
 import { AlertController } from '@ionic/angular';
+import { trigger, state, style, animate, transition } from '@angular/animations';
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss']
-})
+}
+ 
+)
 export class Tab1Page {
-  
+  slider = {
+    effect: 'flip',
+    speed: 400,
+    loop:true,
+    autoplay: {
+      delay: 2000
+    }
+  };
   constructor() {}
   navigateTo(path:string){
     

src/modules/test/job-recommend/job-recommend.module.ts

@@ -5,15 +5,15 @@ import { FormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
 
 import { JobRecommendPageRoutingModule } from './job-recommend-routing.module';
-
 import { JobRecommendPage } from './job-recommend.page';
 
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    JobRecommendPageRoutingModule
+    JobRecommendPageRoutingModule,
   ],
   declarations: [JobRecommendPage]
 })

src/modules/test/job-recommend/job-recommend.page.html

@@ -1,9 +1,37 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
+<ion-header>
+  <ion-toolbar >
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
+    </ion-buttons>
     <ion-title>职业推荐</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content>
+  <ion-list>
+    <ion-item>
+      <ion-label>根据你的Mbti测试结果</ion-label>
+      <ion-note slot="end">你的结果是{{testresult}}</ion-note>
+    </ion-item>
+    <!-- 其他人格类型... -->
+  </ion-list>
 
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>{{result}}</ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      <p>Suitable Jobs: {{suitablejobs}}</p>
+    </ion-card-content>
+  </ion-card>
+    <!-- 呼吸气泡 -->
+    <ion-content>
+      <div class="container">
+        <div class="ball" *ngFor="let ball of balls" [style.background-color]="ball.color" [style.left.px]="ball.x" [style.top.px]="ball.y">
+          <ion-button fill="clear"color="light">Clear</ion-button>
+        </div>
+      </div>
+    </ion-content>
+    
 </ion-content>

src/modules/test/job-recommend/job-recommend.page.scss

@@ -0,0 +1,12 @@
+.container {
+    position: relative;
+    width: 100%;
+    height: 70%;
+  }
+  
+  .ball {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+  }

src/modules/test/job-recommend/job-recommend.page.ts

@@ -1,15 +1,74 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { ResourceLoader } from '@angular/compiler';
 import { Component, OnInit } from '@angular/core';
-
+import * as Parse from "parse";
 @Component({
   selector: 'app-job-recommend',
   templateUrl: './job-recommend.page.html',
   styleUrls: ['./job-recommend.page.scss'],
+  animations: [
+    trigger('moveAnimation', [
+      state('move', style({
+        transform: 'translate({{x}}, {{y}})'
+      }), { params: { x: '0', y: '0' } }),
+      transition('* => move', animate('2s ease-out'))
+    ])
+  ]
 })
 export class JobRecommendPage implements OnInit {
+  testresult:any
+  result:string | undefined
+  suitablejobs:any
+  balls = [
+    { color: 'red', x: 50, y: 50, vx: 2, vy: 1 },
+    { color: 'blue', x: 100, y: 100, vx: -1, vy: 2 },
+    { color: 'green', x: 150, y: 150, vx: 1, vy: -2 }
+  ];
+  maxX = 900
+  maxY = 400;
+
+  constructor() {
+  }
 
-  constructor() { }
+  moveBalls() {
+    this.balls.forEach(ball => {
+      ball.x += ball.vx;
+      ball.y += ball.vy;
 
+      if (ball.x <= 0 || ball.x >= this.maxX) {
+        ball.vx = -ball.vx;
+      }
+
+      if (ball.y <= 0 || ball.y >= this.maxY) {
+        ball.vy = -ball.vy;
+      }
+    });
+  }
   ngOnInit() {
+    setInterval(() => {
+      this.moveBalls();
+    }, 10);
+    let user = Parse.User.current();
+    if(user?.id){
+      var testresult=user.get("mbti")
+      console.log(testresult)
+    }
+    this.testresult=testresult
+    let BoleMbti = Parse.Object.extend("BoleMbti");
+    const query = new Parse.Query(BoleMbti);
+    query.equalTo("result", testresult);
+    query.first().then((result) => {
+      if (result) {
+          this.result=result.get("result")
+          const suitableJobs = result.get("suitableJobs");
+          this.suitablejobs=suitableJobs
+          console.log(testresult+"适合的工作：", suitableJobs);
+      } else {
+          console.log("未找到符合条件的数据");
+      }
+  }).catch((error) => {
+      console.error("查询数据时出错：", error);
+  });
   }
 
 }

src/server/BoleMbti.js

@@ -0,0 +1,106 @@
+// 导入BoleMbti脚本
+
+// 引用Parse JS SDK
+const Parse = require("parse/node");
+Parse.initialize("dev"); // 设置applicationId
+Parse.serverURL = "http://web2023.fmode.cn:9999/parse"; // 设置serverURL
+
+let mbtiData = {
+    "ISTJ": {
+        "personality": "ISTJ - 守护者",
+        "suitable_jobs": ["会计师", "行政助理", "工程师"]
+    },
+    "ISFJ": {
+        "personality": "ISFJ - 慈爱者",
+        "suitable_jobs": ["护士", "社会工作者", "图书管理员"]
+    },
+    "INFJ": {
+        "personality": "INFJ - 门徒",
+        "suitable_jobs": ["心理学家", "作家", "艺术家"]
+    },
+    "INTJ": {
+        "personality": "INTJ - 学者",
+        "suitable_jobs": ["科学家", "律师", "企业家"]
+    },
+    "ISTP": {
+        "personality": "ISTP - 冒险家",
+        "suitable_jobs": ["机械师", "飞行员", "摄影师"]
+    },
+    "ISFP": {
+        "personality": "ISFP - 艺术家",
+        "suitable_jobs": ["插画师", "音乐家", "花艺设计师"]
+    },
+    "INFP": {
+        "personality": "INFP - 梦想家",
+        "suitable_jobs": ["心理咨询师", "作家", "教师"]
+    },
+    "INTP": {
+        "personality": "INTP - 学者",
+        "suitable_jobs": ["程序员", "研究员", "工程师"]
+    },
+    "ESTP": {
+        "personality": "ESTP - 实干家",
+        "suitable_jobs": ["销售员", "运动员", "警察"]
+    },
+    "ESFP": {
+        "personality": "ESFP - 表演者",
+        "suitable_jobs": ["演员", "主持人", "舞蹈编导"]
+    },
+    "ENFP": {
+        "personality": "ENFP - 公关者",
+        "suitable_jobs": ["市场营销专员", "活动策划师", "公关顾问"]
+    },
+    "ENTP": {
+        "personality": "ENTP - 挑战者",
+        "suitable_jobs": ["企业顾问", "律师", "投资者"]
+    },
+    "ESTJ": {
+        "personality": "ESTJ - 主管",
+        "suitable_jobs": ["项目经理", "军官", "警察"]
+    },
+    "ESFJ": {
+        "personality": "ESFJ - 供应者",
+        "suitable_jobs": ["教育工作者", "医生", "社会工作者"]
+    },
+    "ENFJ": {
+        "personality": "ENFJ - 慈善家",
+        "suitable_jobs": ["心理咨询师", "教育家", "公益组织工作者"]
+    },
+    "ENTJ": {
+        "personality": "ENTJ - 指挥官",
+        "suitable_jobs": ["CEO", "政治家", "项目经理"]
+    }
+}
+
+function importAll(){
+    let MbtiList = []
+    Object.keys(mbtiData).forEach(key=>{
+        MbtiList.push({
+            result:key,
+            personality:mbtiData[key]?.personality,
+            suitableJobs:mbtiData[key]?.suitable_jobs,
+        })
+    })
+
+    console.log(MbtiList)
+    MbtiList.forEach(async mbti => {
+        // 查重
+        let exists = await checkExists(mbti)
+        if(exists?.id) return;
+        // 新增
+        let BoleMbti = Parse.Object.extend("BoleMbti");
+        let bm = new BoleMbti();
+        bm.set(mbti);
+        bm.save();
+    });
+}
+
+async function checkExists(mbti){
+    let query = new Parse.Query("BoleMbti");
+    query.equalTo("result",mbti?.result);
+    query.equalTo("personality",mbti?.personality);
+    await query.first();
+    return await query.first();
+}
+
+importAll()