后台页面代码创建+

更新时间:2024-02-29 17:15发布者:名扬银河数字系统类型:后台页面代码

名扬银河数字官网系统的后台页面代码创建+文档:

一、网站管理者根据网站系统后台管理页面的需要,自行创建的后台页面信息,这些页面信息包含页面名称、页面的文件名称、页面的html代码。

二、创建一个后台页面的步骤主要有三步:

1、第一步、进入网站系统管理后台打开创建的窗口。点击系统菜单【后台页面代码】,点击【+添加后台页面】打开新建页面代码窗口,填写页面名称、文件名称、页面代码内容后点击“添加”按钮创建。

(1)、设置页面名称:为创建的页面取一个简短明义的名称,主要用于网站管理人员查看识别的。比如:文章分类设置页、文章分类列表页、文章发布页、文章列表页。页面名称只支持中文、字母、数字、下划线、短横线。

(2)、设置文件名称:设置页面的文件名,建议取一个简短明义的名称,此处只需填写不带后缀的文件名即可。

文件名称要求:请不要填写后缀名!文件名只支持字母、数字、下划线、短横线。并且此文件名须在前台页面文件名中具有唯一性!

文件名称举例:文章分类设置页面文件名为news_class_info;文章分类列表页的文件名为news_class_list,文章发布页的文件名为news_info,文章列表页的文件名为news_list。

特别说明:设置的页面的文件名只对页面代码管理有效,与后台访问的url地址信息无关,后台页面访问用的url地址信息是需要独立自定义的。

(3)、设置页面代码:请在此处编写具体的页面html代码,注意在页面代码中放置页面级权限、具体功能操作权限的控制代码信息。最后点击【添加】按钮保存。

(4)、新建页面代码内容的实例图解,创建一个后台文章发布页面:

(4.1)、系统后台页面呈现效果css文件引用:uploadifive.css:支持图片处理功能所需;m.css:系统基础css样式支持。

<link href="/res/c/uploadifive.css?[cssjsver]" rel="stylesheet" />

<link href="/res/c/m.css?[cssjsver]" rel="stylesheet" />

(4.2)、系统后台页面功能处理js文件引用:jquery.1.12.4.min.js 第三方jquery框架文件。jquery.uploadifive.js 第三方图片处理框架文件。m.js 系统基础js文件支持。

<script src="/res/j/jquery.1.12.4.min.js"></script>

<script src="/res/j/jquery.uploadifive.js"></script>

<script src="/res/j/m.js?[cssjsver]"></script>

(4.3)、定义接收处理超链接参数eid,用于某一篇文章信息的修改处理:[req=eid=int]

(4.4)、判断:如果eid参数值等于0表示添加,当前页面进行文章添加权限验证,使用 [pageauth=13001]i[/pageauth]。页面访问权限控制使用 [pageauth=管理项代码标识]功能操作项标识[/pageauth]。此处的文章发布页管理项使用标识为13001,功能操作项标识为i。只有赋予了文章发布页添加操作权限的管理人员才能访问处理。

[if={$req.eid$}={0}=int]

[pageauth=13001]i[/pageauth]

[/if]

(4.5)、判断:如果eid参数值大于0表示修改,当前页面进行文章修改权限验证,文章发布页管理项使用标识为13001,功能操作项标识为u。只有赋予了文章发布页修改操作权限的管理人员才能访问处理。

[if={$req.eid$}d{0}=int]

[pageauth=13001]u[/pageauth]

[/if]

(4.6)、如果参数eid大于0表示修改文章请求,需要定义[data...]...[/data]查询此篇文章的数据内容出来初始化呈现修改:

[if={$req.eid$}d{0}=int]

[data=news_list][0][out=newsinfo][num=1]

[get][col=news_title][col=news_typeid][col=news_flag][col=news_con][col=news_des][col=news_faceurl][/get]

[where][col=news_id][way]=[/way][val]$req.eid$[/val][/col][col=news_isdel][way]=[/way][val]0[/val][/col][/where]

[/0][/data]

[/if]

