鸿蒙期末项目（2）

主界面

主界面和商店详情界面参考如下设计图（灵感严重匮乏）

简单起见，将整个app分为4个布局，分别是主界面、搜索界面、购物车界面，以及个人界面。

所以在app中也需要使用tab组件进行分割，且需要通过tabBar方法设置底部导航栏

Tabs({
    barPosition: BarPosition.End,
    controller: this.tabsController,
}) {
    TabContent() {
        HomeView()
    }
    .tabBar(this.TabBuilder(
        'Home',
        CommentConstant.HOME_TAB_INDEX,
        CommentConstant.HomeIconActive,
        CommentConstant.HomeIconNormal
    ))
​
    TabContent() {
        SearchView()
    }
    .tabBar(this.TabBuilder(
        'Search',
        CommentConstant.SEARCH_TAB_INDEX,
        CommentConstant.SearchIconActive,
        CommentConstant.SearchIconNormal
    ))
​
    TabContent() {
        CartView()
    }
    .tabBar(this.TabBuilder(
        'Cart',
        CommentConstant.CART_TAB_INDEX,
        CommentConstant.CartIconActive,
        CommentConstant.CartIconNormal
    ))
​
    TabContent() {
        ProfileView()
    }
    .tabBar(this.TabBuilder(
        'Profile',
        CommentConstant.PROFILE_TAB_INDEX,
        CommentConstant.ProfileIconActive,
        CommentConstant.ProfileIconNormal
    ))
}

导航栏样式的设置：

@State currentIndex: number = CommentConstant.HOME_TAB_INDEX;
private tabsController: TabsController = new TabsController();
​
@Builder
TabBuilder(title: string, index: number, selectIcon: ResourceStr, normalIcon: ResourceStr) {
    Column() {
        Image(this.currentIndex === index ? selectIcon : normalIcon)
            .width('25vp')
            .height('25vp')
​
        Text(title)
            .margin({ top: '4vp' })
            .fontSize('10fp')
            .fontColor(this.currentIndex === index ? '#e76b7a' : '#6b6b6b')
    }
    .justifyContent(FlexAlign.Center)
        .height('56vp')
        .width('100%')
        .onClick(() => {
        this.currentIndex = index;
        this.tabsController.changeIndex(index)
    })
}

即可实现如下效果

随后开始编写四个页面组件

根据页面图，整个页面分为五个部分，分别为头部位置信息和通知选项、广告栏、热门标签栏、今日推荐栏、著名品牌栏，由于五个组件仅会在主页面中使用，所以可以使用@Builder创建组件函数在主页面组件中函数式声明，简单快捷且不需要额外import，灰常好用~

由于主页面需要放下的内容过多导致一页不能放下，考虑使用Scroll滚动布局，当子节点高度超过时自动加滚动条，同时需要设置

.align(Alignment.TopStart)

保证子节点从顶部开始排列

其中在实现下面这个卡片的样式时，可以看到卡片是有四个方向的圆角的，但是如果直接放图片，图片会将上方的两个圆角覆盖住，这个时候可以使用.clip(true) 属性，意为沿边缘裁剪，即可达到下面这种效果。

实现效果如下：

Web服务器搭建和数据持久化

到目前位置，本项目的所有数据都是保存在内存中的，仅作外观测试使用，而没有实际作用。

那么如何实现数据持久化呢？

鸿蒙提供了数据库接口，其可以方便地通过一系列配置和方法读取或修改数据库中的数据。然而，使用这种方法却存在一个问题，数据库文件保存在用户本地，既无数据来源，也无法实时更新。所以更好的解决方法应当是建立服务器，客户端通过调用 api 的方式从服务器的数据库中获取数据。

所以现在项目迫切需要搭建一个javaweb服务器。

根据点餐app需求分析，可以大致抽象出如下几个数据表（使用mysql数据库）。

用户表 user

属性列	描述
email	邮箱
phone	电话
id	编号
username	用户名
password	密码

商店表 store

属性列	描述
id	编号
storeName	商店名
address	地址
phone	电话
intro	介绍
score	评分
open	目前是否营业
cover	店铺封面
logo	店铺logo
special	特殊性 0-无 1-著名 2-TopRated

菜品表 dish

属性列	描述
id	编号
sid	所属商铺编号
dishName	菜名
intro	介绍
price	价格
discount	折扣
catalog	所属分类

标签表 tags

属性列	描述
id	编号
tagName	标签名

菜品-标签表 dt

属性列	描述
Did	菜品编号
Tid	标签标号

订单表 orders

属性列	描述
id	订单号
time	付款时间
uid	用户
price	总额
state	订单状态 0-待支付 1-送餐中 2-已取消 3-已完成 4-已过期
sid	消费商店

订单-菜表 od

属性列	描述
oid	订单号
Did	菜号
number	选菜数量

使用sql建表

