零杯参赛作品

队伍名称：海底小纵队

组内成员

队长

郭家佳 计算机学院2023级5班

队员

张智皓 计算机学院2023级4班

王子安 计算机学院2023级4班

李卓优 计算机学院2023级5班

使用资源

• Vue3：项目框架
• Vue-router：页面间跳转
• npm&yarn：包管理
• animate.css：优化视觉动效
• gsap.js：实现文字视差滚动
• axios.js：实现前后端连接
• 图片、部分文字、测试题目来源于网络
• 字体:荆南麦圆体&字小魂薛根元楷书

网页特色

• 网页内涵：网页将mbti人格测试与宫崎骏动漫中的核心要义——探索自我相结合，希望用户探索自我的过程更具趣味性，同时能够与动漫中的角色产生共鸣，从而更好的认识自我人格。
• 导航菜单：通过清晰、简洁且易于使用的导航菜单，让用户能够轻松浏览网页内容，并快速找到所需的信息或功能。
• 视觉效果：通过精心设计的动效与色彩搭配，将宫崎骏动漫中的美好与mbti相结合，使用户能够在清新治愈的环境中更好更有趣的探索自我。
• 多媒体内容：通过丰富的图片内容使网页更具有吸引力和互动性。
• 社交互动：通过留言板的方式使不同的用户相互之间能够达成交流，分享对自我探索的经历，帮助其他用户更好的探索自我人格。
• 游戏互动：用户能够猜测不同人格对应的动漫人格，从加深对各个人格的理解，进而更好的体会mbti。

网页主题

mbti与宫崎骏:永恒飞翔的少男少女之梦

在这个网页中，你将通过不同的动漫角色深入了解mbti的各个人格，与动漫角色产生共鸣，从而更好的对自我进行探索与发现，更好的了解自我。我们始终贯彻宫崎骏动漫的永恒主题：对自己的探索，旨在通过精美的动效与图片为用户提供更好的互动体验，从而实现发现，了解，与他人交流自我的mbti人格，同时通过有趣的互动效果对每个人格进行深入了解

代码管理

安装包管理工具yarn

npm install -g yarn

启动本地服务器

yarn run serve

后端部分运行

conda create -n mbti python=3.11 -y
conda activate mbti
pip install Flask
pip install Flask-CORS
python app.py

文件结构

├─backend                   #后端
|
├─mbti                      #前端
   |
   ├─node_modules           #库文件
   |
   ├─public                 #公共资源
   |
   └─src                    #源文件
      ├─assets              #静态资源 
      │  ├─font             #字体
      │  └─image            #图片资源
      │─components          #vue组件
      ├─router              #路由文件
      └─views               #路由页面