当前位置：首页 > ops >正文

ShenNiusModularity项目源码学习（33：ShenNius.Admin.Mvc项目分析-18）

ops 2025/7/14 1:10:27

文章管理页面用于搜索、新建、维护及删除CMS管理模块的文章信息，包括栏目名称、文章标题、作者等数据。文章管理页面的后台控制器类ArticleController位于ShenNius.Admin.Mvc项目的Areas\Cms\Controllers内，页面文件位于同项目的Areas\Cms\Views\Article内，其中Index.cshtml页面为主页面，Modify.cshtml页面用于新建和编辑文章信息，页面调用的后台WebApi接口位于ShenNius.Admin.API项目的ArticleController，主要用到GetListPages（分页获取文章列表）、ChangeState、Deletes、Modify、SoftDelete、Export等函数。
在这里插入图片描述

文章管理主页面的布局如下所示，最上方为搜索栏，中间为工具栏（工具栏中的导入按钮只是个摆设，没看到事件处理函数），下方显示文章数据表格。
在这里插入图片描述
页面加载后，通过apiUtil.render函数调用WebApi函数GetListPages分页获取文章数据，搜索框的检索事件其实也是触发表格的重载操作（table.reload），并将检索条件传递给后台获取检索结果。专门设置文章标题列，点击该列可以触发编辑事件，同时设置审状态、是否置顶、是否评论、是否热点等四列的事件处理函数，点击这几列时调用WebApi接口ChangeState修改文章状态。
在这里插入图片描述
定义事件处理函数处理工具栏按钮点击事件及数据行中的按钮点击事件，添加和编辑按钮调用Modify.cshtml页面，而删除按钮的话，点击工具栏中的删除按钮，处理逻辑是将选中的记录软删除，后续还能在回收站中恢复，而点击数据行中的删除按钮，则是直接删除数据库中的数据，无法恢复。点击导出按钮，调用WebApi接口Export导出文章列表excel文件。
在这里插入图片描述
添加和编辑文章用的都是Modify.cshtml页面，该页面使用开源富文本编辑器tinymce维护文章内容（设置调用WebApi接口ArticleController.QiniuFile函数上传图片）。页面加载时调用common.js内的BindParentColumn函数，调用WebApi接口ColumnController.GetAllParentColumn获取多级栏目列表填充下拉列表，通过在名称前加空格+"|–"表达栏目层级；点击一键匹配内链按钮，调用WebApi接口KeywordController.ContentReplace函数给文章内容中的关键词添加链接。点击确认保存按钮，根据编辑页面中是否存在Id字段判断是添加操作还是编辑操作，前者的话调用WebApi接口Add新建文章，后者则调用Modify函数更新文章信息。
在这里插入图片描述