(4.7)、参照系统表单布局效果,自定义一个<select>选择框表单元素项。

接入验证必选项处理:首先、在最外层class样式名为orow的div中,增加opmst1样式类名、定义id属性值=my_加<select>元素的id属性值,比如:my_news_typeid;在外层class样式名为ocoll的div中增加optip样式类名。其次、接入提交保存处理功能,针对<select>加入一个class样式即可:class="opselect"

<div class="orow cf opmst1" id="my_news_typeid">

<div class="ocoll optip">所属分类:</div><div class="ocolr">

<select id="news_typeid" class="opselect" size="1">

<option value="">选择分类</option>

[data=news_class_list][0][get][col=nc_id][col=nc_name][/get][where][col=nc_isdel][way]=[/way][val]0[/val][/col][/where][orderby][col=nc_sort=asc][/orderby][/0][row]<option value="$nc_id$" [if={$nc_id$}={$newsinfo.news_typeid$}=int]selected[/if]>$nc_name$</option>[/row][/data]

</select></div></div>

(4.8)、使用数据发布型组件定义布局:文章标题、封面图片、文章摘要、内容详情。

[sys.text #news_title @文章标题 maxlen=100 must=1]$bind.newsinfo.news_title$[/sys.text]

[sys.faceimg #news_faceurl @封面图片 {请上传一张图片进行设置封面图} must=1 width=686 height=320 ]$bind.newsinfo.news_faceurl$[/sys.faceimg]

[sys.textbox #news_des @文章摘要 {填写文章总体概述摘要信息,最多200字} maxlen=200 must=1]$bind.newsinfo.news_des$[/sys.textbox]

[sys.textpicbox #news_con @内容详情 {请编辑内容详情} must=1 ]$bind.newsinfo.news_con$[/sys.textpicbox]

(4.9)、判断:使用单向if语句判断,如果文章状态字段news_flag的值等于0时,初始化【禁止显示】选项为默认选中项。

<option value="0" [if={$newsinfo.news_flag$}={0}=int]selected[/if]>禁止显示</option>

(4.10)、判断:使用单向if语句判断,如果参数eid=0时,并且拥有文章添加功能操作权限时,加载【添加】按钮。使用[doshow=页面级权限代码标识=具体功能操作权限标记]...[/doshow]处理添加操作权限。此按钮绑定了点击操作的功能事件信息参数:data-event="setaddnews"。

[if={$req.eid$}={0}=int][doshow=13001=i]<a href="javascript:void(0);" class="actbtn" data-event="setaddnews">添 加</a>[/doshow][/if]

(4.11)、判断:使用单向if语句判断,如果参数eid大于0时,并且拥有文章修改功能操作权限时,加载【修改】按钮。使用[doshow=页面级权限代码标识=具体功能操作权限标记]...[/doshow]处理修改操作权限。此按钮绑定了点击操作的功能事件信息参数:data-event="seteditnews"。

[if={$req.eid$}d{0}=int][doshow=13001=u]<a href="javascript:void(0);" class="actbtn" data-event="seteditnews">修 改</a>[/doshow][/if]

(4.12)、核心项,引擎要求后台表单提交事件中必须放置的5个隐藏域项:

<input type="hidden" id="k1" value="[k1]" />

<input type="hidden" id="k2" value="[k2]" />

<input type="hidden" id="kt" value="[kt]" />

<input type="hidden" id="eid" value="$req.eid$" />

<input type="hidden" id="pageloadwinsn" value="[pageloadwinsn]" />

(4.13)、定义提交添加文章时,结合表单元素处理的添加保存功能事件信息,功能事件名称为setaddnews。设定操作权限为[role=13001=i]。执行操作处理的数据表为news_list,处理方式为add,[action=news_list=add]。

[event=setaddnews]

[role=13001=i]

[action=news_list=add]

[cols]

[col=news_title][must]请填写标题[/must][val]$e.news_title$[/val][/col]

[col=news_typeid][val]$e.news_typeid$[/val][/col]

[col=news_faceurl][val]$e.news_faceurl$[/val][/col]

[col=news_des][must]请填写摘要[/must][val]$e.news_des.noln$[/val][/col]

[col=news_con][must]请请编辑内容详情[/must][val]$e.news_con$[/val][/col]

[col=news_flag][val]$e.news_flag$[/val][/col]

[col=news_admin_id][val]@sys.adminid@[/val][/col]

[col=news_admin_name][val]@sys.adminname@[/val][/col]

[col=news_addtime][val]@sys.nowtime@[/val][/col]

[/cols]

[/action]

[/event]

(4.14)、定义提交修改文章时,结合表单元素处理的更新功能事件信息,功能事件名称为seteditnews;设定操作权限为[role=13001=u];执行操作处理的数据表为news_list,处理方式为update,[action=news_list=update];修改条件字段为文章编号字段news_id=接收到的eid参数值$req.eid$。

[event=seteditnews]

[role=13001=u]

[req=eid=int]

[action=news_list=update]

[cols]

[col=news_title][must]请填写标题[/must][val]$e.news_title$[/val][/col]

[col=news_typeid][val]$e.news_typeid$[/val][/col]

[col=news_faceurl][val]$e.news_faceurl$[/val][/col]

[col=news_des][must]请填写摘要[/must][val]$e.news_des.noln$[/val][/col]

[col=news_con][must]请请编辑内容详情[/must][val]$e.news_con$[/val][/col]

[col=news_flag][val]$e.news_flag$[/val][/col]

[col=news_addtime][val]@sys.nowtime@[/val][/col]

[col=news_imgs][val]$e.news_imgs$[/val][/col]

[/cols]

[where]

[col=news_id][way]=[/way][val]$req.eid$[/val][/col]

[/where]

[/action]

[/event]

(4.15)、统一绑定【添加】、【修改】按钮的点击提交处理事件信息:

$(function () {$(".actbtn").bind("click", function () {sysevent($(this).attr("data-event"));});});

(4.16)、对接按钮的点击提交处理:

function sysevent(evt) {

var nullmsg = alertnullsyselecons();

if (nullmsg != "") {pageAlert(nullmsg, 0, 1500);return false;}

var vals = getsyselecons();

addorupdate("",evt,vals);

}

新建页面代码内容的实例图解,创建一个后台文章发布页面

第二步、为新建的管理页面配置url访问地址规则。此时会使用到此页面的文件名称,建议后台页面的url访问页面名称和定义的文件名称保持一致,方便维护。

[url]

[name]文章发布页[/name]

[req]/news_info(\?(.*?)?)?[/req]

[flename]news_info[/flename]

[query][/query]

[/url]

第三步、在网站系统管理后台的系统菜单中配置此页面的权限代码和具体操作权限项。如果需要此管理页面在系统后台左侧菜单中出现,请设定其[show]值为1,比如:[show]1[/show]。注意,新增的菜单配置项,需要在角色权限中决定是否赋予原有的角色的此页面的相关权限,需要赋予此页面相关权限后,其他管理人员才能使用。后台页面的链接可以在系统菜单中出现,也可是放置在后台页面代码中链接使用。

[menu]

[title]文章管理[/title]

[item]

[name]发布文章信息+[/name]

[show]1[/show]

[link]/news_info[/link]

[key]13001[/key]

[role=i]添加[/role]

[role=u]修改[/role]

[/item]

[item]

[name]文章列表管理[/name]

[show]1[/show]

[link]/news_list[/link]

[key]13002[/key]

[role=s]查看[/role]

[role=d]删除[/role]

[/item]

...

[/menu]

在网站系统管理后台的系统菜单中配置此页面的权限代码和具体操作权限项

创建后台页面结束,可以通过菜单或相关页面点击打开查看页面进行开发调整。

通过菜单或相关页面点击打开查看页面进行开发调整

三、更多网站系统管理后台的页面代码的用法实战操作,请下载名扬银河数字官网系统后获得更好的实践代码与文档的查阅体验,下载网站系统请【名扬银行数字官网系统的最新版本