use pigdelivery;
​
create table user (
    email varchar(2048) not null,
    id int auto_increment primary key ,
    username varchar(30) not null,
    password double not null
);
​
create table store(
    id int auto_increment primary key ,
    storeName varchar(50) not null,
    intro varchar(100) not null,
    score double not null,
    open bit not null,
    cover varchar(2048) not null,
    logo varchar(2048) default 'defaultLogo.jpg',
    special int default 0 not null
);
​
create table dish(
    id int auto_increment primary key ,
    sid int not null,
    dishName varchar(50) not null,
    intro varchar(100) not null,
    price double not null,
    discount double not null,
    catalog varchar(30) not null,
    foreign key (sid) references store(id)
);
​
create table tags(
    id int auto_increment primary key ,
    tagName varchar(30) not null
);
​
create table dt(
    Did int not null,
    Tid int not null,
    foreign key (Did) references dish(id),
    foreign key (Tid) references tags(id)
);
​
create table orders(
    id int auto_increment primary key ,
    time varchar(30),
    uid int not null,
    price double not null,
    state int not null,
    sid int not null,
    foreign key (uid) references user(id),
    foreign key (sid) references store(id)
);
​
create table od(
    Oid int not null,
    Did int not null,
    number int not null,
    foreign key (Oid) references orders(id),
    foreign key (Did) references dish(id)
);

建表完成后，填入一些商店数据用于测试。

---

数据库建立完成后，接下来开始写Javaweb，javaweb就很好写了，按照流程一步一步来就好，这里仅仅简单地概述一下步骤：

使用Tomcat10.1.24构建服务器，通过JavaWeb编写Servlet，并使用mybatis框架连接数据库。

首先新建一个Jakarta EE项目

通过maven导入依赖的jar包，在资源目录下新建 mybatis-config.xml 用作mybatis配置文件，并按照mybatis配置文件格式填写该xml

随后写相应的Mapper接口和实体类（省略）

以登入接口为例，写一个doPost

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    EvalTran.evalJSON(req, resp);
​
    if(req.getParameter("email") != null && req.getParameter("password") != null) {
        try {
            double password = Double.parseDouble(req.getParameter("password"));
            String email = req.getParameter("email");
            User user = UserLoader.selectUser(email, password);
            if(user != null) {
                resp.getWriter().write(gson.toJson(Response.success("success")));
            } else {
                resp.getWriter().write(gson.toJson(Response.success("user not exist")));
            }
        } catch (NumberFormatException e) {
            resp.getWriter().write(gson.toJson(Response.badRequest("参数不合法")));
        }
    } else {
        resp.getWriter().write(gson.toJson(Response.badRequest("表单数据不完整")));
    }
}

javaWeb程序写好之后，回到DevEco Studio中尝试调用该url

在DevEco Studio中打开Terminal终端执行指令 npm install axios 安装axios

在model目录下编写LoginModel类

import axios from '@ohos/axios';
​
class LoginModel {
    readonly baseUrl = 'http://localhost:8080/PigDeliveryServer_war_exploded'
​
    // 当返回 0 表示登入失败， 否则返回一个数字代表登入成功后的用户id
    async verifyAccount(email: string, password: string): Promise<number> {
        return await axios.post(
            this.baseUrl + '/login',
            {
                email: email,
                password: password,
            }
        )
            .then((resp) => {
                console.log(resp.data.message + '');
            // 下面使用双等号的原因是json传输是数字类型可能会被转成字符串类型
                if(resp.data.code == 200 && resp.data.message == 'success') {
                    return parseInt(resp.data.code);
                } else {
                    return 0;
                }
            })
            .catch((error) => {
                console.log("error: " + error);
                return 0;
            })
    }
}
​
export default new LoginModel() as LoginModel;

回到之前编写的登入界面，当时为了测试登入界面，将登入按钮设计成点击就可以登入，现在，我们尝试将点击事件改成真实有效的验证方式：

Button('LogIn')
    .regButton()
    .onClick(() => {
    loginModel.verifyAccount(this.emailInput, this.passwordInput)
        .then((data) => {
        if(data === 0) {
            AlertDialog.show({
                message: '用户不存在或密码错误',
            })
        } else {
            CommentConstant.userId = data;
            router.replaceUrl({
                url: 'pages/MainPage',
            })
        }
    })
})

当点击登入按钮中，期望中进入主界面的效果并没有实现，而是出现了密码错误的提示，将服务器返回值输出后，控制台输出：

success表示服务器收到了请求，但是参数没有传递过去。

在服务器端doPost方法中编写如下代码：

BufferedReader reader = new BufferedReader(req.getReader());
StringBuilder stringBuilder = new StringBuilder();
while (reader.ready()) {
    stringBuilder.append(reader.readLine());
}
​
String json = stringBuilder.toString();
System.out.println(json);

再次请求，结果如下

ArkTs 中的 axios 直接将data中的数据以 json 字符串的形式发给了服务器，所以在服务器中还要对json的情况做处理

BufferedReader reader = new BufferedReader(req.getReader());
StringBuilder stringBuilder = new StringBuilder();
while (reader.ready()) {
    stringBuilder.append(reader.readLine());
}

String json = stringBuilder.toString();
UserTemp userTemp = gson.fromJson(json, UserTemp.class);

if(userTemp == null || userTemp.getEmail() == null || userTemp.getPassword() == null) {
    resp.getWriter().write(gson.toJson(Response.badRequest("表单数据不完整")));
} else {
    User user = UserLoader.verifyUser(userTemp.getEmail(), userTemp.getPassword());
    if(user != null) {
        resp.getWriter().write(gson.toJson(Response.success("success", String.valueOf(user.getId()))));
    } else {
        resp.getWriter().write(gson.toJson(Response.success("userNotExist")));
    }
}

改变之后，鸿蒙端测试登入成功。