软件工程第二次结对作业

这个作业属于哪个课程	https://edu.cnblogs.com/campus/fzu/SE2024
这个作业要求在哪里	https://edu.cnblogs.com/campus/fzu/SE2024/homework/13281
这个作业的目标	通过代码实现校园项目招募平台的设计
姓名及学号	伊晓 172209028
结对成员及	林伟宏 102202129
Github仓库地址	https://github.com/lin10-coding/102202129-172209028

一、具体分工

本项目的具体分工如下：

林伟宏同学：

前端开发：
- 负责首页、项目、发布模块页面布局与设计，包括导航栏、侧边栏、项目列表等关键UI组件。
- 实现交互效果，如按钮点击、下拉菜单、悬浮效果、动态页面跳转等。
- 构建项目的动态内容，确保用户能够查看和管理项目。
后端开发：
- 实现项目发布、成员管理、组队请求处理等后端逻辑。
接口开发：
- 负责与后端的接口对接，确保前端能够通过API获取和更新数据。
- 实现接口调用，如获取项目列表、发布项目、查看组队请求等。
- 处理与用户角色相关的权限逻辑，例如项目发布者和参与者不同的功能权限。
测试：
- 负责功能模块的测试，包括前后端接口的联调测试，确保各模块的稳定性。
- 编写测试用例，验证项目功能，如发布项目、组队请求、项目进度更新等。
- 使用自动化测试工具或手动测试，检查各类交互和功能是否按预期运行。

伊晓同学：

前端开发：

-负责我的、个人信息编辑等页面的实现。构建项目的动态内容，确保能够根据分类显示项目。
后端开发：
- 负责项目数据的存储与管理，设计并实现项目的API接口。
- 实现用户登录、组队审核和请求数据等后端逻辑。
- 使用Node.js或其他后端框架进行开发，并与前端的API接口无缝对接。

二、给出PSP表格

PSP 表格	JZ·hero校园合作小程序设计项目
项目名称	JZ·hero
开发者姓名	伊晓
开发者姓名	林伟宏
日期	2024年9月28日至2024年10月10日
任务/活动	估算(小时)
用户界面设计	16
前端开发
- WXML结构搭建	12
- WXSS样式编写	12
- JavaScript交互实现	24
后端开发
- 数据库设计	6
- 服务器逻辑编写	12
- API接口开发	2.5
功能测试	5.5
单元测试	5
博客撰写	5
总计	100

备注：

前端开发：构建用户通过微信小程序与之交互界面的过程。
后端开发：实现网页的具体功能，和前端实现数据交互。
单元测试：用户测试，各种请求能否实现。
博客撰写：将开发过程和结果详细分析呈现

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

代码实现思路

问题分析

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

项目的管理逻辑：如何根据用户身份（发布者或参与者）动态展示不同的管理权限。
项目进度的可视化管理：如何方便发布者更新项目进度，并让参与者清晰地查看项目进展。
项目的检索：用户如何根据不同需求迅速筛选寻找合适的项目。
实时聊天功能的实现：不同用户之间如何进行实时的聊天交流，提高沟通效率。

模块划分

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

首页模块：展示其他用户发布的项目和热点项目信息，方便用户查看不同项目的标题和内容。
项目模块：该模块展示自己参与的项目，管理项目成员；参与者可以查看成员列表，或退出项目。
消息模块：用户之间可以实时聊天沟通。
我的模块：用户的个人信息以及一些常用功能

技术实现

前端实现

HTML 结构搭建：

使用微信小程序的 WXML（WeiXin Markup Language）代替传统的 HTML 来构建页面结构。WXML 具有类似 HTML 的语法，但更适合小程序的开发环境。
根据设计好的界面，将页面划分为不同的组件，提高代码的可维护性和复用性。

CSS 样式编写：

微信小程序使用 WXSS（WeiXin Style Sheets）来定义页面的样式。WXSS 与 CSS 语法相似，但有一些特定的规则和限制。
可以使用小程序提供的内置组件和自定义组件来实现各种样式效果，确保小程序的外观与设计一致。

JavaScript 交互实现：

使用微信小程序的 JavaScript 语言来实现页面的交互逻辑。可以通过监听用户的操作事件，如点击、滑动等，来触发相应的函数和方法。
利用小程序提供的 API 接口，实现与后端服务器的数据交互、本地存储、分享等功能。
后端实现

数据库设计：

根据小程序的功能需求，设计合适的数据库结构。可以选择使用云数据库或者自建数据库服务器。
确定数据库表的字段和关系，确保数据的完整性和一致性。

服务器逻辑编写：

如果使用云开发，可以利用云函数来实现服务器端的逻辑。云函数是一种无服务器架构，可以快速部署和运行代码。
如果自建服务器，可以使用 Node.js、Python 等后端语言来编写服务器端的代码。实现数据的存储、查询、更新等操作，以及与前端的接口交互。

API 接口开发：

设计并开发小程序与后端服务器之间的 API 接口，确保数据的安全传输和正确处理。
使用合适的 HTTP 方法（如 GET、POST、PUT、DELETE）来实现不同的操作，如查询数据、添加数据、更新数据、删除数据等

流程图

代码片段：首页

<view class="container">
<van-search
  value="{{ value }}"
  placeholder="请输入搜索关键词"
  show-action
  bind:search="onSearch"
  bind:cancel="onCancel"
  style="margin-top: 60px;position:relative;left: 0;margin-right: 60px;width: 70%;"
