WTM:使用WTM快速编写.netcore应用!

  • h0_575075
    了解作者
  • 26.3MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-05 10:26
    上传日期
English | 用于ASP.NET Core的WalkingTec.Mvvm Walkingtec.mvvm框架(WTM)是基于.net核心的快速开发框架。 它支持LayUI,React,VUE。 WTM具有内置的代码生成器以最大化开发效率。 它是用于高效Web开发的强大工具。 CI构建状态 平台 构建服务器 开发包 主人身份 发展状况 Azure管道 Windows / Linux / OSX v2.2.300 Azure管道 Windows / Linux / OSX v3.1.101 AppVeyor Windows / Linux v2.2.300 -- --
WTM-develop.zip
内容介绍
# vue 版简介 说明: > 大部分的方法通过 vue 的混淆(mixin)写在,./src/vue-custom/mixin/中的 action-mixin,form-mixin 中 > 按钮的增删改查 都是通用写法,如果默认逻辑不符合要求,可以在 vue 组件中定义相同 key 名 方法或属性,边可以覆盖 mixin 中的代码; ## 目录 ```shell script . ├── assets │   ├── css │   └── icon ├── components // 组件 │ ├── frame │   ├── layout │   └── page ├── config │ ├── entity.tx // 动作 │ ├── enum.tx // 枚举 │ └── index.ts // 配置 ├── lang // 公共多语言 ├── pages // 页面集合 │ ├── modulePage │ │ ├── store // 模块store │ │ ├── views // 页面集合 │ │ ├── config.ts // 配置,列表/动作事件等 │ │ ├── index.vue // 当前模块主页面 │ │ └── local.ts // 当前模块多语言 ├── router // 路由 ├── service // 公共模块api ├── store // 公共store ├── util // 工具 │ ├── ... │ └── service.tx // 请求axios ├── vue-custom // vue 复用&组合 │ ├── component // 公共组件配置 │ ├── directive // vue 指令 │ ├── filters // vue 过滤器 │ ├── mixin // vue 混入 │ └── prototype // 全局属性 ├── index.ts // 首页入口 ├── login.ts // 登陆入口 ├── settings.ts // 样式设置 ├── shims-tsx.d.ts ├── shims-vue.d.ts └── subMenu.json // 默认菜单数据 ``` ## 前端思路 1. 为了规范可控,集成了TypeScript; 2. 统一基础动作事件(增,删,改,查),代码提取到了/vue-custom/mixin/... 中; 3. 业务模块组件化,代码 components/page/... 中; 4. 业务逻辑尽量写在page中; 5. 数据与请求业务模块在 pages/模块/store/index.ts中,[@/store/base/index]会根据api.ts的所有项生成vuex所需的结构,最终通过util/service.tx请求输出; ## 数据与请求,store 实现(当前部分需要 vuex 的基础) > 业务代码的 store,会根据业务 api.ts 的内容生成,创建 store 初始结构,目前只创建 state,actions,mutations 部分,生成 vuex store 的代码在/store/base/index; #### /store/base/index 生成规则: 1. api.ts 配置所有业务需要的请求及参数;然后(/store/base/index)根据 api.ts 中所有对象的 key,创建对应的 state,actions,mutations; 2. 命名规则,state >>> {首字母大写的 key}Data; mutations >>> set{首字母大写的 key}\_mutations; actions >>> key; 3. 只有 get 请求才会生成 state, mutations 部分;post 请求会在 action 方法中返回 response; 4. actions 默认只有 request,和 state 的赋值逻辑;如果逻辑不通可以在 store/index.ts 中复写,action 的命名与 key 一样便可以覆盖; #### 例: 用法可以看注释 ```JavaScript // frameworkuser/store/api.ts const search = { url: "/api/_FrameworkUserBase/search", // 请求api的地址;支持{}写法,如果url有 {ID}会根据请求参数中的ID替换内容; method: "post", // 请求类型 dataType: "array", // 返回的数据类型 array | object contentType: "" // 请求herder.Content-Type值,默认json接口 }; const add = { url: reqPath + "Add", method: "post" }; ... export default { search, add, ... }; // frameworkuser/store/index.ts // 默认写法如下,生成的stroe在对象newStore中; import Vuex from "vuex"; import service from "./api"; import createStore from "@/store/base/index"; const newStore = createStore(service); // 可以打印查看store结构 console.log('newStore:', newStore); export default new Vuex.Store({ strict: true, getters: {}, ...newStore }); ``` 覆盖默认 store 写法,api.ts 不需要更改; ```JavaScript // frameworkuser/store/index.ts // 默认写法如下,生成新的stroe在对象newStore中; import Vuex from "vuex"; import service from "./api"; import createStore from "@/store/base/index"; const newStore = createStore(service); // 写法一 newStore.action = { ...newStore.action, search({ commit, state }, params) { // 新逻辑 } } // 写法二 newStore.action.search = ({ commit, state }, params) => { // 新逻辑 } export default new Vuex.Store({ strict: true, getters: {}, ...newStore }); ``` #### api.ts 定义 key 需要包涵 search,add,edit,detail,batchDelete,imported,exportExcel,getExcelTemplate;mixin 部分会用到这些 keys; ## vue-custom/mixin vue 混入部分: > 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项, https://cn.vuejs.org/v2/guide/mixins.html #### search.ts 查询方法复用(混入) 位置: vue-custom/mixin/search.ts 参数: TABLE_HEADER: 列表结构配置; 方法: 查询,排序,分页,列表选中数据,等方法 > 在混入的组件 methods 中添加命名为“privateRequest”的查询方法,查询组件自己的调用 action,当前方法(privateRequest)放到 action-mixin 中; 提供给 wtm-table-box 组件 参数/事件; ```JavaScript /** * 返回wtm-table-box事件集合 * 包含el-table/el-pagination组件事件,命名定义要与组件(el-table,el-pagination)事件相同 可生效 * el-table:sort-change * el-pagination:size-change,current-change,selection-change * 注: * 1. 需要添加elementui其他事件,可以在组件中写,不用添加此对象里; * 2. 可以定义方法覆盖事件; * 例如: * <wtm-table-box :events="searchEvent" @sort-change="()=>{覆盖方法}" @header-click="()=>{自定义方法}"> */ get searchEvent() { return { onSearch: this.onSearch, "size-change": this.handleSizeChange, "current-change": this.handleCurrentChange, "selection-change": this.onSelectionChange, "sort-change": this.onSortChange }; } /** * 返回wtm-table-box属性集合 * 包含el-table/el-pagination组件属性,命名与组件事件相同 * wtm-table-box:loading组件加载判断。。。 * el-table:data,is-selection,tb-header * el-pagination:pageSizes,pageSize,currentPage,pageTotal * 注: * 如searchEvent对象 一样; */ get searchAttrs() { return { loading: this.loading, data: this.tableData, isSelection: true, tbHeader: this.tableHeader, ...this.pageDate }; } ``` #### action-mixin 页中的按钮部分,添加/修改/删除/导出/导出 复用(混入) 提供业务所需的方法,可以参考 actionEvent 属性; ```JavaScript /** * 事件方法list * 提供wtm-but-box组件 参数/事件; */ get actionEvent(): IActionEvent { return { onAdd: this.onAdd, onEdit: this.onEdit, onDetail: this.onDetail, onDelete: this.onDelete, onBatchDelete: this.onBatchDelete, onImported: this.onImported, onExportAll: this.onExportAll, onExport: this.onExport }; } ``` #### form-mixin 操作代码 复用(混入) 弹出框(详情/编辑/创建) 参数: dialogData:被编辑数据 status:弹出框的状态 actionType: 弹出框的状态-枚举 > 目前与 CreateForm 组件高度依赖,做一需要配合 CreateForm 组件 新增/编辑 提交所需的表单数据,是从 CreateForm 组件的 getFormData �
评论
    相关推荐