| 这个作业属于哪个课程 | 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属性使其内容在水平和垂直方向上居中显示。
- 这个容器设置了宽度为 100%、高度为设备高度的 76%，背景颜色为淡蓝色（
- 在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 像素，确保图片在垂直方向上不产生额外的偏移。
- 宽度和高度为 100%，使图片填满
- .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 修复任务，他能够沉着应对，快速找出解决方案。
个人品质：
我的队友十分友善且乐于助人，无论在工作还是生活中皆是如此。他始终保持乐观向上的态度，即便身处压力之下，也能维持积极的心态。 - 对自己的评价：
真的是安禄山进长安————唐完了。果然一如先前所料，一些功能对于现在的我还是太难去实现了，真的是走了邪路了！！！