/>
<view class="sw">
  <swiper
    autoplay="true" 
    interval="3000" 
    duration="1000"
    style="width: 95%; height: 30%;position: relative;left: 10px;"
    circular="true"
    indicator-dots="true"
    indicator-color="rgba(0, 0, 0, .3)"
    indicator-active-color="#000000"
  >
    <swiper-item>
      <image src="/images/slide1.jpg" class="slide-image" />
    </swiper-item>
    <swiper-item>
      <image src="/images/slide2.jpg" class="slide-image" />
    </swiper-item>
    <swiper-item>
      <image src="/images/slide3.jpg" class="slide-image" />
    </swiper-item>
  </swiper>

  <van-divider customStyle="color: #1989fa; border-color: #1989fa; font-size: 30px;" />

  <van-card
  
  tag="NO.1  "
  desc="我们先选择想要使用的aigc工具，输入具体需求。。。。。"
  title="如何用ai一天写完国庆的所有作业"
  thumb="https://tse3-mm.cn.bing.net/th/id/OIP-C.BsbnwLoTgeNhaZiC1-XUfAHaHa?w=173&h=180&c=7&r=0&o=5&pid=1.7"
  
>
  <view slot="footer">
    <van-button size="mini" style="margin: 20px;">   <van-icon name="chat" color="grey" size="30px" bind:click="todetail"/>                       </van-button>
    <van-button size="mini">                         <van-icon name="like" color="{{iconColor}}"  size="30px" bind:click="toggleIconColor"/>    </van-button>
  </view>
</van-card> <!--car1-->

<van-card
  
  tag="NO.2  "
  desc="我们先选择想要使用的aigc工具，输入具体需求。。。。。"
  title="如何用ai一天写完国庆的所有作业"
  thumb="https://tse3-mm.cn.bing.net/th/id/OIP-C.BsbnwLoTgeNhaZiC1-XUfAHaHa?w=173&h=180&c=7&r=0&o=5&pid=1.7"
>
  <view slot="footer">
    <van-button size="mini" style="margin: 20px;">   <van-icon name="chat" color="grey" size="30px" bind:click="todetail"/>                       </van-button>
    <van-button size="mini">                         <van-icon name="like" color="{{iconColor}}"  size="30px" bind:click="toggleIconColor"/>    </van-button>
  </view>
</van-card> <!--car2-->

<van-card
  
  tag="NO.3  "
  desc="我们先选择想要使用的aigc工具，输入具体需求。。。。。"
  title="如何用ai一天写完国庆的所有作业"
  thumb="https://tse3-mm.cn.bing.net/th/id/OIP-C.BsbnwLoTgeNhaZiC1-XUfAHaHa?w=173&h=180&c=7&r=0&o=5&pid=1.7"
>
  <view slot="footer">
    <van-button size="mini" style="margin: 20px;">   <van-icon name="chat" color="grey" size="30px" bind:click="todetail"/>                       </van-button>
    <van-button size="mini">                         <van-icon name="like" color="{{iconColor}}"  size="30px" bind:click="toggleIconColor"/>    </van-button>
  </view>
</van-card> <!--car3-->

</view>


<van-grid iconsize="px" style="width: 100%;position: fixed;bottom: 10px;" clickable>
  <van-grid-item icon="label" text="首页" url="/pages/index/index"/>
  <van-grid-item icon="cluster" text="项目" url="/pages/project/index"/>
  <van-grid-item icon="comment" text="消息" url="/pages/message/index"/>
  <van-grid-item icon="manager" text="我的" url="/pages/my/index"/>
</van-grid>


</view>

功能分析：

一、整体结构

这段代码是一个微信小程序的页面视图（WXML）部分的代码，整体结构由一个容器视图<view class="container">包裹，内部包含以下主要部分：

搜索栏：使用van-search组件实现搜索功能，用户可以输入搜索关键词进行搜索操作，具有搜索和取消按钮，可触发相应的事件。
轮播图：通过swiper组件实现轮播图效果，自动播放，间隔时间为 3000 毫秒，切换时长为 1000 毫秒，循环播放，有指示点显示当前位置，内部包含三张图片。
分割线：使用van-divider组件添加了一条分割线，用于页面布局的分隔。
卡片列表：包含三个van-card组件，每个卡片展示特定内容，如标题、描述、标签和缩略图等，底部有两个按钮，分别触发不同的事件。
底部导航栏：使用van-grid组件实现底部固定的导航栏，每个导航项有图标、文本和对应的页面链接，可点击切换页面。

二、具体功能点

搜索功能：
- 用户可以在搜索栏中输入关键词，通过bind:search="onSearch"绑定的事件函数onSearch进行搜索操作。
- 用户点击取消按钮时，会触发bind:cancel="onCancel"绑定的事件函数onCancel。
轮播图展示：
- 自动播放三张图片，吸引用户注意力，展示重要信息或广告内容。
卡片功能：
- 每个卡片展示特定的标题、描述和缩略图，提供了一种简洁的信息展示方式。
- 卡片底部的按钮可触发特定事件，如点击聊天图标可能会跳转到详情页面或进行聊天操作，点击喜欢图标可能会改变图标颜色或进行收藏等操作。
底部导航栏：
- 提供四个导航选项，分别指向不同的页面，方便用户快速切换页面。
- 每个导航项有图标和文本，增强了用户的识别度和操作便利性

代码片段：我的界面

<van-grid iconsize="px" style="width: 100%;position: fixed;bottom: 10px;" clickable>
  <van-grid-item icon="label" text="首页" url="/pages/index/index"/>
  <van-grid-item icon="cluster" text="项目" url="/pages/project/index"/>
  <van-grid-item icon="comment" text="消息" url="/pages/message/index"/>
  <van-grid-item icon="manager" text="我的" url="/pages/my/index"/>
</van-grid>


<van-image 
    class="my-button" 
    width="105" 
    height="40" 
    src="/images/bjzl2.png" 
    bind:click="toid"
    />  <!--原本的button 没法用-->
<van-icon class="touxiang" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="135px"/>
<van-divider class="xian1" borderColor="#1989fa"> </van-divider>

