基于鸿蒙的倾心家教移动应用开发

第一章 案例简介 1
  1.1案例背景
  1.2案例简介
  1.2.1 功能简介
  1.2.2 开发工具
  1.2.2 开发技能
  第二章 需求分析
  2.1 业务需求
  2.2 功能需求
  2.3非功能性需求
  第三章 项目计划
  3.1 总体架构
  3.1.1 用例图
  3.1.2 总体架构图
  3.2数据库计划
  3.2.1 user表(用户表)
  3.2.2 teacher表(教师表)
  3.2.3 suggestion表(评价表)
  3.2.4 wallet表(钱包表)
  3.2.5 coupon表(优惠券表)
  3.3界面计划
  3.3.1登录、注册、忘记暗码页面计划
  3.3.2主页面计划
  3.3.3 消息页面计划
  3.3.4预约老师页面计划
  3.3.5个人信息页面计划
  第四章 实现与测试
  4.1 HarmonyOS客户端实现
  4.1.1项目设置
  4.1.2 axios的二次封装与调用
  4.1.3 首页UI计划
  4.1.4 教师UI计划
  4.1.5 消息发起UI计划
  4.1.6 MyPage UI计划
  4.2 SpringBoot服务端实现
  4.2.1 ResultVo类（HTTP协议中的数据包）
  4.2.2 实体类
  4.2.3 Mapper层
  4.2.4 Service层
  4.2.5 api接口
   
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   

  第一章案例分析

  1.1案例背景

  在当前教育领域，传统培训机构正面对亘古未有的挑衅。成本的不停攀升使得线下教育模式蒙受着巨大压力，同时，这些传统模式还存在诸多问题，如时间与地点的限定、师资气力的不均衡以及无法满足个性化教育需求等。与此同时，在线教育平台以其灵活性和多样性，为用户提供了广泛的选择，满足了差异用户的个性化需求，低沉了教育成本，并提高了教育资源的可及性。

  随着中国国际地位的提拔和科技的迅猛发展，华为推出了自主研发的鸿蒙操纵系统。在国家政策的大力支持下，鸿蒙系统在中国市场的发展远景十分广阔。为了应对教育资源不均和传统教育模式的局限，我们开发了一款基于鸿蒙系统的在线家教平台应用——“倾心家教”。该应用致力于帮助门生克服教育资源不足的逆境，提供更便捷、高效的学习途径。

  1.2案例简介

  1.2.1 功能简介

  本项目采用前后端分离的开发模式，并遵循客户端/服务器（C/S）架构。这种架构允许前端界面与后端服务独立开发和部署，提高了系统的灵活性和可维护性。以下是应用的主要功能：

  

• 查找和预约教师：用户可以通过应用界面方便地搜刮和预约教师，满足个性化的学习需求。
  
• 教辅资料购买：应用集成了教辅资料的电子商城，用户可以直接购买所需的学习质料。
  
• 评价系统：课后，用户可以对教师的授课质量举行评价，并提出改进发起，帮助提拔讲授质量。
  
