【WTM实战教程】002 基础增删改查和前后端接口请求的完整流程

KnifeZ 11/18/2020, 11:47:28 PM 678

在上一篇已经成功的运行起项目登录到后台,这一篇就从最常用的增删改查开始一步一部熟悉如何使用WTM-Vue开发。

新建Model

CMSdemo.Model中新建一个Model,其中某些字段需要使用下拉框并且选择的项相对固定不会随业务改变时,可以直接在Model里写枚举,这样在使用框架生成代码时会自动使用下拉选择框。如果希望数据是可以以Tree的形式展示,则在继承BasePoco的同时继承ITreeData\T\。详细属性请查阅官方文档。

// Article.cs
namespace CMSdemo.Model
{
    /// summary
    /// 页面类型
    /// /summary
    public enum PageModelEnum
    {
        [Display(Name = "删除")]
        Delete = -1,
        [Display(Name = "草稿")]
        Draft,
        [Display(Name = "发布")]
        Publish,
    }
    [Table("Article")]
    public class Article: BasePoco
    {
        [Display(Name = "标题")]
        [StringLength(100)]
        public string Title { get; set; }
        [Display(Name = "描述")]
        [StringLength(100)]
        public string Description { get; set; }

        [Display(Name = "名称")]
        [StringLength(100)]
        public string Name { get; set; }

        [Display(Name = "正文")]
        public string BodyText { get; set; }

        [Display(Name = "类别")]
        public Guid? ArticleCategoryID { get; set; }

        [Display(Name = "类别")]
        public ArticleCategory ArticleCategory { get; set; }

        [Display(Name = "生成地址")]
        [StringLength(200)]
        public string Url { get; set; }

        [Display(Name = "排序")]
        public int Sort { get; set; }

        [Display(Name = "页面优化类型")]
        public PageModelEnum PageModel { get; set; }

    }
}
// ArticleCategory.cs

namespace CMSdemo.Model
{

    [Table("ArticleCategory")]
    public class ArticleCategory : BasePoco, ITreeDataArticleCategory
    {
        [Display(Name = "类别名称")]
        [StringLength(50)]
        public string Name { get; set; }
        [Display(Name = "描述")]
        [StringLength(50)]
        public string Description { get; set; }

        [Display(Name = "排序")]
        public int Sort { get; set; }

        [Display(Name = "模板路径")]
        public string TemplateDefaultPath { get; set; }

        #region ITreeData成员

        [Display(Name = "所属类别")]
        public Guid? ParentId { get; set; }
        [Display(Name = "ParentFolder")]
        [JsonIgnore]
        public ArticleCategory Parent { get; set; }
        [Display(Name = "Children")]
        [JsonIgnore]
        public ListArticleCategory Children { get; set; }

        #endregion

    }
}

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

添加Model到DataContext.cs中

如图所示将表添加到DataContext中,然后如上一节一样,在程序包管理器控制台添加表到数据库

add-migration AddTableArticle
update-database
0
1

通过'代码生成'生成前后端基础代码

登录成功后鼠标放在右上角人物头像上,选择 代码生成,然后在跳转的页面选择Model,填写模块名称,然后点生成代码,之后的勾选搜索条件、列表展示等均可在生成后直接在代码里修改,所以随便选一下就行,其中 关联表显示字段就是当使用下拉框是展示哪个字段。接下来一路继续继续点到底并确定生成,然后重新启动项目即可访问刚刚生成的模块。

Step 1

Step 2

最终重启之后会看到菜单处已经多了两个菜单,正是刚刚添加的两个模块。

前后端接口的完整流程

文件结构

可以看到,在生成的前端代码中存在 /store/views两个文件夹,store中存放的就是一些可供调用的接口,可以简单理解为js中的一个个 function

config.ts则是配置table展示字段、工具栏按钮集合以及后端创建Model时添加的枚举类型。可以在该文件中添加删除修改 TABLE_HEADER的值来控制数据表格的展示。

index.vue就是这个创建的模块的vue页面,暂时不需要理解里面所有代码都是干嘛的,只需要知道 SEARCH_DATA控制查询项即可正常修改查询条件。

前端写法

现在我们自定义一个方法来调用后台接口返回数据,首先在对于模块中打开 api.ts,通常来讲用的最多的是post和get,而这些在这个文件中均有示例,现在添加一个post接口,如下所示,其实就是copy一个post方法修改方法名,然后在文件底部的 export default中将你定义的方法名写进去,记得和其他方法名以逗号隔开,如我写的这个为 mySearchData,就需要在底部 export default中添加这个方法。

const mySearchData = {
  url: reqPath + "mysearch",
  method: "post",
  dataType: "array"
};
0
1
2
3
4

现在方法已经定义好了,就需要在页面里引用,其实这个也很简单,如下图所示,直接以 @Action的形式将刚刚定义的方法名引入过来,就可以在当前页面使用了。

  • 第一步先在页面内添加一个按钮el-button,并给按钮添加点击事件@click=customShow
  • 第二步引入刚刚添加的方法,以@Action的形式定义
  • 第三部写一个页面方法customShow,调用第二步的方法的形式为用this.点出来方法并传值,接受返回值得方式为.then(res={}),然后就可以拿到返回值进行其他操作了。

后端接口

        [ActionDescription("自定义方法")]
        [HttpPost("MySearch")]
        public IActionResult MySearch (ArticleSearcher searcher)
        {
            //实现你自己的方法
            return Ok("Hello world");
        }
0
1
2
3
4
5
6

在对应控制器里添加方法,需要注意HttpPost需要和前端调用的名字一致,不区分大小写。

完整请求

重新运行项目,打开 内容管理页面,点击刚刚添加的按钮,你会发现浏览器会弹出一个成功的消息,消息内容即为刚刚在后端接口中返回的'hello world',至此从前端添加交互按钮请求后端接口和后端接口的实现就已经全部完成了。

如果没有成功,需要检查一下是不是代码缺少引用或者HttpPost前后台不一致。

通过这两篇博客你会发现,想要快速上手vue,不需要对vue有太多了解,简单的照猫画虎就能完成功能,而前端代码大部分都可以用 element-ui的组件来完成,而它又拥有非常完善的文档,参照文档一般都能够正常实现功能。

下一篇将会对vue前端项目进行详细介绍,并介绍一下vue的生命周期,了解了这个对接下来的编码思路会有很大帮助。

系列项目地址: https://gitee.com/KnifeZ_Game/cmsdemo

如果觉得文章帮助了您,可以请我喝杯咖啡

#Tags

WTM

发表评论

邮箱
昵称

热门文章

本站已稳定运行了1天 共计人访问
Powered by .NET 5 on ubuntu