软件工程第二次结对作业

这个作业属于哪个课程	https://edu.cnblogs.com/campus/fzu/SE2024
这个作业要求在哪里	https://edu.cnblogs.com/campus/fzu/SE2024/homework/13281
这个作业的目标	通过代码实现校园项目招募平台的设计
姓名及学号	马鑫 102202101
结对成员及学号	王强 102202106
结对同学博客链接	https://www.cnblogs.com/KaiInssy/p/18457469
Github仓库地址	https://github.com/Endorphins-m/102202101-102202106

1.项目背景+项目需求

在大学内，部分学生希望通过发起或参与跨专业的项目（如创业或学术研究）来提升个人综合能力、拓宽知识面并积累人脉。

然而，大学生在实现这些跨学科合作时面临诸多困扰，主要体现为：

1、跨学科合作的机会主要依赖于个人积累的有限人脉资源或通过导师的引荐，方式过于局限，导致许多潜在的合作机会未能实现。

2、不同专业的学生在课程安排、项目目标和沟通方式上存在显著差异，这增加了合作过程中的沟通与磨合成本，给跨学科合作带来了挑战。

3、目前，学校缺乏专门用于促进学生跨学科合作的工具或平台。现有的合作方式多依赖于群聊、校园公告墙等渠道，其效果有限，难以满足学生之间有效交流与合作的需求。

基于此，需开发一套跨专业合作平台，为大学生提供发起和参与跨学科项目的渠道。

该平台具备但不限于以下功能和特点：

1、系统支持不同角色用户的注册和认证。学生可以自主发起或加入项目，教师也可发起项目，并上传和分享相关资源。

2、用户可以在平台上发布项目，介绍项目信息，显示所需招募的人才类型。

3、系统提供预定格式，用户需按格式填写表单内容，包括姓名，个人专业、擅长能力、联系方式和项目看法等。发送请求后，申请消息会在项目发布者的邮箱显示，发布者可进行审核。

4、平台设计简约，并确保操作简便。从使用频率、便捷性和合作有效性三方面出发，设计易用的界面和简化的操作流程，以提升用户体验。

5、平台内的项目合作应保持相对封闭，仅限发布者和队内成员查看，以防止项目核心内容外泄。

2.具体分工

本项目的具体分工如下：

马鑫同学：
前端开发：
负责首页、项目、发布模块页面布局与设计，包括导航栏、侧边栏、项目列表等关键UI组件。
实现交互效果，如按钮点击、下拉菜单、悬浮效果、动态页面跳转等。
使用js构建项目的动态内容，确保用户能够查看和管理项目。

后端开发：
实现项目发布、成员管理、组队请求处理等后端逻辑。
获取项目列表、发布项目、查看组队请求等。
处理与用户角色相关的权限逻辑，例如项目发布者和参与者不同的功能权限。

王强同学：
前端开发：
-负责登录、聊天、发现等页面的实现。使用js构建项目的动态内容，确保能够根据分类显示项目，以及用户的实时聊天功能。

后端开发：
负责项目数据的存储与管理
实现用户登录、组队审核和请求数据等后端逻辑。
实现项目发布、成员管理、组队请求处理等后端逻辑。
获取项目列表、发布项目、查看组队请求等。

测试：
负责功能模块的测试，确保各模块的稳定性。
编写测试用例，验证项目功能，如发布项目、组队请求、项目进度更新等。
使用自动化测试工具或手动测试，检查各类交互和功能是否按预期运行。

3.PSP表格

任务阶段(PSP)	预估耗时（min）	实际耗时（min）
环境、数据库配置	20	30
用户注册界面开发	15	10
用户登录界面开发	20	15
项目大厅界面开发	40	120
我的项目界面开发	30	60
项目发布界面开发	40	60
项目详情界面开发	80	120
申请加入项目功能开发	60	120
项目管理界面开发	120	180
任务发布界面开发	30	50
交流界面开发	80	120
个人信息界面开发	35	30
项目整体优化	80	80
细节完善	30	35
需求点测试+代码调试	60	40
事后总结、提出优化方案	30	30
总计	770	1100

4.解题思路与设计说明

问题分析

在本次项目中，用户不仅需要发布项目、参与他人的项目还要管理已经参与和发布的项目。项目发布者和参与者具有不同的权限和功能要求。我们的目标是设计一个系统，用户无论是作为项目的发布者还是参与者，都能通过统一的界面进行管理。主要挑战包括：

新项目的发布：用户可以发布项目，填写相关信息使其显示在项目大厅
项目的管理逻辑：如何根据用户身份（发布者或参与者）动态展示不同的管理权限。
用户组队请求的处理：如何合理设计组队申请的审核与状态反馈机制。
具体项目的任务分配：发布者给组员发布任务，组员接收任务通知，方便项目进度进行。
项目的分类检索：用户如何根据不同项目的分类迅速筛选寻找合适的项目。
实时聊天功能的实现：不同用户之间如何进行实时的聊天交流，提高沟通效率。

