软件工程第二次结对作业

这个作业属于哪个课程	软件工程
这个作业要求在哪里	作业要求链接
这个作业的目标	根据上次作业的原型，设计一个微信小程序
学号	102202103
合作伙伴	102202111刘哲睿
Github仓库地址	https://github.com/noen-hh/102202111-102202103.git

二维码（还在审核发布中）

1.具体分工

王文豪（前端开发）：

1，负责WXML和WXSS进行主页、项目、项目创建与发布模块页面布局与设计，包括导航栏、项目列表等关键UI组件。
2，实现交互效果，如按钮点击、动态页面跳转等。

刘哲睿（后端开发）：

1，负责管理用户的注册登录信息，确保用户登录信息不会丢失。
2，负责编写和维护微信云函数，实现获取项目详情、申请加入/退出项目、删除项目以及更新项目状态等功能。
3，设计和优化数据库结构，确保数据的高效存储与检索，通过数据库实现项目的增删改查。

2.PSP表格

PSP2.1	Personal Software Process Stages	预估耗时（小时）	实际耗时（小时）
Planning	计划	3	4
Estimate	估计这个任务需要多少时间	70	102
Development	开发	24	40
Analysis	需求分析 (包括学习新技术)	4	6
Design Spec	生成设计文档	2	2
Design Review	设计复审	1	2
Coding Standard	代码规范 (为目前的开发制定合适的规范)	3	4
Design	具体设计	8	10
Coding	具体编码	8	10
Code Review	代码复审	4	6
Test	测试（自我测试，修改代码，提交修改）	5	6
Reporting	报告	2	3
Test Repor	测试报告	2	3
Size Measurement	计算工作量	2	3
Postmortem&Process Improvement Plan	事后总结, 并提出过程改进计划	2	3
	合计	70	102

3.解题思路描述与设计实现说明

• 代码实现思路，文字描述

通过微信开发者工具创建一个可供多人交流合作的项目平台小程序，在该项目平台上，用户在注册一个账号登陆后，可以实现自己项目的创建与发布，参加他人的项目，修改与删除自己的项目。首先，用户登陆进入后处在主页中，主页中可以查看已发布的项目，顶部附带搜索框可按项目名称关键词进行查找，点击相应的项目跳转进入后可了解项目详情，如项目的具体任务，参加该项目所需的技能，项目内已参加的人数等。根据个人的意愿可在相应的项目内进行项目申请，项目的发布人将会受到申请者的申请，并根据自身意愿进行回应。在主页下方的导航栏中，点击“项目”即可跳转到“我的项目”，用户可以看到自己已经参加的项目并且进行查看，同时可以对项目进行删除操作，页面右下角有个项目创建按钮，用户可以根据自己的自身情况选择是否创建自己的项目。点击导航栏中的“我的”前往个人中心，可对自身的个人信息进行查看和修改，并且附带与客服对话的功能。

• 实现的方法

• 云函数

• 数据库

• 前端：使用WXML和WXSS设计页面布局和样式，使用JavaScript编写页面逻辑，处理用户交互和数据绑定

• 后端：编写后端业务逻辑，处理数据的增删改查。

• 关键功能实现

• 注册登录

• 项目创建发布，申请，修改，删除

• 查看他人信息

• 关键实现的流程图

• 我们认为重要的/有价值的代码片段

• 登陆页面：

// 验证密码是否匹配
if (password !== confirmPassword) {
 wx.showToast({
   title: '密码不一致',
   icon: 'none'
 });
 return;
}

// 调用后端API进行注册
// ...

}
Page({
 data: {
   phone: '',
   password: ''
 },

 // 绑定手机号输入
 bindPhoneInput: function(e) {
   this.setData({
     phone: e.detail.value
   });
 },

 // 绑定密码输入
 bindPasswordInput: function(e) {
   this.setData({
     password: e.detail.value
   });
 },

 // 提交登录
 submitLogin: function() {
   const { phone, password } = this.data;

   // 输入验证
   if (!phone || !password) {
     wx.showToast({
       title: '请输入手机号和密码',
       icon: 'none'
     });
     return;
   }

   // 从云数据库中读取用户数据
   const db = wx.cloud.database();
   db.collection('user').where({
     phone: phone
   }).get()
     .then(res => {
       if (res.data.length > 0) {
         // 找到用户，进行密码匹配
         const user = res.data[0];
         if (user.password === password) {
           wx.showToast({
             title: '登录成功',
           });
           wx.navigateTo({
             url: '/pages/home/home' // 登录成功后跳转到主页
           });
         } else {
           wx.showToast({
             title: '密码错误',
             icon: 'none'
           });
         }
       } else {
         wx.showToast({
           title: '用户不存在',
           icon: 'none'
         });
       }
     })
     .catch(err => {
       wx.showToast({
         title: '查询失败',
         icon: 'none'
       });
       console.error(err);
     });
 }
});