• 消息日程规划：用户可以创建和管理个人学习筹划，有效安排学习时间，提高学习效率。
  

  别的，应用还提供了用户个人空间，用户可以在此检察自己的订单信息、钱包余额、积分和优惠券等，实现了一个全方位的在线家教服务平台。

  1.2.2 开发工具

  数据库：使用MySQL作为主要的数据库管理系统，存储用户信息、教师信息、评价数据等。
  服务端：IntelliJ IDEA 2020.2.3 x64，
  前端：使用DevEco Studio，这是华为为鸿蒙系统开发提供的集成开发情况，支持ArkTS和ArkUI等开发技能。
  服务器：部署在阿里云服务器上，确保了应用的高可用性和稳固性。

  1.2.2 开发技能

  语言：服务端主要使用Java语言，前端则使用ArkTS语言。
  技能框架：服务端采用SpringBoot框架，联合MyBatis举行数据库操纵，以及Swagger举行API文档的自动天生和管理。别的，还整合了SpringCloud微服务框架，以支持服务的扩展和维护。前端使用ArkTS和ArkUI举行应用的界面开发，这些技能提供了丰富的UI组件和便捷的开发API，帮助开发者快速构建高质量的鸿蒙应用。
  项目部署采用Docker容器化技能举行部署，这不但简化了情况设置，还提高了应用的移植性和可伸缩性。[4]
  
  
  第二章需求分析

  
  2.1 业务需求

  倾心家教系统可以提供更加智能化、便捷化、安全的网上学习情况，帮助门生更好的管理自己的学习筹划和提拔学习质量。与此同时，倾心家教系统可以更好的根据自己个人情况灵活的预约老师，同步在线交换问题。根据自己水平购买相对应的题目套餐，订定属于自己的学习筹划等。
  2.2 功能需求

  1、老师预约：倾心家教系统可以让用户根据各种条件准确的查询到老师，点开老师可以看到老师的具体信息，包括老师的个人信息和评价以及他的可预约时间段以及每小时的价格。如果对该老师满意就可以举行预约，对已预约的老师也可以举行取消预约。
  2、图书购买：倾心家教系统可以让用户购买必要讲授配套的册本，册本可以举行购买与退换，另外购买册本的同时可以用奖学券来抵消部门代价。
  3、用户评价：倾心家教系统可以让用户对教师举行中肯的评价，同时用户可以看到老师全部的被评价条目以供参考，另外也可以看到自己对全部老师的全部评价。
  4、倾心家教系统可以让用户检察个人筹划，并且可以订定或者删除个人筹划来规划自己的学习时间。
  5、倾心家教系统可以让用户拥有自己私有的个人空间。可以查询到个人账户以及优惠券信息，在个人空间可以查询到自己全部的信息，包括图书订单、教师预约、个人发起、个人筹划等。
  2.3非功能性需求

  

• 同等的用户体验：倾心家教系统提供了同等、直观且易用的界面和操纵方式，以确保用户在差异年龄和时间段体验到同等的服务。
  
• 系统可靠和稳固：倾心家教系统系统运行稳固，可以方便用户在任何时间都能够轻松的预约老师举行学习。
  
• 高度的安全性：倾心家教系统应该提供安全功能，以确保系统运行的安全性，以及用户家居信息的隐私安全。
  
• 扩展性和可维护性：倾心家教系统支持系统的可拓展性和可维护性，包管在系统必要升级、扩展时不会影响原有功能，以及在出现问题时能够快速的举行修复。
  

  
  第三章 项目计划

  3.1 总体架构

  3.1.1 用例图 

  本应用要实现的功能包括教师的查询、良好教师在线显示、App所提供的课程、教师查询预约、发起反馈以及个人信息管理等。为了更好理解,接下来将通过一个用例图来说明，如图3.1所示。
  

  

图 3.1  实体分析用例图

  
  3.1.2 总体架构图

  系统采用C/S架构（Client/Server客户端/服务器）举行开发，C/S架构是通过提供查询相应而不是总文件传输来减少了网络流量。它允许多用户通过GUI前端更新到共享数据库，在客户端和服务器之间通讯一般采用远程调用（RPC）或标准查询语言（SQL）语句。由于客户端实现与服务器的直接相连，没有中心环节，因此相应速率较快。如图3.2所示。
  

  

  

图 3.2 C/S架构图

  其中客户端依靠服务器来获取资源。服务端和数据库部署在云服务器上，用户通过操纵APP用户端，触发数据交互事件，向服务器请求数据，服务器收到请求数据操纵后对数据库信息举行操纵并返回给客户端举行展示，如图3.3所示。
  
  

  

  

图 3.3 总体架构图

  
  
  
  
  3.2数据库计划

  3.2.1 user表(用户表)

  用户表存储了用户基本信息，如表3.1所示
  

表3.1 用户数据存储表

  

序号	字段名	范例	长度	允许空	主键
1	login_id	bigint		否	是
2	login_username	varchar	255	否	否
3	login_password	varchar	255	否	否
4	create_time	datetime		否	否
5	update_time	datetime		否	否
6	user_teacher	varchar	255	否	否

  
   

