5 Star 1 Fork 0

welldonemaker / 买为

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
Apache-2.0

买为 ( buy it )

买为后端仓库: https://gitee.com/HRui66/buy-it-backend

介绍

一个仿淘宝的鸿蒙 HAP,使用 js 开发

模块设计 / 功能实现

主页
布局

顶部导航+分类功能栏+活动栏+商品推荐

分类功能栏与活动栏

目前仅为静态图标,未添加事件监听及功能

商品推荐

采用瀑布流的根布局,显示数据库内所有商品推荐信息,点击任一商品单元进入 商品浏览。

商品浏览页

布局采用滑动下拉模式,点击商品单元进入该商品的详情页

商品详情页

显示商品的所有信息,包含收藏,加入购物车及分享功能 收藏采用条件渲染,图标可点击切换收藏状态,收藏的同时跳转入收藏页面。 加入购物车自动跳转至购物车页面。 分享可选择聊天好友发送消息连接。

发现

页面设计

发现页分有三个子页面:关注、发现、视频
关注:展示看过的博主的动态
发现:暂时分类的博主动态
视频:一个短视频推送页面

消息

界面设计

消息列表

消息列表

聊天对话

聊天界面

用户对话设置

对话详情

功能实现

对话消息系统框架

消息处理的最基本需求是实现消息的实时发送接收和历史消息的存储,当前较热门的在线对话的实现是使用WebSocket,并且HarmonyOS应用开发JS API也同时提供了Socket和WebSocket的接口可以直接调用,所以采用了WebSocket作为对话消息系统的框架。 http与websocket

消息类型

最基本的消息仅包括文本,由用户从输入框输入,点击发送。消息内容不需要进行额外的封装,发送端只需指定目标,消息内容字符串作为WebSocket的发送参数,即可进行发送。
然而在购物应用的对话消息中,除了一般的文本消息外,还有一种常见的消息——商品分享消息。商品分享消息需包含商品标题、商品图片、商品链接(或ID),消息内容有多个种类,相当于需要把一个类的实例化对象进行发送,使用文本消息的发送方式不可行,所以需要对WebSocket发送和接收的消息参数进行规范定义。
Json可以完美地满足发送一个对象的需求,在前端(JavaScript)使用JSON.stringify()方法将JavaScript对象转换为字符串,转换后的字符串就可以作为文本消息发送,在后端使用Gson的fromJson把消息进行解析,解析出来就是一个对象,包括前端序列化对象的所有值。
由于对话消息包括文本消息和商品分享两种类型,所以需要在前后端约定不同消息类型的类型码(如字符串消息类型为1),在发送和接收不同类型消息时进行不同的消息解析处理。消息类型的约定如下:

type sender receiver content
字符串消息 int NORMAL=1 int int String
商品分享 int SHARE=2 int int jsonString
消息被对方屏蔽 int REJECT=3
对方不接收商品分享 int REJECT_SHARE=4
屏蔽对方 int BLACK=5 int int
屏蔽对方分享 int BLACK_SHARE=6 int int

WebSocket消息处理后端

后端使用的是SpringBoot框架,所以使用SpringBoot整合WebSocket,在同一个Spring后端处理对话消息以及其它网络请求。

消息处理逻辑

后端对消息的处理逻辑大致如下。先是拿到消息字符串,对字符串进行Json解析得到Json对象,然后通过消息类型码判断消息类型,对不同类型的消息分别处理。然后检查消息发送的目标是否拒收来自发送方的消息,如果拒收则给发送方返回拒收消息。否则封装消息,检查目标是否在线,在线则直接发送,离线则将此消息保存在消息数据库,等待目标上线再一次性发送所有消息。
消息处理

购物车

页面设计

购物车页分有三个子页面:购物车,结算
购物车:显示所有用户加入购物车的商品
结算:显示用户勾选购买的商品订单

详细实现

实现自定义顶部菜单栏,点击不同的按钮时,改变顶部导航栏和购物车渲染的数据

购物车页面初始化时,从后端获取用户购物车的信息和数据的处理,再对界面进行数据渲染

你可能喜欢商品小卡片的自定义,在购物车底部用瀑布型展示

进行勾选商品时的逻辑处理,勾选不同的商品时,计算勾选商品的总价显示

勾选全选按钮时,计算购物车的全部总价格

点击结算按钮时,跳转到结算页面,把用户勾选的商品和总价传入结算页面并渲染显示

“我的”

页面设计

