node之管理系统接口改良以及配合H UI框架实现管理系统..._CSDN博客

来自 : CSDN技术社区 发布时间：2021-03-25

meta name renderer content webkit|ie-comp|ie-stand meta http-equiv X-UA-Compatible content IE edge,chrome 1 meta name viewport content width device-width,initial-scale 1,minimum-scale 1.0,maximum-scale 1.0,user-scalable no / meta http-equiv Cache-Control content no-siteapp / link rel Bookmark href favicon.ico link rel Shortcut Icon href favicon.ico / !--[if lt IE 9] script type text/javascript src lib/html5.js /script script type text/javascript src lib/respond.min.js /script ![endif]-- link rel stylesheet type text/css href static/h-ui/css/H-ui.min.css / link rel stylesheet type text/css href static/h-ui.admin/css/H-ui.admin.css / link rel stylesheet type text/css href lib/Hui-iconfont/1.0.8/iconfont.css / link rel stylesheet type text/css href static/h-ui.admin/skin/default/skin.css id skin / link rel stylesheet type text/css href static/h-ui.admin/css/style.css / !--[if IE 6] script type text/javascript src http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js /script script DD_belatedPNG.fix( * /script ![endif]-- !--/meta 作为公共模版分离出去-- title 资讯列表 - 资讯管理 - H-ui.admin v3.0 /title meta name keywords content H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载 meta name description content H-ui.admin v3.0 是一款由国人开发的轻量级扁平化网站后台模板 完全免费开源的网站后台管理系统模版 适合中小型CMS后台系统。 /head body !--_header 作为公共模版分离出去-- header class navbar-wrapper div class navbar navbar-fixed-top div class container-fluid cl a class logo navbar-logo f-l mr-10 hidden-xs href /aboutHui.shtml H-ui.admin /a a class logo navbar-logo-m f-l mr-10 visible-xs href /aboutHui.shtml H-ui /a span class logo navbar-slogan f-l mr-10 hidden-xs v3.0 /span a aria-hidden false class nav-toggle Hui-iconfont visible-xs href javascript:; #xe667; /a nav class nav navbar-nav ul class cl li class dropDown dropDown_hover a href javascript:; class dropDown_A i class Hui-iconfont #xe600; /i 新增 i class Hui-iconfont #xe6d5; /i /a ul class dropDown-menu menu radius box-shadow a href javascript:; οnclick article_add( 添加资讯 , article-add.html ) i class Hui-iconfont #xe616; /i 资讯 /a /li a href javascript:; οnclick picture_add( 添加资讯 , picture-add.html ) i class Hui-iconfont #xe613; /i 图片 /a /li a href javascript:; οnclick product_add( 添加资讯 , product-add.html ) i class Hui-iconfont #xe620; /i 产品 /a /li a href javascript:; οnclick member_add( 添加用户 , member-add.html , , 510 ) i class Hui-iconfont #xe60d; /i 用户 /a /li /ul /li /ul /nav nav id Hui-userbar class nav navbar-nav navbar-userbar hidden-xs ul class cl li 超级管理员 /li li class dropDown dropDown_hover a href # class dropDown_A admin i class Hui-iconfont #xe6d5; /i /a ul class dropDown-menu menu radius box-shadow li a href javascript:; onClick myselfinfo() 个人信息 /a /li a href # 切换账户 /a /li a href # 退出 /a /li /ul /li li id Hui-msg a href # title 消息 span class badge badge-danger 1 /span i class Hui-iconfont style font-size:18px #xe68a; /i /a /li li id Hui-skin class dropDown right dropDown_hover a href javascript:; class dropDown_A title 换肤 i class Hui-iconfont style font-size:18px #xe62a; /i /a ul class dropDown-menu menu radius box-shadow a href javascript:; data-val default title 默认 黑色 默认 黑色 /a /li a href javascript:; data-val blue title 蓝色 蓝色 /a /li a href javascript:; data-val green title 绿色 绿色 /a /li a href javascript:; data-val red title 红色 红色 /a /li a href javascript:; data-val yellow title 黄色 黄色 /a /li li a href javascript:; data-val orange title 橙色 橙色 /a /li /ul /li /ul /nav /div /div /header !--/_header 作为公共模版分离出去-- !--_menu 作为公共模版分离出去-- aside class Hui-aside div class menu_dropdown bk_2 dl id menu-article dt class selected i class Hui-iconfont #xe616; /i 资讯管理 i class Hui-iconfont menu_dropdown-arrow #xe6d5; /i /dt dd style display:block li class current a href article-list.html title 资讯管理 资讯管理 /a /li /ul /dd /dl dl id menu-picture dt i class Hui-iconfont #xe613; /i 图片管理 i class Hui-iconfont menu_dropdown-arrow #xe6d5; /i /dt a href picture-list.html title 图片管理 图片管理 /a /li /ul /dd /dl dl id menu-product dt i class Hui-iconfont #xe620; /i 产品管理 i class Hui-iconfont menu_dropdown-arrow #xe6d5; /i /dt a href product-brand.html title 品牌管理 品牌管理 /a /li a href product-category.html title 分类管理 分类管理 /a /li a href product-list.html title 产品管理 产品管理 /a /li /ul /dd /dl dl id menu-comments dt i class Hui-iconfont #xe622; /i 评论管理 i class Hui-iconfont menu_dropdown-arrow #xe6d5; /i /dt a href http://h-ui.duoshuo.com/admin/ title 评论列表 评论列表 /a /li a href feedback-list.html title 意见反馈 意见反馈 /a /li /ul /dd /dl dl id menu-member dt i class Hui-iconfont #xe60d; /i 会员管理 i class Hui-iconfont menu_dropdown-arrow #xe6d5; /i /dt a href member-list.html title 会员列表 会员列表 /a /li a href member-del.html title 删除的会员 删除的会员 /a /li a href member-level.html title 等级管理 等级管理 /a /li a href member-scoreoperation.html title 积分管理 积分管理 /a /li a href member-record-browse.html title 浏览记录 浏览记录 /a /li a href member-record-download.html title 下载记录 下载记录 /a /li a href member-record-share.html title 分享记录 分享记录 /a /li /ul /dd /dl dl id menu-admin dt i class Hui-iconfont #xe62d; /i 管理员管理 i class Hui-iconfont menu_dropdown-arrow #xe6d5; /i /dt a href admin-role.html title 角色管理 角色管理 /a /li a href admin-permission.html title 权限管理 权限管理 /a /li a href admin-list.html title 管理员列表 管理员列表 /a /li /ul /dd /dl dl id menu-tongji dt i class Hui-iconfont #xe61a; /i 系统统计 i class Hui-iconfont menu_dropdown-arrow #xe6d5; /i /dt a href charts-1.html title 折线图 折线图 /a /li a href charts-2.html title 时间轴折线图 时间轴折线图 /a /li a href charts-3.html title 区域图 区域图 /a /li a href charts-4.html title 柱状图 柱状图 /a /li a href charts-5.html title 饼状图 饼状图 /a /li a href charts-6.html title 3D柱状图 3D柱状图 /a /li a href charts-7.html title 3D饼状图 3D饼状图 /a /li /ul /dd /dl dl id menu-system dt i class Hui-iconfont #xe62e; /i 系统管理 i class Hui-iconfont menu_dropdown-arrow #xe6d5; /i /dt a href system-base.html title 系统设置 系统设置 /a /li a href system-category.html title 栏目管理 栏目管理 /a /li a href system-data.html title 数据字典 数据字典 /a /li a href system-shielding.html title 屏蔽词 屏蔽词 /a /li a href system-log.html title 系统日志 系统日志 /a /li /ul /dd /dl /div /aside div class dislpayArrow hidden-xs a class pngfix href javascript:void(0); onClick displaynavbar(this) /a /div !--/_menu 作为公共模版分离出去-- section class Hui-article-box nav class breadcrumb i class Hui-iconfont #xe67f; /i 首页 span class c-gray en /span 资讯管理 span class c-gray en /span 资讯列表 a class btn btn-success radius r style line-height:1.6em;margin-top:3px href javascript:location.replace(location.href); title 刷新 i class Hui-iconfont #xe68f; /i /a /nav div class Hui-article article class cl pd-20 div class cl pd-5 bg-1 bk-gray mt-20 span class l a href javascript:; οnclick datadel() class btn btn-danger radius i class Hui-iconfont #xe6e2; /i 批量删除 /a a class btn btn-primary radius data-title 添加资讯 _href food-add.html οnclick article_add( 添加资讯 , food-add.html ) href javascript:; i class Hui-iconfont #xe600; /i 添加资讯 /a /span span class r 共有数据 strong class zts /strong 条 /span /div div class mt-20 table class table table-border table-bordered table-bg table-hover table-sort thead tr class text-c th width 25 序号 /th th width 80 ID /th th 名称 /th th width 80 分类 /th th width 80 价格 /th th width 120 描述 /th th width 75 缩略图 /th th width 60 操作 /th /tr /thead tbody class tb /tbody /table div class yejiao span οnclick jump( first ) 首页 /span span οnclick jump( prev ) 上一页 /span span class apg 1/3 /span input id goPage type text name οninput value value.replace(/[^\\d]/g, ) placeholder 请输入非0数字 !-- input type text id goPage -- span οnclick jump( go ) go /span span οnclick jump( next ) 下一页 /span span οnclick jump( last ) 尾页 /span input class mohu type text placeholder 请输入商品关键字 span class sousuo 搜索 /span /div /div /article /div /section !--_footer 作为公共模版分离出去-- script type text/javascript src lib/jquery/1.9.1/jquery.min.js /script script type text/javascript src lib/layer/2.4/layer.js /script script type text/javascript src static/h-ui/js/H-ui.js /script script type text/javascript src static/h-ui.admin/js/H-ui.admin.page.js /script !--/_footer /作为公共模版分离出去-- !--请在下方写此页面业务相关的脚本-- script type text/javascript src lib/My97DatePicker/4.8/WdatePicker.js /script script type text/javascript src lib/datatables/1.10.15/jquery.dataTables.min.js /script script type text/javascript src lib/laypage/1.2/laypage.js /script script type text/javascript $( .table-sort ).dataTable({ aaSorting : [ [1, desc ] ], //默认第几个排序 bStateSave : true, //状态保存 aoColumnDefs : [ //{ bVisible : false, aTargets : [ 3 ]} //控制列的隐藏显示 orderable : false, aTargets : [0, 8] } // 不参与排序的列 /*资讯-添加*/ function article_add(title, url, w, h) { var index layer.open({ type: 2, title: title, content: url layer.full(index); /*资讯-编辑*/ function article_edit(title, url, id, w, h) { var index layer.open({ type: 2, title: title, content: url layer.full(index); /*资讯-删除*/ /*资讯-审核*/ function article_shenhe(obj, id) { layer.confirm( 审核文章 , { btn: [ 通过 , 不通过 , 取消 ], shade: false, closeBtn: 0 function () { $(obj).parents( tr ).find( .td-manage ).prepend( a class c-primary onClick article_start(this,id) href javascript:; title 申请上线 申请上线 /a $(obj).parents( tr ).find( .td-status ).html( span class label label-success radius 已发布 /span $(obj).remove(); layer.msg( 已发布 , { icon: 6, time: 1000 function () { $(obj).parents( tr ).find( .td-manage ).prepend( a class c-primary onClick article_shenqing(this,id) href javascript:; title 申请上线 申请上线 /a $(obj).parents( tr ).find( .td-status ).html( span class label label-danger radius 未通过 /span $(obj).remove(); layer.msg( 未通过 , { icon: 5, time: 1000 /*资讯-下架*/ function article_stop(obj, id) { layer.confirm( 确认要下架吗 , function (index) { $(obj).parents( tr ).find( .td-manage ).prepend( a style text-decoration:none onClick article_start(this,id) href javascript:; title 发布 i class Hui-iconfont #xe603; /i /a $(obj).parents( tr ).find( .td-status ).html( span class label label-defaunt radius 已下架 /span $(obj).remove(); layer.msg( 已下架! , { icon: 5, time: 1000 /*资讯-发布*/ function article_start(obj, id) { layer.confirm( 确认要发布吗 , function (index) { $(obj).parents( tr ).find( .td-manage ).prepend( a style text-decoration:none onClick article_stop(this,id) href javascript:; title 下架 i class Hui-iconfont #xe6de; /i /a $(obj).parents( tr ).find( .td-status ).html( span class label label-success radius 已发布 /span $(obj).remove(); layer.msg( 已发布! , { icon: 6, time: 1000 /*资讯-申请上线*/ function article_shenqing(obj, id) { $(obj).parents( tr ).find( .td-status ).html( span class label label-default radius 待审核 /span $(obj).parents( tr ).find( .td-manage ).html( layer.msg( 已提交申请 耐心等待审核! , { icon: 1, time: 2000 /script !--/请在上方写此页面业务相关的脚本-- script // cha这是查找所有数据的函数 function cha() { var url http://localhost:3210/api/cha var xhr new XMLHttpRequest() xhr.open( post , url) xhr.setRequestHeader( content-type , application/x-www-form-urlencoded ) xhr.send() xhr.onload function () { var shuju JSON.parse(xhr.responseText) console.log(shuju) console.log( 打印响应回来数组的索引0 , shuju.result[0]); if (shuju.err 1) { var shuju1 JSON.parse(xhr.responseText).result shuju1.forEach(function (item, index) { var tb document.querySelector( .tb ) tb.innerHTML tr class text-c td input type checkbox value name /td td ${item._id} /td td class text-l u style cursor:pointer class text-primary onClick article_edit( 查看 , article-zhang.html , 10001 ) title 查看 ${item.name} /u /td td ${item.foodType} /td td ${item.price} /td td ${item.desc} /td td img src ${item.img} alt style width:50px;height:50px /td td class f-14 td-manage a style text-decoration:none class ml-5 onClick update_pop( ${item._id} ) href javascript:; title 编辑 i class Hui-iconfont #xe6df; /i a style text-decoration:none class ml-5 onClick food_del(this, ${item._id} ) href javascript:; title 删除 i class Hui-iconfont #xe6e2; /i /a /td /tr // 删除数据 function food_del(obj, id) { console.log(id); layer.confirm( 确认要删除吗 , function (index) { var xhr new XMLHttpRequest() xhr.open( post , http://localhost:3210/api/del ) xhr.setRequestHeader( content-type , application/x-www-form-urlencoded ) xhr.send( _id ${id} ) xhr.onload function () { console.log(xhr.responseText) // 关闭弹框,并且将表格进行更新 layer.msg( 删除成功 , { icon: 1, time: 1000 // 重新刷新一波表格 var tb document.querySelector( .tb ) tb.innerHTML getFoodData() // getFoodData是分页查找的函数 // 获取数据 var nowPage 1 //当前第几页 var allPage 1 //总页数 var pageSize 3 //每页几条 var condition all //all:表示查询所有,kw:表示关键字查询,type:表示分类查询 function getFoodData() { // 根据不同的状态调用不同的接口 // 用switch语句做判断,判断这个函数到底发请求要发普通的分页查询请求,还是发起模糊搜索的请求。 switch (condition) { case all : var xhr new XMLHttpRequest() xhr.open( post , http://localhost:3210/api/fy ) xhr.setRequestHeader( content-type , application/x-www-form-urlencoded ) xhr.send( page ${nowPage} pageSize ${pageSize} ) xhr.onload function () { console.log(JSON.parse(xhr.responseText)) var t JSON.parse(xhr.responseText) allPage t.allPage console.log(allPage); var zts document.querySelector( .zts ) var apg document.querySelector( .apg ) zts.innerHTML t.allCount apg.innerHTML ${nowPage}/${t.allPage} if (t.err 0) { var tb document.querySelector( .tb ) tb.innerHTML t.result.forEach(function (item, index) { var tb document.querySelector( .tb ) tb.innerHTML tr class text-c td input type checkbox value name /td td ${item._id} /td td class text-l u style cursor:pointer class text-primary onClick article_edit( 查看 , article-zhang.html , 10001 ) title 查看 ${item.name} /u /td td ${item.foodType} /td td ${item.price} /td td ${item.desc} /td td img src ${item.img} alt style width:50px;height:50px /td td class f-14 td-manage a style text-decoration:none class ml-5 onClick update_pop( ${item._id} ) href javascript:; title 编辑 i class Hui-iconfont #xe6df; /i a style text-decoration:none class ml-5 onClick food_del(this, ${item._id} ) href javascript:; title 删除 i class Hui-iconfont #xe6e2; /i /a /td /tr break case kw : console.log(1); var mohu document.querySelector( .mohu ) console.log(mohu.value, mohu); $.post( http://localhost:3210/api/mh , { kw: ${mohu.value} , page: ${nowPage} , pageSize: 3 }, function (res) { allPage res.list.allPage console.log( 响应结果→ , res); var tb document.querySelector( .tb ) tb.innerHTML res.list.FenYeResult.forEach(function (item, index) { var tb document.querySelector( .tb ) tb.innerHTML tr class text-c td input type checkbox value name /td td ${item._id} /td td class text-l u style cursor:pointer class text-primary onClick article_edit( 查看 , article-zhang.html , 10001 ) title 查看 ${item.name} /u /td td ${item.foodType} /td td ${item.price} /td td ${item.desc} /td td img src ${item.img} alt style width:50px;height:50px /td td class f-14 td-manage a style text-decoration:none class ml-5 onClick update_pop( ${item._id} ) href javascript:; title 编辑 i class Hui-iconfont #xe6df; /i a style text-decoration:none class ml-5 onClick food_del(this, ${item._id} ) href javascript:; title 删除 i class Hui-iconfont #xe6e2; /i /a /td /tr var zts document.querySelector( .zts ) var apg document.querySelector( .apg ) zts.innerHTML res.list.allCount apg.innerHTML ${nowPage}/${res.list.allPage} }, json ) break case type : break getFoodData() // 分页跳转 function jump(junpType) { switch (junpType) { case first : nowPage 1 //根据最新的页码数请求数据 刷新界面 getFoodData() break case last : nowPage allPage //根据最新的页码数请求数据 刷新界面 getFoodData() break case prev : if (nowPage 1) { nowPage-- //根据最新的页码数请求数据 刷新界面 getFoodData() break case next : if (nowPage allPage) { nowPage //根据最新的页码数请求数据 刷新界面 getFoodData() break case go : function t() { var goPage document.querySelector( #goPage ) console.log(goPage); console.log(goPage.value); if (goPage.value 0) { layer.msg( 不可以输入数字0作为页码哟 , { icon: 2, time: 1000 // 注意layer.msg( 不可以输入数字0作为页码哟 ,{icon:4,time:1000})表示弹框,2表示错误弹框,icon为弹框图标,time为弹框时间 alert( 不可以输入数字0作为页码哟 ) } else if ((goPage.value - 0) (allPage - 0)) { layer.msg( 您输入的页码超出范围 , { icon: 2, time: 1000 alert( 您输入的页码超出范围 ) } else { nowPage goPage.value - 0 getFoodData() break var sousuo document.querySelector( .sousuo ) sousuo.onclick function () { condition kw getFoodData() /script script // 修改页面 function update_pop(id) { console.log(id); localStorage.setItem( 本地存储的id ,id) var updateId1 localStorage.getItem( 本地存储的id ) console.log( 本地存储的id→ ,updateId1); var index layer.open({ type: 2, title: 呵呵哒 , content: food-update.html layer.full(index) /script /body /html ## food-update.html !--_meta 作为公共模版分离出去-- !DOCTYPE HTML html head meta charset utf-8 meta name renderer content webkit|ie-comp|ie-stand meta http-equiv X-UA-Compatible content IE edge,chrome 1 meta name viewport content width device-width,initial-scale 1,minimum-scale 1.0,maximum-scale 1.0,user-scalable no / meta http-equiv Cache-Control content no-siteapp / link rel Bookmark href favicon.ico link rel Shortcut Icon href favicon.ico / !--[if lt IE 9] script type text/javascript src lib/html5.js /script script type text/javascript src lib/respond.min.js /script ![endif]-- link rel stylesheet type text/css href static/h-ui/css/H-ui.min.css / link rel stylesheet type text/css href static/h-ui.admin/css/H-ui.admin.css / link rel stylesheet type text/css href lib/Hui-iconfont/1.0.8/iconfont.css / link rel stylesheet type text/css href static/h-ui.admin/skin/default/skin.css id skin / link rel stylesheet type text/css href static/h-ui.admin/css/style.css / !--[if IE 6] script type text/javascript src http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js /script script DD_belatedPNG.fix( * /script ![endif]-- !--/meta 作为公共模版分离出去-- title 新增文章 - 资讯管理 - H-ui.admin v3.0 /title meta name keywords content H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载 meta name description content H-ui.admin v3.0 是一款由国人开发的轻量级扁平化网站后台模板 完全免费开源的网站后台管理系统模版 适合中小型CMS后台系统。 /head body article class page-container div class form form-horizontal id form-article-add div class row cl label class form-label col-xs-4 col-sm-2 名称 /label div class formControls col-xs-8 col-sm-9 input type text class input-text value placeholder id name name /div /div div class row cl label class form-label col-xs-4 col-sm-2 span class c-red * /span 食品类别 /label div class formControls col-xs-8 col-sm-9 span class select-box select name class select id foodType option 热菜 /option option 凉菜 /option option 酒水 /option option 饮料 /option option 食堂菜 /option /select /span /div /div div class row cl label class form-label col-xs-4 col-sm-2 价格 /label div class formControls col-xs-8 col-sm-9 input type text class input-text value placeholder id price name /div /div div class row cl label class form-label col-xs-4 col-sm-2 描述 /label div class formControls col-xs-8 col-sm-9 input type text class input-text value placeholder id desc name /div /div div class row cl label class form-label col-xs-4 col-sm-2 缩略图 /label img src alt class suoluetu id img width 100px height 100px div class formControls col-xs-8 col-sm-9 div class uploader-thum-container div id fileList class uploader-list /div input type file id file button id btn-star οnclick upload() class btn btn-default btn-uploadstar radius ml-10 开始上传 /button /div /div /div div class row cl div class col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2 button onClick submit(); class btn btn-primary radius type submit i class Hui-iconfont #xe632; /i 提交 /button button onClick removeIframe(); class btn btn-default radius type button nbsp; nbsp;取消 nbsp; nbsp; /button /div /div /div /article