<view>
  <text class="text1">鉴证英雄</text>
  <text class="text2">贴子        关注        收藏        粉丝</text>
</view>
<van-divider class="xian2" borderColor="#1989fa" > </van-divider>
<view>
    <text class="text3">常用功能</text>>
</view>

<van-image
    round
    width="5rem"
    height="5rem"
    src="/images/4.jpg"
    class="anniu1"
/>


<van-icon name="setting" color="grey" size="90px" class="anniu2"/>


<van-image
    round
    width="5rem"
    height="5rem"
    src="/images/7.jpg"
    class="anniu3"
/>

<van-icon name="warning" color="grey" size="90px" class="anniu4"/>

<van-icon name="checked" color="grey" size="90px" class="anniu5"/>

<van-icon name="add" color="grey" size="90px" class="anniu6"/>

<view>
    <text class="text4">书架</text>
    <text class="text5">设置</text>
    <text class="text6">会员中心</text>
    <text class="text7">账号检测</text>
    <text class="text8">认证中心</text>
    <text class="text9">创建贴子</text>
</view>


<van-notice-bar 
    scrollable text="工农大团结！丢掉幻想，准备斗争！！！————毛主席" 
    color="red"
    background="#ecf9ff"  
/>
<view class="container">
<view class="sw1">
  <swiper
    autoplay="true" 
    interval="3000" 
    duration="1000"
    style="width: 95%; height: 100%;position: relative;left: 10px;"
    circular="true"
    indicator-dots="true"
    indicator-color="rgba(0, 0, 0, .3)"
    indicator-active-color="#000000"
  >
    <swiper-item>
      <image src="/images/m1.jpg" class="slide-image" />
    </swiper-item>
    <swiper-item>
      <image src="/images/m2.png" class="slide-image" />
    </swiper-item>
    <swiper-item>
      <image src="/images/m3.png" class="slide-image" />
    </swiper-item>
  </swiper>
</view>
</view>

功能分析：

一、整体结构与布局

这段代码主要用于构建一个微信小程序页面，页面结构分为多个部分，包括底部导航栏、按钮和图标、文本信息、轮播图以及通知栏等。整体被一个<view class="container">包裹，其中又包含了轮播图部分的<view class="sw1">。

二、具体功能点

底部导航栏：
- 使用van-grid组件创建了底部固定的导航栏，宽度为 100%，位置固定在页面底部距离底部 10 像素处。
- 导航栏可点击，每个导航项包含一个图标、文本和对应的页面链接，分别指向 “首页”“项目”“消息”“我的” 等页面，方便用户在不同页面之间快速切换。
按钮与图标：
- 有一个自定义的<van-image>元素作为按钮，通过bind:click="toid"绑定点击事件，可能用于执行特定的操作，如跳转到某个页面或触发其他功能。
- <van-icon>元素用于展示图标，其中一个图标通过 URL 地址指定，其他图标通过name属性指定图标名称，如 “setting”“warning” 等，这些图标分别具有不同的大小和颜色，可能代表不同的功能入口或状态。
文本信息：
- 包含多个<text>元素，用于展示不同的文本内容，如 “鉴证英雄”“贴子关注收藏粉丝”“常用功能” 以及具体的功能名称如 “书架”“设置”“会员中心” 等，为用户提供页面信息和功能说明。
轮播图：
- 通过<swiper>组件实现轮播图效果，自动播放，间隔时间为 3000 毫秒，切换时长为 1000 毫秒，循环播放，有指示点显示当前位置。
- 轮播图内部包含三个<swiper-item>，每个<swiper-item>中包含一个<image>元素，用于展示不同的图片。
通知栏：
- 使用van-notice-bar组件展示一条通知信息，通知内容为 “工农大团结！丢掉幻想，准备斗争！！！———— 毛主席”，颜色为红色，背景颜色为 “#ecf9ff”，通知栏可滚动显示通知内容，用于向用户传达重要信息。

代码片段：ID编辑界面

<!--pages/id/index.wxml-->
<van-grid iconsize="px" style="width: 100%;position: fixed;bottom: 10px;" clickable>
  <van-grid-item icon="label" text="首页" url="/pages/index/index"/>
  <van-grid-item icon="cluster" text="项目" url="/pages/project/index"/>
  <van-grid-item icon="comment" text="消息" url="/pages/message/index"/>
  <van-grid-item icon="manager" text="我的" url="/pages/my/index"/>
</van-grid>

<van-icon  size="150px" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" class="touxiang"/>
<view>
    <test class="test1">编辑个人资料</test>
    <test class="test2">用户名</test>
    <test class="test3">昵称</test>
    <test class="test4">站内ID</test>
    <test class="test5">个性签名</test>
    <test class="test6">专业</test>
    <test class="test7">年级</test>
    <test class="test8">性别</test>
    <test class="test9">技术简介</test>
</view>
<van-cell-group class="weizhi1">
    <van-field
    value="{{ value }}"
    placeholder="请输入用户名"
    border="{{ false }}"
    bind:change="onChange"
    />
</van-cell-group>
<van-cell-group class="weizhi2">
    <van-field
    value="{{ value }}"
    placeholder="请输入昵称"
    border="{{ false }}"
    bind:change="onChange"
    />
</van-cell-group>
<van-cell-group class="weizhi3">
  <van-field
    value="1145141919810"
    left-icon="contact"
    disabled
    border="{{ false }}"
  />
</van-cell-group>
<van-cell-group class="weizhi4">
    <van-field
    value="{{ value }}"
    placeholder="请输入个性签名"
    border="{{ false }}"
    bind:change="onChange"
    />
</van-cell-group>
<van-cell-group class="weizhi5">
    <van-field
    value="{{ value }}"
    placeholder="请输入专业"
    border="{{ false }}"
    bind:change="onChange"
    />
