HarmonyOS开发实例：【分布式手写板】

2024-04-18 05:20
文章标签 开发 实例 分布式 harmonyos 手写板

本文主要是介绍HarmonyOS开发实例：【分布式手写板】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

介绍

本篇Codelab使用设备管理及分布式键值数据库能力，实现多设备之间手写板应用拉起及同步书写内容的功能。操作流程：

  1. 设备连接同一无线网络，安装分布式手写板应用。进入应用，点击允许使用多设备协同，点击主页上查询设备按钮，显示附近设备。
  2. 选择设备确认，若已建立连接，启动对方设备上的手写板应用，否则提示建立连接。输入PIN码建立连接后再次点击查询设备按钮，选择设备提交，启动对方设备应用。
  3. 建立连接前绘制的内容在启动对方设备后同步，此时设备上绘制的内容会在另一端同步绘制。
  4. 点击撤销按钮，两侧设备绘制内容同步撤销。

相关概念

  • [设备管理]：模块提供分布式设备管理能力。
  • [分布式键值数据库]：分布式键值数据库为应用程序提供不同设备间数据库的分布式协同能力。

相关权限

本篇Codelab使用了设备管理及分布式键值数据库能力，需要手动替换full-SDK，并在配置文件module.json5文件requestPermissions属性中添加如下权限：

  • [分布式设备认证组网权限]：ohos.permission.ACCESS_SERVICE_DM。
  • [设备间的数据交换权限]：ohos.permission.DISTRIBUTED_DATASYNC。

约束与限制

  1. 本篇Codelab部分能力依赖于系统API，需下载full-SDK并替换DevEco Studio自动下载的public-SDK。
  2. 本篇Codelab使用的部分API仅系统应用可用，需要提升应用等级。

环境搭建

软件要求

  • [DevEco Studio]版本：DevEco Studio 4.0 Beta2。
  • OpenHarmony SDK版本：API version 10。
  • 鸿蒙指导参考：qr23.cn/AKFP8k点击或者复制转到。

搜狗高速浏览器截图20240326151547.png

硬件要求

鸿蒙HarmonyOS与OpenHarmony文档籽料+mau123789是v直接拿取

  • 开发板类型：[润和RK3568开发板]。
  • OpenHarmony系统：4.0 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

  1. [获取OpenHarmony系统版本]：标准系统解决方案（二进制）。以4.0 Release版本为例：

  2. 搭建烧录环境。

    1. [完成DevEco Device Tool的安装]
    2. [完成RK3568开发板的烧录]

  3. 搭建开发环境。

    1. 开始前请参考[工具准备]，完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后，请参考[使用工程向导]创建工程（模板选择“Empty Ability”）。
    3. 工程创建完成后，选择使用[真机进行调测]。

代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。

├──entry/src/main/ets                 // 代码区
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstants.ets       // 公共常量类
│  │  └──utils
│  │     ├──Logger.ets                // 日志打印类
│  │     └──RemoteDeviceUtil.ets      // 设备管理类
│  ├──entryability
│  │  └──EntryAbility.ets             // 程序入口类
│  ├──pages
│  │  └──Index.ets                    // 主界面
│  ├──view
│  │  └──CustomDialogComponent.ets    // 自定义弹窗组件类
│  └──viewmodel
│     ├──KvStoreModel.ets             // 分布式键值数据库管理类
│     └──Position.ets                 // 绘制位置信息类
└──entry/src/main/resources           // 资源文件目录

界面设计

主界面由导航栏及绘制区域组成，导航栏包含撤回按钮及查询设备按钮。绘制区域使用Canvas画布组件展示绘制效果。Index.ets文件完成界面实现，使用Column及Row容器组件进行布局。