• longin_id:主键
  
• longin_username:用户登录账户
  
• login_password:用户登录暗码
  
• create_time:创建时间
  
• update_time:更新时间
  
• user_teacher:用户教师姓名
  

  
   3.2.2 teacher表(教师表)

  教师表包罗了教师相关的个人信息以及空闲状态等，如表3.2所示
  

表3.2 教师数据表

  

序号	字段名	范例	长度	允许空	主键
1	id	bigint		否	是
2	name	varchar	255	否	否
3	phone	varchar	255	否	否
4	subject	varchar	255	否	否
5	start_time	varchar	255	否	否
6	end_time	varchar	255	否	否
7	describe	varchar	255	否	否
8	price	varchar	255	否	否
9	state	varchar	255	否	否
10	icon	varchar	255	否	否

  
   

• id：主键id
  
• name：老师姓名
  
• phone：老师手机号码
  
• subject：老师所教科目
  
• starttime:：老师预约开始时间
  
• endtime：老师预约结束时间
  
• describe：老师的自我形貌
  
• price：老师每小时的收费
  
• state：老师如今的状态
  
• icon：老师的头像地点
  

  
   3.2.3 suggestion表(评价表)

  评价表包罗了与发起有关的信息，如表3.3所示
  

表3.3发起信息存储表

  

序号	字段名	范例	长度	允许空	主键
1	id	bigint		否	是
2	suggestion	varchar	255	否	否
3	username	varchar	255	否	否
4	theme	varchar	255	否	否
5	subject	varchar	255	否	否

  
   

• id:主键id
  
• suggestion：用户的发起或评价
  
• username：用户名
  
• theme：评价主题
  
• subject：针对的科目
  

  

3.2.4 wallet表(钱包表)

钱包表包罗了用户账户余额的相关信息，如表3.4所示

表3.4钱包数据存储表

序号	字段名	范例	长度	允许空	主键
1	id	bigint		否	是
2	username	varchar	255	否	否
3	count	varchar	255	否	否

• id:主键id
  
• username：用户手机号码
  
• count：账户余额
  

3.2.5 coupon表(优惠券表)

优惠券表包罗了用户优惠券的相关信息，如表3.5所示

表3.5钱包数据存储表

序号	字段名	范例	长度	允许空	主键
1	id	bigint		否	是
2	value	varchar	255	否	否
3	min	varchar	255	否	否
4	username	varchar	255	否	否

• id:主键id
  
• value：优惠券面额
  
• min：使用必要达到的金额
  
• username：用户
  

3.3界面计划

3.3.1登录、注册、忘记暗码页面计划

     

图 3.4 登录、注册、忘记暗码界面计划

登录页面：

• 作为应用的入口，登录页面提供了用户登录的接口。
  
• 用户输入账号和暗码后，点击“登录”按钮，系统会验证用户信息。乐成则跳转至主页面，失败则显示错误提示。
  
• 页面提供“注册”链接，用户点击后可跳转至注册页面。
  
• 同时设有“忘记暗码”选项，用户点击后可跳转至忘记暗码页面。
  

忘记暗码页面：

• 点击“获取验证码”获取6位随机字符打印在按钮上。
  
• 点击“更改暗码”，乐成则跳回登录页面，失败则打印提示信息
  

注册页面：

• &bsp;用户填写必要的注册信息，包括账号、暗码和验证码。
  
• &bsp;点击“注册”按钮后，系统会验证信息并完成注册。乐成会有提示信息，失败则显示具体错误。
  
• &bsp;提供“返回登录”功能，用户点击后可返回登录页面。
  

3.3.2主页面计划

 

 

图 3.5 首页界面计划

首页：
首页展示100元代金券，用户可以选择领取或忽略。包罗广告轮播和功能模块入口，如教师列表、图书商城、消息中心等。
教师界面：
展示在线教师列表，包括教师的经历、课程、收费标准和状态。用户可以点击检察教师详情，并举行预约操纵。
图书界面：
展示各种教辅资料和对应代价。用户可以欣赏图书信息，并举行购买。
消息界面：
显示预约老师的消息关照。用户可以提出建媾和反馈。
我的界面：
提供我的订单、我的钱包、优惠券、我的老师、我的评价等功能。用户可以管理个人信息和检察汗青记载。
3.3.3 消息页面计划

 