</van-cell-group>
<van-cell-group class="weizhi6">
    <van-field
    value="{{ value }}"
    placeholder="请输入年级"
    border="{{ false }}"
    bind:change="onChange"
    />
</van-cell-group>
<van-cell-group class="weizhi7">
    <van-field
    value="{{ value }}"
    placeholder="请输入性别"
    border="{{ false }}"
    bind:change="onChange"
    />
</van-cell-group>
<van-cell-group class="weizhi8">
    <van-field
    value="{{ value }}"
    placeholder="请输入技术简介"
    border="{{ false }}"
    bind:change="onChange"
    />
</van-cell-group>


  <van-icon 
    name="certificate" 
    class="mini-button" 
    size="40px" 
    bind:click="tomy" 
    color="purple" 
  />
  <view>
    <test class="test_keep" bind:tap="tomy">保存</test>
  </view>

功能分析：

一、整体结构与布局

这段代码是一个微信小程序页面的视图部分（WXML）。页面主要分为两部分，底部是固定的导航栏，上方是个人资料编辑区域。

二、具体功能点

底部导航栏：
- 使用van-grid组件创建了底部固定的导航栏，宽度为 100%，位置固定在页面底部距离底部 10 像素处。
- 导航栏可点击，每个导航项包含一个图标和文本，分别指向 “首页”“项目”“消息”“我的” 等页面，方便用户在不同页面之间快速切换。
个人资料编辑区域：
- 头像部分：通过一个van-icon组件展示头像图标，图标通过 URL 地址指定，大小为 150px。
- 标签部分：使用多个<test>标签展示不同的个人资料标签，如 “编辑个人资料”“用户名”“昵称”“站内 ID”“个性签名”“专业”“年级”“性别”“技术简介” 等，为用户提供编辑的引导信息。
- 输入框部分：
  - 使用多个van-field组件创建输入框，分别对应不同的个人资料项。用户可以在输入框中输入用户名、昵称、个性签名、专业、年级、性别和技术简介等信息。输入框没有边框，通过bind:change="onChange"绑定了输入内容改变时的事件处理函数，可能用于实时更新数据或进行数据验证。
  - 其中一个输入框有左侧图标 “contact”，并且是禁用状态，可能用于显示不可编辑的信息，如站内 ID。
- 保存按钮部分：
  - 通过一个van-icon组件创建了一个图标按钮，图标名称为 “certificate”，大小为 40px，颜色为紫色，点击时会触发bind:click="tomy"绑定的事件处理函数。
  - 还有一个<test>标签，文本为 “保存”，通过bind:tap="tomy"也绑定了与图标按钮相同的事件处理函数，用于保存用户编辑的个人资料

代码片段：消息界面

<view class="container" style="height: 180px; margin-bottom: 0;">
  <van-grid  column-num="3" style="width: 100%;position: relative;top: 40px;">
  <van-grid-item icon="comment-o" text="评论和@" info="22" />
  <van-grid-item icon="like-o" text="赞和收藏" info="99+" />
  <van-grid-item icon="fire-o" text="粉丝与浏览" info="9999+" />
</van-grid>
</view>

<view class="main" style="height: 600px;">
  <van-divider contentPosition="center">文本</van-divider>

  <van-card
  
  tag="3条未读 "
  desc="软工作业好难"
  title="好友A"
  thumb="https://tse3-mm.cn.bing.net/th/id/OIP-C.BsbnwLoTgeNhaZiC1-XUfAHaHa?w=173&h=180&c=7&r=0&o=5&pid=1.7"
  
>
  <view slot="footer">
    <van-button size="mini" style="margin: 20px;">   <van-icon name="chat" color="grey" size="30px" bind:click="tochat"/>                       </van-button>
  
  </view>
</van-card> <!--car1-->

<van-card
  
  tag="1条未读 "
  desc="我说了我没有开挂"
  title="伞兵一号卢本伟"
  thumb="https://tse3-mm.cn.bing.net/th/id/OIP-C.BsbnwLoTgeNhaZiC1-XUfAHaHa?w=173&h=180&c=7&r=0&o=5&pid=1.7"
  
>
  <view slot="footer">
    <van-button size="mini" style="margin: 20px;">   <van-icon name="chat" color="grey" size="30px" bind:click="tochat"/>                       </van-button>
  
  </view>
</van-card> <!--car1-->
<van-card
  
  tag="99条未读  "
  desc="我只喜欢relx，我是妈妈生的，雪豹闭嘴..."
  title="丁真"
  thumb="https://tse3-mm.cn.bing.net/th/id/OIP-C.BsbnwLoTgeNhaZiC1-XUfAHaHa?w=173&h=180&c=7&r=0&o=5&pid=1.7"
  
>
  <view slot="footer">
    <van-button size="mini" style="margin: 20px;">   <van-icon name="chat" color="grey" size="30px" bind:click="tochat"/>                       </van-button>
   
  </view>
</van-card> <!--car1-->

<van-card
  
  tag=" "
  desc="我想吃麦当劳"
  title="胖猫"
  thumb="https://tse3-mm.cn.bing.net/th/id/OIP-C.BsbnwLoTgeNhaZiC1-XUfAHaHa?w=173&h=180&c=7&r=0&o=5&pid=1.7"
  
>
  <view slot="footer">
    <van-button size="mini" style="margin: 20px;">   <van-icon name="chat" color="grey" size="30px" bind:click="tochat"/>                       </van-button>
    
  </view>
</van-card> <!--car1-->


</view>


<van-grid iconsize="px" style="width: 100%;position: fixed;bottom: 10px;" clickable>
  <van-grid-item icon="label" text="首页" url="/pages/index/index"/>
  <van-grid-item icon="cluster" text="项目" url="/pages/project/index"/>
  <van-grid-item icon="comment" text="消息" url="/pages/message/index"/>
  <van-grid-item icon="manager" text="我的" url="/pages/my/index"/>
