{"id":27399636,"url":"https://github.com/pangyunchuan/layer-app","last_synced_at":"2025-04-14T03:20:10.880Z","repository":{"id":49381094,"uuid":"445454371","full_name":"pangyunchuan/layer-app","owner":"pangyunchuan","description":"一套用于ts/js代码面向对象，mvc分层架构以及模块化组织代码的渐进式框架。","archived":false,"fork":false,"pushed_at":"2023-03-12T16:20:45.000Z","size":534,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T20:16:31.532Z","etag":null,"topics":["ajax","app","axios","layer","layer-app","mvc","orm","promise","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pangyunchuan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-07T08:43:10.000Z","updated_at":"2022-03-02T12:41:22.000Z","dependencies_parsed_at":"2023-01-20T06:31:28.766Z","dependency_job_id":null,"html_url":"https://github.com/pangyunchuan/layer-app","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pangyunchuan%2Flayer-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pangyunchuan%2Flayer-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pangyunchuan%2Flayer-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pangyunchuan%2Flayer-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pangyunchuan","download_url":"https://codeload.github.com/pangyunchuan/layer-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248813983,"owners_count":21165656,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","app","axios","layer","layer-app","mvc","orm","promise","typescript"],"created_at":"2025-04-14T03:20:10.327Z","updated_at":"2025-04-14T03:20:10.864Z","avatar_url":"https://github.com/pangyunchuan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 使用layer-app搭建项目\n\n```shell\n# 根据提示选择 \n$ npm init layer-app\n\n# npm 6.x\n$ npm init layer-app \u003cproject-name\u003e --template vite-vue3-setup-ts\n\n# npm 7+，需要加上额外的双短横线\n$ npm init layer-app \u003cproject-name\u003e -- --template vite-vue3-setup-ts\n\n# 完成后 进入项目\n$ cd \u003cproject-name\u003e\n$ npm install\n$ npm run dev\n\n#推荐使用npm 7 以上版本,否则某些第三方依赖不会自动安装\n```\n\n## 项目介绍\n\n```text\nlayer-app 一套可选的，用于支持js/ts代码面向对象，mvc分层架构以及模块化组织代码的渐进式框架。建议使用ts。\n支持 tree-shaking;\n主要用vue3 setup项目说明。\n\n本项目将代码分为  v(template) vm(script) page m 四层。\n其中v 与 vm 耦合在一起,为 .vue文件。\npage 为与一个路由对应的 一组.vue文件 中的 共享数据和相同的业务逻辑。\n  假设路由仅对应一个简单的 .vue 文件,page也可以不存在。\n  page通常是单例的。\nm 为数据模型,也是本项目核心内容，接受page 或 vm 调用，完成与接口交互，获取和变更数据。\n\n使用模型前,需要配置请求类\n请求类是对axios的封装，使用时，需要实现其抽象类，并实现类似axios的请求/响应拦截处理。\n他可以当成一个请求封装库直接使用,但在这里主要是用于被 m 调用,完成数据获取。\n\nloading，加载类，用于被request类使用，用于接口请求较慢时展示加载效果。使用时，需要实现其抽象类，可实现 elementui vant 等不同ui组件库的加载展示。\n```\n\n## 安装和使用准备\n\n```text\nnpm install layer-app\n\n使用准备\n1. 项目中增加 root 别名 指向项目根目录,webpack,vite 自行配置, tsconfig 参考如下\n{\n  \"compilerOptions\": {\n    \"rootDir\": \".\",\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"root/*\": [\n        \"*\"\n      ]\n    }\n  }\n}\n2. 项目增加 layer-app 入口 文件,需要在项目根目录下增加layerAppStart目录,可通过如下方式添加\n2-1. 项目根目录下执行命令 node .\\node_modules\\.bin\\createLayerAppStart.cmd\n2-2. package.json 中 scripts 增加  {\"createLayerAppStart\":\"createLayerAppStart\"}  之后执行 npm run createLayerAppStart\n2-3. 手动复制 node_modules/layer-app/ 下的 layerAppStart 目录  到项目根目录(连同目录一起复制)\n\n3. 在项目使用 layer-app 前引入 layerAppStart 如在 main.ts 中 import \"root/layerAppStart\";\n```\n\n```typescript\n// layerAppStart/index.ts\n//主要是模型相关的配置\n\nimport ElPlusLoading from \"./ElPlusLoading\";\nimport VantToastLoading from \"./VantToastLoading\";\nimport DemoRequest from \"./DemoRequest\";\nimport {setLoadingMap, setRequestMap, setLoadingConfig} from \"layer-app\";\n//demoModel 仅供参考,不应再  layerAppStart中调用.\n//这里配置项都供参考,用不到就删掉.\n\n\n//设置 element-plus 加载类 默认配置设置,使用前,需要自行安装element-plus\nElPlusLoading.setDefaultConfig({\n    target: 'body',\n    text: '加载中',\n    // lock: true,\n    spinner: \"el-icon-loading\",\n    // background: \"transparent\"\n    background: \"rgba(50, 50, 50, 0.5)\"\n})\n//设置 vant.toast 加载类 默认配置设置,使用前,需要自行安装vant\nVantToastLoading.setDefaultConfig({\n    message: '加载中'\n})\n\n/**\n * 加载类配置，在请求类中被使用时，传入键名确定加载类，具体使用后续介绍\n * default 必须设置,其他可删除\n * 请注意 这两种ui加载效果，使用前需要安装ui库\n */\nconst loadingClassMap = {\n    default: ElPlusLoading,\n    vantToast: VantToastLoading,\n    elPlus: ElPlusLoading\n}\nsetLoadingMap(loadingClassMap)\n\n//配置默认情况是否使用加载功能\nsetLoadingConfig({use: true})\n\n\n/**\n * 请求类配置，在模型类中被使用时，传入键名确定请求类\n * default 必须设置,其他可删除\n */\nconst requestClassMap = {\n    default: DemoRequest,\n    demo: DemoRequest\n}\nsetRequestMap(requestClassMap)\n\n\n//用于ts类型提示,使用ts时,必备。\nexport type loadingClassMapType = typeof loadingClassMap\nexport type requestClassMapType = typeof requestClassMap\n\n```\n\n### 项目 class 说明\n```typescript\nimport {Page, PageVue3,  BaseLoading, BaseRequest, LoadingRequest, RequestModel, setLoadingMap, setLoadingConfig, setRequestMap} from 'layer-app'\n// Page, PageVue3 页面类,没有太多内容因为页面通常是单例的，所以提供了一个 reset方法,用于在页面关闭和页面复用时(动态路由) 重置page ,\n// PageVue3  仅仅是在 vue3的基础上 针对性的提供了个方法 resetWhenUnmount  用于在页面关闭时,重置页面\n\n// BaseLoading  loading基类 接口请求时,展示loading效果,实现自己的loading效果时,需要实现它\n\n//BaseRequest  请求基类。  使用Model 前,一定要实现它,配置好 请求前,请求完成,请求异常的处理,且需要让返回数据仅返回模型数据部分\n//LoadingRequest  加载效果的请求基类，在请求基类的基础上实现了BaseLoading的接入。默认使用这个请求基类。\n\n// RequestModel  接口请求模型，与接口完成交互的模型基类。\n```\n\n###### ##### 目录结构参考 以 vite + vue3 为例\n\n```text\nindex.html   vite 入口文件 \nvite.config.ts vite配置文件\nmock  模拟接口 文件\nbuildConfig    vite打包配置拆分文件\nlayerAppStart   layer-app 启动文件  \npublic\nsrc  项目文件\n-- main.ts 入口文件\n-- App.vue vue根组件\n-- components  通用 ui 组件\n-- router  路由\n-- models 通用模型设置\n-- modules  模块目录 一个模块是一个业务功能集合, 模块中可含有路由,模型,页面,组件等任意模块相关内容,甚至可以含有子模块\n---- module1\n------ components  模块通用组件\n------ models  模块模型\n------ services 模块服务层,根据情况增加\n------ views 模块页面\n-------- page1\n---------- Page1.vue\n---------- Header.vue\n---------- Content.vue\n---------- page1.ts   页面class 实例,用于page1页面\n-------- page2\n-------- route.ts  页面路由\n------ helpers 模块辅助函数\n-------- module1-1 子模块\n----- module2 模块2\n\n目录层级越高的,说明通用性越强\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpangyunchuan%2Flayer-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpangyunchuan%2Flayer-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpangyunchuan%2Flayer-app/lists"}