WTM框架使用技巧之：Layui版本嫁接Vue+ElementUI

最新推荐文章于 2024-07-10 17:13:46 发布
最新推荐文章于 2024-07-10 17:13:46 发布
阅读量2k 收藏 10
点赞数 2
文章标签： javascript vue java mvvm bootstrap
原文链接：https://blog.csdn.net/StupidZhuang/article/details/119777798
版权
本文详细介绍了如何在海运物流行业中，利用WTM框架结合layui和Vue，对内部软件进行改造，以提升容器管理效率。通过引入Element-UI，作者展示了如何替换原有表格组件，实现分页、搜索、详情展示和权限控制，提升开发效率和用户体验。
摘要由CSDN通过智能技术生成

快点关注我们吧

作者介绍

庄星睿，现就职于海运物流行业，威海新海丰物流有限公司，IT技术兼管理职务。

从事过winform,wpf技术开发，自2019年接触wtm框架后，热衷使用wtm框架开发物流公司内部软件。

如高度定制化的SOC自备箱管理系统，主要解决日照分公司的新兴海铁联运业务中集装箱管理混乱问题，由于wtm特有的结构化编程理念，快捷高效的使用方式，能够及时有效的满足业务使用，克服以往需求变更快，代码更新慢，无法满足业务发展的弊端，可以说wtm的出现，很好的解决了这些问题。

为什么要这样做

layui版本具备很多优点：组件齐全、ide提醒程度高、代码量少、依赖少、编译快、运行快，非常适合一个人的开发团队

但它也有很多缺点，比如说组件灵活度低、可控性差。

受blazor ssr的思路启发，将vue嫁接进layui版本中，在大部分常规页面中，保留layui的快速高效用法。在极少部分需要大量定制化的页面，采用vue+elementUI的方式编写，既能保证开发效率，又能解决复杂页面编写。

因此本文拿一个页面改造的例子，旨在抛砖引玉。

准备工作

在_Layout中引入包

_Layout.cshtml文件位于Views\Shared\_Layout.cshtml

操作步骤

引入element-ui.css

引入vue.js

引入element-ui.js

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

本篇文章使用的vue版本为2.6.14
如下图示

改造一个index.cshtml页面

原页面代码为

@model ReaTms.ViewModel.TruckerVMs.TruckerListVM
@inject IStringLocalizer<Program> Localizer;


<wt:searchpanel vm="@Model" reset-btn="true">
  <wt:row items-per-row="ItemsPerRowEnum.Three">
    <wt:textbox field="Searcher.TruckerIdentify" />
    <wt:textbox field="Searcher.TruckerName" />
    <wt:textbox field="Searcher.TruckerPhone" />
  </wt:row>
</wt:searchpanel>
<wt:grid vm="@Model" url="/Trucker/Search" />

显示效果为

但我不满意layui的表格，功能太少了,准备使用element-ui的table来替代。

开始改造：

处理原页面

干掉<wt:grid/>组件

将<wt:grid vm="@Model" url="/Trucker/Search" />打上注释，或者干脆直接删掉。

重写<wt:searchpanel/>的搜索按钮点击事件

我们知道，wtm中<wt:searchpanel/>的搜索按钮默认id为wtSearchBtn_@Model.UniqueId（如果对这一点不了解同学，请查看源码src/WalkingTec.Mvvm.TagHelpers.LayUI/Form/SearchPanelTagHelper.cs），那么我们只要拿到这个id，在页面加载的时候，卸载掉框架默认的点击事件，重新绑定一个新的点击事件就可以了。

这里为什么要卸载掉点击事件呢？因为默认的点击事件会调用layui.table去加载数据，而我们在第一步中已经将<wt:grid/>组件移除了，如果不卸载掉默认事件的话，点击按钮会报错。

参照以下代码：

@model ReaTms.ViewModel.TruckerVMs.TruckerListVM
@inject IStringLocalizer<Program> Localizer;


<wt:searchpanel vm="@Model" reset-btn="true">
  <wt:row items-per-row="ItemsPerRowEnum.Three">
    <wt:textbox field="Searcher.TruckerIdentify" />
    <wt:textbox field="Searcher.TruckerName" />
    <wt:textbox field="Searcher.TruckerPhone" />
  </wt:row>