图 3.6 消息界面计划

消息关照页面：
展示预约老师的消息关照，用户点击消息后，可以与老师举行聊天，获取课程预备信息。发起反馈页面：
用户可以选择科目，输入主题，并填写发起。提交后，系统会保存用户的反馈。
3.3.4预约老师页面计划

      

图 3.7 老师预约界面计划

教师详情页面：
展示当前老师的具体信息，包括姓名、科目、电话、代价、状态等。用户可以选择预约时间，系统会自动检测可用优惠券，并盘算优惠后的代价。
预约操纵页面：
用户选择上课时间后，点击“确定”按钮完成预约。系统会提示预约乐成或显示错误信息。
3.3.5个人信息页面计划

图 3.8 个人中心界面计划

我的老师页面：
展示用户预约的教师信息，比方：老师姓名，讲授科目，联系电话，讲授经历以及上课开始时间和结束时间等。
我的钱包：
显示用户账户名称以及钱包余额信息。
我的订单页面：
展示用户的订单信息，如订单编号、预约老师的姓名、订单状态等。
我的优惠券页面：
展示用户可用的优惠券信息。
我的建媾和评价页面：
展示用户的汗青评价和发起。


四、实现与测试


4.1 HarmonyOS客户端实现

4.1.1项目设置

• 安装@kit.NetworkKit模块
  

在项目目次下运行以下命令，举行安装：
npm install @kit.NetworkKit
@kit.NetworkKit是一个专门用于网络请求的模块，它提供了一组工具和API，使得开发者能够更轻易地在应用中实现网络通讯功能。模块包罗了一系列封装好的网络请求方法，如发送HTTP请求、处理请求相应等，以及一些网络相关的辅助功能。

• 安装 @ohos/axios 模块
  

在项目目次下运行以下命令，举行安装：
ohpm install @ohos/axios
Axios 是一个著名的基于 JavaScript 的开源库，用于欣赏器和 Node.js 等情况中发送 HTTP 请求。它支持 Promise API，并且可以处理 XMLHttpRequests 和 Fetch API 背后的复杂性，为开发者提供了一种简洁易用的方式来实现 AJAX（Asynchronous JavaScript and XML）请求。[3]
@ohos/axios是基于axios库举行适配，使其可以运行在OpenHarmony中的一个发送网络请求库，并且本库沿用axios库现有用法和特性，使其更加适合于鸿蒙项目的开发。@ohos/axios 模块可以理解为是对官方HTTP API的一个封装或者扩展，它提供了一种更高级别的抽象和便利性，可能包罗了更多的功能特性，比如自动转换数据格式、错误处理、拦截器机制以及对于Promise的良好支持等，这些都是为了简化开发流程，提高开发效率。

• 添加网络权限
  

在项目中的module.json文件中添加：

图 4.1 module文件修改

ohos.permission.INTERNET 用于网络访问。
ohos.permission.GET_NETWORK_INFO 用于获取网络信息。
权限的设置是为了确保应用在举行网络相关操纵时，系统能够提供得当的访问控制和权限检查。
4.1.2 axios的二次封装与调用

第一次封装，主要设置baseurl和请求拦截器、相应拦截器等。第一次封装实现了一个基于 Axios 的 HTTP 请求封装类，简化了与后端服务器的通讯。它提供了常见的 HTTP 请求方法（GET、POST、PUT、DELETE）并支持请求和相应拦截。在请求拦截中，自动在请求头中添加 token，实现身份验证功能；在相应拦截中，根据 HTTP 错误码（如 400、401、500 等）返回差异的错误提示，便于快速定位问题。通过设置 baseURL 和请求超时时间，能够灵活顺应差异情况。别的，使用 TypeScript 强化了范例安全，确保返回数据的结构符合预期[3]。

图 4.2 axios封装