• 代码解释：类似于注册功能，使用 data 对象存储用户输入的手机号和密码，在 submitLogin 函数中，检查手机号和密码是否已填写，如果任一字段为空，显示提示信息。登录主要靠云数据库查询，查询云数据库中是否存在匹配的手机号。

• 项目搜索：

// 处理搜索框输入事件
 onSearchInput(e) {
   this.setData({
     searchText: e.detail.value,
   });
 },

 // 处理搜索按钮点击事件
 onSearch() {
   const { searchText, works } = this.data;

   // 如果搜索框为空，展示所有项目
   if (!searchText) {
     this.setData({ filteredWorks: works });
     return;
   }

   const filteredWorks = works.filter(work => 
     this.matchTitle(work.title, searchText) // 使用匹配函数
   );
   this.setData({ filteredWorks });
 },

 // 匹配项目名称的函数
 matchTitle(title, searchText) {
   let matchCount = 0;
   for (let char of searchText) {
     if (title.includes(char)) {
       matchCount++;
     }
     if (matchCount >= 2) return true;
   }
   return false;
 }, 

代码解释：当用户点击搜索按钮时，onSearch 函数会被触发。这个函数首先检查搜索框是否为空。如果为空，则将所有项目设置为过滤后的项目列表。如果不为空，则使用 filter 方法和 matchTitle 函数来过滤项目列表，只保留那些项目名称中包含搜索关键词的项目。

• 获取项目详情：

addProject: function() {
   // 跳转到添加项目的页面
   wx.navigateTo({
     url: '/pages/project/project'
   });
 },
 goToProjectDetail: function(e) {
   // 从事件对象获取项目ID
   const projectId = e.currentTarget.dataset.id;
   // 跳转到项目详情页面
   wx.navigateTo({
     url: '/pages/project-detail/project-detail?id=${projectId}'
   });
 }
代码解释：使用 wx.navigateTo 方法可以实现页面的跳转，触发事件的元素中获取 data-id 属性，该属性包含了项目的ID，然后使用这个ID来构建跳转URL。

项目申请：
applyForProject: function() {
   // 处理项目申请逻辑
   wx.showModal({
     title: '申请项目',
     content: '您确定要申请加入这个项目吗？',
     success: function(res) {
       if (res.confirm) {
         console.log('用户点击确定');
         // 发起网络请求提交申请
         wx.showToast({
           title: '申请已提交',
           icon: 'success',
           duration: 2000
         });
         // 可以在这里添加跳转逻辑，例如返回项目列表或到其他页面
         wx.reLaunch({
           url: '/pages/home/home'
         });
       } else if (res.cancel) {
         console.log('用户点击取消');
       }
     }
   });
 }

代码解释：通过一个模态对话框询问用户是否确定要申请加入某个项目，并根据不同的用户响应执行不同的操作。

• 附加特点设计与展示

• 在register.js中通过 bindPhoneInput、bindPasswordInput 和 bindConfirmPasswordInput 函数，将用户在输入框中输入的内容实时更新到页面的 data 对象中。在 submitRegister 函数中，首先检查所有字段是否已填写。如果有任何字段为空，显示提示信息并终止进一步的操作，使用正则表达式 ^1\d{10}$ 验证手机号是否为11位数字，且以1开头。
• 以下是代码：