</wt:searchpanel>
<script>
  $().ready(() => {
    $('#wtSearchBtn_@Model.UniqueId')
      .off('click')
      .on('click', e => {
        e.stopPropagation();//阻止点击事件继续冒泡，使pannel不折叠
        //查询方法写在这里，下文会继续讲到
        
      }
    );
  });
</script>

定义一个vue的根容器。切记：不要在这个容器中写任何<script>代码，否则vue会报警告

<div id="app">
</div>

创建vue实例,并创建表格数据对象
注意：在cshtml文件中不能使用vue的事件绑定符号@，请使用全称v-on:

  var app = new Vue({
    el: '#app',
    data: {
      TableItems: {} //表格数据对象
    },
    methods: {
    }
  });

到这一步后，页面的样子是这样的

@model ReaTms.ViewModel.TruckerVMs.TruckerListVM
@inject IStringLocalizer<Program> Localizer;


<wt:searchpanel vm="@Model" reset-btn="true">
  <wt:row items-per-row="ItemsPerRowEnum.Three">
    <wt:textbox field="Searcher.TruckerIdentify" />
    <wt:textbox field="Searcher.TruckerName" />
    <wt:textbox field="Searcher.TruckerPhone" />
  </wt:row>
</wt:searchpanel>
<div id="app">


</div>
<script>
  $().ready(() => {
    $('#wtSearchBtn_@Model.UniqueId')
      .off('click')
      .on('click', e => {
        e.stopPropagation();//阻止点击事件继续冒泡，使pannel不折叠
        //查询方法写在这里，下文会继续讲到
      }
    );
  });
  var app = new Vue({
    el: '#app',
    data: {
      TableItems: {} //表格数据对象
    },
    methods: {
    }
  });
</script>

创建element-ui的table
注意这里绑定的是TableItems.Data，这是因为wtm后端传过来的数据是这种格式的。

<div id="app">
  <el-table :data="TableItems.Data">
    <el-table-column prop="TruckerName" label="司机" />
    <el-table-column prop="TruckerPhone" label="电话" />
    <el-table-column prop="TruckerIdentify" label="身份证" />
  </el-table>
</div>

给第1步中的搜索按钮编写查询方法。

使用ff.GetFormData(formId)的形式，拿到查询条件的表单数据。

formId可以根据wtm的约定，使用wtForm_@Model.UniqueId拿到。

使用$.post访问后台数据接口，拿到数据后将数据赋值给vue的TableItems对象。

<script>
  $().ready(() => {
    $('#wtSearchBtn_@Model.UniqueId')
      .off('click')
      .on('click', e => {
        e.stopPropagation();//阻止点击事件继续冒泡，使pannel不折叠
        //查询方法写在这里，下文会继续讲到
        let data = ff.GetFormData('wtForm_@Model.UniqueId');//拿到查询条件的表单数据
        $.post('/Trucker/Search', data, resp => {
          app.TableItems = resp;
          },'json');
      }
    );
  });
  var app = new Vue({
    el: '#app',
    data: {
      TableItems: {} //表格数据对象
    },
    methods: {
    }
  });
</script>

至此，我们的页面就跑起来了。

添加分页组件

  • 分别绑定:current-page="TableItems.Page"、:total="TableItems.Count"

  <el-pagination :current-page="TableItems.Page"
         :total="TableItems.Count"
         layout="total, sizes, prev, pager, next, jumper">
  </el-pagination>

再次刷新一下页面看下效果，分页组件能够读取当前页面和总条数了，但所有数据都显示出来了，并没有真正分页。

完善分页组件的功能-分页显示

  • 首先创建一个对象，用来对应wtm中的Searcher,这里只需创建Page和Limit字段就行了，表单字段可以使用对象复制功能，复制过来

    data: {
      TableItems: {}, //表格数据对象
      TableSearcher: { //对应wtm中的Searcher
        "Searcher.Page": 1,
        "Searcher.Limit": 10,
      }
    },

  • 对第6步的查询方法进行封装，封装的过程中，使用$.extend(newobj,oldobj)的方法，将表单数据组装成一个分页查询对象

methods: {
  onSearch() {
    //将表单数据复制到this.TableSearcher中，组装成一个完整的查询对象
    $.extend(this.TableSearcher, ff.GetFormData('wtForm_@Model.UniqueId'));  
    $.post('/Trucker/Search', this.TableSearcher, resp => {
      this.TableItems = resp;
      },'json');
  }
}

此时页面能够实现分页显示了，但还不能实现跳转页面