第二次封装，主要封装了各个请求方法，比如get和post方法，用于请求各种数据，二次封装实现了多个 API 接口函数，用于处理用户、教师、优惠券、建媾和钱包等相关功能的请求。它基于封装好的 http 实例，通过差异的 HTTP 请求方法（如 get 和 post）与后端服务器举行交互。具体功能包括用户注册、登录、暗码获取、发起提交、教师预约、优惠券管理以及用户钱包操纵等。
每个接口函数都返回一个 Promise 对象，方便在调用时举行异步操纵。比如 register 函数用于用户注册，getPassword 用于根据用户名获取用户暗码，`getTeacherList` 用于获取教师列表，setTeacherState 用于设置教师的预约状态，getUserCoupon用于获取用户的优惠券等。通过这些 API，前端应用能够实现用户注册、登录、教师管理、优惠券发放与查询等核心功能。如下图：

图 4.3 axios二次封装

4.1.3 首页UI计划

首页主要实现了一个基于 Tab 导航栏的多页面切换功能，计划思绪围绕着界面结构、数据传递、Tab 切换控制和用户体验睁开。起首，应用使用了 Tabs 组件作为 Tab 导航栏，将五个页面（首页、老师、图书、消息和我的页面）分别与差异的 Tab 页签举行绑定，通过 TabsController 控制当前选中的 Tab 索引。每个 Tab 页签由 TabBuilder 动态天生，包罗了选中和未选中的图标以及标题，确保用户在差异页面间切换时有明确的视觉提示。
使用 @State 装饰器管理页面的状态举行数据传递，界说了多个状态变量，如 message、account、password 和 currentIndex，这些状态变量帮助控制页面标题、存储用户信息并管理当前选中的 Tab 索引。为了实现页面内容的动态切换，TabContent 组件根据 currentIndex 的值加载差异的页面组件，如 HomePage、TeacherPage 等，包管用户的每次 Tab 切换都能看到对应的页面内容。
界面计划上，页面通过 Scroll () 包裹了一个垂直排列的 Column()，其中包罗多个组件：SwiperExample（轮播图）、Row（导航）、ListExample（列表）。这些组件分别负责展示页面的差异部门，确保了页面内容结构清楚且易于扩展。用户在页面中可以看到动态的内容展示，如滚动的图片、快速跳转的导航以及数据列表等，提拔用户体验。同时实现了一个弹窗用于领取优惠券的功能。通过 CustomDialogController 控制弹窗的显示和关闭，弹窗本身使用@CustomDialog 装饰器举行实现。
结果如下：

4.1.4 教师UI计划

教师页面主要实现教师预约功能，通过多个页面和交互计划为用户提供一个完整的在线教师选择、预约和付出的流程。计划的主要思绪涵盖了教师列表展示、弹窗交互、时间选择和付出流程。
通过 @State 装饰器界说了多个状态变量，如 teacherList（教师列表）、imgList（教师头像列表）、teacherName、startTime 和 endTime，这些变量用于存储教师信息、选择的教师名称以及预约的时间段。教师列表通过 API 请求 getTeacherList() 获取，并在 aboutToAppear 方法中加载到页面中。这样，教师信息能够动态更新，确保用户在使用过程中看到最新的数据。
教师列表使用 List 组件举行展示，每个教师信息项由 ListItem 显示，包罗了教师的姓名、学科、电话、代价、状态等具体信息。用户点击教师项时，系统会判定教师是否繁忙（state === "繁忙"）。如果教师繁忙，显示一个提示消息，若教师可用，则触发弹窗，允许用户选择预约的时间段。在每个教师项中，使用了 Image 和 Text 元素展示教师头像和相关信息，并根据教师的状态动态显示差异的交互提示。
当用户点击教师并且该教师可用时，弹窗会打开，用户可以选择预约的开始和结束时间。弹窗内包罗了两个 Select 组件，分别用于选择开始时间和结束时间，这些时间选项由固定的时段数组提供。用户选择后，系统管帐算出该预约的总金额，并显示用户可用的红包金额，盘算实际应付金额。通过 getTeacherMoney() 获取教师课程代价，通过 getUserCoupon() 获取用户可使用的最大红包金额，并盘算实际必要付出的金额。
在弹窗中，用户确认后，系统会调用 setTeacherState 来更新教师的状态为“繁忙”，同时记载选择的教师信息。接着，用户的账户金额会通过 getUserCount() 查询并更新。付出过程中，系统会扣除红包金额，并更新用户账户余额，最后通过 deleteUserCoupon() 删除已使用的优惠券。
代码及结果如下：

  

  