个人中心

个人中心包括五分小模块,背景色为# f2f2f2,每个小模块背景色为#fefefe。

  • 模块1为个人信息展示;

  • 模块2由“收藏”、“订阅店铺”、“足迹”、“零钱”四个按钮组成;

  • 模块3我的订单由“待付款”、“待收货”、“待发货”、“待评价”、“退款/售后”五个按钮组成;

  • 模块4由“会员中心”、“领券中心”、“红包卡劵”、“红包签到”四个按钮组成;

  • 模块5由“收货地址”、“官方客服”、“我的快递”、“我的评价”、“领券中心”、“来摇现金”、“店铺会员”、“更多”八个按钮组成。

    Alt

我的地址

我的地址包块两个子页面和三个模块组成,背景色为# f2f2f2,每个小模块背景色为#fefefe。

Alt

  • 模块1为顶部信息“我的收货地址”、“管理”两个文本组成;
  • 模块2 为收货地址内容,包含收货人,联系方式,详细地址,编辑按钮;
  • 模块3 为底部添加地址按钮;
  • 页面1 为修改收货地址页面;

Alt

  • 页面2 为添加收货地址页面。

Alt

我的订单

我的订单包括三个小模块,背景色为# f2f2f2。

  • 模块1 顶部搜索,由搜索框、“筛选”文本、两个按钮组成;
  • 模块2 tabs,由“全部”、“待付款”、“待发货”、“待收货”、“待评价”五个文本组成;
  • 模块3 订单,包含店铺名、商品状态、商品价格、商品状态、商品名等,背景色为#fefefe。

Alt

我的收藏

我的收藏包括三个小模块,背景色为# f2f2f2。

  • 模块1 顶部信息,由“我的收藏”、收藏数量、搜索按钮、“管理”组成;
  • 模块2 tabs,由“宝贝”、“图文”、“视频”、“话题”、“清单”组成;
  • 模块3 收藏商品,包含商品名以及价格和商品图片,背景色为#fefefe。

Alt

页面功能

个人中心

  • 展示用户头像、用户账号、用户昵称。点击“收藏”,跳转到我的收藏页面;点击“我的订单”,跳转到我的订单页面;点击“收货地址”,跳转到我的地址页面。

我的地址

  • 地址进行编辑或添加,点击地址旁的编辑按钮,跳转到编辑地址页面;点击底部的“添加收货地址”按钮,跳转到添加地址页面。

我的订单

  • 展示用户的全部订单。

我的收藏

  • 展示用户的全部收藏商品,点击单个商品,能对跳转到对应商品的详情页。

页面数据渲染

个人中心

  • 在页面初始化时,使用HTTP GET请求,使用登录成功后在全局变量中的用户账号作为请求参数,调用后端“通过账号查询用户信息”接口,获取到用户信息,并将数据渲染到页面上。

我的地址

  • 在页面初始化时,使用HTTP GET请求,使用登录成功后在全局变量中的用户账号作为请求参数, 调用后端“通过账号获得用户地址”接口,获取到用户地址,使用for循环将数据渲染到页面上。
  • 添加地址时,将输入框的内容,封装成MyAddress对象,序列化成JSON字符串,调用后端“添加地址”接口,将JSON字符串发送到后端,并储存在MySQL数据库中。
  • 修改地址时,发送POST请求,将当前点击的地址信息作为参数,跳转到修改地址页面,并将参数作为输入框的值,实现信息回填,修改之后,点击保存,封装成MyAddress对象,序列化成JSON字符串,调用后端“修改地址信息”接口,发送PUT请求,将JSON字符串发送到后端,对数据库存储的信息进行修改。

我的订单

  • 在页面初始化时,使用HTTP GET请求,使用登录成功后在全局变量中的用户账号作为请求参数,调用后端“通过账号获得用户订单”接口,获取到用户订单信息,使用for循环将数据渲染到页面上。

我的收藏

  • 在页面初始化时,使用HTTP GET请求,使用登录成功后在全局变量中的用户账号作为请求参数,调用后端“通过账号获得用户收藏商品”接口,获取到用户收藏商品信息,使用for循环将数据渲染到页面上。
Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

简介

一个仿淘宝的鸿蒙 HAP,使用 js 开发 展开 收起
JavaScript 等 3 种语言
Apache-2.0
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/welldonemaker/buy-it.git
git@gitee.com:welldonemaker/buy-it.git
welldonemaker
buy-it
买为
master

搜索帮助