</van-grid>

功能分析：

一、整体结构与布局

这段代码构建了一个微信小程序页面，页面主要分为三个部分：顶部的信息统计区域、中间的卡片列表区域和底部的固定导航栏。整体被一个<view>标签包裹，其中包含了两个主要的<view>容器，分别用于容纳不同的内容。

二、具体功能点

顶部信息统计区域：
- 使用一个<view class="container">容器来包裹这部分内容。
- 通过van-grid组件创建了一个三列的网格布局，宽度为 100%，位置相对页面顶部偏移 40 像素。
- 每个网格项包含一个图标、文本和信息数量提示，分别用于展示 “评论和 @”“赞和收藏”“粉丝与浏览” 的统计信息，方便用户快速了解自己账号的互动情况。
中间卡片列表区域：
- 使用一个<view class="main">容器来包裹这部分内容。
- 通过多个van-card组件创建了卡片列表，每个卡片展示特定的信息，包括标签、描述、标题和缩略图。
- 卡片底部有一个按钮，包含一个灰色的聊天图标，点击时会触发bind:click="tochat"绑定的事件处理函数，可能用于跳转到聊天页面或进行聊天相关的操作。
- 卡片中的信息包括未读消息数量提示、描述内容、发布者标题以及相同的缩略图，用于展示不同的消息或动态。
底部固定导航栏：
- 使用van-grid组件创建了底部固定的导航栏，宽度为 100%，位置固定在页面底部距离底部 10 像素处。
- 导航栏可点击，每个导航项包含一个图标和文本，分别指向 “首页”“项目”“消息”“我的” 等页面，方便用户在不同页面之间快速切换。

四、附加特点设计与展示

滑块内容展示

设计原因

该设计的独到之处在于，当其他用户进入小程序界面时，第一眼就是滑块所展示的内容，有利于项目发布者寻找志同道合的项目合作伙伴。包括在小程序的个人界面同意加入这一元素。

实现思路

一、页面结构（WXML）

创建一个名为container的
容器，用于整体布局和定位。
- 这个容器设置了宽度为 100%、高度为设备高度的 76%，背景颜色为淡蓝色（azure），并使用flexbox布局方式，通过设置justify-content和align-items属性使其内容在水平和垂直方向上居中显示。
在container容器内创建一个名为sw1的
容器。
- 这个容器用于容纳轮播图组件<swiper>。
- 轮播图组件<swiper>设置了自动播放、播放时间间隔、切换时长、循环播放、显示指示点等属性。
- 轮播图包含三个<swiper-item>，每个<swiper-item>中包含一个<image>元素，分别引用三张不同的图片（/images/m1.jpg、/images/m2.png、/images/m3.png），通过设置class="slide-image"应用特定样式。

二、样式设计（WXSS）

.sw1样式规则：
- 设置宽度和高度为 100%，确保占据整个父容器空间。
- 内边距为 0，不设置内边距。
- 相对定位，方便后续调整位置。
- 设置边框半径为 15 像素，使容器具有圆角效果。
- 通过设置margin-top属性将其定位在距离页面顶部 450 像素的位置，margin-left为 0 确保居左对齐。
.slide-image样式规则：
- 宽度和高度为 100%，使图片填满<swiper-item>容器。
- 边框半径为 15 像素，与sw1容器的圆角效果保持一致。
- margin-top为 0 像素，确保图片在垂直方向上不产生额外的偏移。
.container样式规则：
- 宽度为 100%，确保占据整个页面宽度。
- 高度为设备高度的 76%，控制整体布局的高度。
- 内边距为 0，不设置内边距。
- 背景颜色为淡蓝色，美化页面背景。
- 使用flexbox布局，使容器内的内容可以灵活布局。
- justify-content和align-items属性使容器内的内容在水平和垂直方向上居中对齐。

代码片段

<view class="container">
<view class="sw1">
  <swiper
    autoplay="true" 
    interval="3000" 
    duration="1000"
    style="width: 95%; height: 100%;position: relative;left: 10px;"
    circular="true"
    indicator-dots="true"
    indicator-color="rgba(0, 0, 0, .3)"
    indicator-active-color="#000000"
  >
    <swiper-item>
      <image src="/images/m1.jpg" class="slide-image" />
    </swiper-item>
    <swiper-item>
      <image src="/images/m2.png" class="slide-image" />
    </swiper-item>
    <swiper-item>
      <image src="/images/m3.png" class="slide-image" />
    </swiper-item>
  </swiper>
</view>
</view>
###############CSS###################
.sw1{
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
  border-radius: 15px;
  margin-top: 450px;
  margin-left: 0;

}
.slide-image {
  width: 100%;
  height: 100%;
  
  border-radius: 15px;
  margin-top: 0px;
}
.container {
  width: 100%;
  height: 76vh;
  padding: 0;
  display: flexbox;
  justify-content: center;
  background-color: azure;
  align-items: center;
}

成果展示

PS：图片内容仅展示效果，请勿无端联想

五、小程序功能展示

用户登录界面

用户注册界面

首页

项目

新建项目

消息

聊天界面

我的

编辑个人资料

六、在博客中给出目录说明和使用说明

目录说明

前端代码目录