Page({
 data: {
   phone: '',
   password: '',
   confirmPassword: ''
 },

 // 绑定手机号输入
 bindPhoneInput: function(e) {
   this.setData({
     phone: e.detail.value
   });
 },

 // 绑定密码输入
 bindPasswordInput: function(e) {
   this.setData({
     password: e.detail.value
   });
 },

 // 绑定确认密码输入
 bindConfirmPasswordInput: function(e) {
   this.setData({
     confirmPassword: e.detail.value
   });
 },

 // 提交注册
 submitRegister: function() {
   const { phone, password, confirmPassword } = this.data;

   // 验证输入
   if (!phone || !password || !confirmPassword) {
     wx.showToast({
       title: '请填写所有字段',
       icon: 'none'
     });
     return;
   }

   // 验证手机号码
   if (!/^1\d{10}$/.test(phone)) {
     wx.showToast({
       title: '手机号必须为11位',
       icon: 'none'
     });
     return;
   }

• 实现成果展示

• 目录结构

miniprogram
├── images/                 # 存放图片资源的目录
│   ├── project.png
│   ├── avatar.png
│   └── 其他图片文件...
├── pages/                  # 存放小程序页面文件的目录
│   ├── home/                 # 主页
│   │   ├── home.js
│   │   ├── home.json
│   │   ├── home.wxss
│   │   └── home.wxml
│   ├── register/            # 注册页面
│   │   ├── register.js
│   │   ├── register.json
│   │   ├── register.wxss
│   │   └── register.wxml
│   ├── chat/                # 聊天页面
│   │   ├── chat.js
│   │   ├── chat.json
│   │   ├── chat.wxss
│   │   └── chat.wxml
│   ├── login/               # 登录页面
│   │   ├── login.js
│   │   ├── login.json
│   │   ├── login.wxss
│   │   └── login.wxml
│   ├── profile/            # 用户个人资料页面
│   │   ├── profile.js
│   │   ├── profile.json
│   │   ├── profile.wxss
│   │   └── profile.wxml
│   ├── project/             # 项目相关页面
│   │   ├── project.js
│   │   ├── project.json
│   │   ├── project.wxss
│   │   └── project.wxml
│   ├── project_1/           # 项目1页面
│   │   ├── project_1.js
│   │   ├── project_1.json
│   │   ├── project_1.wxss
│   │   └── project_1.wxml
│   ├── project_2/           # 项目2页面
│   │   ├── project_2.js
│   │   ├── project_2.json
│   │   ├── project_2.wxss
│   │   └── project_2.wxml
│   ├── project-detail/      # 项目详情页面
│   │   ├── project-detail.js
│   │   ├── project-detail.json
│   │   ├── project-detail.wxss
│   │   └── project-detail.wxml
│   └── utils/               # 工具函数目录
│       ├── utils.js
│       └── typings/           # TypeScript 类型声明文件
│           └── index.d.ts
├── app.json              # 小程序全局配置文件
├── app.ts                 # 小程序入口文件（TypeScript）
├── app.wxss               # 小程序全局样式文件
├── envList.js             # 环境变量配置文件
└── .gitignore             # Git 忽略文件配置

• 单元测试

• 学习单元测试
  理解概念：了解什么是单元测试，以及它在软件开发中的重要性。
  阅读文档：学习测试框架的官方文档，了解如何编写测试用例。
  观看教程：通过在线教程和课程学习单元测试的最佳实践。
  实践操作：在实际项目中编写单元测试，从简单到复杂逐步掌握。
  代码审查：学习他人的测试代码，理解不同的测试策略和方法。

• 使用步骤
  1，在项目中安装了 jest，npm init -y npm install --save-dev jest
  2，部分单元测试代码

// projectPublish.test.js
const { publishProject } = require('./projectPublish');

describe('publishProject', () => {
 test('should publish a project successfully', async () => {
   const projectData = {
     name: '新项目',
     summary: '这是一个新项目的简介',
   };
   const result = await publishProject(projectData);
   expect(result.success).toBe(true);
   expect(result.message).toBe('项目发布成功');
 });

 test('should throw an error if project name or summary is missing', () => {
   expect(() => publishProject({ name: '新项目' })))
     .toThrow('项目名称和简介不能为空');
   expect(() => publishProject({ summary: '这是一个新项目的简介' })))
     .toThrow('项目名称和简介不能为空');
 });
});

• 构造测试数据的思路
  1，边界值：测试数据的边界值，例如数组的空值、最大长度、最小长度等。
  2，异常值：测试异常或错误输入，例如无效的输入、负数等。
  3，典型值：测试正常使用情况下的典型值。
  4，组合值：测试不同数据组合的情况。
  5，依赖关系：如果函数之间存在依赖关系，构造测试数据时需要考虑这些依赖。

• Github的代码签入记录截图

• 遇到的代码模块异常或结对困难及解决方法

• 问题描述
  在开发微信小程序项目时，数据库出现了某些问题，导致数据查询异常，用户和项目数据无法正确存储及读取。
• 做过哪些尝试
  检查数据库连接：确保数据库服务正在运行，并且小程序的数据库连接配置是正确的。
• 是否解决
  已解决
• 有何收获
  问题解决能力：提升了定位和解决复杂问题的能力。
  沟通协作：在结对编程中，我们学会了更好地与队友沟通和协作，共同面对挑战。

• 评价你的队友

结对队友：102202111刘哲睿

• 值得学习的地方
  1，技术能力：他对JavaScript和相关框架（如WeChat小程序）的掌握非常熟练，能够快速解决各种技术难题。
  2，团队合作：他在团队合作中表现出色，能够积极沟通，分享自己的见解和经验，帮助团队成员共同进步。
• 需要改进的地方    
  1，在时间的分配上，和任务重点把握的地方还需要进一步的改进。
  2，在基础技术上还有一定的进步空间。