第二次结对作业

这个作业属于哪个课程	https://edu.cnblogs.com/campus/fzu/SE2024
这个作业要求在哪里	https://edu.cnblogs.com/campus/fzu/SE2024/homework/13281
这个作业的目标	将上次结对作业的内容用代码实现
姓名及学号	陈家凯 102202126
结对成员及学号	许煊宇 102202113
Github仓库地址	https://github.com/chenoojkk/102202126-102202113

具体分工

登录注册以及聊天功能：102202113

项目发布以及搜索功能：102202126

主要的几个功能分工完成，剩下的一些细节则合作完成。

PSP表格

Personal Software Process Stages	预估耗时（小时）	实际耗时（小时）
Planning 计划	2	1.5
Development 开发	2	2
Analysis 需求分析 (包括学习新技术)	20	20
Design Spec 生成设计文档	1	1
Design Review 设计复审	1	1
Coding Standard 代码规范	5	5
Design 具体设计	10	10
Coding 具体编码	30	35
Code Review 代码复审	2	2
Test 测试（自我测试，修改代码，提交修改）	1	1
Reporting 报告	1	1
Test Report 测试报告	1	1
Size Measurement 计算工作量	1	1
Postmortem & Process Improvement Plan 事后总结, 并提出过程改进计划	0.5	0.5
合计	77.5	82

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

• 代码实现思路，文字描述（部分）

  以下是实现聊天功能的代码思路：

  1. 页面布局

  在 chat.wxml 文件中定义聊天界面的布局，包括消息显示区域和输入框。使用 scroll-view 组件实现消息的滚动显示，使用 input 组件实现消息输入框，并添加发送按钮。

  2. 样式设计

  在 chat.wxss 文件中定义页面的样式，使页面美观且易于使用。包括消息气泡的样式、头像的样式、输入框和发送按钮的样式等。

  3. 数据绑定

  在 chat.js 文件中，通过 onLoad 和 onShow 方法从全局数据中获取用户信息和聊天记录，并绑定到页面上。使用 setData 方法将数据绑定到页面的 data 对象中。

  4. 数据库操作

  在 chat.js 文件中，通过 wx.cloud.database 方法从数据库中获取聊天记录和好友信息，并更新到页面上。使用 watch 方法实时监听聊天记录的变化，并更新页面显示。

  5. 事件处理

  在 chat.js 文件中定义输入框的输入事件和发送按钮的点击事件，并实现相应的处理函数。输入事件用于实时更新输入框的内容，发送按钮的点击事件用于将输入框的内容发送到数据库，并更新聊天记录。

​ 以下是实现 publishsubject 功能的代码思路：

1.页面布局

​ 在 publishsubject.wxml文件中定义表单布局，包括项目名称、项目描述、项目合伙人和上传图片的输入 框， 以及提交按钮。

2.样式设计

​ 在 publishsubject.wxss 文件中定义页面的样式，使页面美观且易于使用。包括输入框、按钮和图片预览 的样式。

3.数据绑定

​ 在 publishsubject.js 文件中，通过 onLoad 方法初始化页面数据，并绑定到页面上。使用 setData 方 法将数据绑定到页面的 data 对象中。

4.数据处理

​ 在 publishsubject.js 文件中定义输入框的输入事件、图片选择事件和提交按钮的点击事件，并实现相应 的处理函数。输入事件用于实时更新输入框的内容，图片选择事件用于选择并预览图片，提交按钮的点击事 件用于提交表单数据。

5.数据库操作

​ 在 publishsubject.js 文件中，通过 wx.cloud.database 方法将表单数据存储到云数据库中，并在提交 后清空输入框内容和图片预览。

• 关键实现的流程图或数据流图