C:\USERS\27002\WECHATPROJECTS\MINIAPP
├─images 								#存放项目中使用的图片资源。
├─miniprogramRoot 						#小程序的根目录之一
├─miniprogram_npm
│  └─@vant
│      └─weapp
│          ├─action-sheet 				#可能包含与动作面板相关的组件代码。
│          ├─area 						#可能用于处理地区选择相关功能的组件。
│          ├─button 					#存放按钮组件相关代码。
│          ├─calendar
│          │  └─components
│          │      ├─header 				#日历头部子组件相关代码。
│          │      └─month 				#日历月份子组件相关代码。
│          ├─card 						#卡片组件相关代码。
│          ├─cascader 					#级联选择组件相关代码。
│          ├─cell 						#列表单元格组件相关代码。
│          ├─cell-group 				#单元格组组件相关代码。
│          ├─checkbox 					#复选框组件相关代码。
│          ├─checkbox-group 			#复选框组组件相关代码。
│          ├─circle 					#圆形相关的组件或功能代码。
│          ├─col 						#列布局相关的组件代码。
│          ├─collapse 					#折叠面板组件相关代码。
│          ├─collapse-item 				#折叠面板子项组件相关代码。
│          ├─common
│          │  └─style
│          │      └─mixins 				#通用样式的混入（mixins）代码，用于共享样式规则。
│          ├─config-provider 			#配置提供器相关组件代码，用于统一管理配置。
│          ├─count-down 				#倒计时组件相关代码。
│          ├─datetime-picker 			#日期时间选择器组件相关代码。
│          ├─definitions 				#包含一些定义文件。
│          ├─dialog 					#对话框组件相关代码。
│          ├─divider 					#分割线组件相关代码。
│          ├─dropdown-item 				#下拉菜单子项组件相关代码。
│          ├─dropdown-menu 				#下拉菜单组件相关代码。
│          ├─empty 						#空状态提示相关组件代码。
│          ├─field 						#输入框相关组件代码。
│          ├─goods-action 				#可能与商品操作相关的组件代码。
│          ├─goods-action-button 		#商品操作按钮相关组件代码。
│          ├─goods-action-icon 			#商品操作图标相关组件代码。
│          ├─grid 						#网格布局组件相关代码。
│          ├─grid-item 					#网格项组件相关代码。
│          ├─icon 						#图标相关组件代码。
│          ├─image 						#图片组件相关代码。
│          ├─index-anchor	 			#索引锚点相关的组件代码。
│          ├─index-bar 					#索引栏相关组件代码。
│          ├─info 						#信息提示相关组件代码。
│          ├─loading 					#加载状态相关组件代码。
│          ├─mixins 					#混入代码，用于共享功能和样式。
│          ├─nav-bar 					#导航栏相关组件代码。
│          ├─notice-bar 				#通知栏相关组件代码。
│          ├─notify 					#通知相关组件代码。
│          ├─overlay 					#覆盖层相关组件代码。
│          ├─panel 						#面板相关组件代码。
│          ├─picker 					#选择器相关组件代码。
│          ├─picker-column 				#选择器列相关组件代码。
│          ├─popup 						#弹出层相关组件代码。
│          ├─progress 					#进度条相关组件代码。
│          ├─radio 						#单选框相关组件代码。
│          ├─radio-group 				#单选框组相关组件代码。
│          ├─rate 						#评分相关组件代码。
│          ├─row 						#行布局相关的组件代码。
│          ├─search 					#搜索组件相关代码。
│          ├─share-sheet 				#分享面板相关组件代码。
│          ├─sidebar 					#侧边栏相关组件代码。
│          ├─sidebar-item 				#侧边栏子项相关组件代码。
│          ├─skeleton 					#骨架屏相关组件代码。
│          ├─slider 					#滑块相关组件代码。
│          ├─stepper 					#步进器相关组件代码。
│          ├─steps 						#步骤条相关组件代码。
│          ├─sticky 					#粘性布局相关组件代码。
│          ├─submit-bar 				#提交栏相关组件代码。
│          ├─swipe-cell 				#滑动单元格相关组件代码。
│          ├─switch 					#开关相关组件代码。
│          ├─tab 						#标签页相关组件代码。
│          ├─tabbar 					#标签栏相关组件代码。
│          ├─tabbar-item 				#标签栏子项相关组件代码。
│          ├─tabs 						#标签页组相关组件代码。
│          ├─tag 						#标签相关组件代码。
│          ├─toast 						#吐司提示相关组件代码。
│          ├─transition 				#过渡效果相关组件代码。
│          ├─tree-select 				#树形选择器相关组件代码。
│          ├─uploader 					#文件上传相关组件代码。
│          └─wxs 						#包含小程序的 WXS（WeiXin Script）脚本文件。
├─node_modules
│  └─@vant
│      └─weapp
│          ├─dist 						#编译后的发布版本代码目录，包含各个组件的编译后文件。
│          └─lib 						#库的核心代码目录，包含各个组件的具体实现。
├─pages
│  ├─chat 								#聊天页面相关的代码。
│  ├─detail 							#详情页面相关的代码。
│  ├─id 								#ID相关的页面代码。
│  ├─index 								#小程序首页相关代码。
│  ├─logs 								#日志页面相关的代码。
│  ├─message 							#消息页面相关代码。
│  ├─my 								#我的页面相关代码。
│  ├─newproject 						#新建项目页面相关代码。
│  ├─project 							#项目页面相关代码。
│  └─register 							#注册页面相关代码。
└─utils 								#存放项目中使用的工具函数或通用的辅助代码。

后端代码

E:\FZU\rjgc\结对作业\第二次结对作业\sml
│
├── data/                          # 数据文件目录
│   ├── homeProjects.json          # 存储用户的项目数据
│   └── projects.json              # 存储项目的详细信息
├── modules/                  # 项目依赖库
├── homework2.exe                   # 可执行文件
├── package-lock.json               # 项目依赖的锁定文件
├── package.json                    # 项目依赖及脚本配置
└── server.js                       # 后端服务器文件

使用说明