模块划分
基于上述分析，系统主要划分为以下功能模块：

项目列表模块：展示用户发布的项目和加入的项目，方便用户查看不同项目的标题和内容。
项目管理模块：该模块区分发布者和参与者的权限，发布者可以在该模块中更新项目内容、可以邀请成员、可以删除任务，管理项目成员；参与者可以查看成员列表，或退出项目。
项目任务模块：该模块区分发布者和参与者的权限，发布者可以在该模块中发布新任务；参与者可以在该模块提交完成的任务附件。
项目详情模块：显示项目的详细信息，包括项目的名称、项目描述、具体任务、发布者、项目编码等。
组队申请模块：用于管理组队请求的发送和审核。发布者可以审核组队申请，参与者可以填写相应表格发出组队请求。
实时聊天模块：用户之间可以实时聊天沟通。
邮箱模块：用于接受项目申请通知和任务发布通知等

流程图

5.项目介绍及展示

1.用户注册界面

2.用户登录界面

3.项目发布

填写相关信息发布项目，发布后在项目大厅显示

4.项目申请及发布人同意

针对项目填写表格发出申请，项目负责人的邮箱会收到请求，同意后该用户加入项目

5.查看我的项目

用户只能看到自己加入的项目

6.发布任务

只有项目发布者才可发布任务，可针对队内成员进行任务发布，发布后对应成员将收到通知

7.任务提交即项目删除

只有任务针对人可提交任务，
项目发布者可删除项目，
提交后任务进度发生改变

8.个人信息修改

用户名作为唯一标识不可修改
可上传图片修改头像

9.添加好友和发送信息

只有存在用户才可发送请求，才能进行实时沟通
针对用户名进行好友搜索

6.单元测试

1.测试方法

安装 Jest 和 Puppeteer 相关依赖： 在项目根目录下运行以下命令来安装 Jest、Puppeteer 和 jest-environment-puppeteer：
npm install --save-dev jest puppeteer jest-environment-puppeteer

配置 Jest： 在项目根目录下创建一个 jest.config.js 文件，内容：

点击查看代码

module.exports = {
    testEnvironment: 'jest-environment-puppeteer',
    testRegex: './*\\.test\\.js$',
    setupFilesAfterEnv: ['./jest.setup.js']
};

配置 Puppeteer： 在项目根目录下创建一个 jest-puppeteer.config.js 文件，内容：

点击查看代码

module.exports = {
    launch: {
        headless: true,
        slowMo: 50,
    },
    browserContext: 'default',
};

设置 Jest 环境： 在项目根目录下创建一个 jest.setup.js 文件，内容：

点击查看代码

jest.setTimeout(30000);

编写测试： 在项目根目录下创建一个 test_.test.js （）文件：

点击查看代码

