网站常用 英文,微信网站页面设计,网站设计论文分类号,企业网设计案例分析子玥酱 #xff08;掘金 / 知乎 / CSDN / 简书 同名#xff09; 大家好#xff0c;我是 子玥酱#xff0c;一名长期深耕在一线的前端程序媛 #x1f469;‍#x1f4bb;。曾就职于多家知名互联网大厂#xff0c;目前在某国企负责前端软件研发相关工作#xff0c;主要聚…子玥酱掘金 / 知乎 / CSDN / 简书 同名大家好我是子玥酱一名长期深耕在一线的前端程序媛 ‍。曾就职于多家知名互联网大厂目前在某国企负责前端软件研发相关工作主要聚焦于业务型系统的工程化建设与长期维护。我持续输出和沉淀前端领域的实战经验日常关注并分享的技术方向包括前端工程化、小程序、React / RN、Flutter、跨端方案在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。技术方向前端 / 跨端 / 小程序 / 移动端工程化内容平台掘金、知乎、CSDN、简书创作特点实战导向、源码拆解、少空谈多落地文章状态长期稳定更新大量原创输出我的内容主要围绕前端技术实战、真实业务踩坑总结、框架与方案选型思考、行业趋势解读展开。文章不会停留在“API 怎么用”而是更关注为什么这么设计、在什么场景下容易踩坑、真实项目中如何取舍希望能帮你在实际工作中少走弯路。子玥酱 · 前端成长记录官 ✨ 如果你正在做前端或准备长期走前端这条路 关注我第一时间获取前端行业趋势与实践总结 可领取11 类前端进阶学习资源工程化 / 框架 / 跨端 / 面试 / 架构 一起把技术学“明白”也用“到位”持续写作持续进阶。愿我们都能在代码和生活里走得更稳一点 文章目录引言一、一个完整项目结构示例二、Pages页面层三、Components可复用组件四、Services业务逻辑层五、Models数据模型六、Store状态管理七、Utils工具函数八、Config配置管理九、如果项目加入 AI 功能十、一个更完整的企业级结构总结引言很多人刚开始写鸿蒙应用时项目结构通常很简单entry ├─ pages ├─ components └─ utils这种结构在 Demo 项目里完全没问题但只要项目稍微复杂一点比如登录系统用户中心网络请求数据缓存AI 功能代码很快就会变得混乱很多开发者做到中期会发现一个问题项目越来越难维护找代码越来越困难。所以问题就变成一个真实的鸿蒙 App工程目录到底应该怎么设计一、一个完整项目结构示例一个中大型鸿蒙应用目录大概会长这样entry ├─ pages │ ├─ home │ │ └─ HomePage.ets │ │ │ ├─ login │ │ └─ LoginPage.ets │ │ │ └─ profile │ └─ ProfilePage.ets │ ├─ components │ ├─ common │ │ ├─ LoadingView.ets │ │ └─ EmptyView.ets │ │ │ └─ user │ └─ UserCard.ets │ ├─ services │ ├─ user │ │ └─ UserService.ets │ │ │ ├─ auth │ │ └─ AuthService.ets │ │ │ └─ network │ └─ HttpClient.ets │ ├─ models │ ├─ UserModel.ets │ └─ ApiResponse.ets │ ├─ store │ └─ UserStore.ets │ ├─ utils │ ├─ Logger.ets │ └─ DateUtil.ets │ └─ config └─ AppConfig.ets这个结构基本已经可以支撑中型 App多模块业务AI 功能扩展二、Pages页面层pages 目录只存放页面 UI。例如pages ├─ home ├─ login └─ profile页面示例EntryComponentstruct HomePage{StateuserName:stringaboutToAppear(){this.loadUser()}asyncloadUser(){letservicenewUserService()letuserawaitservice.getUserInfo()this.userNameuser.name}build(){Column(){Text(欢迎)Text(this.userName)}}}页面只做三件事展示 UI 接收用户操作 调用 Service不要写复杂逻辑。三、Components可复用组件components 目录存放通用 UI 组件。例如components ├─ common └─ user组件示例UserCard.ets代码Componentexportstruct UserCard{Propname:stringPropavatar:stringbuild(){Row(){Image(this.avatar).width(40).height(40)Text(this.name).margin({left:10})}}}页面使用UserCard({name:user.name,avatar:user.avatar})这样组件可以在多个页面复用。四、Services业务逻辑层Service 层负责网络请求业务逻辑数据处理例如services ├─ user ├─ auth └─ network网络层HttpClient.ets代码importhttpfromohos.net.httpexportclassHttpClient{asyncget(url:string){constrequesthttp.createHttp()constresponseawaitrequest.request(url,{method:http.RequestMethod.GET})returnJSON.parse(response.result)}}UserServiceexportclassUserService{client:HttpClientnewHttpClient()asyncgetUserInfo(){returnawaitthis.client.get(/api/user)}}这样所有 API 调用都会集中管理。五、Models数据模型models 目录存放数据结构定义。例如UserModel.ets代码exportinterfaceUser{id:numbername:stringavatar:string}这样数据结构统一管理。ServiceasyncgetUserInfo():PromiseUser{...}六、Store状态管理如果 App 有全局状态可以使用 store 管理。例如store └─ UserStore.ets代码exportclassUserStore{staticcurrentUser:User|nullnullstaticsetUser(user:User){this.currentUseruser}}页面UserStore.setUser(user)七、Utils工具函数utils 存放通用工具。例如utils ├─ Logger └─ DateUtil示例exportclassLogger{staticlog(message:string){console.info([APP],message)}}八、Config配置管理config 目录用于管理API 地址环境变量应用配置例如AppConfig.ets代码exportconstAppConfig{API_BASE_URL:https://api.example.com,VERSION:1.0.0}九、如果项目加入 AI 功能AI 应用通常会增加一个模块ai结构ai ├─ ai_service ├─ ai_router └─ prompt_manager例如AIService.ets代码exportclassAIService{asyncchat(prompt:string){returnawaitthis.requestAI(prompt)}asyncrequestAI(prompt:string){// 调用 AI API}}这样 AI 功能就不会污染普通业务代码。十、一个更完整的企业级结构如果是更大的项目结构可能会变成entry ├─ pages ├─ components ├─ modules │ ├─ user │ ├─ order │ └─ payment │ ├─ services ├─ models ├─ ai ├─ store ├─ utils └─ config这种结构基本可以支持大型业务AI 应用多团队开发总结一个真实鸿蒙 App 的推荐工程结构entry ├─ pages ├─ components ├─ services ├─ models ├─ store ├─ utils └─ config如果是AI 应用建议再增加ai核心思想其实很简单UI → pages 组件 → components 业务 → services 数据 → models 状态 → store 工具 → utils 配置 → config只要遵守一个原则页面只写 UI业务逻辑全部下沉。项目就不会轻易失控。