PS：由于小程序大小问题，无法直接扫码展示，麻烦各位看官下载到本地进行测试。(免费网站的图片url加载一坤年加载不出来，nb的CDN又要大米，本人与结对伙伴财力有限，实在是有心无力，请谅解！)以及暂未申请到正式的APPID，无法使用云服务QAQ

1.从我们的Github仓库"https://github.com/lin10-coding/102202129-172209028"下载我们的小程序源代码，进行解压缩。

2.下载微信开发者工具，建议下载Windows64稳定版（下载地址：微信开发者工具）

3.配置npm所需环境（如果您已经配置完成，即可立即测试）

下载安装node.js,建议下载长期支持版的Windows安装包(下载地址：node.js)
进入刚刚的安装目录下（一般为“nodejs”文件夹内），配置建立两个文件夹node_cache和node_global
在安装目录打开命令行窗口
配置文件路径 npm config set prefix “\node_global”
配置缓存路径 npm config set cache “\node_cache”
利用淘宝镜像，下载速度更快 npm config set registry=http://registry.npm.taobao.org
检查是否配置好npm config list
进入计算机的高级系统设置检查
高级系统设置->环境变量->PATH 检查node.js是否已经配置完成

4.在微信开发者工具中选择“导入项目”，并选择导入刚刚解压缩完成的小程序文件（miniapp）。

初始化npm
鼠标右键选择“在外部终端窗口中打开”，输入初始化代码npm init -y
安装npm
搜索cmd，选择“以管理员身份运行”，并且进入小程序文件所在路径（cd 小程序文件路径）
进入VantWeapp网页（网页链接：VantWeapp-快速上手）
复制步骤一通过npm安装中的“通过 npm 安装”代码 npm i @vant/weapp -S --production至cmd中，回车。
在微信开发者工具中左上角的工具内选择构建npm

5.开始测试

如果对配置npm仍有疑惑，可以参考下面这个视频7分钟学会node.js搭建以及在微信小程序当中使用npm构建vantweapp
同时附上我们的联系方式：林伟宏2979399249@qq.com 伊晓2700283566@qq.com

七、单元测试

我们主要使用jest对各类模块进行了单元测试，具体编写了如下.test.js文件，同时由于篇幅问题，仅附上项目界面的测试代码，具体可见github：

测试用例

E:\FZU\rjgc\结对作业\第二次结对作业\tests
│
├── chat.test.js                 # 测试聊天功能
├── detail.test.js               # 测试详情功能
├── id.test.js             		 # 测试个人信息功能
├── index.test.js                # 测试首页界面
├── logs.test.js                 # 测试登录界面
├── message.test.js              # 测试消息功能
├── newproject.test.js           # 测试新建项目
└── project.test.js              # 测试项目

测试代码

const { shallowMount } = require('@vue/test-utils');
const NewProjectPageComponent = require('./newProjectPage.wxml');

describe('New Project Page Component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallowMount(NewProjectPageComponent);
  });

  afterEach(() => {
    wrapper.destroy();
  });

  it('should render navbar correctly', () => {
    const navbar = wrapper.find('.top van-nav-bar');
    expect(navbar.exists()).toBe(true);
    expect(navbar.attributes('title')).toBe('新建项目');
    expect(navbar.attributes('left-text')).toBe('返回');
    expect(navbar.attributes('right-text')).toBe('按钮');
    expect(navbar.attributes('left-arrow')).toBeTruthy();
    expect(navbar.attributes('bind:click-left')).toBe('onBack');
    expect(navbar.attributes('bind:click-right')).toBe('onClickRight');
  });

  it('should render project name input field correctly', () => {
    const projectNameField = wrapper.find('.container van-cell-group van-field[label="项目名称"]');
    expect(projectNameField.exists()).toBe(true);
    expect(projectNameField.attributes('placeholder')).toBe('请输入项目名称');
    expect(projectNameField.attributes('border')).toBe('true');
    expect(projectNameField.attributes('bind:change')).toBe('onChange');
  });

  it('should render project introduction and requirement input fields correctly', () => {
    const projectIntroductionField = wrapper.find('.container van-cell-group van-field[label="项目简介"]');
    expect(projectIntroductionField.exists()).toBe(true);
    expect(projectIntroductionField.attributes('value')).toBe(wrapper.vm.username);
    expect(projectIntroductionField.attributes('required')).toBeTruthy();
    expect(projectIntroductionField.attributes('clearable')).toBeTruthy();
    expect(projectIntroductionField.attributes('icon')).toBe('question-o');
    expect(projectIntroductionField.attributes('placeholder')).toBe('请输入项目简介');
    expect(projectIntroductionField.attributes('bind:click-icon')).toBe('onClickIcon');

    const projectRequirementField = wrapper.find('.container van-cell-group van-field[label="项目需求"]');
    expect(projectRequirementField.exists()).toBe(true);
    expect(projectRequirementField.attributes('value')).toBe(wrapper.vm.password);
    expect(projectRequirementField.attributes('type')).toBe('password');
    expect(projectRequirementField.attributes('placeholder')).toBe('请输入项目需求');
    expect(projectRequirementField.attributes('required')).toBeTruthy();
    expect(projectRequirementField.attributes('border')).toBe('false');
  });

  it('should render checkboxes correctly', () => {
    const checkboxes = wrapper.find('.container van-checkbox-group');
    expect(checkboxes.exists()).toBe(true);
    expect(checkboxes.find('van-checkbox[name="a"]').text()).toBe('前端');
    expect(checkboxes.find('van-checkbox[name="b"]').text()).toBe('后端');
    expect(checkboxes.find('van-checkbox[name="c"]').text()).toBe('美工');
    expect(checkboxes.attributes('bind:change')).toBe('onChange');
  });

  it('should render steppers correctly', () => {
    const steppers = wrapper.findAll('.container van-stepper');
    expect(steppers.length).toBe(3);
    steppers.forEach(stepper => {
      expect(stepper.attributes('value')).toBe('1');
      expect(stepper.attributes('bind:change')).toBe('onChange');
    });
  });

  it('should render friends icon correctly', () => {
    const friendsIcon = wrapper.find('.container van-icon[name="friends-o"]');
    expect(friendsIcon.exists()).toBe(true);
    expect(friendsIcon.attributes('size')).toBe('70px');
    expect(friendsIcon.element.style.top).toBe('-160px');
    expect(friendsIcon.element.style.left).toBe('-150px');
  });

  it('should render date picker cell correctly', () => {
    const datePickerCell = wrapper.find('.container van-cell[title="选择项目时间区间"]');
    expect(datePickerCell.exists()).toBe(true);
    expect(datePickerCell.attributes('value')).toBe(wrapper.vm.date);
    expect(datePickerCell.attributes('bind:click')).toBe('onDisplay');
  });

  it('should render calendar correctly', () => {
    const calendar = wrapper.find('.container van-calendar');
    expect(calendar.exists()).toBe(true);
    expect(calendar.attributes('show')).toBe(wrapper.vm.show);
    expect(calendar.attributes('type')).toBe('range');
    expect(calendar.attributes('bind:close')).toBe('onClose');
    expect(calendar.attributes('bind:confirm')).toBe('onConfirm');
  });

  it('should render uploader correctly', () => {
    const uploader = wrapper.find('.mid van-uploader');
    expect(uploader.exists()).toBe(true);
    expect(uploader.attributes('file-list')).toBe(wrapper.vm.fileList);
    expect(uploader.attributes('bind:after-read')).toBe('afterRead');
  });

  it('should render upgrade icon and text correctly', () => {
    const upgradeIcon = wrapper.find('.mid van-icon[name="upgrade"]');
    expect(upgradeIcon.exists()).toBe(true);
    expect(upgradeIcon.attributes('size')).toBe('80px');
    expect(upgradeIcon.element.style.top).toBe('-120px');
    expect(upgradeIcon.element.style.left).toBe('170px');

    const createText = wrapper.find('.mid.text:contains("创建并发布项目")');
    expect(createText.exists()).toBe(true);
    expect(createText.text()).toBe('创建并发布项目');
  });
});

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