// Index.ets
let storage = LocalStorage.getShared();
@Entry(storage)
@Component
struct Index {...build() {Column() {Row() {// 撤回按钮Image($r('app.media.ic_back')).width($r('app.float.ic_back_width')).height($r('app.float.ic_back_height'))...Blank()// 查找设备按钮Image($r('app.media.ic_hop')).width($r('app.float.ic_hop_width')).height($r('app.float.ic_hop_height'))...}.width(CommonConstants.FULL_PERCENT).height(CommonConstants.TITLE_HEIGHT)Row() {// 绘制区域Canvas(this.canvasContext).width(CommonConstants.FULL_PERCENT).height(CommonConstants.FULL_PERCENT)...}....width(CommonConstants.FULL_PERCENT).layoutWeight(CommonConstants.NUMBER_ONE)}.height(CommonConstants.FULL_PERCENT).width(CommonConstants.FULL_PERCENT)}...
}

分布式组网

准备分布式环境

创建设备管理器。设备管理器创建完成后注册设备上线离线监听，信任设备上线离线时触发。执行获取本地设备信息，获取信任设备列表，初始化展示设备列表等方法。其中deviceManager类需使用full-SDK。

// RemoteDeviceUtil.ets
import deviceManager from '@ohos.distributedHardware.deviceManager';class RemoteDeviceUtil {...async createDeviceManager() {...await new Promise((resolve: (value: Object | PromiseLike<Object>) => void, reject: ((reason?: RejectError) => void)) => {try {// 创建设备管理器deviceManager.createDeviceManager(CommonConstants.BUNDLE_NAME,(error, value: deviceManager.DeviceManager) => {...this.myDeviceManager = value;// 注册信任设备上线离线监听this.registerDeviceStateListener();// 获取本地设备信息this.getLocalDeviceInfo();// 获取信任设备列表this.getTrustedDeviceList();// 初始化展示设备列表this.initDeviceList();resolve(value);});} catch (error) {Logger.error('RemoteDeviceModel',`createDeviceManager failed, error=${JSON.stringify(error)}`);}});}...
}

注册设备状态监听。已验证设备上线或有新设备验证通过时状态类型为ONLINE，将设备添加至信任设备列表。设备离线时状态类型为OFFLINE，将设备从信任列表中移除。

// RemoteDeviceUtil.ets
class RemoteDeviceUtil {...// 注册设备状态改变监听registerDeviceStateListener(): void {...try {// 注册监听this.myDeviceManager.on('deviceStateChange', (data) => {...switch (data.action) {// 设备上线case deviceManager.DeviceStateChangeAction.ONLINE: {this.deviceStateChangeActionOnline(data.device);break;}// 设备离线case deviceManager.DeviceStateChangeAction.OFFLINE: {this.deviceStateChangeActionOffline(data.device);break;}...}});} catch (error) {Logger.error('RemoteDeviceModel',`registerDeviceStateListener on('deviceStateChange') failed, error=${JSON.stringify(error)}`);}}// 设备上线，加入信任列表及展示列表deviceStateChangeActionOnline(device: deviceManager.DeviceInfo): void {this.trustedDeviceList[this.trustedDeviceList.length] = device;this.addToDeviceList(device);}// 设备下线，将设备移出信任列表和展示列表deviceStateChangeActionOffline(device: deviceManager.DeviceInfo): void {let list: deviceManager.DeviceInfo[] = [];for (let i: number = 0; i < this.trustedDeviceList.length; i++) {if (this.trustedDeviceList[i].networkId !== device.networkId) {list.push(this.trustedDeviceList[i]);continue;}}this.deleteFromDeviceList(device);this.trustedDeviceList = list;}...
}

建立分布式连接

点击主界面的查询设备按钮，执行发现设备方法，注册设备发现监听任务，同时拉起弹窗展示设备列表。当弹窗关闭时，执行停止发现设备方法，注销监听任务。

// RemoteDeviceUtil.ets
class RemoteDeviceUtil {...// 处理新发现的设备deviceFound(data: DeviceInfoInterface): void {for (let i: number = 0; i < this.discoverList.length; i++) {if (this.discoverList[i].deviceId === data.device.deviceId) {Logger.info('RemoteDeviceModel', `deviceFound device exist=${JSON.stringify(data)}`);return;}}this.discoverList[this.discoverList.length] = data.device;this.addToDeviceList(data.device);}startDeviceDiscovery(): void {...try {// 注册发现设备监听this.myDeviceManager.on('deviceFound', (data) => {...// 处理发现的设备this.deviceFound(data);});...let info: deviceManager.SubscribeInfo = {subscribeId: this.subscribeId,mode: CommonConstants.SUBSCRIBE_MODE,medium: CommonConstants.SUBSCRIBE_MEDIUM,freq: CommonConstants.SUBSCRIBE_FREQ,isSameAccount: false,isWakeRemote: true,capability: CommonConstants.SUBSCRIBE_CAPABILITY};// 发现周边设备this.myDeviceManager.startDeviceDiscovery(info);} catch (error) {Logger.error('RemoteDeviceModel',`startDeviceDiscovery failed error=${JSON.stringify(error)}`);}}// 停止发现设备stopDeviceDiscovery(): void {...try {// 停止发现设备this.myDeviceManager.stopDeviceDiscovery(this.subscribeId);// 注销监听任务this.myDeviceManager.off('deviceFound');this.myDeviceManager.off('discoverFail');} catch (error) {Logger.error('RemoteDeviceModel',`stopDeviceDiscovery failed error=${JSON.stringify(error)}`);}}...
}

选择弹窗内的设备项提交后，执行设备验证。

  1. 若设备在信任设备列表，执行startAbility()方法启动连接设备上的应用，将当前的绘制信息作为参数发送至连接设备。
  2. 若设备不是信任设备，执行authenticateDevice()方法启动验证。此时连接设备提示是否接受，接收连接后连接设备展示PIN码，本地设备输入PIN码确认后连接成功。再次点击查询设备按钮，选择已连接设备，点击确认启动连接设备上的应用。
// RemoteDeviceUtil.ets
class RemoteDeviceUtil {...// 设备验证authenticateDevice(context: common.UIAbilityContext,device: deviceManager.DeviceInfo,positionList: Position[]): void {// 设备为信任设备，启动连接设备上的应用let tmpList = this.trustedDeviceList.filter((item: deviceManager.DeviceInfo) => device.deviceId === item.deviceId);if (tmpList.length > 0) {this.startAbility(context, device, positionList);return;}...try {// 执行设备认证，启动验证相关弹窗，接受信任，显示PIN码，输入PIN码等this.myDeviceManager.authenticateDevice(device, authParam, (err) => {...})} catch (error) {Logger.error('RemoteDeviceModel',`authenticateDevice failed error=${JSON.stringify(error)}`);}}// 启动连接设备上的应用startAbility(context: common.UIAbilityContext, device: deviceManager.DeviceInfo, positionList: Position[]): void {...// 启动连接设备上的应用context.startAbility(wantValue).then(() => {Logger.info('RemoteDeviceModel', `startAbility finished wantValue=${JSON.stringify(wantValue)}`);}).catch((error: Error) => {Logger.error('RemoteDeviceModel', `startAbility failed, error=${JSON.stringify(error)}`);})}...
}

资源释放

程序关闭时，注销设备状态监听任务，并释放DeviceManager实例。

// RemoteDeviceUtil.ets
class RemoteDeviceUtil {...// 注销监听任务unregisterDeviceListCallback(): void {...try {// 注销设备状态监听this.myDeviceManager.off('deviceStateChange');// 释放DeviceManager实例this.myDeviceManager.release();} catch (err) {Logger.error('RemoteDeviceModel',`unregisterDeviceListCallback stopDeviceDiscovery failed, error=${JSON.stringify(err)}`);}}...
}

绘制功能

Canvas组件区域监听触摸事件，按照按下、移动、抬起等触摸事件，记录绘制的起点、中间点以及终点。触摸事件触发时，使用CanvasRenderingContext2D对象的绘制方法根据位置信息进行绘制。绘制结束后，将当前位置信息列表存入分布式键值数据库。

// Index.ets
let storage = LocalStorage.getShared();
@Entry(storage)
@Component
struct Index {...  build() {Column() {...Row() {Canvas(this.canvasContext)...}.onTouch((event: TouchEvent) => {this.onTouchEvent(event);})...}...}// 绘制事件onTouchEvent(event: TouchEvent): void {let positionX: number = event.touches[0].x;let positionY: number = event.touches[0].y;switch (event.type) {// 手指按下case TouchType.Down: {this.canvasContext.beginPath();this.canvasContext.lineWidth = CommonConstants.CANVAS_LINE_WIDTH;this.canvasContext.lineJoin = CommonConstants.CANVAS_LINE_JOIN;this.canvasContext.moveTo(positionX, positionY);this.pushData(true, false, positionX, positionY);break;}// 手指移动case TouchType.Move: {this.canvasContext.lineTo(positionX, positionY);this.pushData(false, false, positionX, positionY);break;}// 手指抬起case TouchType.Up: {this.canvasContext.lineTo(positionX, positionY);this.canvasContext.stroke();this.pushData(false, true, positionX, positionY);break;}default: {break;}}}pushData(isFirstPosition: boolean, isEndPosition: boolean, positionX: number, positionY: number): void {let position = new Position(isFirstPosition, isEndPosition, positionX, positionY);// 存入位置信息列表this.positionList.push(position);if (position.isEndPosition) {// 当前位置为终点时，将位置信息列表存入分布式键值数据库this.kvStoreModel.put(CommonConstants.CHANGE_POSITION, JSON.stringify(this.positionList));}}...
}

点击撤销按钮时，从位置列表中后序遍历移除位置信息，直到找到轨迹的初始位置，完成移除上一次绘制的轨迹。移除完成后将位置信息列表存入分布式键值数据库中。执行redraw()方法，清空画板上的内容，遍历位置信息列表，重新绘制。

// Index.ets
let storage = LocalStorage.getShared();
@Entry(storage)
@Component
struct Index {...@LocalStorageProp('positionList') positionList: Position[] = [];...build() {Column() {Row() {// 撤销按钮Image($r('app.media.ic_back')).width($r('app.float.ic_back_width')).height($r('app.float.ic_back_height')).margin({ left: CommonConstants.ICON_MARGIN_LEFT }).onClick(() => {this.goBack();})...}.width(CommonConstants.FULL_PERCENT).height(CommonConstants.TITLE_HEIGHT)...}...redraw(): void {// 删除画布内的绘制内容this.canvasContext.clearRect(0, 0, this.canvasContext.width, this.canvasContext.height);// 使用当前记录的位置信息，重新绘制this.positionList.forEach((position) => {...if (position.isFirstPosition) {this.canvasContext.beginPath();this.canvasContext.lineWidth = CommonConstants.CANVAS_LINE_WIDTH;this.canvasContext.lineJoin = CommonConstants.CANVAS_LINE_JOIN;this.canvasContext.moveTo(position.positionX, position.positionY);} else {this.canvasContext.lineTo(position.positionX, position.positionY);if (position.isEndPosition) {this.canvasContext.stroke();}}});}// 撤回上一笔绘制goBack(): void {if (this.positionList.length === 0) {return;}// 移除位置信息直到位置起始位置for (let i: number = this.positionList.length - 1; i >= 0; i--) {let position: Position | undefined = this.positionList.pop();if (position !== undefined && position.isFirstPosition) {break;}}this.redraw();this.kvStoreModel.put(CommonConstants.CHANGE_POSITION, JSON.stringify(this.positionList));}...
}

分布式键值数据库

使用分布式键值数据库需申请数据交换权限：ohos.permission.DISTRIBUTED_DATASYNC。

应用启动时创建分布式键值数据库，设置数据库数据改变监听。数据改变时执行回调，获取插入或更新数据列表，遍历列表，匹配位置信息列表的设置key，更新位置列表后重新绘制。

// Index.ets
...
import KvStoreModel from '../viewmodel/KvStoreModel';
...
let storage = LocalStorage.getShared();
@Entry(storage)
@Component
struct Index {...private kvStoreModel: KvStoreModel = new KvStoreModel();...aboutToAppear() {...this.createKVStore();}...createKVStore(): void {// 创建分布式键值数据库this.kvStoreModel.createKvStore(this.context, (data: distributedKVStore.ChangeNotification) => {// 使用分布式键值数据库内的内容重置位置信息列表this.positionList = [];let entries: distributedKVStore.Entry[] = data.insertEntries.length > 0 ? data.insertEntries : data.updateEntries;entries.forEach((entry: distributedKVStore.Entry) => {if (CommonConstants.CHANGE_POSITION === entry.key) {this.positionList = JSON.parse((entry.value.value) as string);// 位置信息列表更新后，重新绘制this.redraw();}});});}...
}

创建分布式键值数据库。设置数据库类型为KVStoreType.SINGLE_VERSION单版本数据库，其他配置参考[创建数据库配置信息]。创建数据库成功后，调用enableSync()方法开启同步，调用setDataChangeListener()方法订阅数据变更通知。

// KvStoreModel.ets
export default class KvStoreModel {...kvStore?: distributedKVStore.SingleKVStore;...createKvStore(context: common.UIAbilityContext,callback: (data: distributedKVStore.ChangeNotification) => void): void {...try {// 创建一个KVManager对象实例，用于管理数据库对象this.kvManager = distributedKVStore.createKVManager(config);} catch (error) {Logger.error('KvStoreModel',`createKvStore createKVManager failed, err=${JSON.stringify(error)}`);return;}// 创建数据库的配置信息let options: distributedKVStore.Options = {...kvStoreType: distributedKVStore.KVStoreType.SINGLE_VERSION...};// 获取分布式键值数据库this.kvManager.getKVStore(CommonConstants.KVSTORE_ID, options).then((store: distributedKVStore.SingleKVStore) => {...this.kvStore = store;// 开启同步this.kvStore.enableSync(true).then(() => {Logger.info('KvStoreModel', 'createKvStore enableSync success');}).catch((error: Error) => {Logger.error('KvStoreModel',`createKvStore enableSync fail, error=${JSON.stringify(error)}`);});this.setDataChangeListener(callback);}).catch((error: Error) => {Logger.error('getKVStore',`createKvStore getKVStore failed, error=${JSON.stringify(error)}`);})}...
}

订阅数据变更通知。创建分布式键值数据库，设置数据变更订阅，订阅类型为全部，当更新数据集或插入数据集大于0时，执行传入的callback()方法。

// KvStoreModel.ets
export default class KvStoreModel {...kvStore?: distributedKVStore.SingleKVStore;...setDataChangeListener(callback: (data: distributedKVStore.ChangeNotification) => void): void {...try {// 订阅数据变更通知this.kvStore.on('dataChange', distributedKVStore.SubscribeType.SUBSCRIBE_TYPE_ALL,(data: distributedKVStore.ChangeNotification) => {if ((data.updateEntries.length > 0) || (data.insertEntries.length > 0)) {callback(data);}});} catch (error) {Logger.error('KvStoreModel',`setDataChangeListener on('dataChange') failed, err=${JSON.stringify(error)}`);}}...
}

应用退出时，分布式键值数据库取消数据改变监听。

// Index.ets
...
import KvStoreModel from '../viewmodel/KvStoreModel';
...
let storage = LocalStorage.getShared();
@Entry(storage)
@Component
struct Index {...private kvStoreModel: KvStoreModel = new KvStoreModel();...aboutToDisappear() {this.kvStoreModel.removeDataChangeListener();}...
}// KvStoreModel.ets
export default class KvStoreModel {...kvStore?: distributedKVStore.SingleKVStore;...removeDataChangeListener(): void {...try {// 取消数据改变监听this.kvStore.off('dataChange');} catch (error) {Logger.error('KvStoreModel',`removeDataChangeListener off('dataChange') failed, err=${JSON.stringify(error)}`);}}...
}

这篇关于HarmonyOS开发实例：【分布式手写板】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/913861。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程（Gaussian Process，简称GP）是一种概率模型，用于描述一组随机变量的联合概率分布，其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数（或核函数） 1.3 核函数1.4 高斯过程回归（Gauss
阅读更多...
Linux_kernel驱动开发11

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前，需要制作不同类型格式的根文件系统         在产品研发阶段，我们还是需要使用nfs的方式挂载根文件系统         优点：可以直接在上位机中修改文件系统内容，延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta
阅读更多...
【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展，越来越多的企业开始将其应用于实际业务中。然而，区块链技术的专业性使得其集成开发成为一项挑战。针对此，广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术，提供一套全面的区块链开发工具和开发环境，支持开发者快速开发和部署区块链应用。此外，该平台还可以提供一套全面的区块链开发教程和文档，帮助开发者快速上手区块链开发。
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2