完善分页组件的功能-跳转页面

  • 上一步完成后，页面只是实现了分页，但还不能跳转 ，我们继续实现它

  • 创建一个页面跳转函数onPagination(newPage)

    methods: {
      onSearch() {
        //将表单数据复制到this.TableSearcher中，组装成一个完整的查询对象
        $.extend(this.TableSearcher, ff.GetFormData('wtForm_@Model.UniqueId'));
        $.post('/Trucker/Search', this.TableSearcher, resp => {
          this.TableItems = resp;
          },'json');
      },
      onPagination(newPage) {
        this.TableSearcher["Searcher.Page"] = newPage;
        this.onSearch();
      }
    }

  • 在el-pagination添加跳转事件，v-on:current-change="onPagination"、 v-on:size-change="onPagination"

  <el-pagination :current-page="TableItems.Page"
         :total="TableItems.Count"
         :page-size="10"
         layout="total, sizes, prev, pager, next, jumper"
         v-on:current-change="onPagination" v-on:size-change="onPagination">
  </el-pagination>

此时，已经实现了页面分页，分页跳转



页面的完整代码为

@model ReaTms.ViewModel.TruckerVMs.TruckerListVM
@inject IStringLocalizer<Program> Localizer;


<wt:searchpanel vm="@Model" reset-btn="true">
  <wt:row items-per-row="ItemsPerRowEnum.Three">
    <wt:textbox field="Searcher.TruckerIdentify" />
    <wt:textbox field="Searcher.TruckerName" />
    <wt:textbox field="Searcher.TruckerPhone" />
  </wt:row>
</wt:searchpanel>
<div id="app">
  <el-table :data="TableItems.Data">
    <el-table-column prop="TruckerName" label="司机" />
    <el-table-column prop="TruckerPhone" label="电话" />
    <el-table-column prop="TruckerIdentify" label="身份证" />
  </el-table>
  <el-pagination :current-page="TableItems.Page"
         :total="TableItems.Count"
         :page-size="10"
         layout="total, sizes, prev, pager, next, jumper"
         v-on:current-change="onPagination" v-on:size-change="onPagination">
  </el-pagination>
</div>
<script>
  $().ready(() => {
    $('#wtSearchBtn_@Model.UniqueId')
      .off('click')
      .on('click', e => {
        e.stopPropagation();//阻止点击事件继续冒泡，使pannel不折叠
        app.onSearch();
      }
    );
  });
  var app = new Vue({
    el: '#app',
    data: {
      TableItems: {}, //表格数据对象
      TableSearcher: { //对应wtm中的Searcher
        "Searcher.Page": 1,
        "Searcher.Limit": 10
      }
    },
    methods: {
      onSearch() {
        //将表单数据复制到this.TableSearcher中，组装成一个完整的查询对象
        $.extend(this.TableSearcher, ff.GetFormData('wtForm_@Model.UniqueId'));
        $.post('/Trucker/Search', this.TableSearcher, resp => {
          this.TableItems = resp;
          },'json');
      },
      onPagination(newPage) {
        this.TableSearcher["Searcher.Page"] = newPage;
        this.onSearch();
      }
    }
  });
</script>

增加一个Descriptions（描述列表）

想实现效果：点击表格的行，能够在下方实现这行数据的明细

  • 创建当前行的绑定对象SelectedRow

