《仿盒马》app开发技术分享-- 用户登录页(业务逻辑)(21)

简介: 上一节我们实现了静态的用户登录页,这一节我们需要给他添加上业务逻辑,实现跟云数据库的互通,同时跟整个应用关联起来,因为我们还没有实现用户的注册页面,所以这里我们在云数据库的用户数据插入暂时先不做同用户名的校验,我们在云端先插入几条数据,暂时专注于查询即可

技术栈

Appgallery connect

开发准备

上一节我们实现了静态的用户登录页,这一节我们需要给他添加上业务逻辑,实现跟云数据库的互通,同时跟整个应用关联起来,因为我们还没有实现用户的注册页面,所以这里我们在云数据库的用户数据插入暂时先不做同用户名的校验,我们在云端先插入几条数据,暂时专注于查询即可

功能分析

登录页的业务逻辑主要还是针对用户输入的账号密码跟数据库存储的信息是否匹配,用户登录成功之后对当前信息的存储和使用。

代码实现

首先我们来创建用户表
{
"objectTypeName": "user",
"fields": [
{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
{"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
{"fieldName": "user_name", "fieldType": "String"},
{"fieldName": "psw", "fieldType": "String"},
{"fieldName": "is_vip", "fieldType": "Boolean"},
{"fieldName": "user_code", "fieldType": "String"},
{"fieldName": "is_log_off", "fieldType": "Boolean"}
],
"indexes": [
{"indexName": "field1IndexId", "indexList": [{"fieldName":"id","sortType":"ASC"}]}
],
"permissions": [
{"role": "World", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
]
}
关键的参数有账号密码,以及用户id 、是否注销,这些参数我们在其他查询中使用会比较多
创建表之后生成对应的db类和实体类

class User {
id: number;
user_id: number = 0;
user_name: string;
psw: string;
is_vip: boolean;
user_code: string;
is_log_off: boolean;

constructor() {
}


setId(id: number): void {
    this.id = id;
}

getId(): number  {
    return this.id;
}

setUser_id(user_id: number): void {
    this.user_id = user_id;
}

getUser_id(): number  {
    return this.user_id;
}

setUser_name(user_name: string): void {
    this.user_name = user_name;
}

getUser_name(): string  {
    return this.user_name;
}

setPsw(psw: string): void {
    this.psw = psw;
}

getPsw(): string  {
    return this.psw;
}

setIs_vip(is_vip: boolean): void {
    this.is_vip = is_vip;
}

getIs_vip(): boolean  {
    return this.is_vip;
}

setUser_code(user_code: string): void {
    this.user_code = user_code;
}

getUser_code(): string  {
    return this.user_code;
}

setIs_log_off(is_log_off: boolean): void {
    this.is_log_off = is_log_off;
}

getIs_log_off(): boolean  {
    return this.is_log_off;
}

static parseFrom(inputObject: any): User {
    let result = new User();
    if (!inputObject) {
        return result;
    }
    if (inputObject.id) {
        result.id = inputObject.id;
    }
    if (inputObject.user_id) {
        result.user_id = inputObject.user_id;
    }
    if (inputObject.user_name) {
        result.user_name = inputObject.user_name;
    }
    if (inputObject.psw) {
        result.psw = inputObject.psw;
    }
    if (inputObject.is_vip) {
        result.is_vip = inputObject.is_vip;
    }
    if (inputObject.user_code) {
        result.user_code = inputObject.user_code;
    }
    if (inputObject.is_log_off) {
        result.is_log_off = inputObject.is_log_off;
    }
    return result;
}

}

export { User };

import { cloudDatabase } from '@kit.CloudFoundationKit';

class user extends cloudDatabase.DatabaseObject {
public id: number;
public user_id = 0;
public user_name: string;
public psw: string;
public is_vip: boolean;
public user_code: string;
public is_log_off: boolean;

public naturalbase_ClassName(): string {
return 'user';
}
}

export { user };

全部创建完成之后我们还需要添加一个工具类,我们封装一个用户首选项相关,帮助我们存储数据

import dataPreferences from '@ohos.data.preferences';
import common from '@ohos.app.ability.common';
let context = getContext(this) as common.UIAbilityContext;
/**

  • 项目全局存储,使用ohos.data.preferences
    */
    const defaultPreferenceName = "OPEN_EYE_PREFERENCES"

type ValueType = number | string | boolean | Array | Array | Array;

/**

  • 轻量级缓存工具类
    */
    let promise = dataPreferences.getPreferences(context, defaultPreferenceName);

export class StorageUtils {

static async getAwait(name:string, def = 'moren'): Promise {
return await new Promise((resolve: Function) => {
promise.then((res) => {
res.get(name, def)
.then((data: dataPreferences.ValueType) => {
resolve(data.toString());
})
})
});
}
static async getAwaitBoolen(name:string, def = false): Promise {
return await new Promise((resolve: Function) => {
promise.then((res) => {
res.get(name, def)
.then((data: dataPreferences.ValueType) => {
resolve(data);
})
})
});
}

static getCallBack(name:string,
callBack: (t:T) => void,
def = 'moren') {
promise.then((res) => {
res.get(name, def)
.then((data: dataPreferences.ValueType) => {
callBack(data as T )
})
})
}
// static async getAll(name:string): Promise {
// return await new Promise((resolve: Function) => {
// promise.then((res) => {
// res.getSync(name,'')
// })
// });
// }
static async getAll(name:string): Promise {
return await new Promise((resolve: Function) => {
promise.then((res) => {
res.get(name,"")
.then((data: dataPreferences.ValueType) => {
resolve(data);
})
})
});

}

/*

  • @param name 传入的key
  • @param valuer 传入的 value
  • 传入需要储存的字段
    */
    static set(name:string, valuer:string): void {
    promise.then((res) => {
    res.put(name, valuer)
    res.flush()
    })
    }
    static remove(name:string): void {
    promise.then((res) => {
    res.delete(name)
    })
    }
    static clear(): void {
    promise.then((res) => {
    res.clear()
    })
    }
    static async has(name:string): Promise {
    return await new Promise((resolve: Function) => {
    promise.then((res) => {
    res.has(name)

     .then((data: dataPreferences.ValueType) => {
       resolve(data);
     })
    

    })
    });

    }
    }
    现在我们可以完善相关的业务逻辑了,我们需要处理的有,数据的查询,状态的判断,根据是否注销,是否有对应的账号密码,来执行对应的逻辑

async login(): Promise{
if (this.acc===''&&this.psw==='') {
promptAction.showToast({message:"请输入账号或密码"})
return
}else {
let condition = new cloudDatabase.DatabaseQuery(user);
condition.equalTo("user_name",this.acc).and().equalTo("psw",this.psw)
let listData = await databaseZone.query(condition);

  let json = JSON.stringify(listData)
  let data1:User[]= JSON.parse(json)
  if (data1.length>0) {
    if (data1[0].is_log_off) {
      //已经注销
      promptAction.showDialog({
        title: '提示',
        message: '改账号已经注销',
        buttons: [
          {
            text: '去处理',
            color: '#ffffff'
          },
          {
            text: '关闭',
            color: '#ffffff'
          }
        ],
      })
        .then(data => {
          showToast(data.index+"")
          console.info('showDialog success, click button: ' + data.index);
        })
        .catch((err: Error) => {
          console.info('showDialog error: ' + err);
        })
    }else {
      //未注销
      StorageUtils.set("user_id",data1[0].user_id.toString())
      router.back()
    }


  }else {
    showToast("请检查用户名或密码")
  }
  hilog.info(0x0000, 'testTag', `Succeeded in querying data, result: ${data1}`);
}

}
到这里我们就实现了相关的业务逻辑,登录页的业务逻辑就实现了

相关文章
|
24天前
《仿盒马》app开发技术分享-- 确认订单页(数据展示)(29)
上一节我们实现了地址的添加,那么有了地址之后我们接下来的重点就可以放到订单生成上了,我们在购物车页面,点击结算会跳转到一个 订单确认页面,在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量展示等信息。
33 3
|
24天前
|
定位技术
《仿盒马》app开发技术分享-- 地图选点(27)
上一节我们实现了地图的简单展示,这一节我们要实现的内容是,根据展示的地图,实现当前定位功能,当前位置的poi地址功能,以及列表的展示,给地图添加标记,展示自己的当前定位
39 4
|
24天前
|
定位技术 API
《仿盒马》app开发技术分享-- 原生地图展示(26)
上一节我们实现了获取当前用户的位置,并且成功的拿到了经纬度,这一节我们就要根据拿到的经纬度,结合我们其他的知识点来实现地图的展示。
44 4
|
24天前
|
数据安全/隐私保护
《仿盒马》app开发技术分享-- 用户登陆页面(静态)(20)
上一节我们实现了个人中心页面的静态展示,项目进行到这里呢,我们也是时候添加用户相关的内容了, 因为到了后期,我们的数据都是跟用户绑定的,各个用户之间的数据并不互通,现在为了实现我们的用户绑定制度,我们需要给应用添加一个用户登陆的入口的
24 4
|
24天前
《仿盒马》app开发技术分享-- 个人中心页面(19)
上一节我们实现了分类页面的所有联动效果,这一节我们要开始完成一个新的页面,这个页面是我们主界面的第四个板块,就是个人中心页面。在这个模块,我们可以显示一些用户信息,以及用户相关的各类功能的入口
22 4
|
24天前
|
JSON 数据格式
《仿盒马》app开发技术分享-- 分类右侧商品列表(18)
上一节我们实现了分类页左侧二级分类列表功能,并实现了顶部列表&弹窗跟左侧列表的联动,这一节我们需要在它们联动的基础上继续添加右侧列表的联动效果
27 4
|
24天前
|
数据库
《仿盒马》app开发技术分享-- 确认订单页(业务逻辑)(30)
上一节我们实现了确认订单页的页面绘制和价格计算优惠计算,订单列表展示等功能,这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择,然后把我们计算的价格,商品列表等数据保存起来,然后我们开始创建订单表实体类等,把这些数据提交到订单表中
34 3
|
24天前
|
存储 定位技术 数据库
《仿盒马》app开发技术分享-- 新增地址(28)
上一节我们实现了地图选点,获取当前位置,在地图上添加标记,根据当前的定位获取poi地址列表等功能,这些全部都为了我们这一节而铺垫,这一节我们要实现的是新增地址,把我们的用户信息,填写收件人、门牌号、手机号、经纬度、详细地址等信息添加到我们的云数据库中,然后在地址查询列表里展示出来。
30 2
|
24天前
|
前端开发
《仿盒马》app开发技术分享-- 个人中心页or静态头像选择(业务逻辑)(22)
上一节我们实现了登录页面的业务逻辑,并且成功的实现了数据的查询,同时我们新增了用户首选项的工具类,现在主界面往登录页面跳转,登录成功后我们关闭登录页面,这时候我们就会回到个人中心页面,那么现在我们的业务逻辑是一种什么样的形式?登录成功后我们需要显示用户的信息,并且在下次登录时依旧展示个人信息。同时我们还新增了一个头像选择的静态弹窗,丰富个人信息页面
30 1
|
24天前
|
前端开发 定位技术
《仿盒马》app开发技术分享-- 定位获取(25)
上一节我们实现了地址管理页面的数据查询和展示,接下来我们要实现的功能是地址添加相关的,我们想实现的功能是地图选点,那么在地图选点之前我们要做的就是先获取用户当前的定位。获取定位后我们拿到经纬度和其他信息,然后在对应的地图上展示。
27 0

热门文章

最新文章