PS：先前一起编写代码时并未上传，编写完成后统一上传至github并进行调试，测试组的同学请见谅QAQ

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

开发工具无法正常运行

异常描述：
在微信小程序开发者工具中编写完毕一段代码进行编译测试时，出现没有响应的情况
解决方法：
重启解决90%的问题，直接重启微信小程序开发者工具。

数据库连接异常

异常描述：
遭遇数据库连接失败的问题，进而导致无法读取后端数据。
解决方法：
首先，查验数据库服务是否处于启动状态。
接着，确认数据库的数据格式是否准确无误。
最后，确定前端相应位置的请求路径是否正确。

API 的请求参数无效

异常描述：
API 请求的参数与预期不符，致使服务器端无法正确进行处理。
解决方法：
务必确保前端发送的请求参数符合后端 API 的要求。
可在后端输出结果处进行参数验证。

十、评价你的队友

对伙伴的评价：
在过去的几周里，我与我的结对伙伴一起开发我们的JZ·hero校园项目合作小程序。以下是我的评价：
技术能力：
在网页前后端开发中，我的队友展现出卓越的能力。他可以迅速攻克复杂的技术难题，有力地保障我们的 API 兼具高效性与安全性。
团队合作：
我们之间沟通顺畅、协作默契，有力地推动项目按计划进展。国庆期间，我们通过线上腾讯会议积极展开讨论，踊跃提出建设性意见。
责任感：
队友对自身工作高度负责，即便面临困境，也绝不推卸责任。他总是能准时完成任务，且质量一流。
适应能力：
开发过程中，需求频繁变动，但队友总能迅速适应这些变化，及时调整工作计划。面对紧急的 bug 修复任务，他能够沉着应对，快速找出解决方案。
个人品质：
我的队友十分友善且乐于助人，无论在工作还是生活中皆是如此。他始终保持乐观向上的态度，即便身处压力之下，也能维持积极的心态。
对自己的评价：
真的是安禄山进长安————唐完了。果然一如先前所料，一些功能对于现在的我还是太难去实现了，真的是走了邪路了！！！

posted @ 2024-10-10 21:21 Yx114514 阅读(19) 评论(1) 编辑收藏举报

yixiao114514

软件工程第二次结对作业

一、具体分工

林伟宏同学：

伊晓同学：

二、给出PSP表格

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

代码实现思路

问题分析

模块划分

技术实现

流程图

代码片段：首页

功能分析：

代码片段：我的界面

功能分析：

代码片段：ID编辑界面

功能分析：

代码片段：消息界面

功能分析：

四、附加特点设计与展示

滑块内容展示

设计原因

实现思路

代码片段

成果展示

PS：图片内容仅展示效果，请勿无端联想

五、小程序功能展示

用户登录界面

用户注册界面

首页

项目

新建项目

消息

聊天界面

我的

编辑个人资料

六、在博客中给出目录说明和使用说明

目录说明

前端代码目录

后端代码

使用说明

1.从我们的Github仓库"https://github.com/lin10-coding/102202129-172209028"下载我们的小程序源代码，进行解压缩。

2.下载微信开发者工具，建议下载Windows64稳定版（下载地址：微信开发者工具）

3.配置npm所需环境（如果您已经配置完成，即可立即测试）

4.在微信开发者工具中选择“导入项目”，并选择导入刚刚解压缩完成的小程序文件（miniapp）。

5.开始测试

七、单元测试

测试用例

测试代码

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

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

开发工具无法正常运行

数据库连接异常

API 的请求参数无效

十、评价你的队友

公告