图 4.5 教师界面代码计划及UI界面

4.1.5 消息发起UI计划

• 页面计划思绪：
  

该页面主要由一个消息列表构成，使用List 组件来展示消息项，每一项由 ListItem 来呈现，包罗了消息的标题、图片和跳转链接。
listData 中包罗了消息列表的每一项数据，包括标题（title）、图片（img）和跳转的 URL 地点（url）。该数据数组是页面的核心内容，用户通过点击消息项来举行页面跳转。
页面分为两个主要部门，通过 Row 组件展示“消息”标题，采用了红色背景（#F08080）和较大的字体，具有较强的视觉吸引力。消息列表显示在标题下方，使用了 List 组件动态渲染每一项，用户可以通过点击每个消息项跳转到差异的页面。
每个消息项包括了一个图标、标题以及右侧的箭头图标，代表着该项可以点击。点击消息项时，触发 onClick 事件，调用 router.pushUrl() 方法跳转到相应的页面。
listData 数组通过 ForEach 遍历天生每一项消息，使得页面内容动态渲染。每个 ListItem 都是由 Row 组件组成，其中包罗图标、标题和右侧的箭头图标，确保了结构的清楚和同等。
通过 router.pushUrl()，点击消息项后会跳转到对应的 URL 地点。每个消息项都有一个预设的跳转路径，如“预约的老师消息”跳转到 pages/MessagePages/TeacherMessage 页面，提发起跳转到 pages/MessagePages/MySuggestion 页面等。
关键组件和功能实现

• Row 和 Column 结构：
  

通过 Row 和 Column 组件的嵌套，页面实现了垂直和水平结构，确保了元素的排列整齐。Row 用于水平结构，主要用于展示标题、图标和箭头；Column 用于垂直结构，组织标题、列表等内容。

• 动态天生消息列表：
  

使用 ForEach 遍历 listData，为每个消息项动态天生列表项。每个 ListItem 包括消息标题、图标和箭头图标。点击每个列表项时会通过 router.pushUrl() 举行页面跳转。

• 页面跳转：
  

使用 @ohos.router 模块中的 pushUrl 方法实现页面跳转，用户点击消息项时，自动导航到对应的页面。

• 我的发起”页面计划思绪：
  

用户可以在该页面填写并提交发起，包括选择科目、填写主题和发起内容。页面的顶部有一个返回按钮和标题“我的发起”，下方是三个输入区域：科目选择（使用 Select 下拉框），主题输入（TextInput），以及发起内容输入（TextArea）。用户可以通过 Select 下拉框选择科目，选择后的值会更新到 subject 状态；通过 TextInput 和 TextArea 输入框输入主题和发起内容，分别更新到 theme 和 suggestion 状态。用户填写完毕后，点击“发表发起”按钮提交表单。在点击按钮时，系统会先检查是否全部字段都已填写完整。如果没有填写完整，页面会弹出提示框提示用户填写完整信息；如果填写完整，则调用 getSuggest API 提交用户的发起，并显示提交乐成的提示框[1]。
整体的结构使用了 Row 和 Column 组件，确保了页面的结构清楚且结构整齐。表单中的各个输入框和按钮设置了得当的样式（如边框、圆角、背景色等），增强了视觉结果和用户体验。别的，页面还采用了 promptAction.showToast() 来显示提示信息，确保用户在提交时能得到即时反馈。
代码及结果演示如下：

     

图 4.6 消息界面代码计划及UI界面

好像字数达到上限了，哭哭，github：GitHub - Aurora-sid/teacher

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。