[https://github.com/Endorphins-m/102202101-102202106/tree/main/ProjectPartner(end)/union%20test]()

运行测试： 在项目根目录下运行以下命令来执行测试：

点击查看代码

npx jest

2.测试数据构造思路

一、明确测试目标与需求
理解功能：首先，需要深入理解软件的功能和业务流程，明确每个功能点需要哪些类型的数据输入。
确定测试范围：根据测试计划，确定需要测试的功能模块、界面、接口等，以及每个模块对应的测试场景。
二、分析数据特性与规则
数据类型与格式：识别软件处理的数据类型（如字符串、数字、日期等）和数据格式（如JSON、XML、CSV等）。
数据范围与边界：确定数据的合理取值范围，以及可能的边界值（如最大值、最小值、空值、特殊字符等）。
业务规则与约束：了解软件对数据的约束条件，如必填项、唯一性、格式要求等。
三、设计测试数据方案
正常数据：设计符合业务规则和预期的数据，用于验证软件的基本功能。例如，对于用户注册功能，可以设计一个包含正确用户名、密码、邮箱等信息的测试用例。
异常数据：设计不符合业务规则或预期的数据，用于测试软件的错误处理和异常处理能力。例如，对于用户注册功能，可以设计一个包含空用户名、重复用户名、非法字符等信息的测试用例。
边界数据：设计处于数据范围边界的数据，用于测试软件的边界条件处理。例如，对于数值输入框，可以设计一个包含最大值、最小值、刚好超出范围值等边界值的测试用例。
组合数据：设计多个数据字段的组合，用于测试软件的复杂功能和业务逻辑。例如，对于订单处理功能，可以设计一个包含多种商品、多种优惠方式、多种支付方式等组合数据的测试用例。

7.遇到的问题即解决方法

一.关于布局：CSS样式不符合预期，无法生效，形成乱码，元素紊乱，选择器发生冲突

解决方法：

1.CSS样式不符合预期或无法生效

检查选择器：
确认CSS选择器是否正确，确保选择器能够正确地应用到目标元素上。
使用浏览器的开发者工具来检查元素的CSS样式，查看是否有其他CSS规则覆盖了你的样式。
检查CSS属性：
确保CSS属性的拼写和语法没有错误。特别是涉及到形状的CSS属性，如border-radius、clip-path、shape-outside等，确保它们的值正确设置。
使用CSS验证工具（如W3C Validator）来检查CSS规则的语法是否正确。
盒模型问题：
CSS中的盒模型会影响元素的尺寸和形状。确保正确理解和设置了元素的盒模型，包括元素的宽度、高度、内边距和边框等属性。
浮动和定位：
如果元素使用了浮动或定位属性，可能会影响元素的形状和布局。确保正确地使用了这些属性，并且它们没有与其他CSS属性产生冲突。
响应式设计：
如果网页是响应式设计的，确保正确地设置了媒体查询，并且针对不同的屏幕尺寸调整了元素的样式。
优先级和覆盖：
确保CSS规则具有足够的优先级以覆盖其他样式。例如，内联样式比外部样式表中的规则优先，更具体的选择器（如ID选择器）比更通用的选择器（如类选择器）优先。
可以使用!important声明来强制应用某个样式，但要谨慎使用，因为过度使用可能导致样式难以维护和调试。
浏览器兼容性：
确保使用的CSS属性和值与目标浏览器兼容。不同的浏览器对CSS标准的支持有所不同。
清除缓存：
浏览器有时会缓存CSS文件。当更改CSS文件后，浏览器可能仍会加载缓存版本。尝试清除浏览器的缓存或强制刷新页面（按Ctrl+F5）。

2.CSS文件乱码

确认编码方式：
确认CSS文件编码方式是否正确。常见的编码方式有UTF-8、GBK、GB2312等。
可以通过编辑器或者转码工具来查看和修改编码方式。
转码和编辑器设置：
将CSS文件的编码方式转换成正确的编码方式。例如，使用Notepad++或Sublime Text等编辑器，选择“转换为UTF-8（无BOM）”等选项进行转换。
在编辑器的设置中，将编码方式设置为正确的编码方式，确保保存时使用正确的编码方式。
字符编码声明：
在CSS文件的头部添加字符编码声明，例如@charset "UTF-8";，这样可以明确指定CSS文件采用UTF-8编码。
检查服务器端配置，确保正确设置响应头的Content-type属性为text/css;charset=utf-8。
检查HTML文档的字符编码声明，确保与CSS文件编码一致。

3.元素紊乱

检查HTML结构：
确保HTML结构正确，没有缺失的标签或错误的嵌套。
浮动清除：
如果使用了浮动布局，确保正确使用了清除浮动的方法，如添加clear属性或使用伪元素清除浮动。
定位调整：
对于使用定位属性的元素，确保它们的定位上下文（即包含块）正确无误。

4.选择器发生冲突

使用命名约定：
为每个CSS类或ID选择器添加唯一的命名，避免重复。可以使用BEM（Block Element Modifier）或其他命名约定来规范命名方式。
作用域限定：
将CSS样式限定在特定的作用域内，可以使用CSS预处理器（如Sass、Less）的局部作用域功能，或者使用CSS模块化的方式（如CSS Modules）来避免全局污染和冲突。
使用层叠顺序：
通过合理设置选择器的权重，可以确保特定样式的优先级高于其他样式。可以使用ID选择器、类选择器、标签选择器等来提高选择器的权重。

二.关于消息收发：无法正确接收项目申请信息和新任务提醒

解决方法：

1.实现监听DOM内容
2.正确获取收件箱列表和用户信息
3.调整处理邮件点击事件

三.关于信息抓取：无法正确抓取需要的信息进行显示

1.解决方法：
2.检查控制台错误：首先，打开浏览器的开发者工具，查看控制台是否有任何错误信息。
3.检查JavaScript代码：逐步调试你的JavaScript代码，确保数据被正确抓取并处理。
4.检查HTML和CSS：确保你的HTML结构是正确的，并且CSS没有隐藏或覆盖你想要显示的内容。
5.咨询文档和社区：如果你使用的是第三方库或框架，查阅它们的官方文档和社区论坛可能会提供有用的信息。

8.Github代码签入记录

9.队友互评

对于马鑫的评价：
优点：表达清晰，倾听能力强，责任心强，相互信任
不足：对于JavaScript语言的编写能力仍需提高

对于王强的评价：
优点：具有协作精神，沟通能力强，有执行力，尊重搭档的想法
不足：对于HTML的CSS部分和JavaScript语言的编写能力仍需提高