data: {
  SelectedRow: null,
  TableItems: {}, //表格数据对象
  TableSearcher: { //对应wtm中的Searcher
    "Searcher.Page": 1,
    "Searcher.Limit": 10
  }
},

  • 配置el-table的highlight-current-row，实现点击行自动选中

  • 给el-table的current-change事件创建回调函数onCurrentChange(currentRow, oldCurrentRow)，

    methods: {
      onSearch() {
        //将表单数据复制到this.TableSearcher中，组装成一个完整的查询对象
        $.extend(this.TableSearcher, ff.GetFormData('wtForm_@Model.UniqueId'));
        $.post('/Trucker/Search', this.TableSearcher, resp => {
          this.TableItems = resp;
          },'json');
      },
      onPagination(newPage) {
        this.TableSearcher["Searcher.Page"] = newPage;
        this.onSearch();
      },
      onCurrentChange(currentRow, oldCurrentRow) {
        this.SelectedRow = currentRow;
      }
    }

  • 增加一个el-descriptions

  <el-descriptions title="司机信息" v-if="SelectedRow!=null">
    <el-descriptions-item label="司机">{{SelectedRow.Trucker}}</el-descriptions-item>
    <el-descriptions-item label="手机号">{{SelectedRow.TruckerPhone}}</el-descriptions-item>
    <el-descriptions-item label="身份证">{{SelectedRow.TruckerIdentify}}</el-descriptions-item>
    <el-descriptions-item label="创建人">
      <el-tag size="small">{{SelectedRow.CreateBy}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="创建时间">{{SelectedRow.CreateTime}}</el-descriptions-item>
    <el-descriptions-item label="备注">{{SelectedRow.Remark}}</el-descriptions-item>
  </el-descriptions>

此时，页面效果如下图

增加工具栏及权限控制

  1. 使用Wtm.IsAccessable来控制权限

  2. 使用ff.OpenDialog()来打开一个窗口

  <el-row>
    @if (Model.Wtm.IsAccessable("/Trucker/Create")) {
      <el-button type="primary" onclick="ff.OpenDialog('/Trucker/Create',1,'创建',1000)">创建</el-button>
    }
  </el-row>



此时能够打开窗口创建数据，但创建完成后，数据不能自动刷新。
3. 在控制器中，重写刷新页面的js函数AddCustomScript("app.onSearch();");。

        [HttpPost]
        [ActionDescription("Sys.Create")]
        public ActionResult Create(TruckerVM vm)
        {
            if (!ModelState.IsValid)
            {
                return PartialView(vm);
            }
            else
            {
                vm.DoAdd();
                if (!ModelState.IsValid)
                {
                    vm.DoReInit();
                    return PartialView(vm);
                }
                else
                {
                    return FFResult().CloseDialog().AddCustomScript("app.onSearch();");
                }
            }
        }

至此，页面能够自动刷新了，其他工具栏按钮可参照该方法创建，复杂功能可参照element的官方案例。

本文仅就这问题谈些浅显的看法，意在抛砖引玉，以就教于各界专家。感谢WTM的作者刘亮，免费授权使用如此优秀的框架，造福大家。

https://wtmdoc.walkingtec.cn/

最终代码

@model ReaTms.ViewModel.TruckerVMs.TruckerListVM
@inject IStringLocalizer<Program> Localizer;


<wt:searchpanel vm="@Model" reset-btn="true">
  <wt:row items-per-row="ItemsPerRowEnum.Three">
    <wt:textbox field="Searcher.TruckerIdentify" />
    <wt:textbox field="Searcher.TruckerName" />
    <wt:textbox field="Searcher.TruckerPhone" />
  </wt:row>
</wt:searchpanel>
<div id="app">
  <el-row>
    @if (Model.Wtm.IsAccessable("/Trucker/Create")) {
      <el-button type="primary" onclick="ff.OpenDialog('/Trucker/Create',1,'创建',1000)">创建</el-button>
    }
  </el-row>
  <el-table :data="TableItems.Data" highlight-current-row v-on:current-change="onCurrentChange">
    <el-table-column prop="TruckerName" label="司机" />
    <el-table-column prop="TruckerPhone" label="电话" />
    <el-table-column prop="TruckerIdentify" label="身份证" />
  </el-table>
  <el-pagination :current-page="TableItems.Page"
         :total="TableItems.Count"
         :page-size="10"
         layout="total, sizes, prev, pager, next, jumper"
         v-on:current-change="onPagination" v-on:size-change="onPagination">
  </el-pagination>
  <el-descriptions title="司机信息" v-if="SelectedRow!=null">
    <el-descriptions-item label="司机">{{SelectedRow.TruckerName}}</el-descriptions-item>
    <el-descriptions-item label="手机号">{{SelectedRow.TruckerPhone}}</el-descriptions-item>
    <el-descriptions-item label="身份证">{{SelectedRow.TruckerIdentify}}</el-descriptions-item>
    <el-descriptions-item label="创建人">
      <el-tag size="small">{{SelectedRow.CreateBy}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="创建时间">{{SelectedRow.CreateTime}}</el-descriptions-item>
    <el-descriptions-item label="备注">{{SelectedRow.Remark}}</el-descriptions-item>
  </el-descriptions>
</div>
<script>
  $().ready(() => {
    $('#wtSearchBtn_@Model.UniqueId')
      .off('click')
      .on('click', e => {
        e.stopPropagation();//阻止点击事件继续冒泡，使pannel不折叠
        app.onSearch();
      }
    );
  });
  var app = new Vue({
    el: '#app',
    data: {
      SelectedRow: null,
      TableItems: {}, //表格数据对象
      TableSearcher: { //对应wtm中的Searcher
        "Searcher.Page": 1,
        "Searcher.Limit": 10
      }
    },
    methods: {
      onSearch() {
        //将表单数据复制到this.TableSearcher中，组装成一个完整的查询对象
        $.extend(this.TableSearcher, ff.GetFormData('wtForm_@Model.UniqueId'));
        $.post('/Trucker/Search', this.TableSearcher, resp => {
          this.TableItems = resp;
          },'json');
      },
      onPagination(newPage) {
        this.TableSearcher["Searcher.Page"] = newPage;
        this.onSearch();
      },
      onCurrentChange(currentRow, oldCurrentRow) {
        this.SelectedRow = currentRow;
      }
    }
  });
</script>

控制器

        #region Create
        [ActionDescription("Sys.Create")]
        public ActionResult Create()
        {
            var vm = Wtm.CreateVM<TruckerVM>();
            return PartialView(vm);
        }


        [HttpPost]
        [ActionDescription("Sys.Create")]
        public ActionResult Create(TruckerVM vm)
        {
            if (!ModelState.IsValid)
            {
                return PartialView(vm);
            }
            else
            {
                vm.DoAdd();
                if (!ModelState.IsValid)
                {
                    vm.DoReInit();
                    return PartialView(vm);
                }
                else
                {
                    return FFResult().CloseDialog().AddCustomScript("app.onSearch();");
                }
            }
        }
        #endregion
dotNET跨平台
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
基于layui内置模块(element常用元素的操作)
10-16
今天小编就为大家分享一篇基于layui内置模块(element常用元素的操作)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【智慧医疗】Springboot+Element-UI+LayUI的医疗管理平台
热门推荐
BAIYE_WZ的博客
04-01 1万+
毕设，智慧医疗管理平台，后端用的SpringBoot+Shiro+Mybatis,数据库用的mysql，前端用的Element-UI+LayUI，发出来主要是想大家一起学习参考，提出意见，问题很多，欢迎大家提意见。
分享WPF的UI开源库
最新发布
Aflashstar的博客
07-10 1732
分享WPF的UI开源库，让你的界面更美观，开发效率更快。不积硅步，何以至千里。
Vue：vue中使用layUI
KaiSarH
12-07 895
vue中使用layUI
WTM(ASP.NET Core) Vue项目启动指南
sxy_student的博客
03-24 2090
WTM 3.5发布，VUE来了！那么咱们一起启动WTM Vue试试吧 一、官方站点下载(点击进入)WTM Vue版本 二、还原.NET Core依赖和安装Vue依赖 1、.Net Core 依赖还原 在vs右键点击解决方案，选择还原Nuget包。（这一步可以不做，项目只要在vs中打开，vs会自动还原nuget包） 2、安装vue依赖 2.1、在web项目中找到Cl...
简易版的`Vue`自定义框架
qq_45272615的博客
11-09 700
实现一个简易版的Vue自定义框架 myvue.js: /** * 自定义vue框架 * Vue底层数据双向绑定实现原理：数据劫持！ */ class Vue { // 构造函数，初始化数据 constructor(props) { // 声明变量，保存原始HTML网页数据 this.htmlContent = '' // 1、挂载el标签 this.el = props.el // 2、挂载da
.net core api+layui基础框架系统
03-24
《.NET Core API + Layui 基础框架系统详解》 在当今的Web开发领域，.NET Core API和Layui的结合已经成为构建高效、响应式的后台管理系统的一种流行选择。本文将深入探讨这两个技术栈如何协同工作，构建出一个功能...
WTM：使用WTM快速编写.netcore应用！
02-05
它支持LayUI，React，VUE。 WTM具有内置的代码生成器以最大化开发效率。 它是用于高效Web开发的强大工具。 CI构建状态 平台 构建服务器 开发包 主人身份 发展状况 Azure管道 Windows / Linux / OSX v2.2.300 ...
解决Layui中layer报错的问题
01-19
解决方法，查看网上说名，是非独立版导致直接使用layer导致，只需要在使用时加一说明，申明一下使用。 layui.use(['element','layer'], function(){ var element = layui.element,layer=layui.layer; //一些事件...
WTM-Algiers-Website:WTM阿尔及尔官方网站
05-10
基于盖茨比的默认启动器WTM阿尔及尔官方网站克隆项目。 开始开发。 导航到新站点的目录并启动。 cd WTM-Algiers-Website/gatsby develop 打开源代码并开始编辑！ 您的站点现在在http://localhost:8000 ！ 注意：您还...
wt - 网站开发c++框架
03-15
wt框架是一个c++框架，用于网站开发。通常我们习惯了使用脚本语言来开发网站，实际上使用c++也是可以做到的。wt就提供了这样的一整套开发套件。感兴趣的可以学习一下。
开源框架实例使用一高仿丁香医生的界面.rar
07-30
在本资源"开源框架实例使用一高仿丁香医生的界面.rar"中，我们主要探讨的是如何使用开源框架来构建一个类似丁香医生的应用界面。丁香医生是一款知名的医疗健康应用，而这个实例则旨在帮助开发者理解如何利用开源技术...
LayUI 表单动态赋值与取值,官网给的demo表单赋值部分可能有点不太好用，相信大家都有点不太明白怎么赋值的，以下内容可供大家参考！
weixin_42136237的博客
04-14 1010
layui表单动态赋值与取值,官网给的demo表单赋值部分可能有点不太好用，相信大家都有点不太明白怎么赋值的，以下内容可供大家参考！
layui表单赋值与表单取值
阅读之后，对你有帮助，那就点个赞再走吧
01-06 1万+
//表单赋值 layui.$('#LAY-component-form-setval').on('click', function(){ form.val('example', { "username": "贤心" // "name": "value" ,"password": "123456" ,"interest": 1 ,"lik...
编译 powerpc 版的 Wt web服务框架
欢迎来到牛棚
11-02 1107
Wt(音同'witty')是一个C++库，用以开发交互性Web应用。 Wt的API以widget为中心，将桌面GUI APIs的良好测试模式引入Web开发。Wt为开发者提供了几乎所有Web实现细节的抽象，其中包括事件处理、图像支持、优雅降级（或渐进增强）、及良好的URL处理。 由于Wt依赖boost 所以先编译boost 编译powerpc  boost ./bootstra
Tornado框架WTForms的使用
weixin_52185313的博客
02-16 849
Tornado框架WTForms的使用 – 潘登同学的Tornado学习笔记 文章目录Tornado框架WTForms的使用 -- 潘登同学的Tornado学习笔记WTForms表单验证报错解决WTForm渲染模板WTForms结合peewee最重要一点 WTForms表单验证 官方文档： https://wtforms.readthedocs.io/en/2.3.x/ pip install wtforms-tornado # 创建表单类 from wtforms_tornado import Form
WTD测试框架（一）框架功能模块
chuaixue0334的博客
03-26 372
作者 何坤158109016@qq.comV2.0 2017/3/26 www.snappydata.top WTD测试框架功能模块图： 1.webui 测试case 引擎 selenium在webui测试的地位很高的，它集成了webdriver来对各种浏览器的模拟操作。目前webdriv...
.NET 6 WTM Vue3.0项目启动
sxy_student的博客
02-11 1239
在wtmplus官网新建一个项目，并下载wtm vue3.0的源码。 下载完成之后，解压缩，将获得以下文件结构。 vue3.0的前端位于web项目的ClientApp文件夹中。 我们使用vscode打开它，注意：vscode最好装上vue3-snippets-for-vscode插件，不然在vs code中，部分源码会报错！不装也不会影响开发。 这时候，我们先启动webapi。 用vs打开项目，修改数据库连接字符串，然后选择项目启动调试改成ApiOnly。建议开发的时候使用sq..
深入剖析WTL—WTL框架窗口分析（6）
★果冻★的专栏
12-01 1719
WTL对框架窗口的封装ATL仅仅是封装了窗口函数和提供了消息映射。实际应用中，需要各种种类的窗口，比如，每个界面线程所对应的框架窗口。WTL正是在ATL基础上，为我们提供了框架窗口和其他各种窗口。 所有的应用程序类型中，每个界面线程都有一个框架窗口(Frame)和一个视(View)。它们的概念和MFC中的一样。 图示是WTL的窗口类的继承图。 WTL框架窗口为我们提供了： 一个应用程序的标题，窗口
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值