• 贴出你认为重要的/有价值的代码片段，并解释

  projectintro 页面的主要功能是展示项目详情，并提供申请加入项目和联系项目发布人的功能。以下是对该页面的详细解释：

  1. 引入工具模块

  const utils = require("../../utils/util");
  

  引入工具模块，用于格式化时间等操作。

  2. 页面初始化

  Page({
    data: {
      project: {}
    },
    onLoad(options) {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.on('sendProjectData', (data) => {
        this.setData({
          project: data.project
        });
      });
    },
  

  页面加载时，通过事件通道接收并设置项目数据。

  3. 申请加入项目

    applyToJoin() {
      const app = getApp();
      const userInfo = app.globalData.userInfo;
      const project = this.data.project;
  
      if (!project._id) {
        wx.showToast({
          icon: "none",
          title: '项目ID不存在',
        });
        return;
      }
  
      const db = wx.cloud.database();
  
      db.collection('chat_user').where({
        account_id: project.user
      }).get({
        success(res) {
          if (res.data.length > 0) {
            const userB = res.data[0];
            const newMessage = {
              id: userInfo._id,
              text: `${userInfo.account_id} 申请加入项目 ${project.projectName}`,
              time: utils.formatTime(new Date())
            };
  
            db.collection('chat_record').where({
              userA_id: userInfo._id,
              userB_id: userB._id,
            }).get({
              success(res) {
                if (res.data.length > 0) {
                  const recordId = res.data[0]._id;
                  const record = res.data[0].record;
                  record.push(newMessage);
  
                  db.collection('chat_record').doc(recordId).update({
                    data: {
                      record: record
                    },
                    success(res) {
                      wx.showToast({
                        title: '申请已发送！',
                        icon: 'success',
                        duration: 2000
                      });
                    },
                    fail(err) {
                      wx.showToast({
                        title: '申请发送失败',
                        icon: 'none',
                        duration: 2000
                      });
                    }
                  });
                } else {
                  db.collection('chat_record').where({
                    userA_id: userB._id,
                    userB_id: userInfo._id,
                  }).get({
                    success(res) {
                      if (res.data.length > 0) {
                        const recordId = res.data[0]._id;
                        const record = res.data[0].record;
                        record.push(newMessage);
  
                        db.collection('chat_record').doc(recordId).update({
                          data: {
                            record: record
                          },
                          success(res) {
                            wx.showToast({
                              title: '申请已发送！',
                              icon: 'success',
                              duration: 2000
                            });
                          },
                          fail(err) {
                            wx.showToast({
                              title: '申请发送失败',
                              icon: 'none',
                              duration: 2000
                            });
                          }
                        });
                      } else {
                        const newRecord = {
                          userA_id: userInfo._id,
                          userA_account_id: userInfo.account_id,
                          userA_avatarUrl: userInfo.avatarUrl,
                          userB_id: userB._id,
                          userB_account_id: userB.account_id,
                          userB_avatarUrl: userB.avatarUrl,
                          projectId: project._id,
                          record: [newMessage],
                          friend_status: false
                        };
  
                        db.collection('chat_record').add({
                          data: newRecord,
                          success(res) {
                            wx.showToast({
                              title: '申请已发送！',
                              icon: 'success',
                              duration: 2000
                            });
                          },
                          fail(err) {
                            wx.showToast({
                              title: '申请发送失败',
                              icon: 'none',
                              duration: 2000
                            });
                          }
                        });
                      }
                    },
                    fail(err) {
                      wx.showToast({
                        title: '申请发送失败',
                        icon: 'none',
                        duration: 2000
                      });
                    }
                  });
                }
              },
              fail(err) {
                wx.showToast({
                  title: '申请发送失败',
                  icon: 'none',
                  duration: 2000
                });
              }
            });
          } else {
            wx.showToast({
              title: '项目发布人信息未找到',
              icon: 'none',
              duration: 2000
            });
          }
        },
        fail(err) {
          wx.showToast({
            title: '获取项目发布人信息失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
  

  该函数用于申请加入项目。首先获取当前用户信息和项目数据，然后查询项目发布人的信息，并向其发送申请消息。如果聊天记录已存在，则更新记录；否则，创建新记录。

  4. 联系项目发布人

    contactUs() {
      const app = getApp();
      const userInfo = app.globalData.userInfo;
      const project = this.data.project;
      const db = wx.cloud.database();
  
      db.collection('chat_user').where({
        account_id: project.user
      }).get({
        success(res) {
          if (res.data.length > 0) {
            const userB = res.data[0];
  
            db.collection('chat_record').where({
              userA_id: userInfo._id,
              userB_id: userB._id,
              friend_status: true
            }).get({
              success(res) {
                if (res.data.length > 0) {
                  wx.navigateTo({
                    url: '/pages/chat/chat?id=' + res.data[0]._id
                  });
                } else {
                  const newMessage = {
                    id: userInfo._id,
                    text: `${userInfo.account_id} 申请添加你为好友`,
                    time: new Date()
                  };
  
                  const newRecord = {
                    userA_id: userInfo._id,
                    userA_account_id: userInfo.account_id,
                    userA_avatarUrl: userInfo.avatarUrl,
                    userB_id: userB._id,
                    userB_account_id: userB.account_id,
                    userB_avatarUrl: userB.avatarUrl,
                    projectId: project._id,
                    record: [newMessage],
                    friend_status: false
                  };
  
                  db.collection('chat_record').add({
                    data: newRecord,
                    success(res) {
                      wx.showToast({
                        title: '好友申请已发送！',
                        icon: 'success',
                        duration: 2000
                      });
                    },
                    fail(err) {
                      wx.showToast({
                        title: '好友申请发送失败',
                        icon: 'none',
                        duration: 2000
                      });
                    }
                  });
                }
              },
              fail(err) {
                wx.showToast({
                  title: '检查好友状态失败',
                  icon: 'none',
                  duration: 2000
                });
              }
            });
          } else {
            wx.showToast({
              title: '项目发布人信息未找到',
              icon: 'none',
              duration: 2000
            });
          }
        },
        fail(err) {
          wx.showToast({
            title: '获取项目发布人信息失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    }
  });
  

  该函数用于联系项目发布人。首先获取当前用户信息和项目数据，然后查询项目发布人的信息。如果双方已是好友，则跳转到聊天页面；否则，发送好友申请。

附加特点设计与展示

homepage.js 文件中的 loadProjects() 函数实现了将项目按照新到旧的顺序排列。以下是对该函数的详细解释：

1. 获取数据库实例：

   const db = wx.cloud.database();
   

   通过 wx.cloud.database() 方法获取云数据库实例。

2. 查询项目并按上传时间降序排列：

   db.collection('projects').orderBy('uploadTime', 'desc').get({
   

   使用 orderBy('uploadTime', 'desc') 方法按上传时间降序排列项目。这样，最新上传的项目会排在最前面。

3. 处理查询结果：

   success: res => {
     this.setData({
       results: res.data,
       noResults: false // 确保在加载项目时不显示“未找到相关项目”提示
     });
     wx.stopPullDownRefresh(); // 停止下拉刷新
   },
   

   在查询成功的回调函数中，将查询到的项目数据存储在页面的数据对象 results 中，并确保不显示“未找到相关项目”的提示。同时，调用 wx.stopPullDownRefresh() 方法停止下拉刷新。

4. 处理查询失败：

   fail: err => {
     console.error('加载项目失败：', err);
     wx.stopPullDownRefresh(); // 停止下拉刷新
   }
   

   在查询失败的回调函数中，输出错误信息到控制台，并调用 wx.stopPullDownRefresh() 方法停止下拉刷新。

完整的 loadProjects() 函数如下：

loadProjects() {
  const db = wx.cloud.database();
  db.collection('projects').orderBy('uploadTime', 'desc').get({
    success: res => {
      this.setData({
        results: res.data,
        noResults: false // 确保在加载项目时不显示“未找到相关项目”提示
      });
      wx.stopPullDownRefresh(); // 停止下拉刷新
    },
    fail: err => {
      console.error('加载项目失败：', err);
      wx.stopPullDownRefresh(); // 停止下拉刷新
    }
  });
}

成果展示如下：

原本的首页：

发布新项目：

新发布的项目展示在项目列表的上方，且在搜索框中显示新发布的项目名称：

目录结构

# CDCP

## 目录结构

│  .eslintrc.js
│  app.js
│  app.json
│  app.wxss
│  LICENSE
│  package-lock.json
│  package.json
│  project.config.json
│  project.private.config.json
│  README.md
│  sitemap.json
│   
├─.idea
│  │  .gitignore
│  │  CDCP.iml
│  │  misc.xml
│  │  modules.xml
│  │  workspace.xml
│  │  
│  └─inspectionProfiles
│          profiles_settings.xml
│          
├─images
│  │  1.png
│  │  2.png
│  │  3.png
│  │  no_message.png
│  │  
│  └─icon
│          friends.png
│          index.png
│          message.png
│          unknown.png
│          user.png
│          
├─pages
│  ├─changeInformation
│  │      changeInformation.js
│  │      changeInformation.json
│  │      changeInformation.wxml
│  │      changeInformation.wxss
│  │      # 修改信息页面
│  │      # 用户可以在此页面修改个人信息
│  │      
│  ├─chat
│  │      chat.js
│  │      chat.json
│  │      chat.wxml
│  │      chat.wxss
│  │      # 聊天页面
│  │      # 用户可以在此页面与其他用户进行聊天
│  │      
│  ├─friends
│  │      friends.js
│  │      friends.json
│  │      friends.wxml
│  │      friends.wxss
│  │      # 好友页面
│  │      # 用户可以在此页面查看和管理好友列表
│  │      
│  ├─homepage
│  │      homepage.js
│  │      homepage.json
│  │      homepage.wxml
│  │      homepage.wxss
│  │      # 首页
│  │      # 显示项目列表和导航到其他页面的入口
│  │      
│  ├─IdentityAuthentication
│  │  │  IdentityAuthentication.js
│  │  │  IdentityAuthentication.json
│  │  │  IdentityAuthentication.wxml
│  │  │  IdentityAuthentication.wxss
│  │  │  # 身份认证页面
│  │  │  # 用户可以在此页面进行身份认证
│  │  │  
│  │  ├─student
│  │  │      student.js
│  │  │      student.json
│  │  │      student.wxml
│  │  │      student.wxss
│  │  │      # 学生认证页面
│  │  │      # 学生用户可以在此页面进行身份认证
│  │  │      
│  │  └─teacher
│  │          teacher.js
│  │          teacher.json
│  │          teacher.wxml
│  │          teacher.wxss
│  │          # 教师认证页面
│  │          # 教师用户可以在此页面进行身份认证
│  │          
│  ├─login
│  │      login.js
│  │      login.json
│  │      login.wxml
│  │      login.wxss
│  │      # 登录页面
│  │      # 用户可以在此页面进行登录操作
│  │      
│  ├─message
│  │      message.js
│  │      message.json
│  │      message.wxml
│  │      message.wxss
│  │      # 消息页面
│  │      # 用户可以在此页面查看和管理消息
│  │      
│  ├─mp
│  │      mp.js
│  │      mp.json
│  │      mp.wxml
│  │      mp.wxss
│  │      # 用户发布的项目详情页面
│  │ 
│  │      
│  ├─myprojects
│  │      myprojects.js
│  │      myprojects.json
│  │      myprojects.wxml
│  │      myprojects.wxss
│  │      # 我的项目页面
│  │      # 用户可以在此页面查看和管理自己的项目
│  │      
│  ├─projectintro
│  │      projectintro.js
│  │      projectintro.json
│  │      projectintro.wxml
│  │      projectintro.wxss
│  │      # 项目介绍页面
│  │      # 显示项目的详细信息
│  │      
│  ├─publishsubject
│  │      publishsubject.js
│  │      publishsubject.json
│  │      publishsubject.wxml
│  │      publishsubject.wxss
│  │      # 发布项目页面
│  │      # 用户可以在此页面发布新项目
│  │      
│  ├─register
│  │      register.js
│  │      register.json
│  │      register.wxml
│  │      register.wxss
│  │      # 注册页面
│  │      # 用户可以在此页面进行注册操作
│  │      
│  ├─searchinfo
│  │      searchinfo.js
│  │      searchinfo.json
│  │      searchinfo.wxml
│  │      searchinfo.wxss
│  │      # 搜索页面
│  │      # 用户可以在此页面搜索项目信息
│  │      
│  └─user
│          user.js
│          user.json
│          user.wxml
│          user.wxss
│          # 用户页面
│          # 显示用户的个人信息和设置
│          
└─utils
        util.js
        # 工具模块
        # 包含一些通用的工具函数

单元测试

选用的测试工具：使用 jest 作为测试框架

使用步骤

1. 在项目中安装了 jest npm install --save-dev jest

2. 在项目根目录下创建一个 tests 文件夹，并在其中创建一个 homepage.test.js 文件。 在homepage.test.js文件中，编写以下测试代码

   // __tests__/homepage.test.js
   const wx = {
     cloud: {
       database: jest.fn().mockReturnValue({
         collection: jest.fn().mockReturnValue({
           orderBy: jest.fn().mockReturnThis(),
           limit: jest.fn().mockReturnThis(),
           get: jest.fn().mockImplementation(({ success, fail }) => {
             success({ data: [{ projectName: 'Test Project', uploadTime: new Date() }] });
           })
         })
       })
     },
     stopPullDownRefresh: jest.fn(),
     navigateTo: jest.fn()
   };
   
   global.wx = wx;
   
   const homepage = require('../pages/homepage/homepage.js');
   
   describe('homepage.js', () => {
     beforeEach(() => {
       homepage.setData = jest.fn();
     });
   
     test('loadProjects should load projects and set data', () => {
       homepage.loadProjects();
       expect(homepage.setData).toHaveBeenCalledWith({
         results: [{ projectName: 'Test Project', uploadTime: new Date() }],
         noResults: false
       });
       expect(wx.stopPullDownRefresh).toHaveBeenCalled();
     });
   
     test('loadLatestProject should load the latest project and set data', () => {
       homepage.loadLatestProject();
       expect(homepage.setData).toHaveBeenCalledWith({
         latestProjectName: 'Test Project'
       });
     });
   });
   

3. 在 package.json 文件中添加以下脚本

   "scripts": {
     "test": "jest"
   }
   

4. 运行测试 npm test

构造测试数据的思路以及未来应对策略

1. 覆盖常见情况：

   • 正常情况：测试函数在正常情况下的行为，例如数据库查询成功并返回预期数据。
   • 边界情况：测试函数在边界条件下的行为，例如数据库查询返回空数据或只有一条数据。
   • 异常情况：测试函数在异常情况下的行为，例如数据库查询失败或网络错误。

2. 模拟外部依赖：

   • 使用 jest.fn() 模拟外部依赖（如 wx 对象及其方法），确保测试环境与实际运行环境一致。

3. 验证函数行为：

   • 验证函数是否正确处理数据并更新页面状态。
   • 验证函数是否正确处理错误并输出错误信息。

4. 考虑未来扩展：

   • 编写灵活的测试代码，便于将来添加新的测试用例。
   • 使用描述性强的测试名称，便于测试人员理解测试目的。

给出Github的代码签入记录截图

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

模块异常：homepage首页的搜素框功能无法响应搜索 ，可以在数据库进行projectName的对比，但无法在首页显示搜索结果

解决方法：发现在homepage存在多个组件重叠，故无法正常显示搜索结果。在主页的搜索框功能中，新建跳转页面Searchifo，在此页面重新运行搜索功能代码，解决问题。

评价你的队友

结伴队友：102202113许煊宇

值得学习的地方:

1. 技术能力：他对JavaScript和相关框架（如WeChat小程序）的掌握非常熟练，能够快速解决各种技术难题。
2. 团队合作：他在团队合作中表现出色，能够积极沟通，分享自己的见解和经验，帮助团队成员共同进步。

需要改进的地方：

1. 代码质量：他编写的代码简洁、清晰、易于维护，我需要向他学习如何编写高质量的代码。
2. 问题解决能力：他在面对复杂问题时，总能冷静分析，找到有效的解决方案。我需要学习他这种解决问题的思路和方法。